Backface Culling and 3D Lighting - HTML5 Animation with JavaScript - page 404

}
context.restore();
};
Triangle.prototype.isBackface = function () {
var cax = this.pointC.getScreenX() - this.pointA.getScreenX(),
cay = this.pointC.getScreenY() - this.pointA.getScreenY(),
bcx = this.pointB.getScreenX() - this.pointC.getScreenX(),
bcy = this.pointB.getScreenY() - this.pointC.getScreenY();
return (cax * bcy > cay * bcx);
};
For a quick explanation, the isBackface function calculates the lengths of two sides of the triangle, and
with some multiplication and comparison involving the triangle's normal vector relative to the camera, is
able to tell which direction they are going.
So, how do you use this method? Well, you don't really need to think about it; the function is called only
from within the Triangle.draw method. If it returns true , it is a back-face triangle and should not be
drawn, so the draw method stops there and returns. If isBackface returns false , the triangle is facing
forward and is rendered as usual using the canvas drawing API.
Now, you can run 01-extruded-a.html , or any other 3D model you created, and you see that things look
quite a bit different. As you rotate the shape around, you see that as soon as a particular face is facing the
other way, it is no longer drawn. Things aren't perfect yet, because there are still parts that are farther
away drawing on top of parts that are closer, but we're getting there. If the term “z-sorting,” or “depth
sorting,” just came to mind, you're right on track—and that's what's coming up next.
Right now you should be looking at something similar to what appears in Figure 17-3.
Figure 17-3. Backface culling in action