HTML and CSS Reference
In-Depth Information
Chapter 21
Saving Bandwidth and Memory
with WebGL and Crunch
Brandon Jones, Software Engineer, Google
When it comes to optimization, both real-time 3D applications and web pages happen to share a common target:
images. Images, whether they take the form of textures or
<img>
tags, often make up the majority of the visual
information on your screen at any given time. The metrics for optimization differ based on the medium, however.
3D apps, such as games, need images that can be loaded quickly, drawn fast, and take up as little memory as possible
by taking advantage of hardware-supported texture compression formats. Web pages, on the other hand, are primarily
concerned with the bandwidth required to download the images to your device, skewing heavily towards small, lossy
formats like JPG. In other words, 3D apps are concerned about the size of the image in video memory and web apps
are concerned about the size of the file on the server.
WebGL sits at the intersection between these two worlds and, unfortunately, it's not always easy to satisfy the
demands of both. This chapter will examine the Crunch compression format as a way to achieve both low memory
usage and small file size, making it the best of both worlds!
The Goal
In this chapter, you will be constructing a library that can be used to load compressed textures, both from DDS and
CRN files. In order to demonstrate the library, I've created a simple WebGL image gallery that demonstrates loading
and displaying the file types discussed, illustrated in Figure
21-1
.
