Shaders

Writing shaders from scratch

Written by Robin.

Quick introduction to me:

Im a student at the grafische lyceum Utrecht and mainly focus on graphic programming and tools.
Over the past 6 months Ive made myself quite accustomed with shaders and would like to pass on
a little bit of this information by going over the writing process of a very simple.

I will most likely make more of these kind of documents about more advanced shaders and
compute shaders.

The doc will go over how to setup a shader that renders a texture on an object, and being able to
assign a color to it.
Once that has all been explained with code and all we will go over some very simple effects you can
add on the object.

 Creating your first shader:

Unity works with a component system which basicly any unity developer
knows which means that unity also does this with rendering.
Unity has multiple rendering components, it depends on what type of object is
getting rendered. For instance for our example we would want to use a
meshrenderer since it's a 3D model.

Every object should only use one renderer but that renderer can however have
as much materials as it pleases. A material is basically a wrapper for shaders.

*If you already know how to create a shader file in unity skip this page*

So if we want to create a shader we need to make a shader file.

I like to put shaders in their own folder which I simply name Shaders.
 Creating your first shader:

/Go into the project tab and in the asset folder press your Right mouse button goto create and
create a folder name whatever you want your shader folder to be called/

After youve done that go inside the folder.

Once inside the folder /press right mouse button again, go under create then hover over shader
press one of the first 3 types of shader and name it MyFirstShader or whatever you want/ It won't
really matter which type you choose since we're gonna delete all the code and start from fresh.

 Creating your first shader:
After youve created your shader file, Open it and delete all the code from it.
We are going to start from scratch so we understand what happends piece by piece..

So first we start at the top:

Shader "Custom/myFirstShader"
{

What we do here is tell unity that this is a shader and also show it where it's going to be displayed in
unity.

Then we get our Properties tab:

Shader "Custom/myFirstShader"
{
Properties
{

}
}

In here we define all our public variables and we do it like this:

So let's say we want to be able to show a color in the inspector of the material we make a field for
it.

_Color("Color", Color) = (1,1,1,1)

_Color = The variable name; Color = Inspector name; Color = variable type; (1,1,1,1) = default value

And no you do not need a ; at the end of this line.

For more types available in the material Inspector check this link:
https://docs.unity3d.com/Manual/SL-Properties.html

We do the same for the maintexture we want to put on the object.

_MainTex("TextureMap",2D) = "white" {}

Let's move on.

 Creating your first shader:
Now that You should have this

Shader "Custom/myFirstShader"
{
Properties
{
_Color("Color", Color) = ( 1,1,1,1)
_MainTex("Texture",2D) = "white" {}
}
}

Lets now add the subshader and passes in. You can have as many of these as youd like.

Shader "Custom/myFirstShader"
{
Properties
{
_Color("Color", Color) = (1,1,1,1)
_MainTex("Texture",2D) = "white" {}
}
SubShader
{
Pass
{
CGPROGRAMM //Lets the cg know the shader starts here
}
}
}

Everything outside of the pass {} part is part of the shaderlab which sends the cg data over to unity
Everything inside Pass {} is part of the cg and will be where you put in the shader code.

In the pass shader we are first going to assign the what the vertex and fragment function are going
to be named as:
ertex vert
#pragma v
#pragma f ragment frag
You also have
eometry name
#pragma g
#pragma h ull name
#pragma d omain name //But we are not going to fuck with these
 Creating your first shader:
Now let's give the shader a helper file which is called UnityCG.cginc. This will include some built in
helper functions that are used in most shaders.
#include "UnityCG.cginc"

Other helper files are:

#include "HLSLSupport.cginc"//Automatically included
#include "UnityShaderVariables.cginc" //Also auto included
#include "AutoLight.cginc" //Surface shaders use these automatically
#include "Lighting.cginc" //Surface shaders also auto include these
#include "TerrainEngine.cginc" //Helps with terrain and vegetation

So lets start with a predefined struct made from the UnityCG.cginc all still in the pass {} section:
struct appdata
{
Float4 vertex : POSITION;
Float2 uv : TEXCOORD0
};

What we do here is:

Float4 = type of variable; vertex = name of variable; POSITION = data we pull;

Now we have another struct we want to make. The vertex to fragment struct.
struct v2f
{
float4 position : SV_POSITION;
//SV_ makes it so it also works on ps4 and dx9
float2 uv : TEXCOORD0;
};
Next we are going to Build the object:
v2f vert(appdata INPUT)
{
V2f OUT;
OUT.position = mul(UNITY_MATRIX_MVP, INPUT.vertex);
OUT.uv = INPUT.uv;

Return OUT;
}
mul() is basically what youd think it would do it multiplies.
UNITY_MATRIX_MVP = the current modelview projection, I wouldn't worry too much about this
 Creating your first shader:
Now we make the last part of the cg part of the shader which Ill explain more about later.

First we need to redefine our properties since the cg part of the shader has no clue about our
properties.
So first let's create our color:
float4 _Color; //A color is a float4 because its a rbga
And our texture:
sampler2D _Texture; //sampler2D is a 2D texture coming from glsl

And then the fragment function:

fixed4 frag(v2f INPUT) : SV_TARGET /*targets it to the screen*/
{
Float4 texColor = tex2D(_Texture, INPUT.uv) ;

Return texColor * _Color;

}

tex2D is a UnityCG.cginc function.

Now we close the CG part of the shader with:
ENDCG

 Creating your first shader:

So now your code should look like this:

So you see the 2 parts Shaderlab and CG.
The shaderlab part sends the data from the cg part over to unity.
And the cg part is the actual shader.

 Creating your first shader:

Lets put the shader on a material:

Make a material and go to this dropdown menu:

Click on it and go to menu item Custom, Under custom press the myFirstShader.

Click on it and change the color.

Now put the material on a object and there it is your self written shader.