Create “Kiwi Jelly” — a polished, interactive 3D kiwi wedge made of soft, translucent gummy candy.
Deliver one complete, self-contained HTML file with embedded JavaScript, CSS, and WGSL shaders. Use genuine native WebGPU. Generate all geometry and material details procedurally, with no external libraries, models, images, or network dependencies.
SHAPE — ESSENTIAL
Create a thick, upright TRIANGULAR wedge with the silhouette of a watermelon slice:
A softly rounded apex pointing upward.
Two sloping sides.
Broad exposed front and back faces.
Substantial thickness with rounded edges.
A gently curved outer rind along the bottom.
The wedge standing on its curved underside.
This must remain a triangular wedge, not a circular kiwi cross-section or a whole fruit.
Suggested proportions: a sector approximately 2.48 units in radius, spanning ±0.73 radians, and 0.78 units thick. Smooth the surface while preserving the recognizable triangular silhouette.
KIWI APPEARANCE
Give the wedge:
Rich, translucent green jelly flesh.
A pale ivory core near the upper apex.
Delicate, slightly irregular fibers radiating from the core toward the rind.
A narrow toasted-brown skin along the curved bottom edge, with subtle procedural mottling.
52 small, glossy black seeds distributed across both exposed faces in irregular radial fan rows around the core.
A few tiny internal bubbles.
Seeds should be small tapered ovals. Keep the brown skin thin and avoid watermelon stripes.
Make the slice look like premium gummy candy photographed in a studio: juicy, glossy, soft, and almost edible. Use a warm off-white background, soft lighting, restrained highlights, and a subtle contact shadow. Show it large in a three-quarter view that reveals its thickness.
SOFT-BODY PHYSICS
Implement actual volumetric soft-body physics, preferably a tetrahedral mesh with XPBD elasticity and volume-preservation constraints.
Users must be able to grab the apex, flesh, sides, or rind and stretch, bend, lift, and squish the wedge. Deformation must begin locally around the grab point and propagate elastically through the body.
Make the rind slightly firmer than the flesh. Keep all layers attached.
After release, the wedge should wobble, recover its shape, and gradually settle. Include gravity, floor collisions, gentle friction, and soft bouncing.
Use fixed simulation steps, bounded substeps, damping, and safeguards against inverted elements. Strong pulls toward the floor must not cause tearing, explosive movement, permanent collapse, or a frozen folded shape.
Attach seeds to the deforming surface so they move and rotate with the flesh. Anchor procedural fibers and material patterns in rest coordinates so they stretch naturally.
RENDERING
Use WGSL shaders and practical WebGPU passes for:
Thickness-dependent color absorption.
Approximate refraction through the jelly.
Fresnel reflections and smooth studio highlights.
Soft internal scattering and transmitted light.
Distinct material responses for flesh, core, and skin.
Keep the green saturated and the core readable. Avoid opaque plastic, clear glass, blown highlights, flickering transparency, and visible mesh seams.
INTERACTION
Left-click or touch the wedge to grab and stretch.
Right-drag or drag empty space to orbit.
Scroll to zoom.
Shift-drag to pull in depth.
Support a second finger for grab depth and pinch-to-zoom while orbiting.
Use pointer capture and release cleanly on cancellation, lost capture, window blur, or hidden document.
INTERFACE
Use a minimal editorial layout with generous whitespace, thin borders, and no decorative UI gradients.
Include:
“MATERIAL STUDIES / NO. 010”.
A large italic serif heading: “Kiwi Jelly.”
Caption: “A little tang. A little wobble.”
“WEBGPU · LIVE” status.
Classic, Golden, and Mint palettes.
Firmness and internal damping sliders.
Nudge, Reset, Reset view, and Pause / Resume.
Quarter-speed and Show mesh toggles.
Live mass, relative-volume, and kinetic-energy readouts with clearly explained illustrative units.
Palette changes and camera resets must preserve the simulation state.
QUALITY
Reuse geometry and GPU buffers during interaction. Make the layout work on desktop and mobile without controls covering the wedge. Respect reduced-motion preferences by starting paused.
Display a clear explanation if WebGPU is unavailable.
Test shader compilation, grabs from multiple locations, strong stretches, repeated releases, floor collisions, seed attachment, all controls, mouse and touch input, and mobile layout.
Deliver the finished working HTML, not a mockup or code fragment.