3D Game Programming

12.3 Realism: Shininess

The first thing we need to do for this exercise is switch renderers. We talked

about renderers in Chapter 9, What's All That Other Code?, on page 85.

Remember that the renderer is the thing that draws our games on our com-

puter screens. We briefly discussed different kinds of renderers in that

chapter. Now we’ll use them. The one that we have been using, the CanvasRen-

derer, will work with most computers but cannot perform some of the cool

effects that we might want in our games.

This May Not Work on Your Computer!

To achieve realism, your computer must be WebGL-capable. If your

computer cannot do WebGL, then you should just read through

the rest of this chapter, but not type any of it in since it won’t work.

It’s nice to be able to see these effects, but not necessary for most

of the games that we’ll work with.

The easiest way to tell if your computer and browser can do WebGL

is to visit http://get.webgl.org/. If you see the spinning cube on that

page, then you have WebGL.

To switch to the WebGLRenderer, find the renderer code (it should be near line

15) and change the CanvasRenderer to WebGLRenderer so that the code looks like

this:

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

varrenderer =newTHREE.WebGLRenderer();

If you still see the ball to the right, then everything is OK and your computer

can do WebGL. If not, switch back to the CanvasRenderer and read through this

chapter without making the changes described.

Below the code for the ball, let’s create a donut with the Phong material:

varshape =newTHREE.TorusGeometry(100, 50, 8, 20);

varcover =newTHREE.MeshPhongMaterial();

cover.emissive.setRGB(0.8, 0.1, 0.1);

vardonut =newTHREE.Mesh(shape, cover);

scene.add(donut);

If you have done everything correctly, then you should see a very dull red

donut. You might be thinking, “that’s it?” Well, of course that’s not it!

What’s missing is light. When something is shiny in real life, that means that

a light—the sunlight, a flashlight, etc.—shines brightly off of it. The same

holds true in computer games. So let’s add a light.

report erratum • discuss

Realism: Shininess • 111

Prepared exclusively for Michael Powell