ch10/3DoverWeb

This is an example from the book "WebGL Programming Guide" by Kouichi Matsuda and Rodger Lea

by Ivan Enzhaev

HTML

<canvas id="webgl" width="300" height="300" style="position: absolute">
        Please use a browser that supports "canvas"
    </canvas>

    <div>
        <h1>19</h1>

        <h2>Great Designs Come from Great Designers --- Not from Great Design Processes</h2>

        <p>
            The basic premise underlying the SEI's [Software
            Engineering Institute] work on software process maturity
            is that the quality of a software product is largely
            determined by the quality of the software development
            and maintenance processes used to build it.
        </p>

        Mark Paulk [1995], "The evolution of the SEI's capability maturity model for software"

        <p>
            ...[W]hile some may see them as the crazy ones, we see
            genius, because the ones who are crazy enough to think
            that they can change the world, are the ones who do.
        </p>

        Steve Jobs, Apple commercial (1997)
    </div>

    <script type="x-shader/x-vertex" id="VertexShader">
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        uniform mat4 u_MvpMatrix;
        uniform bool u_Clicked;     // Mouse is pressed
        varying vec4 v_Color;

        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;

            if (u_Clicked) // Draw in red if mouse is pressed
            {
                v_Color = vec4(1.0, 0.0, 0.0, 1.0);
            }
            else
            {
                v_Color = a_Color;
            }
        }
    </script>

    <script type="x-shader/x-fragment" id="FragmentShader">
        precision mediump float;

        varying vec4 v_Color;

        void main()
        {
            gl_FragColor = v_Color;
        }
    </script>

    <script src="https://dl.dropboxusercontent.com/s/ylw7v7a44xtrwv0/webgl-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/iz1n21c8xafd76n/webgl-debug.js"></script>
    <script...

JavaScript

// 3DoverWeb.js (c) 2012 matsuda
// This is an example from the book "WebGL Programming Guide"
// by Kouichi Matsuda and Rodger Lea

// Rotation angle (degrees/second)
var ANGLE_STEP = 20.0;

// Model view projection matrix
var g_MvpMatrix = new Matrix4();

// Last time that this function was called
var last = Date.now();

main();
//window.onload = main;

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;
    }

    // Get shader elements
    var vShaderElement = document.getElementById("VertexShader");
    var fShaderElement = document.getElementById("FragmentShader");
    if (vShaderElement == null)
    {
        console.log("Failed to get the vertex shader element");
        return;
    }
    if (fShaderElement == null)
    {
        console.log("Failed to get the fragment shader element");
        return;
    }

    // Get shader sources
    var vShaderSource = vShaderElement.firstChild.textContent;
    var fShaderSource = fShaderElement.firstChild.textContent;

    // Initialize shaders
    if (!initShaders(gl, vShaderSource, fShaderSource))
    {
        console.log('Failed to intialize shaders');
        return;
    }

    // Set the vertex information
    var n = initVertexBuffers(gl);
    if (n < 0)
    {
        console.log('Failed to set the vertex information');
        return;
    }

    // Set the clear color and enable the depth test
    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    gl.enable(gl.DEPTH_TEST);

    // Get the storage locations of uniform variables
    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
    var u_Clicked = gl.getUniformLocation(gl.program, 'u_Clicked');
    if (!u_MvpMatrix || !u_Clicked)
    {
        console.log('Failed to get the storage location');
        return;
    }

...