<!DOCTYPE html>
<html>
<head>
<title>Spinning Box</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>
