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

Configuring some WebGL properties

Here we set the background color and the depth test properties as follows:

gl.clearColor(0.3,0.3,0.3, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

Setting up the camera

The camera variable needs to be global so we can access it later on from the GUI functions that we will write. For instance, we want to be able to click on a button (different function in the code) and use the camera variable to update the camera position:

camera = new Camera(CAMERA_ORBITING_TYPE);
camera.goHome([0,0,7]);
camera.setFocus([0.0,0.0,0.0]);
camera.setAzimuth(25);
camera.setElevation(-30);

The azimuth and elevation of the camera are relative to the negative z-axis, which will be the default pose if you ...

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