1 files changed, 149 insertions, 0 deletions
diff --git a/WebCore/manual-tests/webgl/SpinningBox.html b/WebCore/manual-tests/webgl/SpinningBox.html
new file mode 100644
index 0000000..203d7bd
--- /dev/null
+++ b/WebCore/manual-tests/webgl/SpinningBox.html
@@ -0,0 +1,149 @@
+<!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 CanvasUnsignedByteArray(
+                [  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>