Happy #VFXFriday! 🎉📊 Here's how to EASILY create a procedural progress bar in #Unity3D's Shader Graph, with sliders to control the look and progress fill (percent complete as [0.0, 1.0]). Written breakdown + images in 🧵👇!! #madewithunity #unitytips #gamedev #indiedev #vfx

A closer look in Shader Graph (URP unlit), testing every parameter. See the QT for @cmzw_'s original in #MaterialMaker. Capsule SDF in next tweet.

Capsule (Line Segment) SDF: float2 pa = p - a, ba = b-a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); output = length(pa - ba * h); > Use a custom expression node and/or create a sub-graph for it to use in the main shader graph.

📸 for easy reference. // Shader Recipe // 🧾 1. Line SDF -> clip = 3x capsules. 2. 2x capsule: (largerCap - smallerCap) = shell. 3. Scrolling horizontal UV fract -> clip = bars. 4. 1x capsule: (bars * smallestCap) = masked bars. 5. Combine (add) -> saturate -> output as alpha.

Amazing, I even liked the background, do you have breakown for the background shader too ?

It's actually some particles on a separate camera with the "fire" shader. 😃 There's heavy depth of field bokeh on the background camera, which combined with particle morphing produces shimmer + blobs. There's also a background plane with evolving noise.

amazing. SDFs are def a game changer for any vfx artist. it really expands the possibilities.

Majestic!

I haven't done that much graph creation but is it resource intensive?

The core shader logic is all on screen. It's just those nodes!

Interesting to study but using it as is in a UI wouldn't be performant because proper efficient material handling would be a hassle (it needs per renderer properties set by a script handling material property blocks). If you have ideas on how to do the last bit I'm interested 👀