jelly.html

A fluted jelly-mould dome with pieces of fruit suspended inside, sitting on a plate. Drag it and it stretches; let go and it wobbles back at a few hertz, like the real thing. Lift it and drop it and it lands with a splat, then settles.

How it works

The jelly is a lattice of hexahedral cells, each split into six tetrahedra: 808 particles, 3,210 tets. The solver is XPBD — extended position-based dynamics — running fourteen substeps a frame with one Gauss–Seidel pass each, on a Stable Neo-Hookean material. The deviatoric and volume constraints of every tet are solved together as a single 2×2 system, which makes the rest shape an exact fixed point: a stiff jelly sits perfectly still instead of jittering. Contact with the plate is position-based Coulomb friction — it sticks until you push hard enough, then slides.

The surface you see is skinned onto that lattice: every rendered vertex lives in one cell and blends its eight corner particles trilinearly. The physics runs in plain JavaScript; rendering goes through Three.js's WebGPU renderer with TSL shaders. The two sliders map straight onto the material: Firmness is the shear modulus — how much gelatin is in it — and Damping is how quickly the wobble dies down.

Controls

• Drag the jelly to pull it; drag elsewhere to orbit.
• Space drops it on the plate — the Plop button does the same.

What it needs

• A browser with WebGPU — current Chrome or Edge on desktop. Safari and Firefox may still need it switched on by hand. Without it you get a one-line note that the jelly could not set.
• An internet connection: Three.js r185 loads from jsDelivr. Nothing else is fetched.