In this tutorial we will learn how to rotate a cube in Unity's Unlit Shader.
[IMPORTANT]
If you are visiting this website for the very first time, please have a look at the first tutorial, it would help you to understand this tutorial better. Click Here!
First add a plane then rotate it's face toward camera, or set the plane rotation to (90, 180, 0).
Add a unlit shader and apply it to a material, and apply that material to the plane.
open the Unlit Shader in Visual Studio.
With this rotation of plane, the origin of i.uv is bottom left corner.
We will start from this point, with UV's origin shifted at the center.
If you don't know how to shift the origin to center, you could follow this tutorial for understanding.
(How to Draw a Cirlce)
In one of the previous tutorial we translated our whole coordinate system to move a cube.
To rotate a cube we will rotate our coordinate system. (As mentioned in the videos)
It's understandable that we rotated our coordinate system, but the important things is, what happends when we rotate our coordinate system, how that thing works. (that is our learning point)
Before rotating the whole coordinate system, you first have to understand how to simply rotate a vector.
And what happends to a vector when you rotate it ?
For example we have a 2D vector (shown in the left image), it has an angle of 30 o.
At an angle of 30 o it has coordinates (6.9, 4).
Rotate it 30 o anti-clockwise,
At an angle of 60 o it has coordinates (4, 6.9).
So by rotating a vector the only change happends to a vector is its coordinates.
Here is an equation that you give it current coordinates of a vector and an angle and it will return the coordinates of rotated vector, that is (x2 ,y2).
x2 = x1 Cos(θ) - y1 Sin(θ)
y2 = x1 Sin(θ) + y1 Cos(θ)
e.g coordinates of 2D vector at angle 30 o are (6.9, 4), we input these coordinates (6.9,4) as (x1 ,y1) into the equation.
We want coordinates of a vector at 60 o, so we input an angle of 60 o.
and it will return the coordinates of vector at 60 o angle. and that's is (4,6.9)
4 = 6.9 Cos(60) - 4 Sin(60)
6.9 = 6.9 Sin(60) + 4 Cos(60)
[NOTE] you dont have to think, that how this equation did its work, we will cover that in some of our later blogs, so stay tune to our Website.
Each pixel on the grid have a UV vector associated with it.
Create a new float2 UVRotated and assign UV to it.
Input UV.x & UV.y as (x1 ,y1), and an angle of 20 o (clockwise) to the equation.
All the UVRotated vector's are rotated to 20 o (clockwise).
We are multiplying (3.14/180) with the 20 to convert it from PI to Radians.
(Consider the left image below)
When angle is 0, at pixel (mentioned with yellow cell) both UV and UVRotated have same coordinates, e.g (0, -0.5) & (0, -0.5)
(Consider the right image below)
When we rotated UVRotated Vector 20 degree, UVRotated Vector Shifted its position from yellow cell pixel pixel to green cell pixel. UVRotated vector at green cell pixel have coordinates (0, -0.15).
Same vector but on different pixel .
Just simply check that if at specific pixel the absolute value of UVRotated.x & UVRotated.y is less than (0.2, 0.2) or not, if it is then color of that pixel is white otherwise black.
To animate the cube rotation just input _Time.y as angle to the equation.
