diff options
Diffstat (limited to 'WebCore/manual-tests/webgl/SpinningBox.html')
-rw-r--r-- | WebCore/manual-tests/webgl/SpinningBox.html | 149 |
1 files changed, 0 insertions, 149 deletions
diff --git a/WebCore/manual-tests/webgl/SpinningBox.html b/WebCore/manual-tests/webgl/SpinningBox.html deleted file mode 100644 index e68711c..0000000 --- a/WebCore/manual-tests/webgl/SpinningBox.html +++ /dev/null @@ -1,149 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>Canvas3d example</title> - <script src="resources/CanvasMatrix.js"> </script> - <script src="resources/utils3d.js"> </script> - <script id="vshader" type="x-shader/x-vertex"> - uniform mat4 pMatrix; - uniform mat4 mvMatrix; - uniform vec3 lightDir; - - attribute vec3 vNormal; - attribute vec4 vColor; - attribute vec4 vPosition; - - varying float v_Dot; - - void main() - { - gl_FrontColor = vColor; - vec4 transNormal = mvMatrix * vec4(vNormal,1); - v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); - gl_Position = pMatrix * mvMatrix * vPosition; - } - </script> - - <script id="fshader" type="x-shader/x-fragment"> - varying float v_Dot; - - void main() - { - gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a); - } - </script> - - <script> - function init() - { - var gl = initWebGL("example", "vshader", "fshader", - [ "vNormal", "vColor", "vPosition"], - [ 0, 0, 0, 1 ], 10000); - - gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1); - - gl.box = makeBox(gl); - - // color array - var colors = new WebGLUnsignedByteArray( - [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front - 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right - 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top - 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left - 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom - 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back - ); - - gl.box.colorObject = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject); - gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); - - return gl; - } - - width = -1; - height = -1; - - function reshape(gl) - { - var canvas = document.getElementById('example'); - if (canvas.clientWidth == width && canvas.clientHeight == height) - return; - - width = canvas.clientWidth; - height = canvas.clientHeight; - - gl.viewport(0, 0, width, height); - var pMatrix = new CanvasMatrix4(); - pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0); - pMatrix.perspective(30, width/height, 1, 10000); - gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.getAsCanvasFloatArray()); - } - - function drawPicture(gl) - { - reshape(gl); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - - var mvMatrix = new CanvasMatrix4(); - mvMatrix.rotate(currentAngle, 0,1,0); - mvMatrix.rotate(20, 1,0,0); - gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.getAsCanvasFloatArray()); - - gl.enableVertexAttribArray(0); - gl.enableVertexAttribArray(1); - gl.enableVertexAttribArray(2); - - gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject); - gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject); - gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject); - gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject); - gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0); - - gl.flush(); - - framerate.snapshot(); - - currentAngle += incAngle; - if (currentAngle > 360) - currentAngle -= 360; - } - - function start() - { - var gl = init(); - currentAngle = 0; - incAngle = 0.5; - framerate = new Framerate("framerate"); - setInterval(function() { drawPicture(gl) }, 10); - } - </script> - <style type="text/css"> - canvas { - border: 2px solid black; - width:90%; - height:90%; - } - .text { - position:absolute; - top:100px; - left:20px; - font-size:2em; - color: blue; - } - </style> - </head> - <body onload="start()"> - <canvas id="example"> - There is supposed to be an example drawing here, but it's not important. - </canvas> - <div class="text">This is some text under the canvas</div> - <div id="framerate"></div> - </body> -</html> |