Cube Code

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL Demo</title>
<style>
canvas {
    // initially our canvas will be black
    border: 2px solid black;
    background-color: black;
    width: 640px;
    height: 320px;
}
</style>
</head>
<body>
<canvas id="glcanvas" ></canvas>
<!-- gl-matrix.js is an auxiliary javascript program with functions for the
     common computer graphics matrix transforms. It can be downloaded
     either at:
     http://http://www.cs.sjsu.edu/faculty/pollett/185c.1.19s/gl-matrix.js
     or from the Mozilla sample site.
-->
<script src="./gl-matrix.js"></script>
<script>
var cubeRotation = 0.0;
//run our program
main();
/*
   Here is the code to make a rotating cube
 */
function main()
{
    const canvas = document.querySelector('#glcanvas');
    const gl = canvas.getContext('webgl') ||
        canvas.getContext('experimental-webgl');
    // If we don't have a GL context, give up now
    if (!gl) {
        alert('Unable to initialize WebGL. Your browser or machine '+
            'may not support it.');
        return;
    }
    // Vertex shader program
    const vsSource = `
        attribute vec4 aVertexPosition;
        attribute vec4 aVertexColor;
        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;
        varying lowp vec4 vColor;
        void main(void) {
            gl_Position =
                uProjectionMatrix * uModelViewMatrix * aVertexPosition;
            vColor = aVertexColor;
        }
    `;
    // Fragment shader program
    const fsSource = `
        varying lowp vec4 vColor;
        void main(void) {
            gl_FragColor = vColor;
        }
    `;
    /* Initialize a shader program; this is where all the lighting
        for the vertices and so forth is established. */
    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
    /* Collect all the info needed to use the shader program.
        Look up which attributes our shader program is using
        for aVertexPosition, aVertexColor and also
        look up uniform locations.
    */
    const programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram,
                'aVertexPosition'),
            vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
        },
        uniformLocations: {
            projectionMatrix:
                gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
            modelViewMatrix:
                gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
        },
    };
    /* Here's where we call the routine that builds all the
      objects we'll be drawing. */
    const buffers = initBuffers(gl);
    var then = 0;
    // Draw the scene repeatedly
    function render(now) {
        now *= 0.001;  // convert to seconds
        const deltaTime = now - then;
        then = now;
        drawScene(gl, programInfo, buffers, deltaTime);
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
}
/*
  initBuffers
  Initialize the buffers we'll need. For this demo, we just
  have one object -- a simple three-dimensional cube.
*/
function initBuffers(gl)
{
    // Create a buffer for the cube's vertex positions.
    const positionBuffer = gl.createBuffer();
    // Select the positionBuffer as the one to apply buffer
    // operations to from here out.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    // Now create an array of positions for the cube.
    const positions = [
        // 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,
    ];
    /* Now pass the list of positions into WebGL to build the
       shape. We do this by creating a Float32Array from the
       JavaScript array, then use it to fill the current buffer.
    */
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    /* Now set up the colors for the faces. We'll use solid colors
       for each face.
    */
    const faceColors = [
        [1.0,  1.0,  1.0,  1.0],    // Front face: white
        [1.0,  0.0,  0.0,  1.0],    // Back face: red
        [0.0,  1.0,  0.0,  1.0],    // Top face: green
        [0.0,  0.0,  1.0,  1.0],    // Bottom face: blue
        [1.0,  1.0,  0.0,  1.0],    // Right face: yellow
        [1.0,  0.0,  1.0,  1.0],    // Left face: purple
    ];
    // Convert the array of colors into a table for all the vertices.
    var colors = [];
    for (var j = 0; j < faceColors.length; ++j) {
        const c = faceColors[j];
        // Repeat each color four times for the four vertices of the face
        colors = colors.concat(c, c, c, c);
    }
    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    /* Build the element array buffer; this specifies the indices
       into the vertex arrays for each face's vertices.
     */
    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    /* This array defines each face as two triangles, using the
       indices into the vertex array to specify each triangle's
       position.
     */
    const indices = [
        0,  1,  2,      0,  2,  3,    // front
        4,  5,  6,      4,  6,  7,    // back
        8,  9,  10,     8,  10, 11,   // top
        12, 13, 14,     12, 14, 15,   // bottom
        16, 17, 18,     16, 18, 19,   // right
        20, 21, 22,     20, 22, 23,   // left
    ];
    // Now send the element array to GL
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
        new Uint16Array(indices), gl.STATIC_DRAW);
    return {
        position: positionBuffer,
        color: colorBuffer,
        indices: indexBuffer,
    };
}
/*
  Draw the scene.
 */
function drawScene(gl, programInfo, buffers, deltaTime)
{
    gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
    gl.clearDepth(1.0);                 // Clear everything
    gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
    // Clear the canvas before we start drawing on it.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    /* Create a perspective matrix, a special matrix that is
       used to simulate the distortion of perspective in a camera.
       Our field of view is 45 degrees, with a width/height
       ratio that matches the display size of the canvas
       and we only want to see objects between 0.1 units
       and 100 units away from the camera.
     */
    const fieldOfView = 45 * Math.PI / 180;   // in radians
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100.0;
    const projectionMatrix = mat4.create();
    /* note: glmatrix.js always has the first argument
       as the destination to receive the result. */
    mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear,
      zFar);
    /* Set the drawing position to the "identity" point, which is
       the center of the scene.
     */
    const modelViewMatrix = mat4.create();
    /* Now move the drawing position a bit to where we want to
       start drawing the square. */
    mat4.translate(modelViewMatrix,// destination matrix
        modelViewMatrix,     // matrix to translate
        [-0.0, 0.0, -6.0]);  // amount to translate
    mat4.rotate(modelViewMatrix,  // destination matrix
        modelViewMatrix,  // matrix to rotate
        cubeRotation,     // amount to rotate in radians
        [0, 0, 1]);       // axis to rotate around (Z)
    mat4.rotate(modelViewMatrix,  // destination matrix
        modelViewMatrix,  // matrix to rotate
        cubeRotation * .7,// amount to rotate in radians
        [0, 1, 0]);       // axis to rotate around (X)
    /* Tell WebGL how to pull out the positions from the position
       buffer into the vertexPosition attribute
     */
    {
        const numComponents = 3;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,
            numComponents, type, normalize, stride, offset);
        gl.enableVertexAttribArray(
            programInfo.attribLocations.vertexPosition);
    }
    // Tell WebGL how to pull out the colors from the color buffer
    // into the vertexColor attribute.
    {
        const numComponents = 4;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
        gl.vertexAttribPointer(programInfo.attribLocations.vertexColor,
            numComponents, type, normalize, stride, offset);
        gl.enableVertexAttribArray(
            programInfo.attribLocations.vertexColor);
    }
    // Tell WebGL which indices to use to index the vertices
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
    // Tell WebGL to use our program when drawing
    gl.useProgram(programInfo.program);
    // Set the shader uniforms
    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix,
        false, projectionMatrix);
    gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
        false, modelViewMatrix);
    {
        const vertexCount = 36;
        const type = gl.UNSIGNED_SHORT;
        const offset = 0;
        gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
    }
    // Update the rotation for the next draw
    cubeRotation += deltaTime;
}

/*
  Initialize a shader program, so WebGL knows how to draw our data
*/
function initShaderProgram(gl, vsSource, fsSource)
{
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    // Create the shader program
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    // If creating the shader program failed, alert
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Unable to initialize the shader program: ' +
            gl.getProgramInfoLog(shaderProgram));
        return null;
    }
    return shaderProgram;
}
/*
  creates a shader of the given type, uploads the source and
  compiles it.
*/
function loadShader(gl, type, source)
{
    const shader = gl.createShader(type);
    // Send the source to the shader object
    gl.shaderSource(shader, source);
    // Compile the shader program
    gl.compileShader(shader);
    // See if it compiled successfully
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('An error occurred compiling the shaders: ' +
            gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}
</script>
</body>
</html>

Cube Code -- Just the HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL Demo</title>
<style>
canvas {
    // initially our canvas will be black
    border: 2px solid black;
    background-color: black;
    width: 640px;
    height: 320px;
}
</style>
</head>
<body>
<canvas id="glcanvas" ></canvas>
<!-- Two Javascript blocks we omit-->
</body>
</html>

As can be seen above the HTML portion of the page mainly consists of a canvas tag into which we will draw our rotating cube using Javascript.
Initially, this canvas tag is black because, it is styled to have a black background.

Cube Code -- gl-matrix.js

The first Javascript on the page is a reference to an external Javascript:
```
<script src="./gl-matrix.js"></script>
```
If you view source on our sample, you can click on the link in the source to see what this file contains.
We use this Javascript because it has a mat4 factory object with methods like:
- mat4.create() to make a 4x4 identity matrix object,
- mat4.translate(dst_matrix, src_matrix, some_3_elt_amt_array) to apply a translation,
- mat4.rotate(dst_matrix, src_matrix, radian_angle, some_3_elt_axis_array) to apply a rotation,
- mat4.perspective(perspect_matrix, field_of_view, aspect, z_near, z_far); to make perspect_matrix a perspective projection with horizontally viewable angle of field_of_view, and horizontal/vertical ratio aspect.

Cube Code -- main function

The start of the second Javascript block calls the main function:
```
main();
```

This first gets the canvas tag on the current HTML page and tries to create a WebGL context to draw on:

const canvas = document.querySelector('#glcanvas');
const gl = canvas.getContext('webgl') ||
    canvas.getContext('experimental-webgl');
// If we don't have a GL context, give up now
if (!gl) {
    alert('Unable to initialize WebGL. Your browser or machine '+
        'may not support it.');
    return;
}

The main method uses some Javascript features we haven't seen before:
- Using backtick, `, to define a multi-line string (it could have used variable interpolation but doesn't in our code sample)
- The keyword const to define a variable that is not allowed to change.

Cube Code -- main function cont'd

Besides declaring some objects, the main method does the following:
1. Initializes the shader programs which will run on the GPU rather than CPU:
```
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
```
2. Creates a programInfo to encapsulate a reference to this object together with references to the attributes (things that will change per points processed in the shaders), and uniform variables (things that will stay the same as the points are processed in the shader):
```
const programInfo = {
    program: shaderProgram,
    attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgram,
            'aVertexPosition'),
        vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
    },
    uniformLocations: {
        projectionMatrix:
            gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
        modelViewMatrix:
            gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
    },
};
```
3. Initializes the buffers for the vertices and colors of vertices that will be passed from CPU-land to GPU land to draw the scene.
```
const buffers = initBuffers(gl);
```
4. Sets up a render() scene callback function (it is completely legal in Javascript to define a function within another function definition), and schedules it to be used to draw the scene:
```
var then = 0;
// Draw the scene repeatedly
function render(now) {
    now *= 0.001;  // convert to seconds
    const deltaTime = now - then;
    then = now;
    drawScene(gl, programInfo, buffers, deltaTime);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);
```
  Here requestAnimationFrame is a method of the browser's window object that is used to tell the browser that you want to perform an animation and request that the browser call a specified function to update an animation before the next repaint.

Cube Code -- Shaders

Two strings are passed to initShaderProgram, vsSource and fsSource.

These are define as:

const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec4 aVertexColor;
    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;
    varying lowp vec4 vColor;
    void main(void) {
        gl_Position =
            uProjectionMatrix * uModelViewMatrix * aVertexPosition;
        vColor = aVertexColor;
    }
`;
// Fragment shader program
const fsSource = `
    varying lowp vec4 vColor;
    void main(void) {
        gl_FragColor = vColor;
    }
`;

These are roughly C programs which are going to execute on the GPU.

Categories of Shader Variable, Types of Shaders

You can think of the keyword attribute as saying that the value is going to come from CPU land via one of our attribute buffers. Attributes are typically cycle through points and their properties in the scene.
GPUs contain many processing units which run in parallel each of which will receive different values from the attribute buffers
The uniform keyword is for a variable from CPU land that won't change based on the processing unit the code is running on.
If we are processing triples of points at time (say triangles), a varying variable store a location of a particular interior point (not vertex) property for a point within th at triangle we are trying to draw.
The two main kinds of shaders are:
1. Vertex shaders used to specify the location that a particular output vertex should be at: gl_Position.
2. Fragment shaders used to specify within a triangle we trying to draw, what color the pixel should be: gl_FragColor

WebGL Used to Make a Shader Program Object

We make a single program object for the GPU by compiling and linking the shader code using WebGL.
WebGL is handling all the niceties of getting it to work for the GPU we have, or if we don't have one, setting up a program that can be software simulated.

/*
  Initialize a shader program, so WebGL knows how to draw our data
*/
function initShaderProgram(gl, vsSource, fsSource)
{
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    // Create the shader program
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    // If creating the shader program failed, alert
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Unable to initialize the shader program: ' +
            gl.getProgramInfoLog(shaderProgram));
        return null;
    }
    return shaderProgram;
}
/*
  creates a shader of the given type, uploads the source and
  compiles it.
*/
function loadShader(gl, type, source)
{
    const shader = gl.createShader(type);
    // Send the source to the shader object
    gl.shaderSource(shader, source);
    // Compile the shader program
    gl.compileShader(shader);
    // See if it compiled successfully
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('An error occurred compiling the shaders: ' +
            gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

Making Attribute Buffers

The command to create an attribute buffer is gl.createBuffer.
You can think of the gl object as a little like a state machine.
To set the state of the buffer to apply operations to we call:
gl.bindBuffer(gl.ARRAY_BUFFER, name_of_buffer)
initBuffers(gl) create threes buffers:
1. positions -- a list of vertices for our cube in model coordinates (each vertex is a triple).
2. faceColors -- a list of rgba colors for the six cube faces.
3. indices -- indices into the points in positions for each of the triangles that make up our cube (each face has two triangles).

/*
  initBuffers
  Initialize the buffers we'll need. For this demo, we just
  have one object -- a simple three-dimensional cube.
*/
function initBuffers(gl)
{
    // Create a buffer for the cube's vertex positions.
    const positionBuffer = gl.createBuffer();
    // Select the positionBuffer as the one to apply buffer
    // operations to from here out.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    // Now create an array of positions for the cube.
    const positions = [
        // 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,
    ];
    /* Now pass the list of positions into WebGL to build the
       shape. We do this by creating a Float32Array from the
       JavaScript array, then use it to fill the current buffer.
    */
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    /* Now set up the colors for the faces. We'll use solid colors
       for each face.
    */
    const faceColors = [
        [1.0,  1.0,  1.0,  1.0],    // Front face: white
        [1.0,  0.0,  0.0,  1.0],    // Back face: red
        [0.0,  1.0,  0.0,  1.0],    // Top face: green
        [0.0,  0.0,  1.0,  1.0],    // Bottom face: blue
        [1.0,  1.0,  0.0,  1.0],    // Right face: yellow
        [1.0,  0.0,  1.0,  1.0],    // Left face: purple
    ];
    // Convert the array of colors into a table for all the vertices.
    var colors = [];
    for (var j = 0; j < faceColors.length; ++j) {
        const c = faceColors[j];
        // Repeat each color four times for the four vertices of the face
        colors = colors.concat(c, c, c, c);
    }
    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    /* Build the element array buffer; this specifies the indices
       into the vertex arrays for each face's vertices.
     */
    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    /* This array defines each face as two triangles, using the
       indices into the vertex array to specify each triangle's
       position.
     */
    const indices = [
        0,  1,  2,      0,  2,  3,    // front
        4,  5,  6,      4,  6,  7,    // back
        8,  9,  10,     8,  10, 11,   // top
        12, 13, 14,     12, 14, 15,   // bottom
        16, 17, 18,     16, 18, 19,   // right
        20, 21, 22,     20, 22, 23,   // left
    ];
    // Now send the element array to GL
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
        new Uint16Array(indices), gl.STATIC_DRAW);
    return {
        position: positionBuffer,
        color: colorBuffer,
        indices: indexBuffer,
    };
}

Drawing the Scene

To draw the scene, we:
1. Set up global properties of the gl object like default background color, how we want to detect if an object is in front of another, etc.
2. Set up in CPU land the matrices we want to GPU land, these are the modelViewMatrix which is a product of the T_{eye} and T_{rb}, and the perspective transformation.
3. We then use {} to define temporary scopes in which we call gl.bindBuffer, gl.vertexAttribPointer, gl.enableVertexAttribArray to say which buffers we are going to use for aVertexPosition, and aVertexColor in our shaders.
4. We then call gl.bindBuffer with buffers.indices, before calling gl.useProgram to say how to go through the vertex buffers to make triangles.
5. We next call gl.uniformMatrix4fv twice once for our modelViewMatrix once for the projectionMatrix to bind these to uniform variables of the shader in GPU land.
6. Lastly, we call:
```
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
```
  to actually draw the triangles.
7. The current rotation amount is then updated by the change in time.

/*
  Draw the scene.
 */
function drawScene(gl, programInfo, buffers, deltaTime)
{
    gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
    gl.clearDepth(1.0);                 // Clear everything
    gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
    // Clear the canvas before we start drawing on it.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    /* Create a perspective matrix, a special matrix that is
       used to simulate the distortion of perspective in a camera.
       Our field of view is 45 degrees, with a width/height
       ratio that matches the display size of the canvas
       and we only want to see objects between 0.1 units
       and 100 units away from the camera.
     */
    const fieldOfView = 45 * Math.PI / 180;   // in radians
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100.0;
    const projectionMatrix = mat4.create();
    /* note: glmatrix.js always has the first argument
       as the destination to receive the result. */
    mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear,
      zFar);
    /* Set the drawing position to the "identity" point, which is
       the center of the scene.
     */
    const modelViewMatrix = mat4.create();
    /* Now move the drawing position a bit to where we want to
       start drawing the square. */
    mat4.translate(modelViewMatrix,// destination matrix
        modelViewMatrix,     // matrix to translate
        [-0.0, 0.0, -6.0]);  // amount to translate
    mat4.rotate(modelViewMatrix,  // destination matrix
        modelViewMatrix,  // matrix to rotate
        cubeRotation,     // amount to rotate in radians
        [0, 0, 1]);       // axis to rotate around (Z)
    mat4.rotate(modelViewMatrix,  // destination matrix
        modelViewMatrix,  // matrix to rotate
        cubeRotation * .7,// amount to rotate in radians
        [0, 1, 0]);       // axis to rotate around (X)
    /* Tell WebGL how to pull out the positions from the position
       buffer into the vertexPosition attribute
     */
    {
        const numComponents = 3;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,
            numComponents, type, normalize, stride, offset);
        gl.enableVertexAttribArray(
            programInfo.attribLocations.vertexPosition);
    }
    /* Tell WebGL how to pull out the colors from the color buffer
      into the vertexColor attribute.
     */
    {
        const numComponents = 4;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
        gl.vertexAttribPointer(programInfo.attribLocations.vertexColor,
            numComponents, type, normalize, stride, offset);
        gl.enableVertexAttribArray(
            programInfo.attribLocations.vertexColor);
    }
    // Tell WebGL which indices to use to index the vertices
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
    // Tell WebGL to use our program when drawing
    gl.useProgram(programInfo.program);
    // Set the shader uniforms
    gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix,
        false, projectionMatrix);
    gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
        false, modelViewMatrix);
    {
        const vertexCount = 36;
        const type = gl.UNSIGNED_SHORT;
        const offset = 0;
        gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
    }
    // Update the rotation for the next draw
    cubeRotation += deltaTime;
}

WebGL

Outline

Introduction

WebGL Cube Demo

Cube Code

Cube Code -- Just the HTML

Cube Code -- gl-matrix.js

Cube Code -- main function

Cube Code -- main function cont'd

Cube Code -- Shaders

Categories of Shader Variable, Types of Shaders

WebGL Used to Make a Shader Program Object

Making Attribute Buffers

Drawing the Scene

In-Class Exercise

Viewport