Retrofit
For my first entirely procedural HLSL shader made in Unreal, I created an animated shader that employs simple mathematical functions to generate a retro style pattern.
By Lauren D. Bhagwandat
The Inspiration
I came across the amazing work of kishimisu on Shadertoy as well as his tutorials on YouTube and felt compelled to attempt to recreate them in three-dimensional space. I chose to do so in Unreal, which then inspired me to play around with mathematical functions in HLSL to generate procedurally animated shaders.
Purpose
The purpose of this project was to explore the shading capabilities of Unreal Engine 5.
Technology
This shader was written in the High Level Shading Language (HLSL) along with a shading network setup in UE5's material graph editor. The final animation was composited in Adobe After Effects.
Method
I started by implementing in HLSL the procedural palette by Inigo Quilez. This involved creating four float3 Constant nodes defining the desired colours. I created a Custom node where I inputted the code for the palette which took the four colour nodes and Time node as inputs.
Another Custom node was used to hold the 20 lines of HLSL code that generated the animated pattern. To account for the object’s position in world space beyond the origin, I made sure to offset the position with the following code:
float3 offsetWP = WP-OP (WP being the absolute world position, OP being the object's absolute position)
In a for loop, the distance was computed as the length of offsetted world position.
Finally, for pure aesthetic purposes, I added a slightly smooth finish to the shader by decreasing the roughness to 0.1.
The final shader network is as follows:
