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

26 comments so far

  1. subblue May 10, 2010 16:11

    That is a subtle effect nicely done.

  2. Og2t May 10, 2010 16:22

    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) :)

  3. Jozef Chúťka May 10, 2010 16:49

    Hi Og2t
    thanks for that tip, I did not noticed DisplacementMapFilter class :-) it could be a good alternative

  4. Phil May 15, 2010 03:10

    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!

  5. Jozef Chúťka May 15, 2010 09:33

    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.

  6. [...] 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: [...]

  7. [...] Efectos 3D usando Pixel Bender. [...]

  8. Chris June 28, 2010 08:50

    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

  9. [...] Bender and displacement maps were so much fun to develop that my next experiment led me to create some more advanced effects. Do [...]

  10. Jozef Chúťka June 28, 2010 11:11

    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.

  11. Jozef Chúťka September 14, 2010 14:02

    Hi anyone, if you are interesting in standalone 3D Displacement Maps, see http://3ddm.yoz.sk/

  12. [...] news everyone, since 3D displacement maps gained big success, I was asked to make a standalone application, so anyone could use it within [...]

  13. payaaa September 27, 2010 19:16

    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..

  14. Jozef Chúťka September 28, 2010 10:01

    @payaaa visit http://3ddm.yoz.sk/ to download them all

  15. payaaa September 29, 2010 09:56

    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

  16. Jozef Chúťka September 29, 2010 14:48

    @payaaa which pbk file did you donwloaded? please send me link

  17. payaaa September 29, 2010 18:11

    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???

  18. Jozef Chúťka September 30, 2010 09:47

    @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/

  19. flashmad October 26, 2010 11:50

    Hi its amazing. I want to learn this. Thanks for the post. as3 rocks.

  20. hieste December 18, 2010 02:55

    @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/

  21. hieste December 19, 2010 23:02

    @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!

  22. [...] 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 [...]

  23. [...] 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 [...]

  24. marius January 25, 2012 19:19

    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?

  25. Jozef Chúťka January 26, 2012 10:34

    @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.

  26. [...] За данный материал, большое спасибо мастеру Jozef Chúťka (Yoz) [...]

Leave a comment

Please be polite and on topic. Your e-mail will never be published.