---

False 3D in Flash: Displacement Maps
2008-09-17

After seeing a post on the Puny Blog about displacement maps I became interested in how they did it. Unfortunately there wasn’t any source code so I’ve replicated the effect from scratch.
Turns out displacement maps are really hard to wrap your head around, so I’ll try to explain it very carefully and slowly.

I feel that Wikipedia is always a good place to start:

Displacement mapping is an alternative computer graphics technique in contrast to bump mapping, normal mapping, and parallax mapping, using a (procedural-) texture- or height map to cause an effect where the actual geometric position of points over the textured surface are displaced, often along the local surface normal, according to the value the texture function evaluates to at each point on the surface. It gives surfaces a great sense of depth and detail, permitting in particular self-occlusion, self-shadowing and silhouettes; on the other hand, it is the most costly of this class of techniques owing to the large amount of additional geometry.

Displacement maps are commonly used in 3D programs to make complicated geometry using simple 2D images. In those programs it actually morphs objects in a 3D-space (along a z-axis). But in our (so far) 2D flash world, it’s easier to think of the displacement maps as distortion. In plain English, you distort an image using a separate gray scale image.

I’m a visual thinker so I drew it out in my sketch book first:

This is the distortion I wanted to achieve. If you can’t read my chicken scratch it says, “x: -30 to 0 to +30″. Meaning that if every square were for 5 pixels, at the grid’s most distorted point the bottom-left point would be offset by -30 pixels along it’s ‘x’ axis while the bottom-right point is offset by +30 pixels. The bottom-middle is not offset along the ‘x’ axis.

After drawing out and writing down what would happen to each pixel, translating it into a gradient was pretty easy. A gray scale image consists of 255 levels, 0 being black and 255 being white. If you’re reading this you probably already know that. You also know that any digital image is made up of three channels: Red, green and blue. In Photoshop, you can see these channels individually by opening the channels window. This will be important, or at least handy to know later. SO, converting those levels into hex you get 00 (black, -30px offset), 80 (middle gray, 0 offset) and FF (white, +30 offset).

I didn’t want the whole image to be distorted, so part of the image needed to remain unchanged. This is where the middle-gray comes in. The gray fades in from the bottom to about a third of the way up the image and from there it is the same even color all the way up.

If you break it out into channels you get this:

For this example I am only using the RED and BLUE channels (though since the BLUE and GREEN are the same in this case, they are interchangeable). The BLUE channel goes from black to gray meaning that pixels will be moved in a negative direction, this is the first part of the skewed illusion. The second, and most important part, comes from the RED channel. Starting with the most extreme black (00) and fading to the most extreme red (FF), we get our most extreme distortion. Cowabunga!
From there, as we move up, the image fades more and more to middle-gray creating less and less distortion until there is no distortion at all.

At first I used a picture of some pretty flowers to test the distortion, but I realized that with a real photo, it wasn’t very obvious what had actually been morphed. I ditched it for a good ol’ grid. The grid makes it ridiculously easy to tell what’s been morphed, plus it looks like a cool Tron-esque world.

---

Check out the working demo. (click to turn the distortion on and off)

---

Download the source. All code is EXPLICITLY commented.

---

A few sites that I found helpful:

• Getting the Displacement Your Need
• AS3 Bitmap Displacement
• Understanding Flash Displacement Map Filter

---

After all of that the one thing that I still don’t get is why when the image is distorted why it looks so crappy. I’ve tried using different image formats (jpeg vs png) and I’ve even dynamically drawn in a vector grid, but it still give me that pixelly crap. Anyone have an answer?

Tags: AS3, displacement mapping, flash, photoshop, source code

trackback URL for this post: http://lab.joelgillman.com/archives/30_false-3d-in-flash-displacement-maps/trackback