MOON / SUN CYCLE PART 1: SHADER CREATION PROCESS
A SNEAK PEEK INTO SDFs, BLENDING AND MOTION DESIGN FOR CREATING UI MATERIALS
The material was developed as part of a mentorship with Adrienne Pugh (Joyrok) on Technical UI Design techniques and Shaders in Unreal Engine 5.
Special thanks to The Game Collective discord server for making this mentorship happen.
Hello adventurers!
The goal of this project is to practice shader magic to be able to create more optimised and easily modifiable materials for UIs while creating something whimsical and pretty! 😀
Everything is done procedurally in the Material Graph.
Let’s dive into the process.
A circle SDF was creted, following Adrienne’s tutorial. Even though the UI Material Lab already has a Circle SDF node, I decided to redo it to grasp the logic of Inigo Quilez’ SDF functions.
After creating a circle, I decided to give a try at making a moon. It is a more complex shape but also one of my favourite – night witch vibes –
I do not fully understand the math behind it, but I used chatGPT to help me get the basic idea.
At this point, I wanted to try blending shapes and the Moon / Sun Cycle popped in my head.
For the circle and the sun rays I used Material Functions from the UI Material Lab library. For the blend, I started with using a simple Lerp node. Adrienne suggested using Quilez’ equations to blend the masks instead of a lerp which added a nice subtle smooth into the blend.
Time for motion!
I started with something as simple as a small X offset but it felt quite soulless and unsatisfying. I wanted to create something more dynamic that would give away the feeling of a Day / Night Cycle.
Initially, I did the animations using a bunch of Remaps and Clamps which was super counter-productive and I still don’t know how I managed to make something that actually looked nice.
A moment of appreciation for experimentation and its odd outcomes.
But of course, there was absolutley no way this was an optimal way to do this.
I also wanted to add some easing to add more character to the shape. Adrienne proposed using Curves to make animations and sent me a how-to video which immediately gave me the idea of how to use Curves and Curve Atlases to animate materials.
TIP: Connecting parameters to named reroutes and using those instead, helps keep the graph clean and more easily modifiable by keeping things in one place. It seems to be the equivalent of using variables instead of hard coded values in a script.
After hours of trying things out, this is the result I was most happy with – TA DA!
Resources
Joyrok – Tech Art Chronicles: What Are SDFs Anwyay? https://joyrok.com/What-Are-SDFs-Anyway
Joyrok – Tech Art Chronicles: SDFS – Part Two https://joyrok.com/SDFs-Part-Two
https://iquilezles.org/articles/distfunctions2d/
https://iquilezles.org/articles/smin/
Joyrok – Curve Atlas as Master Time https://www.youtube.com/watch?v=CbIoi3o987c