Fabrizio Bergamo

Real-Time FX & Tech Art

2D SDF – Advanced Shapes

Material Function Library UE5

The last piece of my 2D SDF library.
All of the advanced shapes you can see in this post are coming from Indigo’s Article (+ShaderToy), please check it out:
2D distance functions

I’ve only recreated them in Unreal’s Material Graph using nodes, it was a lot of fun and a great way to learn more about hlsl and glsl
If you want to know more about Sign Distance Fields please check out my blog posts about it, here’s the first introductory one:
2D SDF – Basic Shapes and Visualization – Material Function Library

Rounded Rectangle – Material Graph

Rhombus – Material Graph

Isosceles Trapezoid – Material Graph

Parallelogram – Material Graph

Isosceles Triangles – Material Graph

Triangle Exact – Material Graph

Uneven Capsule – Material Graph

Pentagon – Material Graph

Hexagon – Material Graph

Octagon – Material Graph

Hexagram – Material Graph

Star 5 – Material Graph

Star – Material Graph

Pie – Material Graph

Cut Disk – Material Graph

Arc – Material Graph

Vesica – Material Graph

Moon – Material Graph

Circle Cross – Material Graph

Egg – Material Graph

Hearth – Material Graph

Cross – Material Graph

Rounded X – Material Graph

Polygon – Material Graph
The only one that had to be in a custom hlsl node since it contains a for loop

Ellipse – Material Graph

Parabola – Material Graph

Parabola Segment – Material Graph

Bobbly Cross – Material Graph

Tunnel – Material Graph