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:
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…
1 2 3 4 5 6 7 8 9 10 11 12 13 | attachMovie("bg","bg",1);
attachMovie("displace","displace",2)
channel1 = 1;
channel2 = 2;
x_mult = 40;
y_mult = 40;
mode = "clamp";
offset = new flash.geom.Point(0, 0);
bmp = new flash.display.BitmapData(500, 250);
displacement_map = new flash.filters.DisplacementMapFilter(bmp, offset, channel1, channel2, x_mult, y_mult, mode);
bmp.draw(displace);
bg.filters = [displacement_map];
displace._visible = false; |
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:
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:
The result is:
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:
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.
Look at the last one. Now it’s time to code something more interesting and see it in action
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | attachMovie("bg", "bg", 1);
attachMovie("displace", "displace", 2);
displace._visible = false;
channel1 = 1;
channel2 = 2;
x_mult = 30;
y_mult = 30;
mode = "clamp";
starting_position = 0;
mult = 1;
displace.onEnterFrame = function() {
starting_position += mult;
if (starting_position>349) {
mult = -1;
}
if (starting_position<1) {
mult = 1;
}
offset = new flash.geom.Point(starting_position, 0);
bmp = new flash.display.BitmapData(500, 250);
displacement_map = new flash.filters.DisplacementMapFilter(bmp, offset, channel1, channel2, x_mult, y_mult, mode);
bmp.draw(displace);
bg.filters = [displacement_map];
}; |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
// new code
attachMovie("displace", "displace", 2);
displace._visible = false;
channel1 = 1;
channel2 = 2;
x_mult = 30;
y_mult = 30;
mode = "color";
offset = new flash.geom.Point(0, 0);
bmp = new flash.display.BitmapData(500, 250);
displacement_map = new flash.filters.DisplacementMapFilter(bmp, offset, channel1, channel2, x_mult, y_mult, mode);
bmp.draw(displace);
ball.texture.filters = [displacement_map];
// end of new code
ball.texture.setMask(ball.ball_itself);
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed -= power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed += power;
}
if (Key.isDown(Key.UP)) {
yspeed -= power;
}
if (Key.isDown(Key.DOWN)) {
yspeed += power;
}
xspeed *= friction;
yspeed *= friction;
this._y += yspeed;
this._x += xspeed;
this.texture._y += yspeed;
this.texture._x += xspeed;
if (this.texture._x>158) {
this.texture._x -= 188;
}
if (this.texture._x<-158) {
this.texture._x += 188;
}
if (this.texture._y>158) {
this.texture._y -= 188;
}
if (this.texture._y<-158) {
this.texture._y += 188;
}
}; |
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.
(35 votes, average: 4.74 out of 5)
Loading ...
They can be easily customized to meet the unique requirements of your project.
This post has 22 comments
Jack Hopkins
Awesome!
Keep ‘em coming!
shiv1411
Interesting..
Keep it up!!
shiv1411
congrats~!
this is ur 100th flash tut!
enjoy!
Shadow Scythe
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…
lab.joelGillman.com › False 3D in Flash: Displacement Maps
[...] Understanding Flash Displacement Map Filter Tags: AS3, displacement, flash, photoshop [...]
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…?
matt
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.
Robert Muller Design » Flash Smoke Effect using DisplacementMapFilter
[...] a great explanation of how DisplacementMapFilter works over at Emanuele Feronato’s blog, so I won’t repeat it here. The smoke effect is on the [...]
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.
Philip Thonbo
i did this some years ago
http://www.thonbo.com/tempShowCase/sphear3.html
http://www.thonbo.com/roller_test_mc2.html
http://www.thonbo.com/tempShowCase/lensLab.html
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
SumYungGai
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.
Pure AS3 magnifying effect using Displacement Map Filter : Emanuele Feronato
[...] You can find all information about the displacement filter and the meaning of that gradient sphere on a grey background at Understanding Flash displacement map filter. [...]
Understanding Flash displacement map filter : Emanuele Feronato « Dobos Bence
[...] Posted by dobosbence in Uncategorized. Tagged: Flash. Leave a Comment Article [...]
displacementmapfilter tester - sevenson.com.au
[...] out that that can do a better job than me. One in particular that I found quite helpful was this article written by Emanuele Feronato. Most of it is written in AS2, but the concepts are still the same. [...]
Phil
Awesome, im trying to write my own version that will work with GD/PHP :)
Dave Noel
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.
Inder
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