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

So now you can load, decompress, and upload a Crunch texture! Let's see how well it works. First, open up
the gallery application again, and select “CRN” from the format select. This will start loading images from Crunch
compressed files rather than JPEGs. As with the other formats, you output the time spent uploading to the console,
and you should see that the upload times match the DDS files closely (after all, it's almost the same data.) You're also
logging the amount of time spent decompressing the file from the Crunch format to the DXT data, and unfortunately
that number isn't as pretty. On my machine, decompressing typically takes 8ms to 13ms for each 1024×1024 texture.
That puts us back in the same timeframe as uploading the JPEG, and it is a big step back from the parsing and upload
times of the DDS files. Nevertheless, there's one crucial difference: since the majority of the time is now spent in
JavaScript that's not interacting with WebGL, you can move much of the processing into a Web Worker.
Workers
Web Workers are a limited form of parallel processing for JavaScript, similar to using multiple threads but with more
safety mechanisms built in. The biggest limitation of workers is that they have no DOM access, nor can they access
anything derived from the DOM. This means that no WebGL interaction can occur within a worker. The best you can
do is to process everything into a form where it's ready to be passed directly into WebGL when it's passed back to the
main thread.
Getting the code to use Web Workers isn't as difficult as you may think. The first step is to move the Crunch
constants, the LoadCrunchDecoder function, and the decompressCRN function into a new file, which you'll call
crunch-worker.js . Then add the code in Listing 21-14 to the bottom of the file.
Listing 21-14. crunch-worker.js Message Handling
// Worker message handler
onmessage = function(msg) {
// Calls to the worker contain a URL to load and the associated pending texture ID.
var src = msg.data.src;
var id = msg.data.id;
// Notifies the main thread that DXT data is ready.
function uploadCallback(dxtData, width, height, levels, internalFormat, bytesPerBlock) {
postMessage({
id: id,
dxtData: dxtData,
width: width,
height: height,
levels: levels,
internalFormat: internalFormat,
bytesPerBlock: bytesPerBlock
});
}
// Notifies the main thread that an error has occured.
function errorCallback(error) {
postMessage({
id: id,
error: error
});
}