Uploaded December 2024 | Updated September 2026, 2 weeks ago

---

In this shader tutorial, we finish off the series of videos on creating a Diablo-style health meter by adding animated bubbles to the liquid in our crystal vial. We also add an alpha channel so this UI element can be transparent.

Here's the code for the hash function:

uint2 v = (uint2) (int2) round(In);
v.y ^= 1103515245U; //Xor equal
v.x += v.y;
v.x *= v.y;
v.x ^= v.x >> 5u; //right bit shift
v.x *= 0x27d4eb2du;
Out = (v.x >> 8) * (1.0 / float(0x00ffffff));

Unfortunately, YouTube won't allow me to use angled brackets (greater than, less than symbols) in a description, so in the code above where it says > (on the fifth line and the seventh line) you'll need to replace that manually with a greater than symbol.

------------------------------------
Subgraph/Material Function Index:

Gradients
LinearGradient - youtu.be/sZBzg-v9d04?si=QDiy1CsgW-mMVsUJ&t=251
SampleGradient - youtu.be/rSn7lUWUN0E?si=WPlixz4L8prnV32G&t=2223
Sphere Gradient - youtu.be/d3VNolKJ_bw?si=Z6uaqA92_sClqpv-&t=85

Helpers
AntiAliasing - youtu.be/sZBzg-v9d04?si=yJwmNYRkhzW4JFiP&t=761
AspectRatio - youtu.be/fDjEq30dwNM?si=5iScu5SYD9shcxkh&t=1758
Gradient - youtu.be/rSn7lUWUN0E?si=bMv1Wk0DYGsHV2Ty&t=2200
HistogramScan - youtu.be/nj7kKHr8QNM?si=-3Odzad3nCI_eNsm&t=290
Mirror - youtu.be/jxr4YK_m8hc?si=WsT2TJjLEqPQbKsC&t=835
Posterize - youtube.com/watch?v=lfY0v4q2dtw&t=1408
RoundedCorners - youtu.be/fDjEq30dwNM?si=Znv2wk6lcJDL1R2T&t=1254

Patterns
Animated Cloud Pattern - youtu.be/qB8GKIWKOp4?si=Zz_sp2E1yR9JPVvJ&t=1136
AnimatedSheen - youtu.be/jxr4YK_m8hc?si=OO1tL6VqiPE3kVo_&t=70
Bars - youtu.be/rSn7lUWUN0E
CircleSegments - youtu.be/CXY7RNwokPU?si=igwTDBogjSz4KwoM&t=56
SquareTiles - youtu.be/ChaXcYB4xvQ?si=dye3PAsDSxVCe8Yo&t=657

SDFs
Circle - youtu.be/GMQym0in8OY?si=X9tSSWsdCwoKvPKy&t=316
Rectangle - youtu.be/fDjEq30dwNM?si=6pataNA5gQySVmQl&t=89
Operators
SDFUnite - youtu.be/R_5CTBgkfZ0?si=sy2t2ppeTviChNog&t=114

Time
LinearTime - youtu.be/jxr4YK_m8hc?si=P80Q0RBWMcmiKRG6
SineTime - youtu.be/R_5CTBgkfZ0?si=m6nMyzw7Pb76hPnq&t=1420

UV
GridTiles - youtu.be/ChaXcYB4xvQ?si=NO-_A1AL92GrWCs2&t=121
Move - youtu.be/R_5CTBgkfZ0?si=5aMYA2ocVdqHzdQj&t=1010
Perspective - youtu.be/rSn7lUWUN0E
Polar Coordinates - youtube.com/watch?v=lfY0v4q2dtw&t=1011
Scale - youtu.be/6UYqtdRoKQ4?si=eVy6RFwycKjYaH4r&t=602
Tilt - youtu.be/jxr4YK_m8hc?si=RyE0GLt0BzDH0w6q&t=207


Here's last week's video on how to add ripples to the top of the liquid:
youtu.be/Ki2X2F31cGc

Here's the playlist for the whole series:
youtube.com/playlist?list=PL78XDi0TS4lF5ASo3vpUFKenMkhMVeZ5y

Shader Book Recommendations
bencloward.com/resources_books.shtml

------------------------------

Theme Music
Peace in the Circuitry - Glitch Hop
teknoaxe.com/Link_Code_3.php?q=1526

Background Music
Speo - The Little Things
youtube.com/watch?v=kvCYuyyLgC0

#UnrealEngine #shadergraph #Unity