HTML and CSS Reference
In-Depth Information
Now let's go back to the DXTLoader library you were working on earlier and add Crunch support! You'll need
to load the contents of the newly built
crunch_lib.js
somehow. You can do this by including the file in your HTML
headers like any normal JavaScript, but you can make life a little easier for users of your library by embedding it in the
file itself.
At the top of the
dxt_utils.js
file add a function named
LoadCrunchDecoder
which returns a variable named
Module
, like so:
function LoadCrunchDecoder() {
// Emscripten compiled code goes here.
return Module;
}
Then copy the entire contents of
crunch_lib.js
into this function. You're putting it inside a function for two reasons.
One is that it prevents any variables that Emscripten may create from accidentally polluting the global scope and two is so
that you can decide when you want to initialize the crunch reader, which will come in handy in just a moment.
Next, just like with the DDS loading code you'll need a few constants defined to assist in the Crunch loading. Add
the code in Listing 21-10, just below the DDS constants you defined earlier.
Listing 21-10.
Crunch Constants
// Taken from crnlib.h
var CRN_FORMAT = {
cCRNFmtInvalid: -1,
cCRNFmtDXT1: 0,
// cCRNFmtDXT3 is not currently supported when writing to CRN - only DDS.
cCRNFmtDXT3: 1,
cCRNFmtDXT5: 2
// Crunch supports more formats than this, but we can't use them here.
};
// Mapping of Crunch formats to DXT formats.
var DXT_FORMAT_MAP = {};
DXT_FORMAT_MAP[CRN_FORMAT.cCRNFmtDXT1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
DXT_FORMAT_MAP[CRN_FORMAT.cCRNFmtDXT3] = COMPRESSED_RGBA_S3TC_DXT3_EXT;
DXT_FORMAT_MAP[CRN_FORMAT.cCRNFmtDXT5] = COMPRESSED_RGBA_S3TC_DXT5_EXT;
Next, you're going to add the code that calls into the Emscripten-compiled code to decode a Crunch file. This is
probably the most complicated part of the entire library, so get ready! First off, in order to decompress the crunch files
you will need a buffer of data to decode the DXT information into. That can be somewhat large and a bit expensive to
create, so you only want to do it once if you can help it. Similarly, you want to be able to load the Emscripten modules
only once and only when needed. In order to accomplish this, you're going to use some functional scoping tricks to
create some “private” variables, as shown in Listing 21-11.
Listing 21-11.
decompressCRN function, Part 1
// Parse a crunch file and decompress the contained texture into raw DXT data, which is then passed
to the callback.
var decompressCRN = (function() {
// Variables which are cached between calls to the function, hidden here with some function
scoping tricks.
