domains / families / software-engineering / water-crystal-skill-vfx

water-crystal-skill-vfx

separate

Build the effects of a water and crystal skill as one visual language in Three.js. Water that reads as clear water, never a teal fill or a textured ball. A ray-marched water orb whose surface swells, rings and deforms in place: it refracts the frame behind it with an inverted horizon, has a silver rim and sharp highlights, and shows a faint caustic web on its far wall. Streams wound up from tide pools as uneven beaded ropes with silver edges, drips and shed drops. A lash that unspools from the orb, whips and pours into a pool under a torn, lopsided splash crown of aerated white water with spikes breaking into drops. Analytic ripple rings and rain on the pools. Crystals traced against their own half-space planes (Snell, Fresnel, total internal reflection, exit dispersion, Beer–Lambert, fracture discs, a white-hot root glow and a resonance band that climbs the stone), growing out of the water in a draining veil, then shattering into Voronoi shards that fall, tumble and rest with real co…

When to use

• water or ice-crystal skills
• water orbs or bubbles
• water whips, jets or tentacles
• splash impacts
• tide pools, rain, crystal growth or eruption
• crystal resonance, shattering glass or quartz
• caustics, wet-stone night scenes
• moon reflections on water

When not to use

• lightning, energy orb, black afterimage smoke and air bursts
• fire, smoke, embers and heat haze
• readable, budgeted gameplay effects in general
• scoring a skill out of 10
• polishing the caster's body and timing

Skill page

Source