Been testing out the Javascript compile of Crunch (thanks +Evan Parker!) with WebGL by integrating it with my iOS Rage renderer. Some fun facts:

The original Texture dataset from the game (Level 1) is 759 2BPP PVR textures, 1024x1024 each, totaling 248MB. For use with WebGL I converted them to JPEGs. which brought the size down to 117MB. The crunched textures (compressed DXT1) total 104MB. So theres not much of a size gain, on average, vs JPEG, but as a compressed format it beats the pants off of PVR! :)

In terms of performance, uploading a 1024x1024 texture from a JPEG or PNG in WebGL (on Chrome, anyway) takes about ~14-16ms each, which unfortunately is a blocking call. (That's also something of a best case scenario. Naive implementations will typically take around ~25ms) Since your entire draw cycle needs to stay under 16ms in order to maintain 60FPS, this means that uploading an uncompressed 1024 texture basically guarantees that you will drop a frame.

With the crunched DXT1 textures the texture upload calls were reduced to <1ms! The tradeoff is that you need to run the texture through a decode process beforehand, which I saw was taking ~12-16ms So a naive implementation that simply decodes and uploads the texture on a single thread won't see much performance gain. The great part here is that, unlike the upload to GPU, the crunch decoding can be offloaded to a worker, which leaves the main thread free to render at top speed.

So overall I call Crunch+WebGL a win! It's not going to provide massive storage space gains vs. JPEG (though it should thoroughly trounce anything else!) but the reduced video memory needs due to compressed texture use plus the potential to reduce the amount of time spent blocking the rendering thread easily offset the inconvenience of using something other than a natively supported image format.
Shared publiclyView activity