Using Shaders to design UI in XR

Over the past couple of weeks, I have been exploring coding CG shaders in Unity, because I realized shaders are much more performant for animations and visual effects.

Because I work on XR utility experiences rather than games , I started to ask myself, how might I use shaders to design UI instead of using Unity Canvas.

I started experimenting with CGprogram by making a simple shader that supports the following customizations for a UI button:

1. Fill Color

2. Border Color

3. Border Width

4. Corner Radius

5. Toggle Pop Animation

6. Animation Speed

Here is a snippet of my vertex shader using the custom function vertAnim as vertex position input.

Here is a result of this shader.

Next, I will explore more animation variations and linking to C#.