The webGL renderer in three.js

There are a few core components to making a three.js, there needs to be a scene, at least one mesh to look at that is composed of a geometry, and a material. There also needs to be a camera to set the point in space by which to look at the mesh in the scene as well, however there is still one final other component that is needed as well and that is a render. In older versions of three.js there was both a 2d canvas and webgl renderer but in later versions it has been removed, and now when making a three.js project I am pretty much always working with the webgl renderer. As such this post will serve as a general overview of the webgl renderer, I will not get into every little detail here, but I will link to other relevant posts when it is called for.

1 - What to know

There is more than one option when it comes to rendering a three.js scene and camera. The 2d canvas renderer is another option, but many three.js features will not work with it, it renders a lot slower, and as of three.js r98 it is not even part of three.js anymore. So for the most part it just makes sense to just use the web gl renderer.

1.1 - Version numbers matter

In this post I am using three.js r98 which was released on nov 1st 2018. In this version the canvas renderer was removed, there where also a number of other significant changes. So if the code in this example, or any of my three.js examples breaks be sure to check the revision number of the three.js file you are using first.

2 - Basic three.js example using the WebGLRenderer

To get started with the WebGLRenderer all I need to do is just call the THREE.WebGLRenderer constructor method to create a new instance of the web gl renderer. Once I have my web gl renderer instance I can then call methods like setSize to set the native size of the canvas that is to be used to render my project.

The domElement property stores the dom element that will be used to render so I can use something like the appendChild method to append to an element that I have in my html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function () {
// RENDER
var renderer = new THREE.WebGLRenderer();
renderer.setSize(320, 240);
document.getElementById('demo').appendChild(renderer.domElement);
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(40, 320 / 240, .5, 1000);
camera.position.set(3, 3, 3);
camera.lookAt(0, 0, 0);
// add something to the scene
scene.add(new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
color: 0xff0000
})));
// render the scene with the camera
renderer.render(scene, camera);
}
());

To render the scene I just need to pass the scene, and camera to the render method of the webGLRenderer instance.

3 - Making a render loop

Many of the projects I make with three.js are just simple looping animations. To have a loop I just need to call the render method in a method that is going to be called over and over again. In this example I am using requestAnimationFrame to do so.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(function () {
// RENDER
var renderer = new THREE.WebGLRenderer();
renderer.setSize(320, 240);
document.getElementById('demo').appendChild(renderer.domElement);
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(40, 320 / 240, .5, 1000);
camera.position.set(3, 3, 3);
camera.lookAt(0, 0, 0);
// add something to the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
color: 0xff0000
}));
scene.add(cube);
// render the scene with the camera
var frame = 0,
frameMax = 50;
var loop = function () {
requestAnimationFrame(loop);
var per = frame / frameMax,
a = Math.PI * 2 * per;
cube.rotation.y = a;
renderer.render(scene, camera);
frame += 1;
frame %= frameMax;
};
loop();
}
());