Backyard Anomaly: A Tiny WebGPU and TSL Experiment

Editor’s Notice: The primary Three.js Convention is coming to Paris this September, and we’re stepping into the spirit of it! Over the approaching weeks, we’ll be bringing you numerous Three.js gems from great folks in the neighborhood, generously sharing their experiments, strategies, and inventive concepts with us. Following Sujen Phea’s pleasant interactive xylophone, Frank Reitberger now shares “Backyard Anomaly”, a playful WebGPU and TSL experiment combining physics, glass deformations, and procedurally generated sound. Take pleasure in!

Because the introduction of WebGPURenderer and TSL (Three Shading Language), I’ve been pushing myself to undertake them as rapidly as doable. That has put me within the lucky place of with the ability to construct and publish my little experiments utilizing trendy WebGPU expertise.

The concept behind it

I really get requested very often the place to begin with TSL or WebGPU. To be sincere, I can’t actually supply a lot recommendation there. I took a take a look at a couple of Three.js examples, and there are many them right here: https://threejs.org/examples/. I additionally learn by way of the out there data on TSL: https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language. Aside from that, I simply began experimenting.

I normally have already got an thought in my head of the place I need the journey to steer. The objective is at all times to attain a visually interesting outcome, whether or not or not it’s technically more difficult. A lot of the challenges solely reveal themselves throughout implementation. It’s normally a case of considering, “Properly, if this works, then that must work too…”

This little anomaly within the flowerbed really grew out of an experiment I put collectively a month or two in the past. Due to that, the groundwork for the physics, procedural sound, and far more was already there.

Rendering & supplies

Your complete scene is rendered with WebGPURenderer utilizing TSL node supplies all through. Right here’s a fast overview of the rendering setup:

• Transmissive shell (MeshPhysicalNodeMaterial) with transmission, thickness, IOR, iridescence (0.90, IOR 1.55), clearcoat, and blue attenuation coloration and distance.
• Customized TSL positionNode for the affect bulges, utilizing vertex displacement pushed by an 8 slot uniformArray of route and amplitude vectors.
• Customized TSL normalNode with analytic regular perturbation, mixed with a tangent house regular map constructed from a customized sphere tangent body.
• Customized roughnessNode utilizing an embedded chunky ice roughness map that’s modulated per pixel.
• Customized emissiveNode pushed by a canvas generated scanline strip with seamless scrolling by way of a UV offset uniform.
• Instanced bubbles (InstancedMesh), saved opaque as a result of the transmission cross at present ignores clear geometry.

Physics

On the coronary heart of the demo is a Place Primarily based Dynamics (PBD) simulation operating solely on the CPU. Just a few occasion pushed techniques are layered on high to drive the interactions, sound, and total conduct.

Fling impulses: Pointer interplay applies randomized impulses with an upward bias, letting you stir the simulation by hand.

Predict: Gravity and air drag are built-in into the velocities utilizing semi implicit Euler, then the positions are stepped ahead.

Venture constraints: Three iterations resolve sphere to sphere collisions, with mass weighted by r³ so small bubbles naturally yield to bigger ones. The bubbles are additionally projected again contained in the glass sphere, making certain they contact the inside floor quite than passing by way of it.

Derive velocity: Velocity is recomputed from the positional change, v = (x − x_prev) / dt, as a substitute of protecting the built-in velocity. That is the defining attribute of PBD and permits the pile to settle naturally as a substitute of regularly churning.

Contact damping: Touching bubbles obtain exponential velocity damping, performing as each pile settling and glass friction. On the wall, solely the outward regular velocity is eliminated, permitting the bubbles to slip naturally alongside the glass.

Affect detection: A brand new wall contact above a radial pace threshold creates a short lived glass bulge and triggers a sound. Resting bubbles can’t activate this impact.

Collision rescatter: Sooner bubble to bubble collisions set off a randomized velocity redirect utilizing a “repower” method, with a brief per bubble cooldown so energetic chain reactions step by step fade away.

Relaxation blast: A per bubble relaxation timer applies a randomized upward impulse after 200 ms beneath the pace threshold, protecting the entire system gently boiling as a substitute of settling fully.

Sound system

The sound system is constructed solely with the Net Audio API. There aren’t any samples or audio recordsdata concerned, every part is generated procedurally. Right here’s a fast overview:

Set off: A tone is performed solely when a bubble hits the glass with sufficient pressure to create a bulge. Ball to ball collisions stay silent, so the sound is at all times straight coupled to the seen glass deformation.

Pitch: Notes are chosen from a two octave C main pentatonic scale (C4, D4, E4, G4, A4, C5, D5, E5, G5, A5). The bubble radius determines the pitch, with bigger bubbles producing decrease notes and smaller bubbles producing larger ones. Because the scale is pentatonic, overlapping hits naturally create nice sounding chords.

Voice: Every hit is generated by a stack of 4 sine oscillators at consonant ratios. Each partial has its personal achieve envelope with a brief exponential assault and staggered decay occasions, permitting the sound to bloom brightly earlier than fading right into a pure sine tail. Loudness scales with affect pace, whereas a StereoPannerNode positions every hit throughout the stereo discipline based mostly on the bubble’s world place.

Bus: All voices are combined right into a grasp achieve earlier than splitting right into a dry path and a flanger path. The flanger makes use of a brief delay modulated by a steady low frequency oscillator with suggestions, giving every hit a barely totally different character. Each paths are then recombined and handed by way of a DynamicsCompressor, protecting dense bursts below management with out clipping.

Housekeeping: The AudioContext is created and resumed on the primary pointer interplay to adjust to browser autoplay insurance policies. A easy charge limiter enforces a minimal interval between voices with an eight voice cap, whereas completed voices routinely clear themselves up. Quantity and on/off controls can be found within the debug pane, with the default quantity intentionally saved low to create an ambient ambiance.

All of that is rounded off by a stunning backyard setting, generated with Skybox AI: https://www.blockadelabs.com/.

Take pleasure in!