Lens Flare Tutorial

Published October 19, 1999 by Alan Gordie, posted by Myopic Rhino
Do you see issues with this article? Let us know.
Advertisement
[size="5"]Objective

To explain how to create the over-used, totally hyped "Lens Flare" effect that everyone seems to be talking about these days.

"Did you see the screenshots for , they had the coolest Lens Flares!!!"


[size="5"]Assumptions

I assume that you are familiar with 2d coordinate systems.

I assume that you are capable of using blit to compose the image.


[size="5"]Explanation of the Concepts

The basic idea is that when a bright light passes in front of a camera in real life, it typically creates a glare on each of the lenses within your camera. The physics of why and how the optics of lens flares work are irrelevant to achieving a believable effect.

Now, in your typical polygon-based 3d engine, you don't actually use multiple lenses in your calculations so we need to find a way to "fake" the illusion that the light is glaring off of several lenses within your virtual camera.

[size="3"]Ingredients:
[bquote] The position of a light in screen coordinates(lx,ly).
The position of the center of the screen in screen coordinates(cx,cy).[/bquote]
Now that we have these two positions, we can calculate the direction vector from the center of the screen to the position of the light.

fig1.png


// find the direction vector from the center to the light
vx = cx - lx;
vy = cy - ly;
Then normalize the direction vector so we can use it for scaling purposes.

NOTE: STORE THE LENGTH OF THE VECTOR...we'll call ours "length"

You'll also need several images to use as components of the effect. One of these images is typically a star-burst type of image. The others are usually halo type images. See below.

fig2.png


OK, so now we have three vectors:
[bquote] cx,cy = center of the screen
lx,ly = position of the light
vx,vy = normalized direction vector from the center to the light[/bquote]
and the four images from above...

Here comes the easy part...

Simply scale the normalized direction vector by the length to get the center coordinate of where to draw the primary "star-burst" image.

vx = vx * distance;
vy = vy * distance;

If you are using blits, then you infer your top, left, right and bottom coordinates from this new center vector...for example an image that has dimensions of 128x128 you would do something like this...(plenty of room for optimizations here...)

top = vy - 64 + cy;
left = vx - 64 + cx;
right = vx + 64 + cx;
bottom = vy + 64 + cy;
// NOTE: MAKE SURE TO OFFSET BY THE CENTER POINT

Now, for each of the other elements of the lens flare, simply use variations of the length variable in the scaling of the direction vector:

I've found the following values to work quite well...

FlareLength ScaleImage ScalePrimary Flarelength1.0First Halolength/2.5Small Burstlength/3.25Next Halolength/81.0Next Burst-(length/2).5Next Halo-(length/4).25Next Burst-(length/5.5).25Try playing around with different images, length scales and image scales. FYI...don't use divides, instead calculate the reciprocals and multiply by those...MUCH FASTER. (e.g. DIV2 = 1.0f/2.0f; newlength = length*DIV2;...this is the same as newlength = length / 2.0f, but around 15 times faster to process...)


Below you can see a shot of the effect at work...Notice the lack of proper alpha-blending, this was due to the fact that I slapped the lens flare test project together with C++ Builder using straight SRCAND-style "blits"...gets the point across and only took about a half-hour to code...

lens-flare-tut-shot1.jpg


For an actual high-quality example of this algorithm at work, be sure to download the Venom demo on March 2, 1998.

I hope you have enjoyed this short tutorial, if you have any questions or would like the source code to the C++ Builder project that this screen shot is from, send me an email.

-[email="3dguy@mediaone.net"]Alan Gordie[/email]


Reprinted with Permission
Cancel Save
0 Likes 0 Comments

Comments

Nobody has left a comment. You can be the first!
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!

This is a simple, well written tutorial for implementing increasingly popular lens flares.

Advertisement
Advertisement
Advertisement