Pixel Bender Displacement Map Fakes 3D Effect (update)
Few days before I saw an amazing 3d effects on VidazPhoto. That made me want to master this effect. So, starting today morning I played around with flex and pixel bender and here are the results. I have created simple pixel bender kernel that uses monochromatic bitmapData to calculate amount of displacement for each pixel. All you have to do, in order to make your 2D images become 3D, is to create monochromatic map (black & white image) with the same dimensions as the original image (use lighter colors for closer objects, darker colors for distant ones). Than, based on rotation, push correct amounts of full displacement (dx, dy displacements for full white color) into shader. The displacement is linear starting on 0, 0 for black color, up to dx, dy for white color. All sources available to download.
First, here is the final application with displacement map used to fake 3D effect:
Click mouse to change images, move mouse to rotate image. Full ActionScript 3 code can be also downloaded from wonderfl. The core of this app are those few lines:
shader.data.map.input = Bitmap(mapLoader.content).bitmapData; shader.data.dx.value = [imageContainer.rotationY]; shader.data.dy.value = [-imageContainer.rotationX]; filter = new ShaderFilter(shader); imageLoader.filters = [filter];
simple displacement with pixel bender – SimpleDisplacer.pbk
<languageVersion : 1.0;>
kernel DisplacementMap
<
namespace : "sk.yoz";
vendor : "Yoz";
version : 1;
description : "Displacement by bitmap map";
>
{
input image4 src;
input image1 map;
output pixel4 dst;
parameter float dx
<
minValue: float(-1000.0);
maxValue: float(1000.0);
defaultValue: float(0.0);
description: "The amount of displacement on x axis.";
>;
parameter float dy
<
minValue: float(-1000.0);
maxValue: float(1000.0);
defaultValue: float(0.0);
description: "The amount of displacement on y axis.";
>;
void evaluatePixel()
{
float2 pos = outCoord();
float amount = sampleLinear(map, pos);
float2 displacedPos = float2(
pos.x + dx * amount,
pos.y + dy * amount);
dst = sampleLinear(src, displacedPos);
}
}
I have used image1 input type for monochromatic map (black and white bitmap), its enough and its superfast.
Due to great success, I have added fader parameter. Fader can be used for depth of field or, alpha transparency etc. You can download advanced pixel bender source here.
Did you know you can make anaglyphs using this technique?
See standalone versions & download on 3ddm.yoz.sk
That is a subtle effect nicely done.
Very nice! I’ve seen similar technique on http://www.yell.com 3D maps. I suppose you could use a Flash standard DisplacementMapFilter, it could be even faster (AFAIR from Saqoosha’s experiments)
Hi Og2t
it could be a good alternative
thanks for that tip, I did not noticed DisplacementMapFilter class
This is amazing – question: How did you create the monochromatic image, and could you post the images you used here to help us get started?
Nice Work!
Hi Phil,
I create monochromatic images in photoshop by hand, it needs a little practice and some time to get good results. My tip: use strong gaussian blur to finalize map.
You can follow the source code to download all images and maps:
http://blog.yoz.sk/examples/pixelBenderDisplacement/china.jpg
http://blog.yoz.sk/examples/pixelBenderDisplacement/chinaMap.jpg
etc.
[...] Alchemy C++ 2D Engine: http://www.sideroller.com/wck/ Pixel Bender 3D effects: http://blog.yoz.sk/2010/05/pixel-bender-displacement-map-fakes-3d-effect/ Minko 3D: http://demo.minko.in/2 Sound generation: [...]
[...] Efectos 3D usando Pixel Bender. [...]
Hi, great effect !!!! Thanks a lot.
Sometimes ( not always ) when testing movie have this kind of error
ArgumentError: Error #2163: The Shader input type map is not compatible for this operation.
at flash.display::DisplayObject/set filters()
at PBDisplacement/enterFrame()
Do you have any clue what can be a reason ?
The pixel bender wont transform images – and crash Flash IDE .
thanks
[...] Bender and displacement maps were so much fun to develop that my next experiment led me to create some more advanced effects. Do [...]
Hi Chris,
thnx. May it be caused by the http request error? It will get fixed once you embed images and maps into your app.
Hi anyone, if you are interesting in standalone 3D Displacement Maps, see http://3ddm.yoz.sk/
[...] news everyone, since 3D displacement maps gained big success, I was asked to make a standalone application, so anyone could use it within [...]
oh man dese are out of d world effects…hey pls pls lemme noe how can i download dese effects…i m gvng my prsntatn on pixel bender…pls..
@payaaa visit http://3ddm.yoz.sk/ to download them all
i have downloaded PB toolkit from Adobe website…while running d code i get error in 0th line which say that dis is not supported by d toolkit
@payaaa which pbk file did you donwloaded? please send me link
http://classes.yoz.sk/sk/yoz/displacing/FadeDisplacer.pbk this is the pbk file i downloaded…now my toolkits UI area says that the image i m using is not supported by the toolkit…though it is the one provided in the toolkit itself…
do i need any other software???
@payaaa there are 3 inputs on my pbk, I guess your toolkit does not let you input 3(?)
what I use to develop pbk is PBDT eclipse plug-in, read and download here http://blog.joa-ebert.com/pbdt/
Hi its amazing. I want to learn this. Thanks for the post. as3 rocks.
@Jozef, i have problems when i try to use your code. I receive the following error:
Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: file:///C|/Temp/SimpleDisplacer/PBDisplacement.swf cannot load data from http://www.mysite.com/flash/SimpleDisplacer.pbj.
atPBDisplacement()
Thus, could you please verify that SimpleDisplacer.pbj, which can be found in http://classes.yoz.sk/, is the displacementMap.pbj, that you use in your example project?
PS: i have difficulties to compile the .pbk-file, that you provided. For that reason i use the SimpleDisplacer.pbj-file that i found in http://classes.yoz.sk/
@Jozef, please do not answer to my previous comment. I have found the problem! It was a missing crossdomain.xml that caused the above error!
[...] just saw a nice little effect on Jozef Chúťka blog, and thought it would be fun to try to do it in javascript. The 3D transformations part is [...]
[...] just saw a nice little effect on Jozef Chúťka blog, and thought it would be fun to try to do it in javascript. The 3D transformations part is [...]
how can we achieve the same effect on a png? so in the transparent parts of it I can still see the background of my app. it’s not possible isn’t it?
@marius, you can use png. while both jpeg or png are converted to bitmapData that flash/pb takes advantage of. however with transparent spaces you may see some interferencing pixels because of the nature of displacement.
[...] За данный материал, большое спасибо мастеру Jozef Chúťka (Yoz) [...]