HTML and CSS Reference
If you need more detailed information on how WebGL processes data, we recommend read-
ing Opera's explanation at http://mng.bz/4Lao . Our version is quick and simple, because
we don't want to put you to sleep.
Meanwhile, back at the engine
Your engine currently doesn't communicate with a graphics card. To do so, you'll follow
two groups of steps:
Group 1—Creating shaders
Group 2—Working with matrices and drawing shapes
• Step 1: Create and
vertex, and shape
• Step 2: Set up
from the DOM.
• Step 3: Pull
shader data from
• Step 4: Create
shape, color, and
• Step 1: Use matrices and buffers to visually output information.
• Step 2: Bind and draw shapes.
• Step 3: Detect overlap and remove entities.
• Step 4: Add matrix helpers to simplify matrix interaction.
• Step 5: Add Vlad Vukićević's WebGL helpers for rotation.
Once you've completed these tasks, you'll be ready to program the game.
9.2.2. Creating shaders for 3D data
Before you begin with the Group 1 set of tasks, pick up Jacob Seidelin's helpful WebGL
Cheat Sheet at http://blog.nihilogic.dk/2009/10/webgl-cheat-sheet.html . It breaks down all