O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required