Tip:
Highlight text to annotate it
X
(buzzing)
Hey, everybody. This is Bill Kladis.
Welcome to imbueFX.
Today, we're going to be talking about
a highly-requested set of tutorials.
That's how to use the lens flare system inside of UDK.
Our goal here is to create a pretty simple lens flare
based off an anamorphic prime lens.
In case you're wonder what that is, it's a type of lens
that's used pretty heavily inside of Hollywood.
A lot of movies, like Star Trek and Transformers,
utilize it pretty extensively.
It's kind of spilled its way into TV,
and especially into games.
Every lens flare composes of a source,
which is our main body right here,
and then separate elements.
As I move around here, we can see these
different glass elements that we've got moving.
Then, we've got this long streak as well.
We're also going to be talking about things
like distance maps.
If we keep our eye on these elements right here,
as I pan back, we can see that those fade out
based on distance, right?
The long streak did the same thing as well.
We can adjust things like color, size,
whatever we want, with these.
We're also going to be talking about radial distances.
If we notice here, the core of our lens flare,
as it's towards the center of the screen.
I'm positioning it roughly center here, now.
As I move, so that the camera pans,
and the lens flare gets towards the bottom,
we can notice that it gets much darker.
This is all done through the material,
based on screen position.
I'm clamping it, so that it doesn't completely go away,
but it definitely fades out considerably.
We can see it as we go down here as well.
The last thing we're going to talk about, too,
is occlusion culling.
If we go underneath the world, here,
and we look at our lens flare,
we get to a point where the lens flare
will disappear and fade out.
That actually isn't set up automatically,
so we're going to learn how to set up our bounds.
It's going to compare that, based on
surrounding geometry and the camera angle,
and determine when to fade out, like we see here.
We'll do a quick breakdown here.
If we go in the Content Browser,
included with the download is a sample package.
We can see that we've got our lens flare group.
We have a finished version and start version,
so you can take a look at the finished version
if you want to just break it down,
or see if there's something that you can change really quickly.
The main elements here are the textures.
We've got the source, which is our star burst shape.
Going all the way to the left here,
we've got our streak, which is that long streak
that's going horizontally.
Then, we've got our lens elements.
These are supposed to represent the scattering
of light inside the actual lens.
Just to break it down a little more scientifically,
every lens pretty much has multiple glass elements.
It's not just 1 piece of glass.
When we have a lens flare,
it's bouncing off and doing different things
based on the shape of the iris,
and the different lens elements as well.
This is when we get shapes like this.
Again, this is a pretty basic example.
This is a pretty comprehensive tutorial,
but we're not going to cover every little detail.
This will definitely get your feet going,
and definitely understanding the particle sytem
a little better.
We're assuming that you have some basic UDK knowledge,
but most importantly, you want to know
how to use Cascade, at least a little bit.
The 2 interfaces are very related.
If you find yourself getting lost trying to move around,
it might be a good idea to check out some tutorials.
My Cascade Complete Beginner's Guide
is available for sale on 3Dmotive,
so you can just go to imbueFX,
and use the link inside of my store
to be able to download it and purchase it.
With all that said, let's go ahead and get started.
Okay, great. If you're going to be following along,
step-by-step, with this tutorial,
you want to make sure you go
inside of the Content Browser and hit this little folder
to open up an external package.
Included with your download,
is this imbueFX LensFlare UDK.upk.
Make sure you double-click on that to open it up.
Then, inside of the Level Editor itself,
you want to go to Open,
and there's going to be a Start and Finish version of the map.
You want to open up the Start version.
Now, this just includes a very, very simple level
that I put together just for demonstration purposes.
It's got a floor, some geometry, a light added.
Then, it's got the start version of this lens flare sytem
already added for us.
We can see that right there.
If I go into Wire Frame,
just something I want to quickly note.
This is the exact same icon that we're used to seeing
with particle systems, so there's no easy way
to look at this icon and differentiate between the 2.
Just be warned of that.
If we go inside of the Content Browser,
we can go into the Lens Flares group here,
and we've got the Start and Finished version.
The Start version is the one that's placed inside of our map,
so let's go ahead and double-click that to open it.
Now, we're already looking at this and saying,
"Hey, this looks very similar to Cascade," and it is.
We have our preview window over here on the left,
which we're going to be able to preview
our lens flare system.
We have a list of different elements.
This is very similar to our list of emitters inside of Cascade.
The biggest difference is that we can see
this very large thumbnail window here,
so we get a preview of what our material looks like.
Then, most importantly, we don't have any modules.
This is probably the biggest difference.
All of our properties are uniform.
We don't add or change different things.
Every element has the exact same properties.
They show up right here on the bottom,
so we can see things, like Color, Alpha, Offset, etc.
Then lastly, we have the Curve Editor.
This works exactly the same way.
Probably the biggest difference to note though
is that we don't really work with times in this case.
We're working with distances.
This will make sense just here in a little bit
if you hang onto that question.
Let's go ahead and get started.
We want to assign a material to start off with.
Over here in LF Materials,
we want to hit the little green icon there.
We want to go into the Content Browser,
go to the Materials group, and let's find ...
We've got this Source Streaks Material.
Let's find the Start version of that.
With that selected in the Content Browser,
I'm going to hit the little green arrow here,
and it's going to assign that material.
Really quick, before we go any further,
I just want to look at this material really quick.
All of these materials are set to additive,
so everything we're working with are set
to additive down here in Material,
and then we go to Blend Mode.
It's blend additive.
Another thing I want to note really quick, too,
is that you need to have a vertex color being multiplied
against your texture, or all your other results,
before it goes into your input of Emissive.
This works the exact same way.
We're used to seeing this with Cascade.
If we don't use this vertex color,
you can enter in color values inside
of the lens flare editor, and you won't get any changes.
In this case, it would just always render
out as pure white.
Just want to note that's really important
that you keep that inside your material.
Moving back to the Lens Flare Editor,
let's go ahead and change some of our attributes here.
Let's start off with our color.
Again, we don't add modules.
We just want to go down here to the bottom
and find our color section.
The Distribution is already set to Constant,
so everything's set to pure white.
Let's leave red at 1.
Let's change green to 2, and then blue, 4.5.
Little tongue twister there.
Let's also change our size as well,
so let's minimize all this stuff,
and up towards the top, we can see our size attributes.
Now, this works just like sprites inside of Cascade.
That means that X is going to be our width.
We can change that to 310.
We can see it getting wider.
We can change Y, which is going to be our height.
We'll also set that to 310,
so this is going to be a very square particle.
Then, Z is irrelevant, because it's a 2-dimensional plane.
We can change this to whatever we want.
Just for organization, I always set this to 0.
Let's take a look at it.
Let's move this down really quick.
We can see, now, that our lens flare system
is starting to render, right?
The base, the source part of it, is in there.
It's looking good. It's got size. It's got color, and so forth.
Let's break down a quick example
of some distance-based attributes.
If we minimize everything here,
and go all the way to the bottom,
we have this Distance Map Scale, Color, and Alpha.
Let's do color.
If we go ahead and maximize this window up here,
what we can do is change our distribution
to Constant Curve.
Once that's done, we can add a point,
and then inside this point here ...
I'm going to leave the In Value to 0.
What this means is instead of being ...
Like we said before, we're used to
seeing this in particle time,
so 0 would be the beginning of the particle's life.
1 would be the end of the particle's life.
In this case, this is distance to the lens flare system
inside of the world.
As the camera is 0 units away from the lens flare system,
we're going to multiply the color by 1.
I'm going to set X, Y, and Z--
which is red, green, and blue--to a value of 1.
This is acting like a multiplier,
or kind of like color over life,
to this value that we entered here,
are 1, 2, and 4.5.
Now, what we can do is add another point.
Point 1, at a distance of about, let's say, 1200.
Let's leave our Out Value, for now, to 0, 0, and 0.
Now, what's going to happen here,
if we go inside the Level Editor ...
I'll go ahead and go into game mode
so this shows up better.
As we're right up to the lens flare,
it's rendering at the same intensity,
but as I zoom back out, we can see we get
to a point about here, where it fades out.
This is all based on this curve that we're animating.
If you want to see this curve
inside of the graph editor, you might be saying,
"Well, since there are no modules,
"where is that little green button that we're used to seeing?"
In this case, we right-click, and go to Curves,
and then we can add different attributes here.
In this case, we're doing our Distance Map color.
We can go ahead and add that,
and then hit this icon right here to Fit View to All.
Now, we can see that curve, right?
We can see it starting at 1,
and it's fading off to 0 at about 1200 units.
In this case, I don't want the source
to ever really fade out for this example.
You probably do want to have it so that
a light 100,000 units away isn't really affecting it.
What I want to do in this case is,
at a distance of 0, I want to do red, green, and blue at 5,
so it's really, really intense.
Then, at a distance of 1200,
which is already established with our 2nd point,
let's just set that to 1.
What this is going to do now,
if we go inside of the Level Editor,
is that as we zoom out, we still see it
from a far away distance, right?
But, it's much more subtle and subdued.
As we get closer in, it starts to get a little more intense.
With all that said, let's go ahead and add a new element.
Let's add a little bit of a streakiness to it.
We're going to right-click here
inside of the Lens Flare Editor, and do Add Element After.
We'll give this a name, and we'll just call this
our wide streak or our streak.
Either of those work.
Ray Distance, we're going to leave to 0.
We're going to cover this in the next chapter,
but in this case, I want this element
to be stuck with our source, so they move.
There's no real kind of parallax, or anything like that.
Let's go into the Content Browser.
Go into Materials, here.
I want to use this Reflection 1 MIC Start.
With that selected, let's go to LF Materials,
and add a new item.
Let's assign it.
What's happening now, is that this thing
is so small, it's just being eaten up
by our source element.
Let's give it some color and size.
Let's actually do size first, so we'll go to Size.
Again, X is width, so let's get this to be very wide and thin.
Let's change X to 2. Then, let's change Y to 0.06.
Then, let's go ahead and give it a little bit of color.
We'll go down here to Color, go to our Constant Value.
Let's do another blue that's slightly more saturated,
but also darker and less intense as well.
Let's do 0.25 on red, 0.5 on green,
and then let's do 2.25 on blue.
It's important to take a look at this
inside of the editor itself.
We can see that it looks pretty good,
but it's got a couple problems.
Most notably, as we get far back,
we can see that this hasn't changed in size at all.
We also want this to fade out as well.
Let's zoom in a little bit here.
Let's get the camera panned in.
Let's do those same attributes that we just did,
and let's do that distance over for our scale and our color.
Let's start off with Color.
Let's change this again to Constant Curve.
Let's go ahead and remove this curve,
and then graph this one.
We're going to right-click, and then do Curves,
Add Distance Map Color.
Going back to this, let's go ahead and add a point.
If we go to our curve over here, add a point.
At distance 0, we want this to be ...
Red, green, and blue, we want to be multiplied by 1.
Then, let's add another point,
and a distance of 2500 units,
so we'll set our In Value to 2500.
We want this to be 0, 0, 0.
We can go ahead and Fit to All,
and we can see our Fall-off curve happening here.
Let's go inside the Level,
and as we fade off, as soon as we get far enough,
right around here, we can see that it fades out.
That looks pretty good.
I also want this to scale down considerably as well.
Let's zoom in here.
Do the same thing for Distance Map Scale.
I'm going to minimize color.
Let's go to Scale, and then change this
again to Constant Curve.
Add 1 more point.
So, at Time or Distance 0, I should say.
We're going to do a value of 1 on X.
I actually want it to be a little fatter on Y,
so that means a little taller,
so let's set that to 2.
Let's add another point.
Same distance, 2500 units.
Let's leave this all to 0, 0, 0.
As I pan back, now, we can see that
this gets less wider as we pan back.
Then, it gets wider as we zoom in.
Both size and color are being affected
by the camera's distance to the Lens Flare System.
That ends this chapter.
We're going to move onto the next chapter,
and talk about some more of different elements,
and we're also going to learn about
that distance attribute that we haven't touched yet.
I want to go ahead and start adding in
some more elements that we'd expect to see
off the little glass elements in a real lens.
That's also going to introduce some of our offset,
here, with our ray distance.
That's going to give us that parallax or that counter motion
based on the Lens Flare System and camera space.
In the Lens Flare Editor, let's go ahead
and right-click on the black area here,
and do Add Element After.
For name, let's do Lens Element Near.
We're going to have a near and a far.
We're starting off with a near one.
We are going to touch ray distance,
but let's hold onto that for just a second.
Let's get a material assigned first.
Let's go down here to LF Materials.
Let's add an item here.
Go into the Content Browser.
I want to add this glass element
to this Reflection MIC Start.
Go ahead and assign that.
It's being eaten up by this,
so just for now, I'm going to temporarily disable
these 2 emitters by checking off "is enabled."
Going back to the lens element near,
the color looks pretty good.
However, I want this to be differentiated
from the next lens element that we're about to create.
Even though this has color built in,
let's go into Color and change it.
Let's do 0.4 on red, 0 on green, and leave blue to 1.
We're getting this lavender color happening here.
For size, this is going to be really small,
but I actually want to go to Size and change it
to even smaller, 0.15 on X and Y.
Now, if we enable these other emitters again,
so let's go ahead and check "is enabled on."
I can start giving this a little bit of an offset
by using this ray distance.
Right now, if I move around,
let's look at it really quick inside of the Level.
It's just being eaten up, again,
by those different elements of the Lens Flare System.
If I go back in here, and change my ray distance,
let's do a value of 0.4.
Now, this works in roughly 0 to 1 space,
so you don't want to use big numbers.
If I change this to 0.4 now,
what we can see here, as I move the camera around,
and we get the lens flare towards the fringes,
we can see this element here, being offset.
It's giving a little bit of parallax.
This is what we expect from a real lens, right?
So, that looks really good.
Now, if I move really far back,
same problem exists as before.
This doesn't look very natural.
We want this to fade out based on distance.
Let's go inside of the Lens Flare Editor.
Let's find our Distance Map Color.
It's set to Constant, so just like before,
we want to do Constant Curve.
Then, let's add a point at distance 0,
it's going to be 1, 1, and 1.
Then, add another point, and at distance 2000,
so 2000 units away, we're going to fade it out.
From here, we can see, we get far enough,
it fades in and out based on distance.
That looks pretty good.
I want to get another element that looks very similar,
but has just a slightly different ray distance
in some other attributes.
We can use this as a starting point.
We can right-click, and do Duplicate Element.
We'll, right away, change the name
to Lens Element Far.
Let's also change the Ray Distance to 0.6.
This is even farther.
If I look at it now, we can see that we have 2 of these
that are offset based on the position
of the lens flare and screen position.
I want to get it to have its original colors.
I also want it to be bigger as well.
Let's go to color, down here on the bottom.
Let's just change that to 1, 1, and 1,
so it's using the original values.
Then, let's also, for scaling ...
I'm sorry, for size.
We don't want to touch scaling.
I want this to be bigger,
but I also want it to be stretched a little bit on its width.
Remember, X is width, so let's do 0.25 on X,
and then just 0.2 for Y.
We can take a look at it,
and now it's got a little bit different colors.
It's got that different size.
That's looking pretty cool, pretty dynamic.
However, what we do have here,
is that as we pull back, we can see that these
fade off at the exact same time.
I think it'd be just a nice small touch
that one of them fades at a little different speed,
or different distance, I should say.
We'll take our Lens Element Far.
Let's go down to our Distance Map Color here on the bottom.
Instead of 2000 units away, we'll do ...
Let's try 1200 units.
This will actually fade off 1st compared to the center one.
Just looks a little more dynamic like that.
I think it's a nice small touch to add.
That's it for this chapter.
We're going to move onto our next chapter,
and our final chapter, where we're going to talk
about radial distance and occlusion culling
inside of the material.
We can see that we've got really good counter motion
with our different elements,
and we've got different attributes
that fade in and out based on distance.
Now, there's 2 things that I want to address
inside the material, just as polish pieces.
1 is that we want to have this so that
as the center, or any element of the lens flare,
gets towards the edge of the screen,
we want this to fade out.
So, if we keep our eye here, on the source,
or the core of our lens flare,
as it gets towards the fringe of the screen,
this really hasn't dimmed at all, right?
We can do this on any side.
Its intensity stays the same.
Another thing that we see, that's really broken,
is that if we go underneath the ground,
and the lens flare is being occluded
by the actual object itself, a lot of our elements
are just rendering straight through,
which is definitely not what we want.
This isn't sorting properly,
and this would be a serious issue
if we had this, let's say, on a pillar,
or something like that, where the character
could walk around 360 degrees.
Let's start off with the 1st problem
of getting this to fade out on the side.
Inside the Content Browse, in the Materials,
remember we said that all of these elements
up here in the top, the reflection elements,
are instances of our parent material.
If we open up the Start version of it,
any changes that we do, are going to be propagated down.
Our material is pretty simple right now.
It's just our texture sample being multiplied
by a vertex color.
What we want to do is search for something
called a Radial Distance Expression.
If we search for Lens Flare,
we can see all the different Lens Flare expressions
that we have here.
Right in the middle, we have Radial Distance.
Let's go ahead and dump one of those in there.
What this is going to do, is it's going to measure
the lens flare's position in camera space.
Then, it's going to dim it based on that.
Let's go ahead and multiply these down.
Let's see what it does.
Let's take our texture, and multiply it
by the Lens Flare Radial Distance.
Then, that output result is going to go
against our Vertex Color.
Now, we see it disappear, and that's okay.
If we close down, or move down
our Content Browser Material Editor,
it's kind of working, but it's actually working backwards.
We can see as the particle system is straight
in the center of screen position, it's disappearing.
As it gets towards the fringes, it's getting brighter.
To fix that, let's go into the Material Editor.
All we want to do, is we just want to invert
our Radial Distance data.
Let's search for a OneMinus.
Then, take our Lens Flare Radial Distance
and plug that into OneMinus.
That result is going to be multiplied against our flare texture.
Let's compile it.
Now, we can see it's doing what we want.
As it gets towards the edge, it dims out.
Now, in my opinion, first of all,
we can see that it's doing some funny things,
like right there it's starting to go into negative numbers.
We don't like that.
The other thing is that I do want it to fade,
but I don't want it to completely disappear.
I think that's kind of weird.
What we can do, is inside the material, is clamp it
to fix both of those issues.
Let's make a little room, and let's search
for a Constant Clamp.
Let's take that inverted, that OneMinus result,
plug that into our Constant Clamp.
Now, take the Constant Clamp, and multiply that
against our flare texture.
Inside of the Constant Clamp, we have a min and max value.
What I want to do, is just say,
"Hey, I don't want you to ever go below 0.3."
Let's clamp that to 0.3.
Now, let's compile that.
Now, as it gets towards the edges,
it's definitely dimming out, right?
But, we can see now that it's not getting completely black,
and it's also not doing those negative number
funkiness that we saw before.
It looks pretty good.
I like that.
But, if we go underneath there,
we can still see that we have our other issue,
and the occlusion isn't working.
Let's go back to the Material.
I'm going to pan out a little bit.
What we're looking for, if we search
for Lens Flares again in the Material Expression,
we're looking for this Lens Flare Occlusion Expression.
Let's dump that in, and let's multiply this out.
Now, you don't necessarily have to do this
at the end, like I am.
We can do it before or after,
but I'm just going to leave this at the very last thing
so that Lens Flare Occlusion is really the last thing
to determine whether this thing's rendering or not.
Let's multiply this, now, our Lens Flare Occlusion,
against all of our texture sample stuff,
and the radial distance stuff that we've just done here.
Let's compile that.
You'll notice that the lens flare has disappeared.
That's okay. The reason that's happening
is because the bounds of the lens flare
haven't been calculated yet, or they basically have,
but they're really large.
If we go into the lens flare, and open up the Start version,
what we need to do is right-click over here
in the black area next to all of our different elements.
Do select Lens Flare.
In the Properties, here, we're going to have
all the master properties of the entire lens flare system.
In bounds, we can see that
the Use Fixed Relative Bounding Box option isn't checked.
What that's going to allow us to do
is enter our own numbers in.
If you use this button up here in the top,
that says "Toggle Bounds," and you rotate it around,
you can see this blue box and this yellow sphere
is pretty ginormous, right?
It's using that to calculate that expression that we used
to base when to fade it off.
Because it's so large, it's just fading it off immediately.
Let's go ahead and check this.
We can see now that it's at 0,
so we won't even see it rendering anymore,
but our lens flare has come back, which is good.
Let's do, for Min ... Let's keep this small.
Let's do -10 on X, Y, Z.
For Max, let's just also set that to 10.
Change that to 10.
We can now see our bounding box, here,
in world coordinates.
I can turn the grid on to give that a little more
relevance and perspective.
We can see that it's pretty small.
If we move all of this down, now.
We can see that our lens flare is rendering,
and that if we go underneath here,
it actually starts to fade.
Now, what it's doing, just so we understand the math,
is it's using those bounds to compare it
to surrounding geometry.
It uses that to determine the intersect
that's happening here.
It's just using this curve, that we're going to learn in a second,
to fade it in and out.
It's working almost.
I want to tweak one more thing.
One thing you might notice is that the lens flare
is looking very, very dim.
One way to fix it is if we move this up,
if we go out of game mode and select the lens flare,
it should brighten up a little bit as we see there.
I want this to be hugged right up against it.
What we can do, is inside of the Lens Flare system itself,
going back to the Master Properties,
so we right-click and do Select Lens Flare.
We have this bottom option here, called Occlusion.
It gives us this screen percentage map.
Now, there's no way I've been able to show
this curve over here on the right,
so we're just going to have to look at the numbers.
It's giving us a constant curve with 2 points, at 0 and at 1.
It's using this value to basically ...
This is what's determining the fade that's happening.
If I change the 2nd value to 0.4,
we can see not only is it brighter ...
Let me go ahead and deselect this.
But, this also determines how quickly
to fade this in and out.
If we change that to 0.2, that fade transition
would happen even faster.
There's no 1 right solution.
It's all really based on how big are your lens flares?
How many objects do you have in your scene?
How big are your objects?
But, those are the 2 sections that you want to adjust
to massage things to get them working right.
That's about it for this chapter, and for this tutorial.
I think we've covered pretty good grounds
on how to create a particle system to get you started.
I'm going to end, kind of in a weird way,
and I'm going to end with a warning.
Don't go crazy with lens flares.
It's actually really easy to go overboard with these,
and it's going to look really obnoxious aesthetically,
and it's also going to upset your players
because it can become really cumbersome
to have so many of these over on the screen.
You just want to be very tasteful with these.
My teacher put it best in college.
He said, "Cinematographers, for decades,
"have been trying to work ways to eliminate lens flares,
"and then suddenly, in the past 10 or so years,
"people are just loving lens flares
"and using them left and right for style."
Just take it easy with them.
I think this is a great way to add some style
and flare to your level,
but don't go overboard with them.
I hope this has been informative.
Thanks, again, for joining me on here.
Please keep in touch with us here on imbueFX
because we've got lots of great new tutorials
that are planned up for the future.
Thank you for your time.