Tip:
Highlight text to annotate it
X
Hello and welcome to this tutorial, in this tutorial i will show you how to use 2D Shader
inside the Blender Game Engine effectively in order to enhance your image quality. If
you take a look on this, some effects can be seen very easily, for example the "bloom"
filter, meaning that light areas are getting displyed even brighter, the depth of field,
or the ambient occlusion. Now i will show you very quickly how i archived this... First
of all i will delete all logic bricks that i had setup for my shaders, as well as the
2D shader Scipts inside the text editor, so we really start at zero.
If we take a look at this scene again without any 2D Shaders active, it is pretty obvious
that it dosen't look very good at all. But be warned: What i am going to do with the
2D Shaders will take much processing power, but i will show where to save some performance
as well, if needed. The first shader i am going to use will be
the "FXAA", meaning fast approximate anti aliasing, this anti aliasing method will blur
the image on the edges a little bit, so that the aliasing effect (the noticable pixels
at edges) dosen't appear so much, resulting in a more smoother looking image. Of course
you could use the "MSAA" (multisampled anti aliasing), but this takes very much performance,
because the (simlified) method this AA works in the way that for 4 times anti aliasing
it renders the image 4 times bigger as usual, then it will be downscaled to the original
size, and the overlapping pixel information can then be used for blurring the edges in
the right way. But as mentioned before, the is a 2D shader
for this, and this method works extremely fast. I will just open up this Script via
the "text" "open text block" buttons. So i now choose the FXAA. This one was written,
as most i use, by Martins Upitis. Very handy here is that you dont have to change something
in thios script at all, you just have to activate it. For this case, i will activate all Shaders
on the Camera. Choose "filter 2D" to add a 2d filter, name it right, choose custom and
pass number 0 is okay. I will explain a bit later what this pass number mean. Now add
an "always" sensor (i already have one), and select the wanted shader inside the 2d shader
logic brick (in this case, the FXAA, of course). Now we have some anti aliased edges, of course,
some artifacts can be still noticed, but if we keep in mind that it nearly takes no performance
at all, but still looks almost as good as MSAA, we have a pretty good deal here.
The next shader i am going to use could be interpretated as the "opposote" of the FXAA,
which it isn't, but it sharpens the image on the edges a bit, resulting in a "sharper"
looking image. I found this one in a forum by someone who called himself "laser blaster".
Just open it... For this one, we need to add a variable to
our mein object (the camera), in this case the property "Sharpness". i already added
this one on my camera, but for proposal use i will delete it now. Of course the shader
itself has to be added as the others, so add in a new 2d shader logic brick, plug it together
with the wanted sensor, change it to "custom filter", name it right and select a higher
pass number "1", because we want this filter to be applied after the FXAA, if they would
be the same it would just override the first one. So in a nutshell, the pass numbers indicates
in which order the filters will be processed. If we would only use this one, nothing would
happen, because we didn't added the needed variable "Sharpness", which will define how
much the image will be sharpened. Of course you need to write it correctly,
or change it in the script itself. Just for demonstrating i will use an extreme
high value now, and it can be seen very easily that this kind of sharpness is way to extreme.
Even 1 would be too much, but a value of 0.25 will serve very well, i think.
This sharpening just adds a little bit more contrast to the edges, resulting in more "depth"
inside the image, and, as surely well known, more contrasts generally looks better, if
it is not overdone. (image tension, if it can be called this way)
Next of all i will ad the first "important" shader, the screen space ambient occlusion
(SSAO), written by Martins Upitis as well. Here we will start changing some parameters
inside the script, but first of all i will add the shader the same way as the other.
Keep in mind: Pass number: one higher that the one before (meaning: 2)
Of course, custom filter, select SSAO, ect. ...
In order to understand a little bit better what this shader actually does, i will change
this variable here from false to true (bool only ambient occlusion or something like that...),
this one will affect the displayed AO in the image, so now, we only see the SSAO. I already
adjusted the shader a bit, but still there is much to change, and i will now go through
the singe variables and explain their meanings. Just to mention what this shader is for: It
sould create some darker areas in corners, because in reality light woudn't come to this
areas as much as to others, so this corners have to be shadowed a bit. The normal light
calculation of Cycles (and Blender Internal, if "Ambient Occlusion" is checked) does this
automatically, but the game engine of Blender can't handly it physically correct, which
is my we have to cheat and fake it using the SSAO.
First things to change are the user variables. The "samples" will define how precisely this
effect will be calculated, and of course, if more samples are calculated, the result
will be better, but take more perfomance. I will use 32 samples, which is pretty high,
if you have to care about performance, you are free to use any lower sample, something
like 8, 16 or whatever. Next hing to change are the "z-far" and the
"z-near" values, for this scene, the values work ok, but it is alway better to re-adjust
every setting for every scene individually, depending on the scale of the scene. When
i pull down the "z-near" value now, we can see a totally different result here, here
you should define what is "near" for the camera, i use this value (look in the video). "z-far"
is set to five right now, and i must admid that i don't really know of which criteria
the shader is processing this, but i noticed that is look very good if i use a value of
"1" for this scene. Now it looks convincing, there is less light
where less light should be, and the distance works as well.
Next thing relevant is the "radius", this one will define how "big" the rendered AO
is. I usually use big values like 48, because a value 0f 12 would result in a cartoon-style-like
image. This is by the way something that disturbs me the most in most games or other blender
game engine projects, because it seems like that most people simply "throw" this shader
on their scene without adjusting its radius. In reality, this environment shadows are showing
up because light bounces off the environment, resulting in some diffuse light. Of course,
lower values are required if there is not that much indirect light, like with one direct
lightsource, like the sun here, but keep in mind that in this scene here there are many
objects, walls, etc., so the light of the sun will be thrown around the scene very much,
so that in the areas, who are not directly hit by light, much indirect shadws would sho
up. When typing 24 in, the result looks much better,
but i personally don't think that this is enough, so i will double this value again,
ending up at a radius of 48. If you use the "mist" setting in order to
simulate some fog or fake the environment light, it is also needed to adjust the settings
underneath the "mist" area. Here you have to experiment around, because you actually
don't have to type in the values you used in the mist settings inside the world settings
(since this would't work the way we want it), so, as said before, experiment with that.
if you adjusted all values so that the SSAO effect is as wanted, you have to change the
variable "only AO (or something like that)" back to "false" again, so that it is now overlaying
our AO effect with the rendered image. Something that i did't changed, but what could
be useful in some cases, is the "lumInfluence", this one is currently on 0.6, and will define
which areas are dark enough to get affected by the SSAO, so lighter areas of the image,
like the parts where the sunlight hits the surfaces directly, will not have ambient occlusion,
or only less. Here 0.6 is okey, but as always. Do not simply copy 'n paster my values here,
because this will be totally different ones for your scenes.
The next shader i wll use is the "Bloom" shader, this will make the light areas of the image
eveb lighter, resuling in an "glared" image, just as possible inside the composite editor.
This one is again from Martins Upitis, and of course (i say his very often...) activate
is as all the other shaders. This bloom shader i actually pretty small,
but there are still things to change (after plugging it in into the logic brick setup
as always...). By the way, i placed this one after the SSAO on purpose, because the BLOOM
effect is basically just an imperfection of the camera lens, so it has to be applied after
the effects which are caused by the environment. With this one activated, you can notice some
lighter areas around the already light ones, but definitely not enough. because i want
more, i will change the "threshold" to something lower, so that even more darker areas of the
image will be "bloomed" or "glared", if you prefer that, but it dosen't look right somehow.
This is because the light areas are having some cube shaped like artifacts around them,
which is because of the quality of the shader. You can avoid that problem by adjusting the
offset value to something bigger than it was before, but now the effect is barely noticable.
However, if you change the "kernel szize" to something bigger, then more samples will
be calculated, but, as alway, it will look smoother but take hell more of performence.
I use a value of six for this scene, 3 is default.
However, if you want it to stay n a kernel size of three, you can adjust the "bias",
so that the bloom itself will be smaller, resulting in an smoother visual feedback.
(Now i am messing around with the variables, because most of it can't be described, you
have to experment with it again.) Now the effect looks all right, you have a
little bit of bloom, not too much, just all right.
Next i will add another shader of Marins Upitis, this time, the depth of field (DoF). Here
are some variables to change, again! (... setting up the Logic Brick and such stuff...)
This shader takes the depth information of the pixels stored inside the depth buffer
and some other parameters to blur them. This will result in the DoF effect we all know
and love (at least me), because this effect is simply a lens imperfection, so it helps
dramaticaly to make the image more realistic looking. But be careful: If this effect is
used the wrong way, it will destroy realism! The focus point will be calculated automatically,
if it is checked inside the script, what it is by default.
But let's talk about performance in the first place: In order to save some processing power,
the "samples" and "rings" can be lowered, resulting, as alway said before, in more performance
but less image quality. "Bool autofocus" means that the focus point
will be calculated automatically, depending what you are looking, If you want to use some
external values you can disable the autofocus function here.
The "focal range" is pretty interesting as well, it will define the "area" around the
focus point which will be used as "still-near-values" So a bigger value mean: Less DoF around the
actual focus point, without lowering the DoF effect itself.
"maxblur" should be very obvious, it will define how "strong" the DoF will be at it's
maximum. 10 is definitely too high for this scene, but 1 is ok.
Maybe needed to know: Depth of Field is very useful when representing scale. For example,
the human eye "expects" much DoF when seeing images of very small objects, because in relation,
the lens of the camera is much bigger than the photographed objects (like a little bug
on a leaf or semthing like that), resulting in much of the light which comes from the
background will not hit straight in the projector plane, so that the more your objects are away,
the more it's light will be blurred. The other way around, when shooting some skyscrapers
from another one, you will barly have no DoF at all, since your camera lens is much smaller
in relation to an skyscraper. Of course this can change when zooming in to somethinbg,
because then the DoF effect gets bigger, but well, just keep it realistic, but otherwise,
your scene will look fake immediately. Next we will look at "bias" and "fringe",
these variables are for "pulling" the color values inside the blurred areas apart, the
bias will define how harsh the dividition of the values should be, and fringe how much
clor should me pulled apart. if you use hight values for the bias (1) the light aread of
the DoF are becoming concrete white dots, which is an very interesting effects often
used in films, and the higher ypu set the fringe the more your color values will be
pulled apart, as you can see in the video. A value of 1 should be ok.
Now we can notice that bright parts of the image are getting even brighter, like another
bloom effect, but this is way too much in this case. This can be adjusted with the "highlight",
the threshold again defines how bright a pixel is allwed to be in order to get interpreted
as "bright". highering this value will make the brightness of the DoF less, and the "gain"
will define how much they will be brightened. So a threshold of 0.5 and a gain of 5 will
result in "more pixels will bet less brighter". Now comes a shader, that does nearly takes
no performance at all, but this one can really enhance your images a LOT, because i am talking
about the "Color Correction"! This one is from Andreas Esau, and with this shader you
can change the contrasts, the color values, the brightness ect. of the image. This is
extremely great, because color is soo important, you can change the mood, make something look
scary, warm, claustrophobic ect., and more contrasts will be more appealing to the human
eye, if not overdone. For understanding that better, go and watch the Turorial from Andrew
Price, aka the "Blender Guru" on understanding colors and use them effectively. NOW.
So, a scene with more blue in it will look "colder", meaning more drepressive, but for
this scene, we want it to be nice and warm, so i will use more red and green colors. Red
because of "warmness" and green because it suites the nature aspect of this scene very
well. Also, wenn much light bounces around, there will be much more green in this scene,
because, obviously, most of the space in this scene is taken from leaves, so, of course,
much green would bounce around this environment. (...setting the logic bricks up as usual...
nothing much to say here...) The first obvious thing to do would be highering
the contrasts, but this would be way to much, so i flip this value back to 1 (default) and
change some others first. The brightness of course affects the brightness of the image,
more means brighter, less means darker. Not very usual for this scene, so i will now adjust
the red, green and blue values of this image. (...now i am trying to get the right values,
this may take some time... experiment with that...again...)
The last shader i am going to use is one relatively important one, even if most people don't use
it: Film Grain, noise, or however you want to call this one. Another lens imperfection.
This one is, again, made by Martins Upitis, and you may think: "Hey, why should i make
my image grainy?" Well, this grain will add a very subtile level of realism to your scene,
if, as alway, not overdone. So, what do we want? We want the image to
be a little bit grainy where it is darker, and less grainy where it
is brighter. Because it is realistic. Example: In dark areas (at night ect.) you will notice
this grain effect when looking into the darkness, however, you don't see this effect in bright
areas as clearly as in the dark ones. This shader wouldn't work properly on it's
own, because we need to add some variable to our object where we applied the shaders
on, so, in this case, the camera. Thirst a timer, wich name has to "timer" (well,
i think you can use any name, and it still work's, but i am not sure), and the "noise_amount".
The timer will be the seed for the generated noise, and the other one will define how much
this effect should look like. Too high don't look good at all (as can be seen in the video), and a value on 0.25 should fit the scene quite
nicely.
So, to sum it up, we where able to enhance this image a lot quite easily, it really looks
way more better and professional, and should be done everytime if
you are aiming for good graphics. Maybe necessary to know
is that not every shader will be supported by every graphics card, some simply won't work or will maybe work wrong
on ATI cards, so you should have NVIDIA GTX series card to run this properly.
So, i hope you enjoyed this tutorial, learnt something
from it, and, bye!