Shader - Post Processing

What we are discussing earlier is a type of forward rendering. Now let's us look at Post Processing.

In general, the steps to perform post processing are render the scene into buffer or graphics card first, then apply post processing filter, lastly display it to the screen. Post processing will be changing or manipulating the scene.

Some of the cool effects which considered as post processing are HDR, Bloom, Blur, Screen Space Ambient Occlusion (SSAO) and so on...

I've implemented some post processing effects and here are the result:

*Original scene (without applying any filter)

*Black and White effect

*Sepia tone effect

*Negative effect

*Negative offset effect

*Halftone effect

*Sketching + black and white effect

*Tiling effect

*Old scratched film + sepia tone effect

Video demo:

If you are interested to view it in real time, you can get it by clicking the download link:

Download Post Processing Demo

Key control

1 - Black and White effect

2 - Sepia tone effect

3 - Negative effect

4 - Negative offset effect

5 - Halftone effect

6 - Sketching effect

7 - Tiling effect

8 - Old scratched film effect

0 - Reset

Note: Remember, whenever you want to apply other filter, press 0 to reset first. You don't need to reset if you want to combine few filters together.

Shader - Color Shading

This time I will talk about color shading in shader.

Before I start to talk more about it, let me illustrate what it is used for.

I believe most of you did play racing game before. Now I will take Need For Speed as an example. Do you remember that you can change the color of the car to whatever color you want in Need For Speed? You can even add some graffiti on the car skin too. Question is, how can all these effects be done?

The answer is very simple, you need SHADER!

All you have to do is creating masking for each model.

*Sample masking map for Lamborghini model.

As you can see, there is only black and white color in the map (you can do grayscale level if you want to)

So what is this map used for? Basically your shader program will use this map as a reference, white color part will be affected (means it will change color) and black color part will not be affected (it won't change color).

The formula to change the car skin color is:

CurrentColor = CurrentColor * Masking.a

You will notice that Masking.a, how about r,g and b?

The answer is, you can actually put 4 maps on 1 complete texture, which means you can do 4 different pattern of masking on a 3D model. Cool isn' it?

Example:

Car skin masking will be stored in R channel.

Car rim masking will be stored in G channel.

Car window masking will be stored in B channel.

Car bumper masking will be stored in A channel.

All you need to do is creating masking map to whatever pattern you want :)

Sample screenshots:

*Default Lambo with white color

*Lambo in red color

*Lambo in green color

*Lambo in blue color

Notice that all the color changes only applied on the car skin but not the whole car. This is the power of using masking :)

Video demo:

Here's the download link:

Download color shading demo

Key control:

1 - Default model

2 - Model with diffuse map only

3 - Complete model

Once you are in complete model, you can press the following keys to change color.

R - Red color

G - Green color

B - Blue color

Y - Yellow color

P - Pink color

CREDIT: Thanks to Mr.Hiew Sau Fung sponsored me all these 3D models.

Shader - Toon Shading 2

Last time I've done Toon Shading implementation. This time, I just want to enhance abit so that it will have specular effect.

Actually you just need to add specular value into the lighting calculation.

Final result will be look like this:

Video demo:

You can download the demo here:

Click here to download Toon Shading demo

Shader - Normal Mapping 2

Finally I've finished my Final Year Project and it's time for me to update what I've done recently :)

I would like to talk about normal mapping again. Basically normal mapping is adding details to the object without adding extra polygons. It is a very useful technique in game industry because it can improve the graphics without having penalty on performance.

Previously I've talk about normal mapping, you can click here to read about it.

This time I would like to add some extra information about normal mapping which is Specular Map.

Basically specular map is a texture map to control the object's specularity, the shininess of the object. Specular map mostly is a grayscale image.

* Specular map for human head

With specular map, you can control the specularity of the object without changing any code. All you need to do is just to replace the specular map with a new one and the result will be changed too :)

Sample screenshots:

*Default model

*Model with diffuse map

*Complete model (Diffuse + Normal + Specular)

Video Demo 1:

Video Demo 2:

Video Demo 3:

Here's the download link for normal mapping demo:

Download normal mapping demo

Key control:

1 - Default model

2 - Diffuse map model

3 - Complete model

CREDIT:

Thanks to Mr.Hiew Sau Fung sponsored me all these 3D models :)

Shader - Normal Mapping

Normal mapping. I guess this is one of the important technique in game development. It can gives u a high details of an model without the need of high poly model. Sounds cool isn't it? Anyway, Computer graphics always cool!

Before you can do a good normal mapping, you need to have a good normal map. Question.... how do I create normal map? Easy! Model a really high poly and detailed model, and generate normal map from it first (I believe most 3D software did provide the function of generating normal map) After you have generated the normal map, reduce your poly count until it fits your game :)

The concept behind normal mapping is, do the lighting calculation at Tangent Space aka Texture Coordinate Space. I don't think my explanation will be good. If you wish to know more about this, try to look at this page or this page.

In short, you need to find out TBN matrix and convert your lighting direction to the tangent space by multiplying with the TBN matrix.

TBN matrix is (Tangent, Binormal, Normal) matrix.

Here are some screenshots:

*Original model without applying normal mapping

*Same model after applying normal mapping

Download program demo here

Key Control:

1: Without applying normal mapping

2: Applying normal mapping

Shader - Toon Shading

Toon shading! Sounds interesting isn't it?

Well, basically toon shading is another simple technique which you can be easily done in shader. (I mean a basic toon shading. If you want to do advanced toon shading, of cause it is difficult)

Since mostly toon shading gives you an unrealistic lighting. Basically it just has about 3 or 4 bands of lighting. So what you need to do is clamping the lighting value based on the look-up table.

What is the look-up table? Well, it just store the pre-defined value which you are going to use for the lighting clamping. Which mean, if your look-up table has only 3 values. You final result of the whole model (lighting) will only have 3 values as well.

For example:

The lighting value for that particular pixel is 0.4f, by using look-up table:

if (light > 0.8f)

light = 1.3f;

else if (light > 0.5)

light = 0.9f;

else

light = 0.5f;

From the pseudocode above, you can see that, no matter what value you get from the calculation, it will convert to either one of the 3 pre-defined values.

Here are some screenshots:

*Original model

*After applying toon shading (You can see that there are only 3 intensity level of light on the model)

*Toon shading with outline

If you wish to know more about toon shading, you can wiki it.

Download program demo here

Key control:

1: Default model

2: Toon shading

3: Toon shading with black outline

4: Change the background color to white/black

Shader - Per-Pixel Lighting

Actually I just started to learn shader about 1 month. Finally I have something to show :)

First I would like to show is per-pixel lighting which I've done by myself after reading The Cg Tutorial. It is an awesome book and recommended to all beginners in shader programming.

Per-pixel lighting is simple, basically it is like per-vertex lighting but instead of putting all the codes in vertex shader, u put it in pixel shader. Well, in order to optimize the code, remember do all the position calculation in vertex shader first and only pass them to the pixel shader so that pixel shader don't need to do so many works.

Simple ey?

The only thing you need to know is, the theory of lighting in computer graphics!

Basically the equation of lighting is:

lighting = emissive + ambient + diffuse + specular

(Actually the emissive term doesn't seems like really important)

The formula above is the most basic lighting formula. Of cause there are more like adding attenuation. I haven't try that personally so I'm not going to talk more about that yet.

Enough of talking, here are some screenshots:

*Ambient light only

*Diffuse light only

*Specular light only

*Ambient + Diffuse + Specular (Facing the light)

*Ambient + Diffuse + Specular (Doesn't facing the light)

Video Demo:

Download program demo here

Key control:

1: All lighting added together

2: Ambient light only

3: Diffuse light only

4: Specular light only