HTML and CSS Reference
Figure 9-5. A texture sheet
Batching gets a bit more complicated when the sprites are mobile instead of being statically placed within the world,
as with a tile map. In this case, the vertex data need to be updated whenever the sprite's position changes. This means
keeping a separate copy of the position data, as WebGL does not have a way to get back the data held in the buffer. Once
all the vertex data have been updated, they must then be applied to the vertex buffer, as shown in Table 9-3 .
Table 9-3. Buffer Usage Enumeration
The data store contents will be modified once and used at most a few times.
The data store contents will be modified once and used many times.
The data contents will be modified repeatedly and used many times.
When setting up vertex buffers, it's important to think about how they are going to be used. In this case, the
position data are likely to change often, whereas the texture coordinates are going to be constant. For this reason, it's
best to place them in two separate buffers. When populating the data, there are enumerations, which tell the underlying
driver how the data are going to be used. This functions as a hint to the underlying implementation on how it should
store the data internally. The position buffer should be passed the DYNAMIC_DRAW enumeration, whereas the texture
coordinate buffer receives the STATIC_DRAW usage. This lets the underlying implementation optimize accordingly.
Effectively using WebGL is integral for three-dimensional applications on the Web. Spending more time than is
required within the API results in less time for the rest of the application to do its work. Hitting a smooth 60 frames per
second, or at the very least30, is integral to the user experience and is a goal that needs to be met.
By ensuring that the application is not making unwarranted calls to the API, the battle is largely won. The
application should leverage any extensions available to further reduce the number of calls. And, finally, the renderer
should be fed in a way that is efficient for dealing with the scene being displayed. With all that in place, the rendering
path is optimized, maximizing the amount of frame time available for the rest of the application.