In this tutorial we will learn how to create a Black Hole 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!
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, a simple texture applied on a plane
If you don't know the working of tex2D() function, follow this tutorial for understanding . Click Here!
First step 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 are adding(+) the ring color (white) with the texture color.
Smoothstep values are 0 outside the ring. And greater than 0 inside the ring,
inside the ring Smoothstep values have range (0.1 . 0.25 . 0.50 . 0.75 . 1.0 . 0.75 . 0.50 . 0.25 . 0.1).
(Values highlighted with green cells in the right image)
All the pixels have different values of i.uv, we input the i.uv to the tex2D() function to get the color from the texture. (Left Image)
In the right image, we have changed/distort the i.uv values of the pixels that are inside the ring.
Changed/Distorted i.uv values of some pixels inside the ring are highlighted with green cells, you could compare these values with the left image.
These changed/distorted i.uv values inside the ring will pick color from wrong positions on the texture and results in distortion.
Next thing is how to changed/distort the i.uv values inside the ring?
To changed/distort the i.uv inside the ring we will multiply it with the smoothstep values, because smoothstep values are greater than 0 inside the ring.
(In right image below)
Values (highlighted with the orange cell) are smoothstep values, and values (mention with green cell) are i.uv.y values.
And values (highlighted with yellow cell) are result of multipication of i.uv.y values with smoothstep values.
Smoothstep values are 0 outside the ring, if we multiply it with i.uv.y, i.uv.y will also become 0 outside the ring that is why we are multiplying i.uv.y with (1 + Value).
Same would be the process for i.uv.x values.
We will use these changed/distort i.uv values (highlighted with yellow cell) to get the color from texture, these changed/distort i.uv values will get the color from wrong positions on texture and results in distortion.
To create a black circle in the center, add the line of code. (highlighted with orange cell in left image)
float BlackCircle smoothstep values are 0 inside the black circle and 1 outside the black circle, if we multiply 0 with the color it will result a black color and if we multiply 1 with the color it will not change anything.
(color remains the same outside the black circle)
