Interactive jelly watermelon toy

Build "Whole Melon": a single self-contained HTML file (all JS/CSS inline, no build step, no libraries) with a big whole watermelon made of glossy jelly that you can grab, wobble and cut into pieces with a knife. Render with raw WebGPU (WGSL); if WebGPU is missing, show a clean fallback card.

SHAPE AND MATERIAL
- The melon is a signed distance field: an ellipsoid (~32 cm long) lying on its side with a softly flattened belly.
- Layers by depth under the skin: dark-green skin with irregular darker stripes running pole to pole (seamless all the way around), a pale pith band, then translucent red flesh that brightens toward the rind. Add a pale yellow field spot on the belly, a stem scar at one end and a blossom end at the other.
- About 700 seeds in a three-lobed ring at roughly two thirds of the radius (teardrops, wide end pointing outward), plus tiny air bubbles. Mesh seeds only near cut faces; a seed the knife goes through is kept by one side and eased just under the new face, so it shows through a thin film of jelly.
- Three varieties: Crimson, Golden, Rosé.

PIECES AND CUTTING
- Every piece is the melon SDF clipped by the half-spaces of the cuts that made it, with the fresh edges rounded (smooth max). All pieces share the melon's original rest frame, so rind, pith, stripes and seeds stay exactly where they grew.
- Knife tool: the user draws a line across the melon. Read the stroke on top of what it crosses to get a vertical blade plane. For each piece the plane passes through, fit the piece's best rotation, carry the plane into rest space, and split the piece in two.
- Build the new pieces cooperatively (generators with a per-frame time budget) while a steel knife (brushed blade, wooden handle with rivets) lines up over the stroke and presses a groove into the jelly. Swap the new pieces in the moment the edge breaks through, carrying over the position and velocity of the flesh they came from, and let the blade wedge them apart as it sinks. Allow up to about 24 pieces and reject slivers.
- For each piece: a surface-nets render skin (evaluate only the blocks near the surface, one Newton step onto it), a hex lattice in the piece's principal frame with boundary nodes snapped onto the surface, and a fast barycentric embedding.

PHYSICS (XPBD on the CPU, fixed 60 Hz, 6 substeps)
- Cell-wise co-rotational shape matching (8-node cells, warm-started rotation, strain stiffening), tet volume constraints for near-incompressibility, rind firmer than flesh.
- Edge damping, plus damping of each piece's deformation relative to its rigid motion (never its fall or tumble), rolling resistance on the table, and sleep when calm.
- Piece-to-piece contact against each other's exact SDF in a best-fit frame; sleeping pieces act as walls. Floor contact with Coulomb friction.
- Hand tool: grab any piece and pull (soft patch attachment, with enough reach to drag pieces across a wide table). Scroll or a second finger twists while holding. Pinch or scroll zooms; dragging the empty table orbits the camera.

RENDERING (a photographic product shot)
- Procedural studio: pale paper sweep, overhead softbox, back-left strip light, cool fill card.
- Jelly: front faces refract the scene behind by the view-ray thickness (nearest-back-face pass), with Beer–Lambert absorption per material, milky scattering in the pith, a back-lit glow at thin edges, sugar glints, Fresnel studio reflections and GGX highlights.
- Seeds, bubbles and the knife are drawn before the jelly, so they are seen refracted through it.
- Normals follow the jelly's local deformation (cofactor of the node-averaged deformation gradient).
- A soft key shadow coloured by what the light crossed first (rosy through flesh, dark through rind), plus contact occlusion from a top-down height map. MSAA, Khronos PBR Neutral tone mapping.

UI (editorial, like a material study)
- Kicker "Material Studies / No. 010" and a big italic serif title "Whole / Melon."
- A panel with Tool (Hand / Knife), Variety, Firmness and Internal damping sliders, Nudge, Reset, ¼ speed, Show mesh and Pause.
- Live readouts: mass, volume %, kinetic energy, piece count. A collapsible "Inside the experiment" note.
- Responsive down to phones.

Quality bar: it should look and move like a real glossy jelly watermelon, and every cut face should look like a sliced jelly melon with seeds just under the surface. Test headlessly with screenshots: the whole melon, mid-cut, many pieces, a close-up of a cut face, and mobile.

Source: the creator's reply under the post. Kept in its original language, unedited.

Tools the creator mentioned

More games

• 2:51

  Browser-based Fallout game built with code

  3.1M views

• 0:37

  Porting Call of Duty WaW Zombies map to the web

  2.8M views

• 1:17

  Old-school MMO RPG built by AI

  1.5M views

• 2:21

  Browser game world (third iteration)

  1.3M views

• 1:44

  Zelda-style paintbrush adventure game

  1.2M views

• 0:32

  Airplane simulator game

  978.5K views