Displacing rocks

24 posts

Flag Post

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.

 
Flag Post

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

 
Flag Post

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

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

 
Flag Post

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.

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

 
Flag Post

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.

 
Flag Post

Normal mapping, ho!

 
Flag Post
Originally posted by Draco18s:

Normal mapping, ho!

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

 
Flag Post

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

 
Flag Post
Originally posted by Draco18s:

Normal mapping, ho!

I tried to understand normal mapping in 3DS. Failed…
 
Flag Post
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?

 
Flag Post

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

 
Flag Post

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.

 
Flag Post

Nice result!

 
Flag Post

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.

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

 
Flag Post

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

 
Flag Post

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

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

 
Flag Post
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”.

 
Flag Post
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. ♥

 
Flag Post

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.

 
Flag Post

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.