Editor’s Note: As part of our celebration of the first Three.js Conference, we’ve been sharing creative experiments throughout the month, and this week we’re back with more! Today we’re happy to showcase another demo by Frank. In Volatile Nexus, he dives into glass, caustics, refractions, wandering cubes, reflections, and sound, bringing them all together into one mesmerizing experiment.

🇫🇷 The countdown is on! The very first Three.js conference is getting closer, and there are still tickets available if you’re thinking about making the trip to Paris. Use code CODROPS for 15% off and grab your ticket →

What started as “Can I produce a nice glassy ring with colorful caustics?” ended up in unsteady, almost-fluid glass, caustics, refractions, why not adding some cubes (or lots of them), reflections, sound, and many more things.

At the beginning…

…I just wanted to achieve colorful glass with sort of caustics. Like, can I control the caustics and iridescence? Let’s add some lens flare and be fine with it. I already liked the outcome then, as it looked sort of like an “80s album metal cover” or alike.

Adding floor reflections just made this look and feel even more complete.

So what about cubes?

Wouldn’t it be fun to add lots of cubes wandering on some defined paths just because we can? And, whilst working on this, let’s not forget to refract those in the glass given.

Easier said than done, as glass refraction was a tricky one. It’s a nice rabbit hole when working with Three.js and its “as is” implementation.

Lastly, I switched to having the refracted layer weighted by a facing term — strong when you look through the glass face-on, fading at grazing angles where real glass turns mirror-like. That kills the additive “wash” and makes the refracted cubes sit inside the glass instead of glowing on it.

Meanwhile…

…wouldn’t it even be nicer if we added some user interactions for the cubes and glass?

Adding some mouse proximity repulsion for the cubes — the cursor is unprojected into a 3D pick ray every frame, transformed once into the swarm’s local space (much cheaper than transforming 1000 cubes to world space). Any cube within the repel radius of that ray gets pushed away perpendicular to it with a squared falloff, driven by a damped spring — so cubes burst aside as your mouse sweeps near them and flow smoothly back into formation about half a second after it leaves.

Displacement is capped so nothing can be flung out of the scene. This works while hovering and while dragging to orbit.

For the ring, I set up a 12-slot impulse pool as uniform arrays, some wavefront math (Gaussian shell at age · 1.4, cos(dist · 9 − age · 11) oscillation, exp(−2.6 · age) decay), central-difference normal reconstruction with the same 0.7 blend, a 30ms spawn throttle, and the cursor-speed → strength mapping (fast strokes hit harder, clamped to 0.4–1.8).

I brought it all in from an earlier experiment called Unstable solid.

What’s adapted for the ring: the displacement direction is the torus analog of the sphere’s radial — each vertex pushes outward from the nearest point on the ring’s tube center-circle (radius 0.78 in the lathe plane). It’s derived purely from position, so the lathe’s seam vertices move identically and the surface stays watertight.

The raycast targets the actual ring mesh through all its rig/sway transforms (with an extra 25ms cast throttle, since the lathe is ~24k triangles and has no BVH).

And because the technique lives in the material’s positionNode/normalNode, three things ripple for free that the sphere never had: the refraction (the wobbling normals bend the dispersed backdrop — poking the glass smears the confetti), the caustics (the shadow pass uses the same displaced surface), and the floor mirror (it renders the same material).

And at the end…

…why not compose some procedural beeps and tones to make the scene complete?

I know there are many, many folks out there who turn out sound immediately, but for me, sound is like a little extra rounding the whole scene up.

As for the glass’s wobble: Two high-Q resonances (640 Hz + 963 Hz) filter noise into a pure-ish tone with a slow vibrato — whose level is driven every frame by the ripple field’s live energy. Stroke the glass and the hum swells under your finger; stop and it fades exactly as the visible waves decay, because it’s reading the same numbers. It physically cannot spam — there’s nothing to trigger.

The pad’s filter opening was also softened so the combined wobble response stays warm rather than shrill.

Cubes through the ring — a shimmer bed (three beating triangles plus bright noise) whose level follows the fraction of the stream currently inside the hole, computed from the head phase against the path’s hole window. You’ll hear the sparkle swell as the comet threads through and fade as the tail exits — roughly a ten-second breath cycle at your speed of 0.1.

Et voilà!