Setting up the scene

We set up the scene by writing the code for the configure function. Let's analyze it line by line:

var camera = null, transforms = null;
function configure(){

At this stage, we want to set some of the WebGL properties such as the clear color and the depth test. After that, we need to create a camera and set its original position and orientation. Also we need to create a camera interactor so that we can update the camera position when we click and drag on the HTML5 canvas in our web page. Finally, we want to define the JavaScript variables that will be mapped to the shaders. We can also initialize some of them at this point.

To accomplish the aforementioned tasks we will use Camera.js, CameraInteractor.js, and Program.js and SceneTransforms.js from our architecture.