HTML5 Canvas [215]
} else {
return null;
}
webGLContext.shaderSource(shader, str);
webGLContext.compileShader(shader);
if (!webGLContext.getShaderParameter(shader, webGLContext.COMPILE_STATUS)) {
alert(webGLContext.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(webGLContext, "shader-fs");
var vertexShader = getShader(webGLContext, "shader-vs");
shaderProgram = webGLContext.createProgram();
webGLContext.attachShader(shaderProgram, vertexShader);
webGLContext.attachShader(shaderProgram, fragmentShader);
webGLContext.linkProgram(shaderProgram);
if (!webGLContext.getProgramParameter(shaderProgram, webGLContext.LINK_STATUS)) {
alert("Could not initialize shaders");
}
webGLContext.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = webGLContext.getAttribLocation
(shaderProgram, "aVertexPosition");
webGLContext.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = webGLContext.getAttribLocation
(shaderProgram, "aVertexColor");
webGLContext.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform = webGLContext.getUniformLocation
(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = webGLContext.getUniformLocation
(shaderProgram, "uMVMatrix");
}
var mvMatrix;
var mvMatrixStack = [];
function mvPushMatrix(matrix) {
if (matrix) {
mvMatrixStack.push(matrix.dup());
mvMatrix = matrix.dup();
} else {
mvMatrixStack.push(mvMatrix.dup());
}
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
} mvMatrix = mvMatrixStack.pop();
return mvMatrix;
}
function loadIdentity() {
mvMatrix = Matrix.I(4);
}
function multMatrix(matrix) {
mvMatrix = mvMatrix.x(matrix);
}
function mvTranslate(vector) {
var matrix = Matrix.Translation($V([vector[0], vector[1], vector[2]])).ensure4x4();
multMatrix(matrix);
}
function mvRotate(angle, vector) {
var radians = angle * Math.PI / 180.0;
var matrix = Matrix.Rotation(radians, $V([vector[0],
vector[1], vector[2]])).ensure4x4();
multMatrix(matrix);
}
var pMatrix;
function perspective(fovy, aspect, znear, zfar) {
pMatrix = makePerspective(fovy, aspect, znear, zfar);
}
function setMatrixUniforms() {
webGLContext.uniformMatrix4fv(shaderProgram.pMatrixUniform, false,
new Float32Array(pMatrix.flatten()));
webGLContext.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false,
new Float32Array(mvMatrix.flatten()));
}
var cubeVertexPositionBuffer;
var cubeVertexColorBuffer;
var cubeVertexIndexBuffer;
function initBuffers() {
cubeVertexPositionBuffer = webGLContext.createBuffer();
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexPositionBuffer);
vertices = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.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, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];
webGLContext.bufferData(webGLContext.ARRAY_BUFFER, new Float32Array(vertices),
webGLContext.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 3;
cubeVertexPositionBuffer.numItems = 24;
cubeVertexColorBuffer = webGLContext.createBuffer();
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFER, cubeVertexColorBuffer);
var colors = [
[1.0, 1.0, 1.0, 1.0], // Front face
[0.9, 0.0, 0.0, 1.0], // Back face
[0.6, 0.6, 0.6, 1.0], // Top face
[0.6, 0.0, 0.0, 1.0], // Bottom face
[0.3 ,0.0, 0.0, 1.0], // Right face
[0.3, 0.3, 0.3, 1.0], // Left face
];
var unpackedColors = []
for (var i in colors) {
var color = colors[i];
for (var j=0; j < 4; j++) {
unpackedColors = unpackedColors.concat(color);
}
}
webGLContext.bufferData(webGLContext.ARRAY_BUFFER,