Beginner's guide to Shader Development using Unity



- Teachable.com  
- Cgcircuit.com
What are we going to understand here?
  1. What is a shader?
  2. Types of shaders based on their functionality.
Shader and their types:




What is a shader?
When we ask a computer to perform any operation, we give an instruction to it, and a set of these instructions is called a Program. A program that is used or contributes to shade or draw something on the screen is called a shader.
Shader is a set of instructions that is run on GPU — Graphics Processing Unit
GPU: A processing unit or circuit specially designed for faster and efficient computer graphics operation or image manipulation. If we quickly take a look at the comparison of GPU and CPU, GPU is also being used in deep-learning calculations.



A CPU with four (or 8 or 10) cores in it



A GPU with thousands of cores in it.



Cores of CPU are designed for serial operations, whereas cores of GPU are designed for parallel or simultaneous operations.
That’s how fast GPU is, in comparison of CPU.
Now, let’s take a look at the types of shaders based on their functionality.
Based of the functionality or the purpose of the shader, they can be classified as:
1. Vertex shader
2. Pixel shader
3. Geometry shader
4. Compute shader
5. Tessellation shader
When we have to show or draw any object on the screen, it will be in the form of primitives or a mesh.



If we have to draw a geometry of a specialized character in the game, it will be made up of a mesh. Additionally, a texture can be applied on the mesh or it can even be rigged to make it animate. At the simplest level, even if we have to draw a texture, we will have to draw a mesh card and then we will draw a texture on top of it. If we shade something, we will draw the object (i.e. its mesh first) and then shade it. That means it all comes down to drawing a mesh.
A mesh is composed of vertices or primitives.
What is a Primitive?



Primitives are the basic units of a mesh:
1. Triangle
2. Line
3. Point
How will we draw and shade a triangle on the screen?
In order to draw a triangle on the screen we will first have to draw the vertices as a mesh is made up of vertices. To draw the vertices, we will use our first type of shader: a Vertex shader. We will collect the information of the vertex position (in addition it can be normal and color information) and give it to Vertex shader to draw them on the screen.



Our next problem is how to fill the area in between these vertices. In other words, how to shade the pixels of the screen in the region of this geometry. To do this, we will use Pixel shaders to perform that operation. A Pixel shader, also known as Fragment shader, is a type of shader that works on a pixel or a fragment.
Fragment: The term, fragment, is used to define an element that will eventually contribute to the final color of the pixel. A fragment is like a presidential candidate: a candidate can be a president, it can not be a president, or it can contribute to a president. In future blog-posts, we will see how a fragment contributes to the final color of the pixel.



Tessellation shader: Also known as Hull shader, these are relatively new shaders as they are added in OpenGL 4 and Directx 3d 11. In a nutshell, Tessellation shader is used to subdivide the mesh.



In 2016 WWDC, which is Apple’s Worldwide Developer’s Conference, Apple introduced their new metal tessellation pipeline. Metal is Apple’s graphics API, but in this pipeline, Tessellation shaders are Fixed function shaders which means they are non programmable shaders because they are embedded inside the hardware.
Fixed function shader: A shader that is not programmable and is embedded inside the hardware.



Geometry shader: As the name suggests, these are used to manipulate the geometry. Geometry shader takes a primitive as input (as Vertex shaders take a vertex as input). In the rendering pipeline, a Geometry shader comes in between the Vertex shader and Pixel shader.



Compute shader: Compute shader is a general purpose shader that is used outside of rendering pipeline which means they are not used to draw a primitive or shade pixel. Instead, we use Compute shaders to utilize GPU’s parallel processing capability for general purpose tasks.
In my next post, I will share more about the workings of a shader. In the meantime, you can watch tutorials from my shader development series,Shader Development using Unity 5, which is available on:
Thank you!

 Keywords : Learn Shader Development, Shader development in Unity, Shader 101, Type of shaders, Shader Tutorial, Vertex shader, Pixel shader, Fragment shader

Comments

Post a Comment

Popular posts from this blog

Bounding Box in PIL (Python Image Library)

Image
Bounding Box in PIL(Python Image Library) : Bounding Box function of PIL can be very useful for removing unused pixels from an image. Eg. If we want to remove unused pixels based on alpha channel of an image, we can use following code.   im = Image.open(imagePath) r,g,b,a = im.split() left,upper,right,lower = a.getbbox() tempImage = im.crop((left,upper,right,lower)) newPath = imagePath.split(".")[0]+"_Cropped" + "." + imagePath.split(".")[1] tempImage.save(newPath) To understand which values, getbbox() function returns and what do they look like on an image, I created an image showing the values returned by the function. left,upper,right,lower = image.getbbox()   Suppose you have a point in an original image and you want to find out the new position of the same point in the cropped image, lets see how we can do it. Suppose the point is at (300,450) position in an original image, so after cr
Read more

Dictionary vs KeyValuePair vs Struct - C#

Dictionary :  //   Declare   Dictionary and assign value Dictionary < string ,  object >  parameter  =  new   Dictionary < string ,  object >(); parameter [ " View " ] =  viewComp ; parameter [ " Play " ] =  true ; FunctionName( parameter ); //   Use   Dictionary private   void   FunctionName ( object   parameter ) {      Dictionary < string ,  object >  dict  = ( Dictionary < string ,  object >) parameter ;      GameObject   viewComp  = ( GameObject ) dict  [ " View " ];      bool   play  = ( bool ) dict [ " Play " ];      UseValuesInFunction ( viewComp ,  play ); } KeyValuePair : KeyValuePair < GameObject ,  bool >  parameter  =  new   KeyValuePair < GameObject ,  bool >( viewComp ,  true ); FunctionName( parameter ); //   Use   KeyValuePair                    private   void   FunctionName ( object   parameter ) {      KeyValuePair < GameObject ,  bool >  param  = ( KeyValuePair < Gam
Read more

Rendering order and Z-sorting

Image
Rendering order and Z-sorting . In Unity, there are a couple of options using which we can control render order of the objects, two of them are 1. Render queue in shaders and 2. Painter's algorithm but eventually, what appears in front and what stays hidden is decided by Z-sorting/depth sorting. Here is the authoritative sequence of order of objects that will appear on the screen. Z-sorting/ Depth sorting is the final step to sort pixels based on the z-distance from the camera, but we can still turn ZWrite-off in the shaders (which in a way breaks Z-sorting). If we turn off ZWrite in all the shaders then render-queue will be in charge of deciding what comes in front and what goes in back If all shaders have ZWrite turned off and as well as they are on the same render-queue then the distance of their transform point from the camera will decide the render order. Eg : - ZWrite Off - Render Queue same - Painter's algorithm - ZWrite Off - Render Queue in
Read more