3D Game Programming

In the case of the renderer, we can already see why it’s nice to have this kind

of control. In some of our experiments, we rendered just a single time. But

in many of our projects, we render repeatedly inside an animate() function.

Without this kind of control, it would be much harder to pick and choose the

right rendering style.

9.6 Exploring Different Cameras and Renderers

You may have noticed that we call our camera a PerspectiveCamera and our

renderer a CanvasRenderer. If these names seem oddly specific, that’s because

there are other kinds of cameras and renderers. We’ve been using these

because most browsers and hardware support them. As we’ll see in Chapter

12, Working with Lights and Materials, on page 109, some cool effects that we

might want to add to our 3D games require different cameras and renderers

that work only on relatively new computers.

You Don’t Have to Do These Examples

Some computers will not be able to run the examples in the rest of

the chapter. This is because they rely on a technology called WebGL,

which we will talk about in more detail in Chapter 12, Working with

Lights and Materials, on page 109. Since your computer might not

support WebGL, you don’t have to follow along in the ICE Code

Editor in this section.

Introducing the WebGL Renderer

The other important renderer is the WebGLRenderer. We use it exactly the same

way that we use the CanvasRenderer. We only need to change the name:

// This will draw what the camera sees onto the screen:

varrenderer =newTHREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

WebGL is a fairly new technology that allows programmers to perform inter-

esting 3D-programming techniques like lighting, shadows, and fog. It also

runs animations much faster than is possible with the CanvasRenderer. We’ll

explore it more in Working with Lights and Materials.

A Quick Peek at a Weirdly Named Camera

The other kind of camera is called orthographic. To understand what an

orthographic camera does, we can add a red road on which the purple fruit

monster can travel. Add the following after START CODING ON THE NEXT LINE.

report erratum • discuss

Exploring Different Cameras and Renderers • 89

Prepared exclusively for Michael Powell