Programming 3D Applications with HTML5 and WebGL

Chapter 10. Developing a Simple 3D Application

Up to now we have been concerned with underpinnings: HTML5 foundation APIs and architecture, JavaScript libraries and frameworks, and content pipeline tools. Now it’s time to put this learning into practice. For the remainder of the book, we will shift our focus away from APIs and tools, toward the practical concerns involved in developing working applications.

Let’s start by building one of the simpler types of 3D web application: a product viewer/configurator. Such applications typically feature an interactive 3D model of a real-world product as the centerpiece, with a rich user interface for exploring the product’s features, mouse interaction for seeing more information, and a way to interactively change one or more aspects of the model. Web-based product configurators have been around for a long time, first in static 2D, then with 2.5 or 3D rendering using Flash, and, most recently, in 3D via the Canvas API and/or WebGL. Product configurators can be high-functioning marketing tools (i.e., a more interactive way to advertise a product’s features), or they can be used to actually configure and buy the product online through an integrated e-commerce system.

Figure 10-1 illustrates a concept piece for a “car of the future.” Try it out by opening the example file Chapter 10/futurgo.html. Use the mouse to rotate the model, and the trackpad or scroll wheel to zoom in and out. As you roll over various parts of the car, information about that ...