Beginner’s guide to Shader Development using Unity — Part 2

What are we going to understand in this article/ tutorial?

In the previous article, we discussed what is a Shader and what are it's types. In this article, we will understand that why do we need two of the most basic shaders to draw a mesh on the screen - which are Vertex shader and Pixel shader and how both types of shaders work in the shading/rendering pipeline.

Video Content from http://shaderdev.com

Let’s start with an example of drawing a mesh triangle to understand the process. 

Every mesh is composed of vertices, which is why to draw a mesh we will first collect the information of vertices and package it up one by one before sending it to Vertex shader. These packages/ packets are called as Vertex Input (as they are the input for Vertex-shader)

Each packet/ package contains the information about the vertex which in the most basic scenario, is the - position value of the vertex. It can also contain color or normal value of the vertex. This packet of information is sent to Vertex shader.

Vertex shader act as a processing machine to process the data sent inside each packet as instructed. After vertex shader finishes processing the vertex data, it provides the processed information in the form of another packet called as Vertex Output.

The way the Vertex Input should at least have vertex position data. Similarly, Vertex Output should also have processed vertex position data which will be later passed over to the Rasterizer. 

Usually, Vertex shader transforms object-space position value to projection-space position values of the vertex. If you don't understand object-space and projection-space values then don't worry about it, we will cover it in later articles.

In the Vertex shader, we can also manipulate the position of the vertex eg: To create a flag-shader, we can make the mesh of the flag wave based on the Sin wave function.

The Vertex Output then goes to Rasterizer, which is a hardware that based on the position of the vertices of the mesh determines that which pixels of the screen will be covered in order to draw the mesh on the screen. In other Rasterizer determine which pixels will be inside the geometric region. 

Rasterization rules determine that which pixels will be covered by the geometry and one of those rules is Sampling. In the Sampling process, a Sample is given to each pixel.

When a Rasterizer uses the process of Sampling to find out pixels covered by a geometric region, each pixel is given a sample and a ray is passed from the location of sample point. If the ray hits the geometry that means the pixel will be covered by geometry or it will be inside the geometric region.

Another role of Rasterizer is to interpolate the data for the pixels between the vertices. Let’s take a moment to understand what an interpolation of data means.

Interpolation: 

If we have a triangle and this time with the position information, we will also pack normal information of the vertex inside Vertex input. After going through Vertex-shader, Rasterizer will receive the normal information of each vertex and figure out which pixels of the screen will be covered by the mesh when the triangle will be drawn on the screen, with that Rasterizer will also provide the normal value to each pixel based on the normal value read by each vertex. 

Eg : 

If this is the triangle and here are its normal values of the vertex.

Let's first discuss the interpolation these two vertices to figure out the interpolated normal value of the pixel that lies at the center of this line (formed by two vertices).

x-normal value of top vertex is 0 and x-normal value of bottom vertex is 1 so the x normal value at the center will be 0.5

Similarly, y normal value of top vertex is - 1 and y normal value of bottom vertex is - 0 so the x normal value at the center will be 0.5

This is why the normal value for the pixel that lies at the center of this line will be - (0.5, 0.5, 0). In this manner, the normal value for each pixel will be calculated by the Rasterizer.

At this point, Rasterizer has figured out that which pixels of the screen will be covered by the geometric region and every pixel has its own interpolated values. 

For every determined pixel, Fragment/Pixel shader will be executed. "Vertex-output" - the packet of information that came out of Vertex-shader which was then passed to Rasterizer - is passed to Fragment/Pixel Shader. 

Fragment/Pixel shader will process the information as instructed and output the color and alpha value for the pixel which will eventually contribute to the final pixel color on the screen.

In my next post, I will share more about the components of a shader. In the meantime, you can watch tutorials from my shader development series:  Shader Development using Unity 5, which is available on:

• Teachable.com
• Cgcircuit.com

And here is the full preview playlist on youtube : Shaderguide or Youtube

Thank you!

Chayan Vinayak Goswami