O'Reilly logo

OpenGL Insights by Christophe Riccio, Patrick Cozzi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Browser Graphics Analysis and
Optimizations
Chris Dirks and Omar A. Rodriguez
36.1 Introduction
Un derstanding per formance bottlenecks in games helps developers deliver the best
gameplay experience. In games, performance bottlenecks are usually grouped in one
of two categories: CPU or GPU. Focusing optimization efforts in the appropriate
category saves development time and helps get our game running better faster. Opti-
mizing CPU issues when the bottleneck is in the graphics pipeline will result in little
to no performance gain and a good amount of frustration. Deploying our game in a
web browser complicates the process of isolating bottlenecks. Using the techniques
described here, we’ll be more successful in identifying the most profitable areas to
optimize.
Postprocessing effects h ave become a standard in AAA games a nd very often are a
performance bottleneck. In this article, we discuss an implementation of the bloom
effect in WebGL and its performance characteristics in the browser. Because WebGL
runs in a web browser, this poses some special challenges when doing graphics analy-
sis in comparison to a native 3D graphics application. Ju st as a native application may
choose a different code path when detecting a different operating system, the same is
true of the browser’s implementation of the Canvas or WebGL APIs. Add to this the
fact that we’ll likely be supporting multiple browsers, and there is the potential for
many permutations and a challenge in understanding what happens from script to
pixel.” We’ll discuss the support for WebGL analysis in common 3D graphics tools
and the various implementations of the standard in modern web browsers.
513
36
514 VI Debugging and Profiling
36.2 The Stages of Bloom
The familiarity of the bloom effect in games is one reason it was used for this article.
The other major reason is that it is composed of several steps with parameters that
can be tweaked to favor quality versus performance. As shown in Figure 36.1, this
implementation starts with the original scene rendered to a texture and applies the
bloom effect in four major steps:
1. Draw scene to a texture.
2. Identify fragments whose luminance exceeds a threshold.
3. Blur the results of the luminance test.
4. Combine the original rendered scene texture with the blurred highlights.
Each of these steps has parameters that can trade quality for performance. In
the luminance step, we can set the luminance threshold to control the number of
fragments of the original scene texture that are written to the luminance render target.
In the blur step, we can set the number of blur passes and resolution of the render
Original scene Final frame
Luminance Final frame
Is bloom
on?
No
Yes
Blur
Figure 36.1. Visual representation of the results of each stage.
36. Browser Graphics Analysis and Optimizations 515
target to increase/decrease blur quality. In the final step, we can control the weight
of the blurred highlights that get combined with the original scene.
Fragments of the original scene that have a luminance value above the luminance
threshold are written to the render target. Anything below the luminance threshold
is written as black. The number of blur passes determines the number of times the
highlights (luminance results) are blurred. The resolution determines the size of the
render target used by the blur passes. The weight of the blurred highlights determines
how much of the blurred highlights end up in the final frame. We expose some of
these parameters as part of the HUD a nd others are set in code.
The source code that accompanies this chapter is laid out in a simple format to
make it easy to follow and understand. The bloom implementation is composed of
the following:
MainLoop (in index.html) takes care of calling update/render loop with the
appropriate request-animation frame method for each browser.
Init (in bloom.js) defines all resources used in the sample, such as shaders,
textures, scene objects geometry, and render targets.
Update (in bloom.js) contains all nonrendering actions such as updating ro-
tations.
Render (in bloom.js) draws scene geometry, performs luminance test, blurs
highlights, and combines results into the final frame.
bloom-utils.js contains helper functions used to l oad shaders and textures,
parse .obj files, and create geometry.
36.3 Overhead of Bloom
Now that weve described the general implementation of bloom as a postprocessing
effect, we’ll describe the specifics about our implementation in WebGL. The first
thing we measure is the actual overhead of applying bloom to the scene. With the
Javascript code in Listing 36.1, we capture a good enough approximation of the
frame time to measure overhead and update the scene.
var MainLoop = function () {
nCurrentTime = ( newDate ). getTime ();
fElapsedTime = nCurrentTime - nLastTime;
nLastTime = nCurrentTime;
// call Update & Render
// call requestAnimationFrame( MainLoop );
}
Listing 36.1. JavaScript code to approximate frame time.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required