HTML and CSS Reference
In-Depth Information
When you run this exercise in your browser, you should have a perfectly rendered solid, as shown in
Figure 17-4. You've made real progress here, and the next step boosts this example over the top in terms
of realism!
Figure 17-4.
Sorting the depths puts it all right!
3D lighting
Although the previous example does a nice job with the render accuracy, it still lacks a bit of realism—it's a
bit flat. You already know where we're heading with this, so let's add some 3D lighting.
Like backface culling, the specifics behind 3D lighting can get complex and math intensive. We don't want
to get into a detailed discussion of all the finer points, but there's plenty of information on the web about
the equations. What you have here are the basics, along with some functions you can use and adapt as
needed.
First, you need a light source. The simplest light source has two properties: location and brightness. In
more complex 3D systems, it might point in a certain direction, have a color of its own, have falloff rates,
conical areas, and so on. But all that is beyond the scope of what you are doing here.
Let's start out by making a
Light
class to hold the two properties we just mentioned: location and
brightness. Save this code as file
light.js
:
function Light (x, y, z, brightness) {
this.x = (x === undefined) ? -100 : x;
this.y = (y === undefined) ? -100 : y;
this.z = (z === undefined) ? -100 : z;
this.brightness = (brightness === undefined) ? 1 : brightness;
}
Light.prototype.setBrightness = function (b) {
this.brightness = Math.min(Math.max(b, 0), 1);
};
Now, at the top of your script, you can create a new default light like so:
var light = new Light();
