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 :)

iPhone App - Hide n Seek

This is the third app I've developed for iPhone. This time, I bring you an augmented reality treasure hunting game!

It sounds cool isn' it? In a general idea for this app is, there are Hider and Seekers, Hider is the one who decide where to hide those treasures while Seekers are the people to dig out all the treasures been hidden.

Although there is a big drawback of this app which is it is strongly depending on your GPS signal. If your signal is good then you can get the treasure information accurately, but if it's in a bad signal then I'm so sorry :(

Here are some screenshots teaching you on how to use it:

1 - This is the Main Menu. You can choose which player you are (Hider or Seeker)

2 - After you have selected Hider, you can hide the treasures on the provided map view. (The red pin indicating treasure)

3 - After that, the seeker can use CAM view to locate where are the treasures and find it out!

NOTE: You can set the effective radius (in meters) in the Main Menu screen.

4 - Is this app only for 1 player? The answer is --- NO!

Once the Hider finished hiding all the treasures, he can send his treasure data to all other iPhone users who have this app installed. The sending method is through Bluetooth.

If you are still confusing about how to use this app, look at this video tutorial:

Interested to try it?

Hope you enjoy using it :)

NOTE: If you saw a message saying that "Memory Low", please turn off all your background running apps (double tap HOME button)