Initializiation

Once again, initialization happens just once when the HTML finishes loading. It is invoked by the onload event on the <body> element.

The initialization of the interactive renderer is largely identical to the minimal application, though with two additional steps…

〈Initialization〉 ≡
  var canvas
  var gl

  function init()
    〈Initialize the GL context〉
    〈Initialize the program object〉
    〈Initialize the uniform objects〉
    〈Initialize the buffer objects〉

    〈Copy vertex data to the GPU〉
    〈Copy triangle data to the GPU〉

    canvas.onmousedown = onmousedown
    canvas.onmouseup = onmouseup
    canvas.onmousemove = onmousemove

    Request the first animation frame.
  1. We must connect the interaction event handlers to the canvas.
  2. We must initialize a set of uniform objects. This stems from the use of a more capable pair of shaders…