In this tutorial we will learn the Sign Distance Functions (SDF) of different Shapes.
Sign Distance Functions are very important to perform a lot of geometry operations that you will learn in later tutorials.
First watch this tutorial, otherwise it would be difficult for you to understand things in this tutorial.
Click Here !
First add a plane and set the plane rotation to (90, 180, 0).
Add a unlit shader and apply it to the plane material.
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, origin shifted to the center.
If you don't know about origin shifting you could watch this tutorial. Click Here !
Sign Distance Functions returns positive value outside the shape boundary and negative values inside the shape boundary, and 0 value at the boundary of the shape.
Like the CircleSDF(UV, Radius).
If we multiply SDF with 5.
It will transform SDF values,
From (0.2 0.1 0.0 -0.1 -0.2 -0.3 -0.2 -0.1 0.0 0.1 0.2)
To (1.0 0.5 0.0 -0.5 -1.0 -1.5 -1.0 -0.5 0.0 0.5 1.0)
SDF values greater than 1 are useless for color channels, because color channels takes it as 1. e.g 1.2, 1.4, 2.0
We can use the fractional parts of SDF values greater than 1, frac() function returns the fractional part of a number.
For negative values frac() function works differently, for example if we input -1.12 to frac() function, it will return +0.75 instead of -0.12. (Highlighted with green cells in right image)
And multiply fractional Parts of (SDF * 5) with the color, it will create these radial gradients.
ColorPallet is a function, which returns random color. (highlighted with green cell in left image)
To animate it we are adding(+) _Time.y * 3 in SDF at each frame. e.g SDF += _Time.y * 3
float BoxSDF(float2 UV, float2 Dimension)
{
float2 d = abs(UV) - Dimension;
return length(max(d, 0)) + min(max(d.x, d.y), 0);
}
Just like CircleSDF(), BoxSDF() function return positive values outside the box and negative values inside the box, and 0 value at the boundary of the box.
BoxSDF() takes UV and box width and height as input.
float dot2(float2 v )
{
return dot(v,v);
}
float HeartSDF(float2 p)
{
p.x = abs(p.x);
p.y += 0.58;
if( (p.y + p.x) > 1.0 )
{
float v1 = sqrt(dot2(p - float2(0.25, 0.75)));
float v2 = sqrt(2.0) / 4.0;
return v1 - v2;
}
float x1 = dot2(p - float2(0.0, 1.0));
float x2 = dot2(p - 0.5 * max(p.x + p.y, 0.0));
return sqrt(min(x1, x2)) * sign(p.x - p.y);
}
There are a lot SDF functions for a lot of shapes, you could find those function from this website.
https://iquilezles.org/articles/distfunctions2d/
