Saving Bandwidth and Memory with WebGL and Crunch - HTML5 Game Development Insights - page 337

This function takes in a source URL ( src ) and optionally an existing texture handle and a callback that will be
called when the texture is finished loading. If not, the existing texture is provided. You create one here and return it as
a convenience for the user. The basic code to load a DDS texture then looks like this:

var dxtLoader = new DXTLoader(gl);
var dxtTexture = dxtLoader.loadDDS(imageUrl);

And that's it! You can now use this compressed texture like you would any other, but it takes up 1/4th to 1/6th the
space of the alternative. When all is said and done, the code to load a DDS file into a WebGL texture is about 130 lines,
which isn't bad at all. It should be noted, however, that this code only targets DDS files that WebGL can support. Some
of the more advanced DDS features, like cubemap support, have been ignored for the sake of simplicity.
To see DDS loading in action, open up the gallery application again and select “DDS” from the format drop-down
menu in the upper-left corner. You shouldn't notice any difference in the images being shown but, on the back end,
it will begin loading the textures from DDS files rather than JPEGs. Also, if you open the JavaScript console, it will
show the amount of time it takes to upload the DXT data using the compressedTexImage2D call. (The time it takes to
parse the file should be negligible.) You should notice a stark difference from the upload times for the JPEGs! While
the uncompressed image data takes 11ms to 18ms to upload, the compressed data loads in well under a millisecond,
usually only taking 0.15ms to 0.2ms with Chrome!
The unfortunate part is that since these formats use fixed rate compression, they are pretty much guaranteed to
be noticeably larger than that of their JPEG counterparts. Table 21-2 shows the new compressed sizes of the images
shown previously in Table 21-1 .

Table 21-2. Comparison of DDS and JPEG Image File Sizes

DDS (DXT1) JPEG

Slide_10 683 KB 378 KB

Slide_13 683 KB 531 KB

Slide_15 683 KB 303 KB

You can see that, in some cases, the JPEGs are half the size of the DXT files! Compressed formats like DXT are
great for saving video memory, but at the cost of extra bandwidth. Luckily for you, however, there's a newer format
that provides the best of both worlds!

Crunch
The Crunch texture format ( https://code.google.com/p/crunch/ ) was developed in 2009 by Rich Geldreich. It is
essentially another level of compression on top of the fixed-rate DXT compression format. Because of this it yields file
sizes that are as good as, and often better than, JPEG! See Table 21-3 .

Table 21-3. Comparison of Crunch (CRN) File Sizes with DDS and JPEG

CRN (DXT1) DDS (DXT1) JPEG

Slide_10 189 KB 683 KB 378 KB

Slide_13 221 KB 683 KB 531 KB

Slide_15 186 KB 683 KB 303 KB