Game Development Reference
In-Depth Information
The bike model in CycleBlob is made of not one, but several distinct meshes—each with a different color.
The JSON file of this model contains the lists of vertices and triangles for each of the meshes, along with
the definition of its color. One of the meshes has a special “placeholder” color that indicates that it needs to
be displayed in a color specific for the player being drawn (red, blue, yellow, etc.).
Dynamic models
Building typed array objects (
Float32Arrays
,
Int16Array
) from JavaScript arrays and sending them to the
GPU with
gl.bufferData()
can be a time-consuming operation. It requires copying a lot of data and
relying on the garbage collector to claim the unneeded arrays. Dynamic models change in every frame, it
is therefore crucial that their handling be as fast as possible. Instead of building the complete set of typed
arrays from scratch in every frame, it is possible to make incremental updates to existing buffers using
gl.bufferSubData()
. This call allows for appending data and changing the content of existing buffers.
As a case study, we'll look at the generation of the wall that trails behind the bike as it progresses in the
game. The wall is made of three, long strips of triangles—two for the left and right sides, and one for the
top. Each strip is generated and rendered separately. The triangle construction looks like Figure 8-5.
Figure 8-5.
(a) The wall triangles in 3D. (b, c, d) Views from the side of a wall on a curved surface. The wall segments
need to be short enough to adjust properly to the surface curvature.
To adjust to the curvature of the grid surface, each wall segment has to be quite short.
The last segment, the one closest to the bike, is the only part that is updated in every frame. The
animation engine advances the bike slightly forward each frame and the wall construction advances by the
same amount. Just before a frame is rendered, the very last two triangles of each of the three strips are
erased and overwritten by two similar triangles that are slightly longer. After incrementing past a certain
length, the construction skips one erasure, leaving behind a completed segment and starting a new one. In
