Programming 3D Applications with HTML5 and WebGL

Chapter 7. Canvas: Universal 2D Drawing

At the end of the day, 3D graphics are rendered on a 2D surface such as the display of your computer, tablet, or phone. What makes them 3D is the appearance of depth and perspective: some objects appear closer, others farther away. If we also want our 3D to be interactive, then the rendering must happen quickly enough so that the changes are displayed without a perceptible delay—at least 30, and ideally, up to 60 times per second.

WebGL and CSS3 enable real-time 3D rendering using the GPU, the specialized graphics-processing unit present on today’s computers and devices. While 3D hardware acceleration is extremely important to interactive 3D graphics, it is not a prerequisite. It is also possible to create compelling 3D experiences using software rendering. For web applications, software rendering means using the Canvas 2D context—the universal API for drawing 2D graphics in a browser.

There are a few situations in which we should consider using Canvas 2D over WebGL. First, while it is near ubiquitous, as of this writing WebGL is not supported in all mobile platforms, the most notable exception being Mobile Safari on iOS. For those platforms we can treat Canvas 2D as a fallback and deliver an experience that we know will work—albeit with potentially lower performance or less crisp graphics than its WebGL counterpart. Or we may be targeting power-challenged environments like certain smartphones where the GPU consumes battery quickly, and thus ...