UI SDF Shape Animation

I made this project with the intent of messing around with sdfs and further experimenting with animating shaders. In UI format - as shapes are perfect for that!

FIGURING OUT HLSL IN UNITY URP
- Wanted to challenge myself to use hlsl for shaders to get used to it in the future.
- I was frustrated to find out that in unity 6, hlsl seems to not work with urp. The only video that showed a fix for all the red lines was a year ago - and it didn't fix my problem. And so hlsl include files with shader graph was the only answer.
- Unfortunately, after way too long, I saw unity wasn't making hlsl files with the create shader button, but also making a text file hlsl did not work for me.
- Thankfully, after researching a lot, I found out you can create an hlsl file in unity by downloading vfx graph and pushing a button!
- So I set up the files with shader graph.

ANIMATION
- I used dotween in C#
- What I did was lerp a value of 0-1 to drive a shader value to change.
- In this time I learned about tweeners and that I can change material value in there - and not using coroutines as I was trying before!
- I had to create an animation system, so I am not just blindly changing values.
- It is still primitive, but good enough to create new animations in a reasonable time.
- I use materials as seperate "states", so I can actually see what I want it to look like. Then just store all the shader values in scriptable objects. Then, the scriptable object data is passed to the tweener and because I am using a 0-1 lerp in the tweener and just using it to change the shader value through a calculation with that - I could reuse the same tweener!
Which is great as it would be a mess to make different ones for each animation value change and state.
- So, all the values that are called to change get changed at the same time, and so the shader updates and animation happens.
- After the system was working - I could focus on actually doing the motion design with timing and easing.

SDFS AND SHADERS
- I specifically wanted a way to create a shape using edge count - so the shape is modular and a button can be any shape. There also needed to be a seperate border that is separately adjustable and surrounds the shape. As well as "rays" to carve out the sides, so i can have a sort of border and corner option to animate.
- There was a lot of debugging and relearning trigonometry and getting the help of llms, forums and research on sdfs to fix stuff and make it work. Shader graph actually really really helped as it visualised my isolated functions in the graph for finding problems.

- The method uses polar angles, distance and sector division to get a distance from an edge, which determines the sdf value.
- Then just use the same function, and isolate an outer border.
- Generate "rays" using angles perpendicular to the edges and making it "carving" the shape or border, and being scalable.
- Some things I also had to fix like setting up rotation that keeps visual center for odd sided shapes by shifting in rhythm with rotation.
So that the border does not clip the mesh.
- And making sure border size doesn't change with scaling and such.

Lastly, the new canvas shader allows emission for UI! So I added that with some post processing for the border.