Flash bitmap filters (ie: DisplacementMapFilter, perlinNoise) and CPU usage

I was looking for a way to animate water in qilania (our virtual world) and I found some quick code using the DisplacementMapFilter and perlinNoise, which seems very realistic for our traditional way to animate stuff (more like cartoons), but is a quick and acceptable hack which can actually fit with our design and will save some time to the illustrator in chief.

But seems that kind of scripted animation (should say more “effect” than animation) consumes so much CPU, specially in the SmartFox/OpenSpace environment which uses to be 30fps by default.

After some researching and looking for alternative methods, we decided the fractal noise was looking so nice after all, but we needed some way to save some CPU and RAM for the end user, specially looking towards old machines and architectures. And we found a way to decrease it. This is a very simple tip: decreasing the frame rate. We did it this way (follows pseudo-code):

this.addEventListener(Event.ENTER_FRAME, go);
var nvar:int = 0;
function go(evt:Event):void {
	nvar++;
	if(nvar%3==0){
		// perlinNoise stuff...
	}
}

This way we reduced the filter to 1/3 (that is 10fps for a 30fps project), which saves more than 50% of the CPU at execution time.

It’s still so much, but minimum enough and, after all, we don’t have water in all our maps!

Hope this simple idea can help someone in a future: the simple, the better 😉

Advertisement

1 thought on “Flash bitmap filters (ie: DisplacementMapFilter, perlinNoise) and CPU usage

  1. Simple but sweet, should’ve thought of this myself! I was having some trouble getting my perlinnoise effect to work at acceptable cpu usage levels, especially IE 8 was having trouble.

    This is the effect im using in my project by the way, check it out, it’s pretty cool: http://blog.soulwire.co.uk/laboratory/flash/perlin-noise-flow-field.

    This simple trick helped a lot, as did decreasing the number of octaves in the perlinnoise function, limiting the size of the area and removing some transparent graphics and backgound animations that overlapped with the effect.

    Hope i can find some more ways to optimize this, its’ such a nice effect but difficult to use effectively in more complicated scenes.

    Good luck with your blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s