WebGL2 rendering
WIZARD Orb Engine
Health and mana orbs for a game UI ("Vessels of Life & Mana"). One fragment shader draws both liquids, six AI-generated art plates provide the vessels, and the whole thing ships as a single self-contained HTML file.
draws both the health and mana liquids
vessel artwork composited under the shader
self-contained, no build step, live demo
Architecture
System path
- 01Six AI-generated vessel art plates
- 02WebGL2 context, no framework
- 03One fragment shader for both liquids
- 04Uniforms drive fill level and motion
- 05Single self-contained HTML file
What it is
Action-RPG style health and mana orbs rendered in WebGL2: liquid that sloshes, drains, and refills inside ornate vessels. It is part of WIZARD, a toolbox of interactive game-UI experiments.
One shader, two liquids
Both orbs are drawn by a single fragment shader. Fill level, wave motion, and color are uniforms, so the health and mana orbs are the same program with different parameters rather than two copies of similar code. The liquid surface is computed per fragment, which keeps the motion smooth without any mesh animation.
AI-generated art under engineering control
Six AI-generated art plates provide the vessel artwork. The generation is the easy part; the engineering is compositing static plates with a dynamic shader so the liquid reads as sitting inside the vessel, and doing it in a way that survives resizing.
Deliberately self-contained
The engine ships as one HTML file: shader source, art references, and interaction code together, no build step, no framework. Open the live demo, view source, and the entire implementation is there. That constraint is the point; it makes the work inspectable in one click.