summaryrefslogtreecommitdiffstats
path: root/WebCore/manual-tests/webgl/SpinningBox.html
diff options
context:
space:
mode:
Diffstat (limited to 'WebCore/manual-tests/webgl/SpinningBox.html')
-rw-r--r--WebCore/manual-tests/webgl/SpinningBox.html149
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>