| <!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> |
