// RotatingTriangle.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
*attribute vec4 a_Position;\n* +
*attribute vec4 a_Color;\n* +
*varying vec4 v_Color;\n* +
*uniform mat4 u_ModelMatrix;\n* +
*void main() {\n* +
* gl_Position = u_ModelMatrix * a_Position;\n* +
* v_Color = a_Color;\n* +
*}\n*;
// Fragment shader program
var FSHADER_SOURCE =
*#ifdef GL_ES\n* +
*precision mediump float;\n* +
*#endif GL_ES\n* +
*varying vec4 v_Color;\n* +
*void main() {\n* +
* gl_FragColor = v_Color;\n* +
*}\n*;
// Rotation angle (degrees/second)
var ANGLE_STEP = 20.0;
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById(*webgl*);
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log(*Failed to get the rendering context for WebGL*);
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log(*Failed to intialize shaders.*);
return;
}
//Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl);
if (n < 0) {
console.log(*Failed to set the positions of the vertices*);
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Get storage location of u_ModelMatrix
var u_ModelMatrix = gl.getUniformLocation(gl.program, *u_ModelMatrix*);
if (!u_ModelMatrix) {
console.log(*Failed to get the storage location of u_ModelMatrix*);
return;
}
// Current rotation angle
var currentAngle = 0.0;
// Model matrix
var modelMatrix = new Matrix4();
// Start drawing
var tick = function() {
currentAngle = animate(currentAngle); // Update the rotation angle
draw(gl, currentAngle, modelMatrix, u_ModelMatrix, n); // Draw the triangle
requestAnimationFrame(tick, canvas); // Request that the browser calls tick
};
tick();
}
function initVertexBuffers(gl) {
var vertices = new Float32Array ([
//back face
0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
1.0, 1.0, 0.0, 1.0, 1.0, 0.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
//bottom face
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
//front face
/*1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
//right face
1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
1.0, 1.0, 0.0, 1.0, 1.0, 0.0,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
1.0, 1.0, 0.0, 1.0, 1.0, 0.0,
//top face
1.0, 1.0, 0.0, 1.0, 1.0, 0.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
1.0, 1.0, 1.0, 1.0, 1.0, 1.0,
1.0, 1.0, 0.0, 1.0, 1.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
//left face
0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,*/
]);
n = 12;
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log(*Failed to create the buffer object*);
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var FSIZE = vertices.BYTES_PER_ELEMENT;
// Assign the buffer object to a_Position variable
var a_Position = gl.getAttribLocation(gl.program, *a_Position*);
if(a_Position < 0) {
console.log(*Failed to get the storage location of a_Position*);
return -1;
}
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE*4, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, *a_Color*);
if(a_Color < 0) {
console.log(*Failed to get the storage location of a_Color*);
return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
gl.enableVertexAttribArray(a_Color);
// Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return n;
}
function draw(gl, currentAngle, modelMatrix, u_ModelMatrix, n) {
// Set the rotation matrix
modelMatrix.setRotate(currentAngle, 1, 1, 0); // Rotation angle, rotation axis (0, 0, 1)
modelMatrix.scale(0.5,0.5,0.5);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Pass the rotation matrix to the vertex shader
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}
// Last time that this function was called
var g_last = Date.now();
function animate(angle) {
// Calculate the elapsed time
var now = Date.now();
var elapsed = now - g_last;
g_last = now;
// Update the current rotation angle (adjusted by the elapsed time)
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return newAngle %= 360;
}