Caustic Light Pool 2.0
A swimming pool from above in WebGL: water you can wade through and drop pebbles in, a tiled floor refracted through the waves, caustics from the real focusing of sunlight that sharpen in the deep end, sun glints, coping shadows, and a night mode lit by wall lamps.
WebGL20 deps1 file · 31 KB TSXreduced-motion aware
Props
"use client"; /* * CausticLightPool2: a swimming pool seen from straight above, in WebGL2. * * The water is a height field: slow swell from a few travelling waves plus a * wave-equation simulation the visitor disturbs (drag to wade a wake, click to * drop a pebble, rain if you like). Each pixel looks down through the surface: * its view ray refracts, so the tiled floor wobbles under the waves; sunlight * refracts too, and where the bent rays bunch on the floor they make caustics. * Their brightness is the focusing itself (how much a patch of surface shrinks * when projected to the floor), measured per pixel, so the filaments sharpen * where the pool is deep. The surface carries sun glints and a sky reflection; * the coping casts a shadow on the floor; the deep end darkens. At night the * sun is off and lamps in the wall light the water. * * Runtime: lazy context near the viewport, parallel shader compile, sleeps * off-screen and in hidden tabs, context loss handled. Reduced motion holds // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this background
A swimming pool seen from straight above, the drone-shot look of a hotel's first light. The water is a height field: a slow swell from four travelling waves plus a wave-equation simulation the visitor disturbs. Drag through it to wade a wake (a mouse wades just by passing), click to drop a pebble and watch the rings bounce off the walls, or turn on rain. Every pixel looks down through the surface: its view ray refracts, so the tiled floor, its lane line and its painted depth marks wobble under the waves, and past the floor's edge you see the wall tiles in shade. Sunlight refracts too, and the caustics are the focusing itself, measured per pixel as how much a patch of surface shrinks when its light is projected to the floor, so the filaments are sharper and brighter in the deep end. The water absorbs red first, so the deep end darkens toward its own colour; the surface reflects the sky with Fresnel and throws sun glints; the stone coping casts a shadow on the floor from the sun's side. Three lights: day, golden hour (low, warm sun, long shadows) and night, when the sun is off and lamps in the long walls light the water from inside. Four tile colours; the deep end's depth is a prop. Content laid over it keeps its links and buttons; pressing elsewhere ripples the water.
Curator’s note
Caustic Light Pool, rebuilt as a premium 2.0 beside the original. The first one draws the focusing condition as a flat pattern; this one is a whole pool: a ripple simulation you can touch, refraction of a tiled floor, per-pixel caustics from the refracted sunlight, glints, shadows and three lights. One file, no dependencies.
