Using RGB Channels to Compress Multiple Grayscale Images

Another experiment recently did was compress three grayscale images into one file. The reason for this would be of course file size and load time. A real-case scenario where you might need to load 3 grayscale images of the same size is loading textures for a 3D app. For instance, your model might be color dynamically, but you need to load a diffuse map, a specular map, and a bump map – all of these would be the same dimension and would be black  and white.

So all you need to do is take your three grayscale images into photoshop and layer them on top of one another. Then use the gradient map image adjustment to have each image range from red, green, or blue to black. Have the base layer be flat black, and set each of the three layers to screen. Then, once that image is loaded into Flash, you can extract each color channel and set it back to black and white with the ColorMatrixFilter. You just need to set the matrix so that each of the R,G,B rows are [0,0,0,0,255] and the last row (the alpha) is [1,0,0,0,0] for red, [0,1,0,0,0] for green, or [0,0,1,0,0] for blue. The just smoosh that transparent white image into a black bitmap, and you’re set.

Again, not entirely useful for every day cases, and it does cut down on how easy and dynamic the loaded content is, but if you’re hurting due to file size and load time, this could be something to keep in mind. In case you’re wondering – the layered color image I used in my example is 188 KB, and the blue channel saved as its own grayscale file is 132 KB.

One thought on “Using RGB Channels to Compress Multiple Grayscale Images”

  1. This is a similar technique ILM uses to put multiple elements into a singe file. On StarWars Episode III, the ‘force lightning’ from the emperor’s had is actually four separate bolt simulations rendered into the R, G, B, and A channels of a single EXR file. Because the elements were colored in compositing, only the luminance was needed (also served as the matte). Plus shake only reads four channels per filein node so this made loading all those elements much easier and faster.

    Extending this to shader maps is a cool idea. In combination with a normal map this could work really well in situations where load time needs to be small.

Leave a Reply

Your email address will not be published. Required fields are marked *