HTML and CSS Reference
In-Depth Information
Chapter 9
Optimizing WebGL Usage
Don Olmstead, Software Engineer, Sony Network Entertainment
As hardware evolved, games went from two-dimensional affairs into the third dimension. This evolution also happened
in the browser. Although two-dimensional rendering could be done through the use of the Canvas application
programming interface (API) it wasn't until the Web Graphics Library (WebGL) debuted that the graphics hardware
was actually exposed to a lower level within the context of the browser. This API has now been implemented by every
major browser vendor, making it possible to create a fully three-dimensional game without relying on a plug-in.
Game developers are power users of the platform. To push what's possible, they need to get as much work done
as is possible within the context of a frame. To do this, they optimize their code for the platform it's running on top of.
The browser is no different in this regard. To optimize a game on this platform, it's important to understand the inner
workings of the hardware and play to its strengths.
With WebGL it's especially important to understand what's going on under the hood. The API, although
providing a low-level interface, has an overhead that is much more significant than the equivalent native code. By
mastering its usage, the amount of time spent in the API can be minimized, leaving more time for the other game
systems to do their work.
To show how to optimize the rendering side of a WebGL application effectively, this chapter will present the
following information:
•
What happens when a WebGL call is invoked, including the overhead behind various security
checks and the browser's rendering model
•
How WebGL works internally and how this can be used to minimize the number of calls
to the API
•
The sketching out of a rendering framework on top of WebGL that ensures optimal usage
•
Tools that can be used to prove that the rendering is ideal
•
Additional functionality present in extensions that can further reduce the number of
calls to WebGL
•
General techniques that can be used when presenting a scene to the renderer
The Anatomy of a WebGL Call
To learn how to optimize an application's usage of WebGL, it's important to understand what happens within
the browser whenever a call is made. Although at its core, WebGL is a way of exposing Open Graphics Library for
Embedded Systems (OpenGL ES) to the Web, the implementation is more complicated than just providing low-level
bindings to the graphics API. WebGL has to slot into the general rendering of web content within the browser, and
it has to ensure that security is not compromised through its usage. Thus, the operation within the browser is more
elaborate than it would seem at first glance.
