Understanding Flash displacement map filter

The displacement map filter is a Flash built in feature that can add realism to some special effects.

This is a standalone tutorial but it’s in some way connected with the Creation of realistic spheres in Flash with textures and masking tutorial

Before we continute, let’s read what’s explaining Wikipedia about displacement mapping:
“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.”

We can achieve displacement mapping in Flash with the DisplacementMapFilter class

The DisplacementMapFilter class uses pixel values from a BitmapData object (known as the displacement map image) to perform a displacement effect on a new object.

A displacement effect involves displacing pixels in the filtered image, shifting them away from their original location to a new one.

The location and amount of displacement applied to a given pixel is determined by the color value of the displacement map image.

This means that the colors in the displacement map image will change the appearance of the main image

There are some additional parametes you can configure to fit the displacement map to your needs:

Map point: The location on the filtered image at which the top-left corner of the displacement filter will be applied. You can use this if you only want to apply the filter to part of an image.

X component: Which color channel of the map image affects the x position of pixels.

Color channels are defined in this way:

1: Red
2: Green
4: Blue
8: Transparent

Y component: Which color channel of the map image affects the y position of pixels.

X scale: A multiplier value that specifies how strong the x axis displacement is.

Y scale: A multiplier value that specifies how strong the y axis displacement is.

Filter mode: Determines what Flash Player should do in any empty spaces created by pixels being shifted away. The options, defined as constants in the DisplacementMapFilterMode class, are to display the original pixels (filter mode “ignore”), to wrap the pixels around from the other side of the image (filter mode “wrap”, which is the default), to use the nearest shifted pixel (filter mode “clamp”), or to fill in the spaces with a color (filter mode “color”).

If you select the “color” option, you will need to declare the alpha and color properties of the filter.

End of the boring part… now let’s see some examples:

Let’s consider this checkered image:

Main image

This is the main image, and now we will apply a displacement image to this one. You will see how different displacement images will bring very different results.

First of all, let’s understand how colors in the displacement map affect pixels in the main image.

A color is made of three color component (Red, Green, Blue) and transparency (Alpha)

Each component ranges from 0 to 255, or FF in hexadecimal. This means that 80 is the middle value. Every higher value will increase the shifting, while every lower value will decrease it.

Does it sound complicate?

Let’s see a piece of actionscript… it’s all in 13 lines…

Line 1: Attaching the background on stage (the red/blue checkboard)

Line 2: Attaching the displacement map on stage (in the first example is a #808080 rectangle)

Line 3: Assigning the value 1 (red) to the variable that will represent the X component

Line 4: Assigning the value 2 (green) to the variable that will represent the Y component

Line 5: Setting the variable that will represent the X scale to 40

Line 6: Setting the variable that will represent the Y scale to 40

Line 7: Setting the variable that will represent the filter mode to “clamp”

Line 8: defining a new point for the offset of the displacement map

Line 9: creating a new BitmapData item of the same size of the movie. You can see some more information of BitmapData in the Shuffle an image with BitmapData tutorial

Line 10: Create the displacement map itself

Line 11: Draw the displacement map in the bitmap data

Line 12: Applying the displacement filter to the checkered object

Line 13: Setting the displacement map to invisible

The result of this displacement is:

Main image

Exactly the same as the original, because the displacement image is “neutral”.

As you can see, I am using images to show results instead of movieclips for a better readability/loading speed

Let’s change the displacement map with this one:

Main image

The result is:

Main image

Still the same, because the rectangle is filled with #808000 and I am considering only red and green channels

Now let’s try something more interesting:

Main image

Here you can see a displacement map (at the bottom) and the results (at the top). You can create interesting effect combining reds and greens.

Main image

Look at the last one. Now it’s time to code something more interesting and see it in action

With this code I simply move the displacement map from left to right… and watch the result on another kind of checker board… watch it for a couple of hours…

And… do you remember the Creation of realistic spheres in Flash with textures and masking tutorial?

This is how I modified the last example from line 6 to line 19:

and this is what I got…

We are very close to the creation of the perfect realistic sphere… let me know if you get some interesting results playing with the parameters… take the source codes and give me feedback.

  • Jack Hopkins

    Awesome!
    Keep ’em coming!

  • shiv1411

    Interesting..
    Keep it up!!

  • shiv1411

    congrats~!
    this is ur 100th flash tut!
    enjoy!

  • Something about it doesn’t quite look real. I think it needs to rotate around clockwise and counterclockwise too. Now there’s a challenge!

  • George Coltart

    Very handy, there doesnt seem to be much out there on building disp maps for flash.

    Ive just been trying to work out the best way to build these in photoshop in an exact method, maybe theres a tutorial in itself, building displacements from different shapes in Photoshop. Doing it from a 3D program would be even cooler!

    Ive worked out a way using embossing in PS that seems to be quite accurate…

  • Pingback: lab.joelGillman.com › False 3D in Flash: Displacement Maps()

  • El Phantom

    great tutorial! though i think the bitmap dimensions are supposed to be 500 x 350 to match the flash movie, not 500 x 250 right? 500 x 250 is the size of your earlier examples i noticed. or am i understanding this wrong…?

  • exactly what I needed for my image editor. can’t wait to experiment with this tomorrow!

  • Sergey

    Hi. If you are interested look what i’ve done using DisplacementMapFilter:

    http://lodging-world.com/flash_fun/flash_morphing.htm?ID=D3RQ3Rvcl27P

    I find this filter extremely useful cause you can create something like this:)

  • Greg

    could you create a slight rotational effect by adjusting the rotation of the displacement map as the ball rolls?

    Possibly using the initial vector and velocity to determine rotation rate and direction.

  • Pingback: Robert Muller Design » Flash Smoke Effect using DisplacementMapFilter()

  • David

    the texture on the ball is bigger then the surface of the ball should be. other then that it looks really cool. i am still trying to figure this stuff out myself. i can duplicate the code you have but i still don’t quite get it enough to tweak it for what i want to do.

  • George

    very nice tutorial, I would suggest a different texture on your last example as it looks like it doesn’t scroll up and down.

    i would also suggest showing the result of each component separately (eg: just x and just y) so we can better understand how the illusion of the magnifying glass works

  • I had no idea how this worked and Adobe’s explanations are crap…but this was perfect.

    I used this tutorial and after a few minutes screwing around on Flash, I was able to grasp the general idea and then some.

  • Pingback: Pure AS3 magnifying effect using Displacement Map Filter : Emanuele Feronato()

  • Pingback: Understanding Flash displacement map filter : Emanuele Feronato « Dobos Bence()

  • Pingback: displacementmapfilter tester - sevenson.com.au()

  • Awesome, im trying to write my own version that will work with GD/PHP :)

  • You might want to try fading the center of the displacement map to white, this over exaggerates the displacement on the edges and makes it look way more spherical.

    I’m working on a 3D faked globe in much the same way you’ve rendered the wood ball. The trick is in a harder color transition from the center to the edges of the displacement mask.

  • Thanks for excellent explanation,
    I was always keep on ignoring this filter. But recently I got an proposal to make webcam effects. So I used your concept in order to implement it on Webcam. here is it

    http://inderprojects.com/projects/cameffects3/

    though it is very basic yet .. I am going to make more effects using DisplacementMap.

    Thanks for greatly explanation

  • zyxstand

    I really like this algorithm here! It’s not real rotation, duh, but it’s really cheap (CPU-wise) compared to actual spherical rendering. Also, for my purposes it might be better as this will preserve the orientation (good for text!)
    Anyway, the real reason I’m posting is because something on this page is leaking and the memory usage goes up like crazy. 1 GB in a few mins and still growing. I’m curious to find out as to what causes this – maybe this could affect me if i were to use something like this.

    Thanks,
    zyxstand

  • Pingback: javascript displacement mapping | Soundstep()

  • Pingback: Cigarette Smoke Ver.1 | rockcoding()

  • Pingback: Flex?? | Qunee????()