[SHOW] DisplacementMapFilters!

[VENGEANCE MX]

As I've shown already, I'm working on a Geometry Wars clone. Obviously the coolest part of Geometry Wars was how the grid would bend away from powerful attacks or explosions, so I tried to recreate that with DisplacementMapFilters:

http://www.birchlabs.co.uk/GridDisplacement.swf

Now, it's not a perfect recreation of the effect (should be bending away, but instead it's just bending), but I think it's just as cool, and works just as well. In order to properly recreate it, that'd obviously require Drawing API and more complicated maths than I've ever encountered.

The difference with this DisplacementMapFilter example (as opposed to, say, the one I tinkered with to make it... not sure who made it, it's been gathering dust in my BitmapData folder for a while) is that it's a lot more optimized. The ripple is pre-rendered (so where there was originally a blur being done in real-time, I'm draw()ing it into an array of BitmapData objects), and I'm using copyPixels() instead of draw() to place the ripple onto the BitmapData object to be displaced.

[Squize]

Nice. I've got a need to do a GWars game too, and I was thinking of displacement maps for the background grid.

Bugger, beaten to it

Good work mate,

Squize.

[renderhjs]

rofl,- that´s a great idea,- that way one could create a tile terraign with heightmap displacement - very cool.

have you used some 3d tools to generate the normal/ displacement maps?- I´ve seen others doing that for generating certain displament effects - though of course it would be even cooler if the displacemet wans´t prerendered but rather interactive - but still very cool

[VENGEANCE MX]

Thanks Squizeh. We all know you're still the king when it comes to particles, though.

@Render:

No 3D involved... the DisplacementMapFilter is just a filter you apply to the grid movie clip. This filter is generated from a BitmapData object (easiest to think of it like an alpha channel). The lighter each pixel is in the BitmapData, the more the filter moves down the corresponding pixel in the movie clip. So, for example, if I had a white pixel in the top-left corner of my channel, it'd move the top-left pixel of the grid up by 40 pixels (this value changes depending on the scaleX and scaleY values you choose), and if it were black, the corresponding pixel on the movie clip would be moved down by 40 pixels instead.

In order to get the sloping gradient that the ripple had, I used a blur filter on my channel.

As I already said, this exact effect has been shown on FK before (not sure who made it, just found the file in my BitmapData folder)... here's the original file I tweaked:

http://www.birchlabs.co.uk/gridwarp.swf

^ Difference is that I fixed the bugs and optimized it a fair bit. Can't take credit for the blur filter idea, he did it before me.

So as you said, it'd be incredible for heightmapping. I can see some really good hills being made with it, and it's easy as hell to work with. In fact, it'd be very interesting to see it combined with a blurred Perlin Noise effect.

[alillm]

I tried doing it the proper way (using the drawing API) just for fun when I was making the original neon, I got it to work, but as expected, it ran at about 10 fps in the standalone flash player. I probably could have optimised it a lot, but obviously it would never have been usable, especially online and with other action going on.

Still this is a nice effect, and sure would look good in game. Good luck with your geometry wars clone . I still love a good abstract arena shmup, although I've had enough of making neons for the time being.

Ali

[renderhjs]

no I know how the displacement filter works in Flash,- been playing a year ago myself with it.
I was talking about somethign like this:


like I said I´ve seen others rendering normal maps or displacement maps as they are called in 2d tools and combining them.
There are even shaders for 3d tools that generate normal map shaders on the fly- just taking a screenshot would be enough.
That way it would distort the image in flash based on the normal map and any projected 3d object could be used as displacement map.

If I am not mistaken the previous author (the one you got a flash file from ) rendered the normal map as well.
here is a read on normal maps in the 3d package modo (but almost any propper 3d tool will do [max,maya,lightwave(with plugin),...]

[VENGEANCE MX]

I'm using essentially the same system as the previous author, and this is the displacement map I'm using:



Not sure if that's what you're talking about, but I didn't use a 3D program, and neither did he. :s

And returning to your comment on how it'd be cooler if it were interactive rather than pre-rendered, it can be (original file was). Just wouldn't be as fast.

[renderhjs]

well it seems that you have just a greyscale (each R,G,B value set equal)- wich is just a height map as it only displaces pixels in 1 direction.

A normal/displacement map with the use of different colors for different push- directions could blow the to be diplaced image with more volume.

I used the displament filter in flash for a panorma effect- where I combined color 2 gradients to fake the spheric volume. Something like that wouldn´t be possible with just a greyscale displacement map (displacing like a sphere with volume)
I found a pretty good explaination that explains what I did too:
http://objectpainters.com/blog/?m=200701

I just mentioned 3d applications because they are truly improving rapidly on that topic where most 2d applications still dont have propper support for it. On the nVidia website there is a plugin for photoshop that lets you convert alpha maks to normal maps on the fly - with 3d preview.

[Cimmerian]

well it seems that you have just a greyscale (each R,G,B value set equal)- wich is just a height map as it only displaces pixels in 1 direction.

It can displace in 2 directions,i mean, in the x and y axis, even if colorX and colorY have the same value, and also can change the powerX and powerY to make one direction to go more then another

[Cimmerian]

Anyway, that tutorial is good, but when comes the part
'apply the base map(see resource for the map or the creation mechanism)'
it could talk a little more...seems to be the most important step...

[realMakc]

all you ever need to know about displacement maps is in the docs:

dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256, y + ((componentY(x, y) - 128) * scaleY) / 256]

no need for tricks, just do the math.

[Squize]

V, what framerate you getting if you set it to 120 mate ?

I'm working on a scripted version, and I'm struggling to get it over 50fps atm ( Although that's with a bit of motion blur ).
I know yours is going to be quicker, I'm just interested to see by how much ( It'll mean if I spend more time on this or not ).

Current project is 3 weeks behind, and I'm dicking around with a grid :S

Squize.

[VENGEANCE MX]

You know my computer's not famed for being fast, no framerate readings I could give you would be reliable.

I always did know one more way to make it faster; previously, the filter area was the entire stage. This is ideal if we don't know how big the channel was going to be (for example, if we had multiple ripples in different places, we wouldn't know what dimensions we'd need for the BitmapData to fit them in; strictly speaking, we can work this out with simple addition and subtraction, but I didn't consider that at the time). If we are to assume that we're only going to use one ripple animation in the channel (like in this case), we don't need to worry about combining all the ripples into one BitmapData, we can just use the ripple's BitmapData directly.

Anyway, long story short, I saw a major new optimization I could make, so I decided to do it before I shared the source. Added an FPS counter, too. And yes, it's commented to bits.

http://www.birchlabs.co.uk/GridDisplacement.zip

I've made the optimizations to the online version, too. If you don't see the FPS counter, you need to refresh:
http://www.birchlabs.co.uk/GridDisplacement.swf

I'm getting 40-60 fps in the browser (just to give you some scope, I'm still on the same Mac I used to work on Polarity ), and a constant 60 fps in the standalone player.

[renderhjs]

runs faster now here (28 fps),- and that on a very old computer, good job

[Squize]

That frame counter looks familiar

Got mine running at 60/70 ( Forgot to lock() the bitmap, which gave me a boost ), not sure how much more I can get out of it ( Although it handles multiple ripples ).
As soon as it's in a fit state I'll post it up.
Just to flag it up a lot of the clever stuff came from a fla on liquid journey.

Yours is running much quicker than mine, slowest is mid 80's, but in the 100's a lot. I'll have to check your code and see what I can borrow

Squize.

[VENGEANCE MX]

thanks guys. Glad I could be of service, Squize.

[VENGEANCE MX]

(Would've edited the previous post instead of double-posting, but obviously I can't)...

Made a few changes. The engine now supports multiple objects (just two for the moment, but this can be rectified fairly easily, just need some loops in there):

http://www.birchlabs.co.uk/GridDisplacement3.swf

Now, this is using the entire stage as a displacement filter, so that's 220,000 pixels being displaced. Not ideal. So I optimized it a bit more:

http://www.birchlabs.co.uk/GridDisplacement4.swf

This example culls any unnecessary pixels. Was devillishly tricky to get working, loads of local and global coordinate headaches. But the end result is, it's no longer displacing the whole stage - just the area of the two animations and anything in between.

Although, as I write this, I can still think of one more speed boost. Instead of combining the animations into one channel, in some cases (ie, when they're not overlapping too much) it would be faster to just displace both of them separately. I'll try that later today...

[mr_malee]

looks good, but can you slow it down. I can't actually see the effect well

if you're looking at ripples, look into the convolution filter, there's some sequence you can plug in which simulates a ripple effect (no displacement) but it looks really nice.

[Squize]

On version 4 it's running mid 40's for me ( Great, means mine isn't that bad )

I'm close to reaching the limit with the way mine's set up, I've even speeded up the bitmap line drawing routines ( Based on the class at bytearray.org ).

Squize.

[Squize]

Here's what I've managed to come up with:

http://blog.gamingyourway.com/content/binary/GWars.swf

And for anyone wanting to grab the line plotter code,

http://blog.gamingyourway.com/Defaul...c-8f2a757c3d9b

Squize.