Shader Programming

Zoom Effect

In this tutorial we will learn how to create a Zoom 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!

Project Setup

First add a plane then rotate it's face toward camera, and 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. Also apply a texture to the plane.

open the Unlit Shader in Visual Studio.

With this rotation of plane, the origin of i.uv is bottom left corner.
It doesn't make any difference that the origin of i.uv is on top right corner or bottom left corner.

We will start from this point, a simple texture applied on a plane

Open your unlit shader in visual studio.
The very first thing that you have to understand is the tex2D() function. (mentioned with yellow cell)

For example the plane in our Unity's scene covers some pixels of the screen. (mentioned in 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.

First draw a circle.
If you don't know how to draw a circle then you could follow this tutorial. Click Here!

Next is to pick the colors from texture for the pixels inside the circle, this time we will use (UV + float2(0.5, 0.5)) instead of i.uv to get the color from texture.
(UV + float2(0.5, 0.5)) is same as i.uv.

i.uv or (UV + float2(0.5, 0.5)) whatever you choose to get the color data from texture,
it's (i.uv or (UV + float2(0.5, 0.5))) x-component must have range of values (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0) from left to right.

and it's y-component must have range of values (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0) from bottom to top. (As shown in the image)

UV.x & UV.y have range of values (-0.5 .. -0.25 .. 0.0 .. 0.25 .. 0.50) from left to right & from bottom to top. (Shown in left image)
If you add(+) float2(0.5, 0.5) in UV, it's range will transform to (0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0) from left to right & from bottom to top. (Shown in right image)

So, (UV + float2(0.5, 0.5)) is same as i.uv.

To Zoom the image inside the circle we just have to scale the UV.x & UV.y inside the circle.

When UV values are not scaled

Pixel A have (UV + float2(0.5, 0.5)) coordinates (0.62, 0.65) & pixel B have (UV + float2(0.5, 0.5)) coordinates (0.58, 0.42).

We input these coordinates to the tex2D function, and the tex2D function multiply it with the texture dimension
(0.62 x 512, 0.65 x 512) = (317, 332)
(0.58 x 512, 0.42 x 512) = (297, 215)
and get the color from texture position (317, 332) for Pixel A, and from texture position (297, 215) for pixel B.

When UV values are scaled

e.g UV *= 0.5;

Now inside the circle, each pixel have smaller values of (UV + float2(0.5, 0.5)) due to scalling.

Pixel A have (UV + float2(0.5, 0.5)) coordinates (0.31, 0.325) and pixel B have (UV + float2(0.5, 0.5)) coordinates (0.29, 0.21).

We input these coordinates to the tex2D function, and the tex2D function multiply it with the texture dimension
(0.31 x 512, 0.325 x 512) = (158, 166)
(0.29 x 512, 0.21 x 512) = (148, 107)
and get the color from texture position (158, 166) for Pixel A. and from texture position (148, 107) for Pixel B.

Next is to create a ring using the Signed Distance Function (SDF).
If you don't know about the SDF you could follow this tutorial. Click Here !

We can change the ring position from inspector.

Zoom Effect

Project Setup

When UV values are not scaled

When UV values are scaled

Adjust Zoom and ring radius from inspector