Post Process Wiggling

Adapted to XNA 4.0 by A. Nadif. To see the original article for XNA 3.1, follow this link.

Welcome to the 9th tutorial in my Shader Programming series. Today we are going to look at a pretty simple but cool post process effect!It's hard to see the result in the image, so you should download the example and take a look at the result so you understand what we are about to make.

The source-code and binaries can be found on the bottom of this article.

Post Processing?

Post processing is really just about applying an effect, or a combination of effects to a image/frame/video to make it look more polished, or to have a certain effect. A post process effect can be looked at as a filter the scene is going trough.In this case, we are rendering a scene to a texture and applying a wiggling effect to the scene. This makes the scene look like it's "underwater".To make this happen, we need to modify our texture coordinate vector using some sort of a circle movement, and then use the modified texture coordinate to look up the color in our ColorMapSampler! Take this image for example:

The green points are just some example texture coordinates, and based on a timer, we can circulate this point around. Doing this on all texture coordinates will give us the wiggling effect we want!

The scene in our example contains a backdrop rendered using SpriteBatch, and a 3D model using our Diffuse shader from Tutorial 2. This scene is rendered into a texture, and that texture is used to render the scene. When rendering it, we apply our post process shader.

So, all in all, we got two shaders. One for the in-scene object, and one that will be used as the post process shader.

Implementing the shader

The post process shader only needs one shader, the pixel shader. To make the shader dynamic, we will need to implement a timer.

float fTimer;

This timer will be set from the application, and will be used in our sin/cos movment of every texture coordinate, making them move around! :) We also need the ColorMap texture for the shader, containing our scene and is updated every frame.

sampler ColorMapSampler : register(s0);

Now, we got what we need for our shader! Lets take a look at our short pixel shader function:

This shader simply takes the X and Y component of the current Texture Coordinate, Tex, and moves them around in a circle. the fTimer+Tex.x in the sin loop is there so the coordinate moves based on the timer, pluss the Tex.x to make the circle different for every step in the X-direction. We do the same thing with Y. If we had used sin(fTimer)/cos(fTimer) in stead of including Tex.x/Tex.y, all texture coordinates would have been moving in the exact same circles. You should try this, and play around with the parameters so you fully understand why we are doing this. Finally, we will need our technique, named PostProcess:

And thats it! We got a very simple, but pretty cool post process effect. You should play around with the shader so implement your own post process effects. Try editing the circle each texture coordinate moves in! U guess you can come up with a quite cool distortion effect ;) Good luck! Download Sample