Interactive plush frog toy with grooming mechanics

Prompt

The author shared the full prompt.

Build "Plush Frog" — Material Studies No. 011.  One self-contained HTML file, raw WebGPU/WGSL, no libraries, with a clean fallback card when WebGPU is missing. All labels in English.  SHAPE. An original plush frog (not a copy of any existing toy) as a signed distance field: a soft bean of a body, two eye bumps smooth-unioned on top, haunches folded at the sides, stubby front feet, flattened where it sits on the table. Skin = surface nets of the SDF (one Newton step, gradient normals).  SEWN-ON PARTS, all embedded in the simulation lattice so they ride along with every squeeze: – two glass safety eyes: near-black beads with a dark amber ring round the pupil and mirror-bright gloss; they stay rigid (follow the polar rotation of the averaged deformation gradient, never squash); – an embroidered smile: a round thread tube laid along a curve projected onto the face; – a felt lily-pad beret with a notch, draped over one eye bump (its height settled at build time so the underside just clears the skin), with five cupped felt petals and a wool-knot heart.  PHYSICS. XPBD on the CPU, 60 Hz, 6 substeps. Hex lattice in the body's principal frame, boundary nodes snapped to the surface, barycentric embedding of every render vertex. Co-rotational shape matching per 8-node cell (warm-started rotation, strain stiffening), soft tet volume constraints (the stuffing compresses a little, unlike jelly), a firmer fabric shell. Edge damping, deformation damping relative to rigid motion, rolling resistance, sleeping. Floor with Coulomb friction.  FUR. Shell fur: the skin drawn ~40 times as instanced shells, outermost first. Strands are jittered points in rest-space cubes (~0.8 mm spacing); each shell keeps the fragments within a tapered cone around each point, so thickness and length vary naturally; per-strand tilt and crimp, a vertex-level wave; alpha-to-coverage under 4× MSAA. Rest-space regions: cream belly patch, pink dyed cheeks, a groove for the smile, a back seam, stitched toe lines, pile pressed flat under the felt cap.  FUR MOTION. Per vertex: a combed lie in rest space carried into the world by the local deformation gradient, plus a tip offset on a damped spring driven by gravity and the skin's own acceleration — toss the frog and the coat swings. Laid-down pile stands lower.  SHADING. Wrapped diffuse through the pile, darker toward the roots, two Kajiya–Kay lobes, a velvet term (pile seen against its lie looks darker and denser, with it, it shines), a soft halo in the outermost wisps, a per-vertex soft key shadow on the shells. Procedural photo studio, PCSS floor shadow plus contact AO from a top-down height map, felt with fibre fuzz and sheen, Khronos PBR Neutral tone mapping.  TOOLS. – Hand: soft patch grab with wide reach, twist with scroll or a second finger, pinch to zoom, orbit by dragging the empty table. – Comb: stroking lays the pile the way you brush (the stroke is carried back into rest space through F⁻¹); "Smooth fur" puts it back. – Squish:

Category

Apps & UI

Stack

Physics, WebGPU

Made with

WebGPU, WGSL

Opus effort

xhigh

From the author

Cost $11.80; 250k strands across 40 shells.

On X

70 likes · 2.7K views · 29 saves