Icons vector created by pikisuperstar

Introduction to Shader Coding in Unity

What is a Shader?

Code that runs on GPU.

In Unity, shader programs are written in a variant of HLSL language (also called Cg but for most practical uses the two are the same)

In computer graphics, a shader is a type of computer program originally used for shading in 3D scenes (the production of appropriate levels of light, darkness, and color in a rendered image). They now perform a variety of specialized functions in various fields within the category of computer graphics special effects, or else do video post-processing unrelated to shading, or even perform functions unrelated to graphics.

Shader vs Material

The material gives input/parameters to shaders.

Shader works on those inputs.

Different materials can share the same shader with different properties(inputs to shaders).

Object refers to material, material refers to a shader. (in Unity)

Types of Shaders

Vertex Shader

Each mesh is made up of a bunch of vertices arranged in a 3d space.

A vertex shader takes into account the properties/data associated with these vertices to perform any operation on them.

The most important work of vertex shader is vertex transformation — the first stage in graphics pipeline — it transforms the vertex position(local space position) into screen position — which later goes through rasterization for other operations.

For example, if you want the mesh to deform at random vertices — you can do that with a vertex shader.

Source : www.haroldserrano.com/blog/what-is-a-vertex-shader-in-opengl

Fragment/Pixel Shader

A frag and pixel are technically two different things but we can now just imagine them to be the same/related for better understanding.

Just like a mesh is made up of many vertices — these vertices are joined together to form triangles/polygons — a fag shader works on the frag/pixels in the area between the vertices forming the triangles.

The rasterization process breaks up each geometric primitive, such as a triangle, into pixel-sized fragments for each pixel that the primitive covers. A fragment has an associated pixel location, a depth value, and a set of interpolated parameters such as a color, a secondary (specular) color, and one or more texture coordinate sets.(Source : nvidia cg tutorials)

Graphics Pipeline Example

A frag shader works on these fragments formed during the rasterization process.

Thus a frag shader may work on the output from the vertex shader to attach a color to each pixel/frag of the area of the polygons forming the mesh.

Screenshot from youtube video : www.youtube.com/watch?v=C1ZUeHLb0YU

Creating a basic Unlit Shader in Unity

• Right-click anywhere in the Project panel to create a new Unlit Shader (Name it whatever you want — I am calling it “SimpleShader”)

• Right-click the new shader file and create material out of it. (Name it whatever you like — I am calling it “SimpleMaterial”)

• Create any primitive shape (3d cube, sphere, etc) and drag and drop the material (SimpleMaterial) on the 3d Gameobjects.

Now click the SimpleShader file to open it in Visual Studio :

you will see something like this (just go through it — you don’t need to understand anything)

Unlit Shader Code generated by Unity

The above code has a lot of template code — that we are not gonna use for now — so I have removed all the code related to UnityFog and Properties — after removal and some changes your shader will look like this

(Read the comments carefully) — you can copy-paste this code

Simplified Unlit Shader code for understanding

What are POSITION, TEXCOORD0, SV_POSITION , SV_Target ?

These are called Semantics.

A semantic is a string attached to a shader input or output that conveys information about the intended use of a parameter. Semantics are required on all variables passed between shader stages.

Thus we can say using semantics can help to decouple the shaders.

An obvious benefit of semantics, you don’t need the same variable names between stages, so the Graphics pipeline does matching via semantics instead of the variable name, and rearranges data as long as you have a compatible layout.

They are just a standard developed by few companies and you will slowly learn all semantics as you start making shaders.

If you want to learn more about semantics: Semantics Microsoft Docs

So if we have to write pseudo code for an unlit shader it will look like this:

Pseudocode for basic shader in Unity

Conclusion :

• Shader code runs on GPU.
• Two main types of shaders are vertex and frag shader.
• Vertex shader works on vertices of mesh data and frag colors the pixels(frag)
• In a simple unlit shader, we pass data from appdata(Vextex Inputs) to vert (main vertex shader code) which make changes and assign values to v2f (vertex outputs for frag shader)
• Frag shader uses input form v2f to color/shade or make any change and return final output in (RGBA) form.

Flowchart: Basic Unlit Shader (Vertex Shader + Fragment Shader)

I’m still learning about shader coding.

For more detailed video tutorial on the article you can follow this amazing tutorial by Freya Holmér on Youtube :