Lens Flares are often employed by games and movies to add a sense of drama, depth, and realism to a scene. Now it is possible in Papervision as well! I have created a LensFlare class which allows the developer to pass a set of DisplayObjects (movies/sprites/bitmaps) to be used in the flare, as well as a LightObject3D to specify where the flare originates from.
How it Works
Despite their depth, a lens flare is actually a 2D effect generated from a 3D point. The basic premise is to find the angle from the center of the screen to the projected light coordinates:
Once we have found the angle we simply place our flares on the same 2D vector. We know where to place the flares on the vector by specifying a proportion to the light's current distance from the origin for each flare. By default, the LensFlare class distributes 8 flares as shown below. Each number corrasponds to the position in the array of flares you created for the class to use:
How to use the Class
The main components that are needed by the LensFlare class are a RenderLayer, a LightObject3D, and an array of DisplayObjects to use as your flares. All that is left then is to specify the viewport width and height so the flares don't extend way off screen.
-
var light:PointLight3D = new PointLight3D(false);
-
light.x = 3000;
-
light.z = 10000;
-
-
view.scene.addChild(light);
-
-
var lightLayer:RenderLayer = new RenderLayer();
-
view.viewport.addRenderLayer(lightLayer);
-
lightLayer.layerIndex = -100;
-
-
view.viewport.renderLayerManager.sortMode = RenderLayerSortMode.INDEX_SORT;
-
-
//create some halos and add some blur to soften them up
-
var h1:MovieClip = new HaloMC();
-
h1.filters = [new BlurFilter(4,4,2)];
-
var h2:MovieClip = new HaloMC2();
-
h2.filters = [new BlurFilter(4,4,2)];
-
var h3:MovieClip = new HaloMC5();
-
h3.filters = [new BlurFilter(4,4,2)];
-
-
var flareArray:Array = [new MainFlareMC(), new HaloMC4(), h1, new FlareMC(),
-
h2, new FlareMC(),h3, new FlareMC() ];
-
lensFlare = new LensFlare(lightLayer, light, flareArray, view.viewport.width, view.viewport.height);
lightLayer is where the LensFlare will render its content. It automatically derives the light's projected coordinates and distributes the flares based on that position. flareArray contains an array of MovieClips from the FLA included in the source below. The LensFlare class automatically adds these objects to the render layer. The array of flares can be any type of display object: MovieClip, Sprite, Shape, or Bitmap.
You will notice I alternate "halos" and "bursts". You don't have to do this, but I find it to be a much more convincing effect.
To render the LensFlare you need to call updateFlare - typically this would be called in your onEnterFrame handler:
-
lensFlare.updateFlare(true,view.viewport.renderLayerManager.defaultLayer);
The first parameter of updateFlare is a boolean showFlare which is an optional way to show/hide the LensFlare. The second parameter is also optional - testHit which is a DisplayObject the LensFlare will do a hitTest with the light to determine if the flare should be visible or not. If a hit is detected from the flare is hidden. In this example, the default RenderLayer is used to test for a hit. The planet is the only object on that layer, so when the light moves "behind" the planet - it becomes invisible.
Some other notes
You can customize the positions of the flares based on the positions array of the LensFlare class. This is an optional 6th parameter in the LensFlare constructor. It can also be set via the setFlareArray() function to chagne the array after construction. The positions array should be the same length as the flareArray - as each position object corresponds to a flare DisplayObject. Here are the following properties:
- distance : Number - required - the proportion of the light distance from origin used to place the flare.
- scale : Number - required - the amount to scale the flare DisplayObject.
- dScale : Number - optional - the amount of scale to add to the object as it gets further from the center.
- rotate : Boolean - optional - whether or not to rotate the DisplayObject to always keep its left side pointing towards the origin.
- alpha : Number - optional - how much alpha it will fade around the edges. 0 = No Fade -> 1=Disappear.
You can see the default positions array for some pointers on how to use it in the LensFlare class.
And Finally...
You will find in the source I have provided some extra flares for you to play with/use to create your own awesome effects. You can see that the backgrounds can be black, as the flares are all using an additive blendMode. I did not make all the flares included - some were pulled from google images. Have fun, and be sure to show me if you come up with anything really cool!
39 Comments, Comment or Ping
AWESOME!
January 27th, 2008
that’s great, except there shouldnt be any flares in space, right? doesn’t flare come from the light scattered by air?
January 28th, 2008
A lens flare is created by the inhomogeneities in the lens - the light is scattered by the imperfections in the glass. So when you have a bright light on a glass, you get glare, or flares. So, you can have them anywhere - including space. As long as there is a lens with some inhomogeneities
January 28th, 2008
This is great Andy, thanks for sharing it with me in process… came out awesome!
January 28th, 2008
Beautiful work
January 28th, 2008
very nice
January 28th, 2008
COOL
January 28th, 2008
Nice work Andy! Looks great
January 28th, 2008
\m/ X_x \m/
January 28th, 2008
Great effect
Congrats
January 28th, 2008
BRILLIANT
January 28th, 2008
Andy said - “A lens flare is created by the inhomogeneities in the lens - the light is scattered by the imperfections in the glass. So when you have a bright light on a glass, you get glare, or flares. So, you can have them anywhere - including space. As long as there is a lens with some inhomogeneities :)”
The flare itself is caused by the surface of the lens and intra-element reflections (back scatter from the surfaces). The various color distribution seen in a flare is caused by the variation in the thin film coatings on separate lens elements within the lens array.
Lens flares are not created by ‘imperfections’ in a lens.
There are anti-glare coatings for lens systems … but it’s not an imperfection by-product.
January 28th, 2008
@jon - thanks for the in-depth response :P, they do come from multiple sources. I think the important thing though is that it is just a cool visual effect and who really cares where it comes from
January 28th, 2008
Absolutely, it is. But, for those of us (like myself) that work in the vfx field, knowing how and where those effects come from is necessary to make a convincing effect.
kick ass work though man.
January 28th, 2008
This reminds me of kpt6 … good old times. Which in turn reminds me of it’s library of reasonably well customizable flares. Why not develop some kind of architecture for flare definition including spikes, colouring and user-defined shapes, and then let everyone contribute presets ? Would be gorgeous.
January 31st, 2008
Nice i see ,that papervision grows in strength , you surprise me with every new write to blog , time on tests in my application.
congratulations good job !!!
February 6th, 2008
Really awesome.
ActionScript3 become flagman tool for demo-making.
I think, In future Flex would be greater then 3D Studio MAX
February 7th, 2008
I am really astonished…°_°
Effects branch is cooler day by day, your work is awesome
February 17th, 2008
which version of PV is it? i can’t find org.papervision3d.core.layers.RenderLayer in the great white trunk on svn
February 20th, 2008
@HappyPuppy - everything i do pretty much will use the Effects branch. It is the same as GreatWhite but has added classes for 2D (and 3D) effects.
February 20th, 2008
andy: thanx for the reply. i also want to add that i am a big fan of your work, the effects on this site are truly amazing
February 21st, 2008
thank you for posting your finds. I greatly appreciate your work.
I am getting the error:
1067: Implicit coercion of a value of type org.papervision3d.core.layers:RenderLayer to an unrelated type Number.
pertaining to:
var stars:ParticleField = new ParticleField(new ParticleMaterial(0xFFFFFF, 0.75), 1200, starLayer ,20000, 20000, 20000);
I assume it is the “starLayer” (?)
commented out and worked, but no starLayer.
any ideas?
March 2nd, 2008
I’m trying to integrate this code into my own Flex project but I am having some problems. First the lens flare seems to have difficulty detecting hit tests with object in the scene and it seems to also have a weird flicker effect. I’ve posted it online at http://www.philchertok.com/p3d/ Source view is enabled so if anyone could look at it I would greatly appreciate it.
Cheers.
April 16th, 2008
i got this error message:
“1067: Implicit coercion of a value of type org.papervision3d.core.layers:RenderLayer to an unrelated type Number.
June 18th, 2008
for this line:
var stars:ParticleField = new ParticleField(new ParticleMaterial(0xFFFFFF, 0.75), 1200, starLayer,20000, 20000, 20000);
any idea?
June 18th, 2008
help
1061: Call to a possibly undefined method addRenderLayer through a reference with static type org.papervision3d.view:Viewport3D.
July 8th, 2008
I have a problem too with that class and newer Papervision 2 (Public Beta 2.0 - Great White (20.08.08)). Could you show us how to do the lensflare with ViewportLayer instead of RenderLayer ?
I think this is the major problem.
By the way. This class is fantastic!
thanks!
November 12th, 2008
Can you pls show us how to get the hit test working with the revised pv3d code. Pls Andy.
January 28th, 2009
DUUUDE. We need this over in Away3D land.
Anyway to port this over?
February 2nd, 2009
Hello Andy,
your class is fantastic but I can’t manage to use it with GreatWhite.
Can you help me please?
February 6th, 2009
Anyone who did it?
I would appreciate it
February 9th, 2009
Finally I managed to do it. Anyone who wants the source mail me!!!
February 9th, 2009
Hi lemon! How could i mail you? I need this great flare effect working for GreatWhite!
February 17th, 2009
I know this topic may be dead but what is the current status of the Lens Flare in PV3D?
I cannot get it work correctly. Is there still a problem using the Spring Camera?
April 3rd, 2009
Great job again Mr. Andy! Thank you for the effort and the sharing with us!
July 24th, 2009
Hi there
if anyone could mail me the files examples showing this working with Great White I’d appreciate it. Many thanks
September 10th, 2009
So, no one has gotten this working in the latest build of PV3D? Really cool effect, would really like to use it without having to write something from scratch
December 15th, 2009
Great Job!!!
January 20th, 2010
Reply to “Lens Flares - A New Visual Effect for Papervision”