HTML and CSS Reference
In-Depth Information
These three sample images show significantly smaller file sizes than JPEG— something that's true of every image
in your gallery application. That's not always the case with every image, and is highly dependent on image content.
Nonetheless, you can generally count on CRN files being seriously small. Even better, since you can also store DXT3/5
formats with CRN as well, it allows you to save transparent textures that are almost always far smaller than their PNG
counterparts. Unfortunately, since DXT compression is inherently lossy, PNGs are still your best bet if you need
lossless textures.
The downloads on the Crunch site provide Windows command-line tools that make it very easy to convert
images of various formats into CRN files. (Mac and Linux users can build the compression tools from source.)
Converting a JPEG file, for instance, is as easy as the following:
crunch.exe /DXT1 -file input_image.jpg
This code snippet creates an
input_image.crn
file in the current directory. You can also convert larger sets of
image files by using wildcard characters. There are a lot of options to control how the conversion process proceeds,
and you can find out more about the various flags available by running
crunch.exe
without any arguments. There's
enough flexibility here that the compression process should feel right at home as part of your build process or art
pipeline.
Using CRN files in a 3D application is a two-step process. The file is first run through a decompressor, which very
quickly transcodes from the Crunch format into a buffer of DXT texture data. This is then uploaded to the GPU as a
normal compressed DXT texture. The Crunch source code includes a lightweight C++ header file that handles all of
the decompression. Since you're using WebGL, however, you've got to do the transcoding in JavaScript.
The truth be told, it would be entirely possible to write a Crunch decoding routine in JavaScript by hand, but
it wouldn't be anywhere near as simple as the DDS reader shown earlier. Not only that, but after writing the initial
decoder, you would have to update it manually any time the Crunch C++ library is updated with new features or bug
fixes. That's hardly an attractive idea to someone that just wants smaller texture files.
Emscripten
Fortunately, you have Emscripten at your disposal. While the tool has already been covered in Chapter 18, I'll briefly
review it again in case you skipped that chapter. Emscripten, written by Alon Zakai, is a C++-to-JavaScript cross-
compiler. Within certain limitations, it can take many C++ files or projects and produce JavaScript that can run on
most browsers. The resulting script resembles assembly code and isn't typically human readable, but the benefit of
not needing to re-code entire projects by hand makes that a small price to pay. Furthermore, Emscripten's outputs
conform to the
asm.js
spec, which means that the resulting code can be further optimized by some browsers, such as
Firefox, and it can achieve performance that is within 2X of native code.
The self-contained nature of Crunch's decoder (a single
.h
file) makes it very easy to compile with Emscripten.
The only additional thing required on your part is a small C++ wrapper to indicate those functions you need to be able
to access. Evan Parker, who created a proof-of-concept Crunch loader with Emscripten in 2012, originally did this
work, and the code in Listing 21-8 is a minor modification of his original work. This source is also available at
crunch_js/crunch_lib.cpp
in the chapter's source code.
Listing 21-8.
Emscripten/Javascript Interface
#define PLATFORM_NACL // This disables use of 64 bit integers, among other things.
#include <stddef.h> // For NULL, size_t
#include <cstring> // for malloc etc
#include "crn_decomp.h"
