In this tutorial we will learn about the signed distance functions (SDF).
signed distance functions (SDF) are a different way to define a shape. e.g circle, ring, box
SDF's helps in performing a lot of geometry operations, that we will do in the upcoming tutorials.
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.
We will start from this point, a circle drawn on screen.
If you don't how to draw a circle you could follow this tutorial. Click Here
The UVLength is zero in the center and increases as we move away from the center of circle, in all directions.
left image below
Now minus 0.2 from UVLength, e.g SDF = UVLength - 0.2;
highlighted with green cell in middle image.
(0.0 - 0.2 = -0.2) , (0.1 - 0.2 = -0.1) , (0.2 - 0.2 = 0) , (0.3 - 0.2 = 0.1)
SDF is -0.2 in the center and SDF is 0 at the circle boundary.
Generally SDF have negative values inside the circle and positive values outside the circle.
Multiply SDF with the col. SDF is negative inside the circle, so color is black and positive outside the circle, so color is grey.
Negative values taken as black color.
Multiply the absolute values of SDF with the color.
At the boundary of circle the SDF is zero so color is black.
Inside and outside of the circle abs(SDF) returns positive values.
In the center color intensity is 0.2 and decreases as we move close to circle boundary.
Let's draw some simple shapes, using the SDF.
First we will draw a circle, using smoothstep() function.
smoothstep(max, min, value)
If value is less than min, then smoothstep() function returns 1.
If value is greater than max, then it returns 0.
SDF is less than zero inside the circle, so smoothstep() function returns 1.
SDF is greater than 0.01 outside the circle, so it returns 0.
When SDF is greater than 0 and less than 0.01, e.g (0 < SDF < 0.01)
It return lerp values from 0.0 .. to .. 1.0
Results in smooth circle edge.
Second we will draw a ring.
We know that abs(SDF) is positive inside and outside of the ring.
smoothstep() function will return 0 if abs(SDF) is greater than max value (0.05).
It could also be done in a simple way.
We can also create a function named as CircleSDF(). (Mentioned with green cell)
