Creating a Cross Hatch Post Processing Shader in Unity

Post Processing Effects in Unity

This is a tutorial that is going to explain the process to create a Cross Hatch image effect using the Post processing shaders in Unity. A great introduction to using Post Processing shaders is provided at this page by Alan Zucconi on his wonderful blog Post processing Shaders

Introduction

Post processing is used to create effects which require the entire image to be rendered. After the rendering, Unity provides us with a method OnRenderImage, where we can plug in our custom shader and create effects as we desire. For this tutorial, we will be porting the cross hatch shader from OpenGL to Unity Cross Hatch shader in OpenGL. All of the calculations are the same as in OpenGL, we just need to replace the relevant Unity CG code. This is the current output that we will try to modify.

Image before post processing
Game unaltered Image

Step One

The first thing to notice is that the OpenGL shader is using “gl_TexCoord” method. This method has no equivalent in the Unity/Nvidia CG language. This function provides us with the screen space position of the current Pixel being rendered. To get this position in our Unity shader, we have to do some calculations in the vertex shader. (Please note that this tutorial was written with Unity 5.3.4, from Unity 5.4 and above, there is a provision to get screen space position of vertices).

Here is the code needed to get the vertex position.

This line gives the position of the pixel in the screen space. The values returned are in the range of (0,0) to (1,1). We have to multiply these with the screen width and screen height to get the proper pixel position.

In the fragment shader, this line gets us the actual pixel position.

Step two

Now that we have the actual screen space position of the  pixel, we can do more math magic to create the cross hatch effect.

Our plan is to create diagonal lines across the screen to create the cross hatch effect. For this we are going to use this nifty calculation.

if ((pos.x + pos.y)%10 == 0)

This code will give us all pixels that lie on the diagonal lines 10 pixels apart. The opposite diagonal will be.

if ((pos.x-pos.y)%10 == 0)

Now all that is left is to identify the pixel intensity and check if it lies on any of the diagonal lines. This is accomplished by the following section of code

Note that we need to “floor” the values to get a zero. Otherwise the comparison to zero will not always yield true. Once we apply the shader to the post processing script, we get this.

Post processed game image
Cross Hatch post processing.

Bonus Effect

If we modify our code a little bit, we can get a comic book effect as well. Just modify the calculations like this

We just removed all calculations about the points lying on a line. This gives us this pretty comic book effect.

Image with comic panel shader
Post processing comic book effect

You can download the completed cross hatch shader with a simple post processing script here – Download Shader

 

Leave a Reply

Your email address will not be published. Required fields are marked *