Frank Reitberger shares 'Garden Anomaly', a creative WebGPU and TSL (Three Shading Language) experiment featuring a physics-driven bubble simulation inside a glass sphere. The demo uses WebGPURenderer with MeshPhysicalNodeMaterial for a transmissive glass shell with iridescence, custom vertex displacement for impact bulges via TSL node materials, and a CPU-based Position Based Dynamics (PBD) physics system. The sound system is built entirely with the Web Audio API — no audio samples — generating procedural tones from a C major pentatonic scale, with pitch tied to bubble radius, voices built from stacked sine oscillators, and a flanger/compressor bus. Key technical details include semi-implicit Euler integration, mass-weighted collision resolution, contact damping, and browser autoplay policy compliance for the AudioContext.
Questions this post answers
How do I implement impact bulge deformations on a sphere using TSL in Three.js WebGPURenderer?
Impact bulges can be driven by vertex displacement in a custom TSL positionNode, using a uniformArray of 8 slots holding direction and amplitude vectors. Analytic normal perturbation is applied alongside a tangent-space normal map built from a custom sphere tangent frame on the normalNode, keeping the deformation visually consistent with the lighting. Developers building WebGPU shader effects track TSL patterns and Three.js renderer updates on daily.dev.
How do I build a procedural sound system with Web Audio API that complies with browser autoplay policies?
Create and resume the AudioContext only on the first pointer interaction to satisfy browser autoplay restrictions. Voices can be built from stacked sine oscillators with per-partial gain envelopes, mixed into a master gain, then split into dry and flanger paths before a DynamicsCompressor. A rate limiter with an eight-voice cap and automatic cleanup prevents resource leaks. Web audio and creative coding techniques like these surface regularly for frontend developers on daily.dev.
What is the defining characteristic of Position Based Dynamics (PBD) compared to traditional physics integration?
In PBD, velocity is recomputed from positional change — v = (x − x_prev) / dt — rather than being carried forward from integration. This means the solver derives velocity as a consequence of constraint projection, which allows a pile of objects to settle naturally instead of constantly churning, and makes the simulation inherently stable under iterative constraint resolution. Developers implementing physics simulations for interactive web demos find related techniques on daily.dev.