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 ...

Get WebGL Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.