Build "Spider Melon" — a single-page three.js (r170, WebGL2, ES module via import map from jsDelivr) interactive jelly watermelon slice for Halloween, as one self-contained HTML file. English UI.
SIMULATION
- A thick triangular watermelon slice (rounded rind arc, rounded corners) as an XPBD tetrahedral soft body: co-rotational per-tet shape matching with warm-started quaternions, volume constraints, edge damping, gravity, floor collision with friction.
- Hand tool: grab any point and pull (soft spring grab), fling to throw, scroll or a second finger to twist, tap to jolt. Sliders: Firmness (trembling↔️set) and Internal damping (lively↔️syrupy). Buttons: Give it a nudge, Reset, ¼ speed, Show mesh, Pause.
- Knife tool: draw a stroke across the slice. Read the stroke on the surface to get a vertical blade plane; for each piece it crosses, fit the piece's best rotation, carry the plane back to rest space as a straight line and split that piece's convex rest-plane outline (rounded corners). Prebuild both halves as new tet meshes, then animate a steel chef's knife (wooden handle, rivets, brushed steel) that first presses a groove and, on breaking through, swaps in the new pieces with the old particles' positions and velocities transferred via barycentric embedding, wedging the halves apart. Every piece stays its own soft body; pieces collide with each other. Pieces can be cut again.
RENDERING (multipass, GLSL ShaderMaterials)
- Passes: key-light shadow map (PCSS-lite), top-down height map for contact AO, scene RT (MSAA, half float, alpha = linear depth) with floor/seeds/spiders/knife, back-face depth pass for thickness, jelly pass, Khronos PBR Neutral tone mapping.
- Jelly: refraction (IOR 1.42) of the scene behind by view-ray thickness, per-tap Beer–Lambert absorption, milky scattering in the pale layer, back-lit glow at thin edges, Fresnel reflections of a procedural studio environment, GGX highlights, sugar-crystal glints. Material regions (flesh / pale band / striped rind) come from rest-space coordinates so they deform with the body. Teardrop seeds inside.
- Night scene: dark midnight table (#1D1922), moonlit pool around the slice with a jelly-tinted soft shadow, a warm flickering candle light from the front right.
TOXIC VARIETY (default)
- Acid-green, self-luminous flesh: emission integrated along each refracted tap's own path so seeds and spiders inside cut dark silhouettes into the glow; slow fbm "veins" drifting in rest space and a gentle breathing pulse.
- Deep purple rind with near-black irregular stripes, a milky lavender band between flesh and rind, black seeds.
- A green light pool on the table from a blurred top-down footprint of the jelly only (tag jelly vs spiders in the height map so loose spiders don't glow).
- Also offer Crimson, Golden and Rosé classic varieties as swatches.
FOUR GUMMY SPIDERS
- Translucent gummy candy spiders (orange, blood red, purple, black) with sugar frost, glossy bead eyes and 8 legs (ellipsoid body + capsule legs, two-bone IK), placed inside the slice so they never poke out.
- Sealed: each rides its piece via the piece's best-fit rotation and centre; legs drawn in, twitching. They get restless when the knife comes near, when the piece is grabbed or tapped.
- A cut passing close sets a spider free: it struggles, climbs up through the new face to the top, scurries along and leaps down clear of the jelly.
- Loose: wanders on the table with a tetrapod gait, walks around the jelly (never under it), keeps off other spiders, stays near the slice, scatters from the pointer and the blade, tap one and it jumps.
- Readouts: Mass (≈g at 1.3 g/cm³, 1 unit ≈ 3.5 cm), Pieces, Loose n/4, Spiders mood (Sealed in / Restless / Breaking out / On the loose / Scattering / All loose).
PAGE
- Editorial specimen layout: big italic serif title "Spider Melon.", subtitle "Four gummy spiders, set in the jelly. They felt the knife coming. Cut carefully. Or don't.", "Material studies / No. 016 · three.js", a control panel "The Specimen · fig. 16", a hint line per tool, a collapsible "Inside the experiment" section explaining the simulation and renderer.
- Dark theme, responsive down to 390px wide (stacked layout, no horizontal scroll), touch support, reduced-motion respected, WebGL2 fallback message.
- Clamp frame dt to [0, 0.1] so the first frame never steps backwards Prompt by @vib3coded , posted on X on 2026-11-01. x.com/vib3coded/status/2116858701285818779 . Copies include this credit. 