3D Basics - HTML5 Animation with JavaScript - page 334

have a back, side, top, or bottom that you can see. Over the next couple of chapters, you do some
modeling of points, lines, shapes, and solids in 3D.
It's worth mentioning there is currently, at the time of writing, a 3D specification in development for the
canvas element, called WebGL. However, it is not considered part of the HTML5 specification, and is not
supported across all the major web browsers at this time (and it is not known if it ever will be). WebGL is,
by design, a low-level means to execute code on the computer's graphics card. Although WebGL is a
powerful way to run hardware-accelerated graphics in the browser, it's rather advanced and uses
JavaScript more as a way to tie together other programs, called shaders , which are written in a separate
shader language and are compiled when the browser loads the document. But WebGL could provide the
foundation for the next generation of web-based graphics, on which other, easier to use, libraries and 3D-
engines are built. There are still a number of issues facing its broad adoption by all browsers, but it does
offer a glimpse into the future of graphics and games on the web.
The third dimension and perspective
The main concept behind 3D is the existence of another dimension beyond the x and y axes. This is the
dimension of depth, and it is usually labeled z.
The canvas element does not have a built-in z dimension, but it isn't too difficult to create one with
JavaScript. And it's actually less complex than a lot of the stuff you did in the previous chapters!
The z axis
To begin with, you must decide which direction the z-axis will go: in or out. If you recall back to the
description of the canvas coordinate system in Chapter 3, it is in some ways opposite to most other
commonly used coordinate systems. The y axis goes down instead of up, and angles are measured
clockwise instead of counterclockwise.
If an object's z position increases, is it going away from you or toward you on the z-axis? Neither way is
necessarily more correct than the other. In fact, this subject has been addressed enough times that there
are even names to describe the two methods: left-hand system and right-hand system.
Take either hand, and point the fingers in the direction of the positive x-axis and curl them toward the
positive y-axis. The direction your thumb points, either toward you or away from you, is the direction that
the positive z-axis points for that coordinate system. So, if you take your right-hand, point it away from you
following the positive x-axis, and then curl the fingers to the ground, toward the positive y-axis, your thumb
will point in front of you—the positive z-axis for the right-handed coordinate system. So in code, this means
the z-axis increases as it goes away from the viewer, and decreases as it goes toward the viewer, as
shown in Figure 15-1.