Parallax Displacement Map

[SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)]

var canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
addChild(new Bitmap(canvas));

// create a radial gradient
var radial:Shape = new Shape();
var m:Matrix = new Matrix()
m.createGradientBox(500,500,0,0,0);
radial.graphics.beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x000000], [1, 1], [0, 200], m, SpreadMethod.PAD);

radial.graphics.drawRect(0,0,500,500);
radial.x = radial.y = 0;

var displace:BitmapData = new BitmapData(500, 500, false,0xFF000000);
displace.perlinNoise(150,150, 3, 30, true, false,0,true);

// try different blendmodes here
displace.draw(radial, null ,null, BlendMode.LIGHTEN);
 
var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(displace, new Point(0,0), 1, 1,  0, 0, DisplacementMapFilterMode.WRAP);

var scale:Number = 50 / stage.stageWidth;

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
 
	canvas.copyPixels(displace, canvas.rect, new Point(0,0));
	 
	displacementMap.scaleX = 25 - mouseX  * scale ;
	displacementMap.scaleY = 25 - mouseY  * scale ;
	
	canvas.applyFilter(canvas, canvas.rect, new Point(0,0), displacementMap);
}

This one is hard to describe, so take a look at the swf first .

I think displacement maps are underused – they’re very powerful. In this snippet I use a DisplacementMapFilter to create a parallax effect on some perlin noise and a radial gradient. The result is an abstract texture that looks 3D.

I got the idea from a demo for the alternative game engine. The first time I saw this demo I had no idea how they were doing it… but after looking at it a few times, I noticed some distortion around the neck area of the model… at that point I recognized it as a displacement map and whipped up a demo (using a drawings as the source image). The alternativa demo also has some color stuff happening to simulate lighting… I’m assuming that’s done with a ColorMatrixFilter or two, but I’m not sure.

As in the alternativa demo, this technique could be used with 2 images… one depth map rendered out from your favorite 3D app and one textured render….