WebGL: Up and Running

Chapter 8. Your First WebGL Game

The stage is set; we have the bits and pieces required to develop a WebGL application. We know how to render graphics, and bring life to them with animations and interactivity. We learned how to integrate 2D HTML5 elements with our 3D content, making for a seamless user experience. We kicked the tires on tools for creating 3D models and scenes, and explored techniques for building robustness into our WebGL code. It’s time to put all this working knowledge together. Let’s build our first game!

Figure 8-1 depicts the game. It’s a car race, and the rules are simple: (1) Go as fast as you can, and (2) don’t crash into the other cars. You speed along a straight stretch of desert road located on the Californian leg of the legendary Route 66, avoiding any cars ahead of you. If you get too close to the guardrail, you will bounce around and lose time. In the background, clouds slowly move against a desert blue sky. A heads-up display shows a readout of your current speed, engine RPM, elapsed time, and distance. At the end of the race, an overlay appears, showing the final result and inviting you to play again.

I chose this game theme more or less at random…though I did try to pick a genre that would illustrate all the key concepts. I also wanted to identify something that I could create on my own using free and/or inexpensive stock art. The game is simple, but it gets the point across. It’s also fun to play—for two or three minutes, anyway.

Figure 8-1. A WebGL ...