You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+133-9Lines changed: 133 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ For our purposes, we'll simplify the rendering pipeline. Here's a image showing
20
20
21
21
I like to think of shaders as programs that transform one type of information (model data, colours, etc.) to another type of information (pixels/fragments). Object data is data that is inherit to the object. Things such as points in the model, normals, triangles, UV coordinates, etc. Custom Data/Properties are things that we can pass into a shader to use. Things such as colours, textures, numbers, etc.
22
22
23
-
The first step of the shader pipeline is the vertex function. Vertexes, as you might know, are just points. The vertex function will work with the vertices in the model and prepare them for the next step, the fragment function.
23
+
The first step of the shader pipeline is the vertex function. Vertices, as you might know, are just points. The vertex function will work with the vertices in the model (Along with other data such as normals) and prepare them for the next step, the fragment function.
24
24
25
25
The fragment function will take in vertices and shade them in. Think of it like a painter and their paint brush. It ultimately outputs pixel data, in a (R, G, B, A) format.
26
26
@@ -30,11 +30,11 @@ Lastly, the pixels are pushed to a frame buffer, where they may be manipulated f
30
30
31
31
So before we start writing some shader code, let's setup our scene. Create a new project in Unity, and import all the assets:
32
32
33
-
[Bowl Model](./Assets/Models/Bowl.blend)
33
+
*[Bowl model](./Assets/Models/Bowl.blend)
34
34
35
-
[Noise texture](./Assets/Textures/Noise.png)
35
+
*[Noise texture](./Assets/Textures/Noise.png)
36
36
37
-
[Bowl texture](./Assets/Textures/Bowl.png)
37
+
*[Bowl texture](./Assets/Textures/Bowl.png)
38
38
39
39
Add a cube, a sphere, and the bowl model to a new scene and save the scene. Here's what your scene should look like after:
40
40
@@ -48,7 +48,7 @@ Next, right click in the Project view (Or go to Create) and add a new Unlit Shad
48
48
49
49
Then, right click the shader file we just made and go to Create > Material. Unity will automatically create a material that uses that shader with the correct name.
50
50
51
-
__Note: a "Material" in Unity is just a *instance* of a shader. It just hold onto the custom data/properties.__
51
+
__Note: a "Material" in Unity is just a *instance* of a shader. It just saves the values of the custom data/properties.__
52
52
53
53
54
54
@@ -60,13 +60,137 @@ Everything in the scene should look white and without shadows or shading, like t
60
60
61
61
## Part 4: Skeleton of a Unlit Shader
62
62
63
-
Time to start writing our shader! Let's open our Tutorial_Shader.shader file we create before. You'll see Unity automatically generates some code for us to use/build off of. For the sake of this tutorial, delete all of this and make the .shader file blank.
63
+
Time to start writing our shader! Let's open our Tutorial_Shader.shader file we create before. You'll see Unity automatically generates some code for us to use/build off of. For the sake of this tutorial, delete all of this and make the .shader file blank. All shaders in Unity are written in language called "ShaderLab".
64
64
65
65
To start we'll add this code:
66
66
67
+
```
68
+
Shader "Unlit/Tutorial_Shader" {
69
+
...
70
+
}
71
+
```
72
+
These lines of code just specify where the shader code is. The string in quotes after the *Shader* keyword specify to Unity where you'll find the shader.
73
+
74
+
For example:
67
75
```hlsl
68
-
Shader "Unlit/Tutorial_Shader"
69
-
{
76
+
Shader "A/B/C/D/E_Shader" {
77
+
...
78
+
}
79
+
```
80
+
81
+
82
+
If you save your shader and switch back to Unity, you'll notice all our objects now are pink:
83
+
84
+
85
+
86
+
This is a fallback shader that Unity will use whenever your shader has errors in it. If you ever get pink objects, you can click on your shader file in the project window and look at the inspector to see the corresponding errors. For now, we'll have pink objects because we haven't completed our shader.
87
+
88
+
Next up is the properties block:
89
+
90
+
```
91
+
Shader "Unlit/Tutorial_Shader" {
92
+
Properties {
93
+
...
94
+
}
95
+
}
96
+
```
97
+
98
+
The properties block is where we can pass in that custom data we were walking about before. Anything we declare here will be shown in the Unity editor for us to change and be exposed to scripting aswell.
99
+
100
+
Underneath our properties block we'll have our subshader:
101
+
102
+
```
103
+
Shader "Unlit/Tutorial_Shader" {
104
+
Properties {
105
+
...
106
+
}
70
107
108
+
SubShader {
109
+
...
110
+
}
71
111
}
72
-
```
112
+
```
113
+
114
+
Each shader has 1 or more subshaders. If you're deploying to multiple platforms it can be useful to add multiple subshaders; For example, you might want a subshader that is higher quality for PC/Desktop and lower quality but faster subshader for mobile.
115
+
116
+
Then we have our pass:
117
+
```
118
+
Shader "Unlit/Tutorial_Shader" {
119
+
Properties {
120
+
...
121
+
}
122
+
123
+
SubShader {
124
+
Pass {
125
+
...
126
+
}
127
+
}
128
+
}
129
+
```
130
+
Each subshader has atleast one pass, which is actually where the object get rendered. Some effects require having multiple passes, but we'll just focus on one for now.
131
+
132
+
Within our pass, we have the actual rendering code block:
133
+
```
134
+
Shader "Unlit/Tutorial_Shader" {
135
+
Properties {
136
+
...
137
+
}
138
+
139
+
SubShader {
140
+
Pass {
141
+
CGPROGRAM
142
+
...
143
+
ENDCG
144
+
}
145
+
}
146
+
}
147
+
```
148
+
Anything within CGPROGRAM and ENDCG is where we actually write our shading code. For Unity this is a variant of HLSL and CG shading languages.
149
+
150
+
Next, we'll tell Unity what our vertex and fragment functions are:
151
+
```
152
+
Shader "Unlit/Tutorial_Shader" {
153
+
Properties {
154
+
...
155
+
}
156
+
157
+
SubShader {
158
+
Pass {
159
+
CGPROGRAM
160
+
#pragma vertex vertexFunction
161
+
#pragma fragment fragmentFunction
162
+
ENDCG
163
+
}
164
+
}
165
+
}
166
+
```
167
+
Here, we're saying we have a vertex function called "vertexFunction", and a fragment function called "fragmentFunction"".
168
+
169
+
We'll define those functions aswell:
170
+
```
171
+
Shader "Unlit/Tutorial_Shader" {
172
+
Properties {
173
+
...
174
+
}
175
+
176
+
SubShader {
177
+
Pass {
178
+
CGPROGRAM
179
+
#pragma vertex vertexFunction
180
+
#pragma fragment fragmentFunction
181
+
182
+
void vertexFunction () {
183
+
184
+
}
185
+
186
+
void fragmentFunction () {
187
+
188
+
}
189
+
ENDCG
190
+
}
191
+
}
192
+
}
193
+
```
194
+
If you save your shader now and return to Unity, your objects will disappear! That's because this is bare skeleton for a unlit shader, but we're not returning anything for Unity to actually render.
0 commit comments