Animating Multiple Pixel Bender Lights

Intro
Having multiple lights in PV3D is a desired effect. But after going through the lightmap classes, let me say that it’s impossible without an major rewrite. But with Pixel Bender all you do is add another term to your pbk filter…let’s do it!

Animating Pixel Bender Lights

Demo

Source

Discussion

It’s an amazingly simple process. Just add another term to your pixel bender light equation as shown below:

Adding Multiple Images to PV3D

The example above only shows two lights, but you can have as many lights as you want just by adding additional light terms:

The pixel bender code looks like this

float2 outcoord = outCoord();
float attn = (brightness1/((distance(outcoord, center1)+radius1)))+(brightness2/((distance(outcoord, center2)+radius2)));

dst = attn* sampleNearest(src, outcoord);
dst.a=1.0;

Wow, only five lines of code to have multiple light sources – get out of here!

Animating Your Sources

Once you’ve set your shader up then animating it is pretty easy. If you aren’t sure how to set up your shader for animation, check out Lee Brimlow’s video on animating shaders. I do it a little differently than Lee, but not by much. Here are the steps for animating the lights:

1. Increment your oscillation parameter osc++
2. Calculate sine and cosine based upon your incremented osc
3. Update your light positions
4. Apply the update to your image

The fully documented code is shown below:

private function loop(e:Event):void{

//Increment your oscillation parameter
osc++;
//Calculate sine and cosine
var cos:Number=150*Math.cos(osc/10);
var sin:Number=150*Math.sin(osc/10);
//Update your light positions
shader.data.center1.value = [sin+400, cos+180];
shader.data.center2.value = [cos+200, sin+180];
//Apply the update to your image
image.filters = [filter];
//Rotating your image holder
holder.rotationY+=.25;
}

If you are aware of how hard this is to do in PV3D, you’re going wow…tell me more…and we will…

For the entire source code download the source above, or check out the link below:

Wrapper Code

package {
import flash.display.*;
import flash.events.Event;
import flash.filters.*;

public class AMultipleLights extends Sprite
{
[Embed (source="filters/lights2lively3d.pbj",
mimeType="application/octet-stream")]
private var ShaderClass:Class;

[Embed (source="assets/Canyonlands.png")]
private var myImage:Class;

private var shader:Shader;
private var osc:int=0;
private var image:Bitmap;
private var filter:ShaderFilter;
private var holder:Sprite=new Sprite();
//

public function AMultipleLights()
{

shader = new Shader(new ShaderClass());
filter = new ShaderFilter(shader);

shader.data.brightness1.value = [100];
shader.data.radius1.value = [1];

shader.data.brightness2.value = [100];
shader.data.radius2.value = [1];

image = new myImage();
this.addChild(holder);
holder.addChild(image);
holder.x=(image.width/2);
image.x=-(image.width/2);
//holder.scaleX=holder.scaleY=.75;
holder.z=300;
holder.y=0;

image.filters = [new ShaderFilter(shader)];
shader.data.src.input = image.bitmapData;

this.addEventListener(Event.EXIT_FRAME, loop);

}
//Create and animation loop

private function loop(e:Event):void{

//Increment your oscillation parameter
osc++;
//Calculate sine and cosine
var cos:Number=150*Math.cos(osc/10);
var sin:Number=150*Math.sin(osc/10);
//Update your light positions
shader.data.center1.value = [sin+400, cos+180];
shader.data.center2.value = [cos+200, sin+180];
//Apply the update to your image
image.filters = [filter];
//Rotating your image holder
holder.rotationY+=.25;
}

}
}

About these ads