Displacing rocks

So say we’ve got a “layer 1” like this:
http://i.imgur.com/p4iUW.png

And then we have a layer 2 like this:
http://i.imgur.com/Fs0iv.png
And when we overlay layer 2 over 1 and reduce alpha, cut off the edges and blur a bit…
http://i.imgur.com/RuA01.png

Is there some way I can use a displacement map on layer 1 to somehow make the lighter parts bulge out and the darker ones bulge inwards?

E: AS3 of course, and i’d prefer to use a displacement map but anything else could be good too.

You need to use points to represent where the lights are then make a shader to render bumpmap (including diffuse and all the other details you want).

Wow, never thought of that. (I just suggested displacementmapfilter and bitmapdata.applyFilter() over skype) A bumpmap would look really cool.

Originally posted by qwerber:

You need to use points to represent where the lights are then make a shader to render bumpmap (including diffuse and all the other details you want).

Interesting idea (i’ll consider it), but not really what I mean’t. I mean’t basically doing something like it looked like the rocks were pushed forward a little/scaled. Nothing as intensive as a bump map.

If you want a pseudo-3d-ish effect you can try sampling the pixels and scaling them according the the pixel value of the noise map. Be sure to do it in a Y-sorted order.

Originally posted by qwerber:

If you want a pseudo-3d-ish effect you can try sampling the pixels and scaling them according the the pixel value of the noise map. Be sure to do it in a Y-sorted order.

2 Questions.

1. Y-Sorted order?

2. What would I be scaling? The scaleX? scaleY? Z?

lets say you can allow a single pixel to be magnified 3x size. take int((pixel value-1) / 0xffffffff * 3) to get an Int from 0 to 2 (height value). Use that number to redraw the pixel in a larger size. Draw then in a order from lowest height value to highest so you don’t draw the smaller ones on top of larger pixels.

Normal mapping, ho!

Originally posted by Draco18s:

Normal mapping, ho!

ah… SEE? this is why I’m a part of this forum… I freakin learn things.

Is this kind of what you want?

If so, mess around with this:

//Perlin is layer 2
//PerlinMap is your layer 1/2 overlay
const ORIGIN:Point = new Point() //don't f with me

var df:DisplacementMapFilter = new DisplacementMapFilter(new Perlin(), ORIGIN, BitmapDataChannel.RED, BitmapDataChannel.RED, 25, 25, DisplacementMapFilterMode.CLAMP) 
var map:BitmapData = new PerlinMap()
addChild(new Bitmap(map))
map.applyFilter(map, map.rect, ORIGIN, df)

Originally posted by qwerber:

If you want a pseudo-3d-ish effect you can try sampling the pixels and scaling them according the the pixel value of the noise map. Be sure to do it in a Y-sorted order.

Sooo, what a DisplacementMapFilter does? :P

Originally posted by Draco18s:

Normal mapping, ho!

Originally posted by BigJM:

Is this kind of what you want?

If so, mess around with this:

//Perlin is layer 2
//PerlinMap is your layer 1/2 overlay
const ORIGIN:Point = new Point() //don't f with me

var df:DisplacementMapFilter = new DisplacementMapFilter(new Perlin(), ORIGIN, BitmapDataChannel.RED, BitmapDataChannel.RED, 25, 25, DisplacementMapFilterMode.CLAMP) 
var map:BitmapData = new PerlinMap()
addChild(new Bitmap(map))
map.applyFilter(map, map.rect, ORIGIN, df)

Originally posted by qwerber:

If you want a pseudo-3d-ish effect you can try sampling the pixels and scaling them according the the pixel value of the noise map. Be sure to do it in a Y-sorted order.

Sooo, what a DisplacementMapFilter does? :P

Exactly but I’m not sure why you’re applying it to “map”, shouldn’t you apply it to layer1?

You can if you don’t want light and dark areas.

Here we go. Sorted things out in a new project to test it:

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.BlendMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Point;
	
	/**
	 * ...
	 * @author RTLShadow
	 */
	public class Main extends Sprite
	{
		
		[Embed( source="../lib/ground.png" )]
		private var groundClass:Class;
		
		public function Main():void
		{
			if ( stage )
				init();
			else
				addEventListener( Event.ADDED_TO_STAGE, init );
		}
		
		private function init( e:Event = null ):void
		{
			removeEventListener( Event.ADDED_TO_STAGE, init );
			// entry point
			
			const ORIGIN:Point = new Point();
			var groundArt:Bitmap = new groundClass();
			var perlinData:BitmapData = new BitmapData( groundArt.width , groundArt.height );
			var perlin:Bitmap = new Bitmap( perlinData );
			var dispFilter:DisplacementMapFilter = new DisplacementMapFilter();
			
			perlinData.perlinNoise( 50, 50, 10, Math.random() * 10000, true, true, BitmapDataChannel.RED, true );
			dispFilter.mapBitmap = perlinData;
			dispFilter.mapPoint = new Point( )
			dispFilter.componentX = BitmapDataChannel.RED;
			dispFilter.componentY = BitmapDataChannel.RED;
			dispFilter.scaleX = 50;
			dispFilter.scaleY = 40;
			dispFilter.mode = DisplacementMapFilterMode.WRAP;
			
			groundArt.filters = [ dispFilter ];
			
			addChild( groundArt );
			addChild( perlin )
			
			perlin.blendMode = BlendMode.OVERLAY;
			perlin.alpha = .5;
		}
	
	}

}

I did a few things here.
1. Removed lava- going to put it on seperate bitmap to avoid the warping and color differences.

2. I had the edges blurred and the noise a little smaller than the image- I removed that.

3. Overlaid with 50% alpha and BlendMode.OVERLAY, also, I made the scaleX of the distortion 50 while the Y was 40. This way it looks better because I’ll be only running right in game.

Ends up with this:

I’m genuinely pleased with the result. I’ll probably tweak it some more, but for now I like it.

Nice result!

Yeh, not bad at all. The only thing that looks weird is that the rocks flow in the same angled direction and are stretched super long some times.

Originally posted by UnknownGuardian:

Yeh, not bad at all. The only thing that looks weird is that the rocks flow in the same angled direction and are stretched super long some times.

I’m not even going to attempt to fix that XD For now it’s pretty good because they’re going to be passing by pretty quickly anyways.

But if the rocks were undergoing, say, an x-rotation, would the rocks retain their 3D properties?

You’d have to adjust the x and y scale of the displacement map.

Originally posted by jasonjie88:

But if the rocks were undergoing, say, an x-rotation, would the rocks retain their 3D properties?

They’re not even true 3D, it’s just an optical illusion. Plus I really don’t think that it looks bad right now- I think it looks pretty realistic. Not sure what a rotation would accomplish anyways.

Originally posted by RTL_Shadow:

Originally posted by jasonjie88:

But if the rocks were undergoing, say, an x-rotation, would the rocks retain their 3D properties?

They’re not even true 3D, it’s just an optical illusion.

Just like any 3D on a computer.

http://megaswf.com/s/2476314

Click “Play flash full screen”.

Originally posted by BigJM:

Originally posted by RTL_Shadow:

Originally posted by jasonjie88:

But if the rocks were undergoing, say, an x-rotation, would the rocks retain their 3D properties?

They’re not even true 3D, it’s just an optical illusion.

Just like any 3D on a computer.

http://megaswf.com/s/2476314

Click “Play flash full screen”.

Really nice. ♥

Thanks. It looks a lot better when it’s not scaled up so much (obviously, it’s a bitmap) but I couldn’t find a good SWF hoster. Here’s the code if anyone’s interested.

const SCALE:Number = 40
const ORIGIN:Point = new Point()

var sourceMap:BitmapData = new Map()
var mapBD:BitmapData = new BitmapData(sourceMap.width, sourceMap.height)
var perlinBD:BitmapData = new BitmapData(sourceMap.width, sourceMap.height)
perlinBD.perlinNoise(50, 50, 10, Math.random() * 10000, true, true, BitmapDataChannel.RED, true)

var dmf:DisplacementMapFilter = new DisplacementMapFilter(perlinBD, ORIGIN, BitmapDataChannel.RED, BitmapDataChannel.RED)

var container:Sprite = new Sprite()
addChild(container)
container.x = stage.stageWidth / 2
container.y = stage.stageHeight / 2

var map:Bitmap = new Bitmap(mapBD)
container.addChild(map)
map.x = map.width / -2
map.y = map.height / -2

var perlin:Bitmap = new Bitmap(perlinBD)
container.addChild(perlin)
perlin.x = perlin.width / -2
perlin.y = perlin.height / -2
perlin.alpha = .5
perlin.blendMode = BlendMode.OVERLAY

addEventListener(Event.ENTER_FRAME, run)
function run(e:Event):void {
	var t:Number = container.rotation++ * Math.PI / 180
	dmf.scaleX = Math.sin(t) * SCALE
	dmf.scaleY = Math.cos(t) * SCALE
	mapBD.applyFilter(sourceMap, sourceMap.rect, ORIGIN, dmf)
}

Pretty simple. Map is this image.

Woah. I had no idea. I’m going to have to play with that.

Edit: I think the current effect I have right now and bump mapping would look great- I might look into it.