In this tutorial we will learn how to create a Pixelate Effect 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!
Add a plane with rotation (90, 180, 0).
Add a unlit shader, and apply the material to the plane.
Also add a texture to the material.
With this rotation of plane, the origin of i.uv is bottom left corner.
Open your unlit shader in visual studio.
The very first thing that you have to understand is the tex2D() function. highlighted with yellow cell
For example the plane in our Unity's scene covers some pixels of the screen. Left image below
The size of these grey pixels (In left image) is very large, actual size of pixels is very small. (just to give you an understanding, just consider these as screen pixels).
tex2D function gets the color from the texture and then we apply that color to the pixel.
tex2D function take a texture and texture coordinate i.uv as input.
Consider the texture size is 512 x 512.
For example you are at the red pixel, at that pixel the i.uv is (0.85, 0.85), we input this to the tex2D function, tex2D function will multiply it with texture width and height, (0.85 * 512, 0.85 * 512) = (435, 435), after that it will get the color from texture at position (435, 435), and apply that color to pixel.
Similarly at green pixel the i.uv is (0.5, 0.5), after multiplying it with texture width and height, (0.5 * 512, 0.5 * 512) = (256, 256), getting the color from center position of texture and applying to the pixel at the center of the plane.
We will start from this point, a Grid of 15 x 15 cells drawn on the screen.
If you don't know how to create a Grid you could follow this tutorial. Click Here !
The floor(float Input) or floor(float2 Input) function returns the integer part of a number.
Like if you input 4.5 it will retun 4, and if you input (3.5, 6.7) it will return (3, 6).
For example, in the first row we have decimal numbers from 0.0 to 2.0.
In the second row we have fractional parts of these decimal numbers generated with the help of frac function.
In the third row we have the integer parts, generated with floor() function.
Consider the cell highlighted with red boundary in second image below
At that cell, UV.x & UV.y has range (3.0 .. 3.25 .. 3.5 .. 3.75 .. 3.99), from left to right & from bottom to top.
Fractional parts of both UV.x & UV.y, UVFrac.x & UVFrac.y has range (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0), from left to right & from bottom to top.
Floor value of UV.x & UV.y, both UVFloor.x & UVFloor.y is 3 for all the pixels in that cell, it stays the same for all the pixels in the cell. e.g (3, 3)
UVFloor.x & UVFloor.y of each is cell is written on each cell. (second image)
UVFloor.x has range (0 .. 3 .. 5 .. 7 .. 9 .. 11 .. 13 ..15) from left to right.
UVFloor.y has range (0 .. 3 .. 5 .. 7 .. 9 .. 11 .. 13 ..15) from bottom to top.
These values are large and useless to make these values usefull we will normalize these values to (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0)
To do this we will divide the UVFloor by Grid size that is 15.
Now UVFloor on red cell is (0.21, 0.21). highlighted with red boundary in second image below
Let's pass these values to red and green channel.
At yellow cell highlighted with yellow boundary in third image below the UVFloor is (0.0, 0.0) so color of whole cell is black.
At orange cell the UVFloor is (0.9, 0.9), and color of that cell is yellow.
More briefly, each pixel in the orange cell in third image have same value of UVFloor that is (0.9, 0.9), that means each pixel will have same color in that yellow cell.
You could // comment the float2 UVFrac, we will not use it.
We Know the tex2D function, input the pixel coordinates (i.uv) and it will get the color from texture.
i.uv.x & i.uv.y has range (0.0 .. 0.25 .. 0.50 .. 0.75 ..1.0).
UVFloor.x & UVFloor.y also has range (0.0 .. 0.25 .. 0.50 .. 0.75 ..1.0).
Now input UVFloor to the tex2D function to get the color from the texture and apply it to each cell on the Grid.
How it is working is briefly explained in next section.
We know that each cell contains a number pixels, at pixel A, B & C the value of UVFloor is (0.6,0.4), and we input these coordinates to tex2D function and it will return same color for pixels in that Grid.
Because these 3 pixels have same value of UVFloor that is (0.6,0.4), so tex2D function will get the color from same position on the texture.
Now set the Grid size to 50.
