Shader Programming

Unity Shader Programming Tutorials

This tutorial series is for absolute beginners, like people with zero Shader programming knowledge, that's why we will start making a Line & Cube. Shader programming is basically a Math's play ground, so we will give you some basic understanding of some Math functions used in Shader programming.

[IMPORTANT]
This tutorial is for absoulte beginners, to avoid complexity just focus only on Math part and how Math functions are working.

Introduction

In this tutorial you will learn how to draw simple Line & Cube in Unity using Unlit Shader.

We will work in fragment function of Unity's Unlit Shader. highlighted with green cell

You do not have to think, that what other parts of Unlit Shader doing like vertex function and other members, we will cover that in next series.

For now you just have to know only this,
fragment function defines the color of each pixel on screen.

Project Setup

First add a plane and set the plane rotation to (90, 180, 0).
Add a unlit shader and apply it to the plane material.

open the Unlit Shader in Visual Studio.

Delete the lines of code highlighted with yellow cells in the right image.

Fragment Function

Fragment function is highlighted with red cell.

The line highlighted with yellow cell.
fixed4 col = tex2D(_MainTex, i.uv);

You could leave it for now, we will understand it later,
(Just for understanding) it is getting the color from texture
If you didn't provide any texture unity will use it's default white texture.

And also (just for understanding) assume this, that the Fragment function fixed4 frag(v2f i) during it's one call, goes through each pixel on the screen to update/set it's color.

Function similar to fragment function is created in C#, [Right Image Below].
Just imagine a invisible nested loop in your mind, and for one call it goes through each pixel in screen, to set its color.

Set Color Of The Pixels

Color of a pixel is defined by four parameters, red, green, blue and alpha. (r, g, b, a)

col is a variable of type fixed4, takes four values as parameters.
Each parameter (r, g, b, a) can have any value between 0.0 .. 0.25 .. 0.50 .. 1.0

if we set (r, g, b, a) values as (0, 0, 0, 1), then color of all pixels will be black, and
for (1, 1, 1, 1), color will be white, and
for (1, 0, 0, 1), color will be red, and
for (0, 1, 0, 1), color will be green, and
and for (0, 0, 1, 1), color will be blue.

Set color Of The Pixels
using the texture coordinate i.uv

i.uv is texture coordinate, what is a texture coordinate? well it could be a little difficult for you to understand it now. The only thing that you should keep in your mind, is what is the value of i.uv on each pixel.

At pixel A, i.uv is (0.0, 0.0)
At pixel B, it is (0.5, 0.5)
At pixel C, it is (1.0, 1.0)
See left image below

i.uv.x have range of values ( 0.0 , 0.25 , 0.50 , 0.75 , 1.0) from left to right.
i.uv.y have range of values ( 0.0 , 0.25 , 0.50 , 0.75 , 1.0) from Bottom to top.
See middle image below

Now let's use this i.uv to define the color of pixels.

Fragment function goes through each pixel on screen during its one call,
if at any pixel the value of i.uv.x is less than 0.5 then color of that pixel is white otherwise the color of pixel is black.

Similarly i.uv.y have range of values (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0) from bottom to top.
If at any pixel the value of i.uv.y is less than 0.5 then color of that pixel is white otherwise color of that pixel is black

i.uv.x is 0 at left and 0.5 at middle and 1.0 at the right.
If we input i.uv.x into red channel, and it will create this gradient.

Similarly i.uv.y is 0 at bottom and 0.5 in middle and 1.0 at top.
If we input i.uv.y into green channel, and it will create this gradient.

Now input i.uv.x in red channel and i.uv.y in green channel.
At top right corner, value of both i.uv.x & i.uv.y is 1.0, if you mix red and green color the result is yellow color.