An Introduction to HLSL Programming 2

Step 1
In this lesson we'll learn how to use UV coordinates and manipulate the coordinates to do interesting things!
Step 2
Looking back at our surface function, we have IN.uv_MainTex but we want to access it.

So let's create another variable before it, called uv as a float2 type because UV's are in 2D. And make it equal to IN.uv_MainTex;

We already have another IN.uv_MainTex, so let's replace that with uv.

Save the script and continue onto the next step.

Step 3
Where are the UV coordinates?

Let's comment out the lerp function for now.

And make it equal to uv.x

Save the script and see what appears in Unity!

Check Your Work
Step 4
We got something that's black on one side and white on the other side.

Your screen may look different depending on how you are viewing the axis with your Scene Camera

Here's what the colors mean, black is 0 and white is 1

That would also mean that 0.5 is completely gray in the middle.

Step 5
Right now we're looking at the UV's X axis, so how would we look at the Y axis?
Step 6
Okay let's delete the uv.x code and uncomment our lerp() function. We'll move onto something interesting.

We'll use the uv.x with our _Saturation. So we'll creation another float variable called "saturation" with no underscore and a lowercase "s", multiply by _Saturation, and replace _Saturation with saturation.

Save the script and see what this looks like!

Check Your Work
Step 7
Let's see what it looks like in Unity, also try sliding the Saturation slider!
Step 8
Using the Sin() function

Next we'll try using the sin() function from Trigonometry!

Now we'll use sin(uv.x) instead of uv.x * _Saturation

Save the script and you'll see that it's not that interesting yet.

Step 9
How does the sin(x) function work?

The sin(x) function varies from -1 to 1 on the Y axis but it goes up, down, up, down, up, down on the X axis.

Right now our uv.x only goes from 0 to 1.
*Remember when our plane was black on one side and white on the other side *

To do a full revolution we must use 2PI, or 3.14 * 2, which is 6.28

Step 10
Let's lets include 6.28 in our code to multiply with uv.x

Save the script and see what happens!

Step 11
So what do these colors mean?

We have a wave of colors going back and forth between negative, none, and saturation.

Step 12
Next we'll learn how to bend UV coordinates and see what it'll do with our texture.

Right after we made the uv float2 variable. Let's add

uv.y += sin(uv.x * 6.28);

Save the script and see what happens

It's bent a bit too much, let's try multiplying that by .1. Save your script and view the plane.

It looks better now and we can see the bricks easier.

Step 13
Learning the _Time.y variable in Shader Programming

To get anything to move in HLSL, we use _Time.y, this is a single value that always goes up continuously (Even without pressing Play Mode).

So let's add this to our code.

Save the script and see what happens!

Step 14
Next we'll try to move the vertices on a mesh this time, instead of the pixels! So create a new Unlit Shader.

You can name it anything you want, I'll name it as "3DShader"

Step 15
Double Click to open this shader, it looks different than the surface shader but we'll walk through it!

We'll try something new to the categorizing, it's possible to put a sub category in a category!

Step 16
Let's go over with what we know from the previous surface shader along with new stuff!
Step 17
Fragment Shader is the same as the surface shader!

You don't have to do this, but in the Fragment shader, if I type

return fixed4(1,0,0,0) instead of return col

fixed4(1,0,0,0) is red!

Step 18
What we'll be working on is the Vertex shader, or the vert() function.

So the job of the vertex shader is that it gets called on every vertex on the object and we can move them around!

We'll need to see the vertices and polygons on our mesh, so let's turn on wireframe view from Gizmos

Every time a line intersects or points to a "spot", that spot is a vertex

Step 19
Let's try doing the wave!

Let's add this line under v2f o. (v2f means verts to frag by the way)

v.vertex.y += sin(v.vertex.x);

Save and see what happens

It did the wave!

Step 20
But what just happened?

v.vertex.y += sin(v.vertex.x);

We took the Y-axis of all the vertices and added the waves that the sin() function gives, along the X-axis

This is where we pay attention to the Axis colors in Unity. The Y axis is the light green **color and the X axis is the **red color.

Step 21
Let's use _Time.y again to make it move!

Note: It's thinking time, what would this be good for? A flag? Ocean waves? Water? Earthquake?

We can try more! On top of grabbing the y axis and moving it along the x axis, we can grab both x and y axis and move it along the x axis!

That's definitely a stronger wave!

Step 22
It's Fun time, let's use this shader on other 3D meshes! Sphere, Cylinder, Cube, etc!

Can you create an Inspector property called WavePower and use it to make the waves stronger/weaker?

Step 23
You are finished with the Introduction to HLSL Programming course! Congradulations!
An Introduction to HLSL Programming 2 Info



Created By

tina nguyen


Introduction to HLSL Graphics

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach