WebGL intereactive

var program = gl.createProgram();

var vShaderScript = document.getElementById('#vshader');
var shaderCode = shaderScript.textContent;
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(newShader, shaderCode);
gl.compileShader(newShader);
if (!gl.getShaderParameter(newShader, gl.COMPILE_STATUS)) {
	// something went wrong
}

var pShaderScript = document.getElementById('#pshader');
var shaderCode = shaderScript.textContent;
var pShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(newShader, shaderCode);
gl.compileShader(newShader);
if (!gl.getShaderParameter(newShader, gl.COMPILE_STATUS)) {
	// something went wrong
}

gl.attachShader(program, vShader);
gl.linkProgram(program);
gl.attachShader(program, pShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS) {
	// something went wrong
}  		

//now ready for gl.useProgram

pvCoords = gl.getAttribLocation(shaderProgram, "coordinates");
gl.enableVertexAttribArray(pvCoords);
pvTextureCoords = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(pvTextureCoords);
pvVertexNormal = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray(pvVertexNormal);

pvCamera = gl.getUniformLocation(shaderProgram, "uCameraMatrix");
pvPerspective = gl.getUniformLocation(shaderProgram, "uPerspectiveMatrix");
pvLight = gl.getUniformLocation(shaderProgram, "uSampler");
pvNormalMatrix = gl.getUniformLocation(shaderProgram, "uNormalMatrix");

//defines cube as 6 faces of four points each
var a3DCube = [ 
    //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
 ];

//create buffer
cubeVerticesBuffer = gl.createBuffer();

//tell WebGl to 'focus' on our new buffer for now
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);

//send our vertices to the GPU for later
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(a3DCube), gl.STATIC_DRAW);

//build faces from array of triangles, e.g.
//0, 1, 2 = points that make up half of first face
var cubeVertexIndices = [ 
0,  1,  2,      0,  2,  3,    //front face
4,  5,  6,      4,  6,  7,    //back face
8,  9,  10,     8,  10, 11,   //top face
12, 13, 14,     12, 14, 15,   //bottom face
16, 17, 18,     16, 18, 19,   //right face
20, 21, 22,     20, 22, 23    //left face
];

//send to GPU as with 3a
cubeVerticesIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer); 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);

//define squares that map texture to each face of the cube
var cubeTextureMap = [  
    //front face  
    0.0,  0.0,
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0,  
    //back face
    0.0,  0.0,  
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0,  
    //top face
    0.0,  0.0,  
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0,  
    //bottom face 
    0.0,  0.0,  
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0,  
    //right face
    0.0,  0.0,  
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0,  
    //left face 
    0.0,  0.0,  
    1.0,  0.0,  
    1.0,  1.0,  
    0.0,  1.0  
];

//send to GPU as before
cubeTextureMapBuffer = gl.createBuffer();  
gl.bindBuffer(gl.ARRAY_BUFFER, cubeTextureMapBuffer);  
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeTextureMap), gl.STATIC_DRAW);

var vertexNormals = [  
    //front face  
     0.0,  0.0,  1.0,  
     0.0,  0.0,  1.0,  
     0.0,  0.0,  1.0,  
     0.0,  0.0,  1.0,  
    //back face
     0.0,  0.0, -1.0,  
     0.0,  0.0, -1.0,  
     0.0,  0.0, -1.0,  
     0.0,  0.0, -1.0,  
    //top face
     0.0,  1.0,  0.0,  
     0.0,  1.0,  0.0,  
     0.0,  1.0,  0.0,  
     0.0,  1.0,  0.0,  
    //bottom face 
     0.0, -1.0,  0.0,  
     0.0, -1.0,  0.0,  
     0.0, -1.0,  0.0,  
     0.0, -1.0,  0.0,  
    //right face  
     1.0,  0.0,  0.0,  
     1.0,  0.0,  0.0,  
     1.0,  0.0,  0.0,  
     1.0,  0.0,  0.0,  
    //left face 
    -1.0,  0.0,  0.0,  
    -1.0,  0.0,  0.0,  
    -1.0,  0.0,  0.0,  
    -1.0,  0.0,  0.0  
];  

//send to GPU as before
cubeVerticesNormalBuffer = gl.createBuffer();  
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);

//clear to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//hide further things behind near things 
gl.enable(gl.DEPTH_TEST); 
gl.depthFunc(gl.LEQUAL);

//clear buffers
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);

//start with identity matrix (leave as this for orthographic projection)    
pmatrix = mat4.identity();

//set perspective - generate a frustrum
mat4.perspective(props.angle, 4/3, props.near, props.far, pmatrix);

//send matrix to pespective matrix in vertex shader program
gl.uniformMatrix4fv(pvPerspective, false, pmatrix);

//start with identity matrix
mvmatrix = mat4.identity();

//move in x, y, z
var newpos = [0, 0, 0];
mat4.translate(mvmatrix, newpos);

//rotate in x, y, z
rxrad = 0 * Math.PI / 180
ryrad = 0 * Math.PI / 180
rzrad = 0 * Math.PI / 180
mat4.rotate(mvmatrix, rxrad, [1, 0, 0]);
mat4.rotate(mvmatrix, ryrad, [0, 1, 0]);
mat4.rotate(mvmatrix, rzrad, [0, 0, 1]);

mstore = mat4.create();
mat4.set(mvmatrix,mstore);

//send normal matrix to vertex shader
normalMatrix = mat4.identity();    
mat4.inverse(normalMatrix);
mat4.transpose(normalMatrix);
gl.uniformMatrix4fv(pvNormalMatrix, false, normalMatrix);  

//i. retrieve matrix (ie 'reset pen')
mat4.set(mstore,mvmatrix);

//ii. translate/rotate to 'move pen' to object position (ie 'move object')
mat4.translate(mvmatrix, [ 0,0,0]); //do transformation for this object
rxrad = 0 * Math.PI / 180
ryrad = 0 * Math.PI / 180
rzrad = 0 * Math.PI / 180
mat4.rotate(mvmatrix, rxrad, [1, 0, 0]); 
mat4.rotate(mvmatrix, ryrad, [0, 1, 0]); 
mat4.rotate(mvmatrix, rzrad, [0, 0, 1]); 
//iii. copy matrix to move matrix variable in vertex script
gl.uniformMatrix4fv(pvCamera, false, mvmatrix);

//iv. prep cube indices
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
gl.vertexAttribPointer(pvCoords, 3, gl.FLOAT, false, 0, 0);

//vi. prep texture
gl.bindBuffer(gl.ARRAY_BUFFER, cubeTextureMapBuffer);
gl.vertexAttribPointer(pvTextureCoords, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, cubeTexture);  

//vii. prep light
gl.uniform1i(pvLight, 0);  
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
gl.vertexAttribPointer(pvVertexNormal, 3, gl.FLOAT, false, 0, 0);

//viii. draw
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

WebGL interactive reminder by Mark Green

Inspired by the work of Bret Victor. Use the menu to navigate. Click the green values and drag left/right to change values.