blog

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:

flash on 2010-5-10 – wonderfl build flash online

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

Pixel Bender Displacement Map Fakes 3D Effect + Depth Of Field – wonderfl build flash online

payaaa — 2010-09-29: 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???

Jozef Chúťka — 2010-09-30: @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/

flashmad — 2010-10-26: Hi its amazing. I want to learn this. Thanks for the post. as3 rocks.

hieste — 2010-12-18: @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/

hieste — 2010-12-19: @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!

Displacement map in javascript on canvas | KenshoDubs — 2011-01-04: […] 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 […]

KenshoDubs » Displacement map in javascript on canvas — 2011-10-11: […] 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 […]

marius — 2012-01-25: 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?

Jozef Chúťka — 2012-01-26: @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.

СОЗДАНИЕ ПСЕВДО 3D ЭФФЕКТА ВО FLASH | flashthemes.ru — 2012-02-02: […] За данный материал, большое спасибо мастеру Jozef Chúťka (Yoz) […]