提示词
作者公开分享的提示词或制作说明。
Create an interactive 3D scene called “Pineapple Jelly” - a thick, translucent gummy pineapple ring that users can grab, stretch, bend, and release. Everything must run directly in the browser in one standalone HTML file using genuine WebGPU and WGSL shaders.
The main priorities are convincing soft-body behavior, beautiful light refraction, and satisfying interaction.
MODEL
* A round pineapple slice with a genuine hole through its center.
* Thick, juicy flesh, a slightly scalloped outer edge, and softly rounded corners.
* Both cut faces must be equally detailed. The ring can be flipped and viewed from every angle.
* Golden translucent flesh with delicate radial fibers, small bubbles, and elongated pale juice cells embedded inside.
* No skin, leaves, or seeds. It should look like a pineapple ring made of gummy candy, not a doughnut.
MATERIAL AND LIGHTING
* Rich honey-yellow coloring, wet gloss, and soft subsurface-style light scattering.
* Refraction, thickness-dependent transparency, controlled highlights, and Fresnel reflections around the edges.
* Stretched, thinner areas should transmit more light.
* A warm, light background, soft studio lighting, and a grounded contact shadow.
* Avoid blown-out highlights, excessive bloom, and a hard-glass appearance.
PHYSICS
* Use a volumetric soft-body mesh with elastic connections and volume constraints, such as XPBD.
* Allow users to grab either the outer or inner edge and pull it in any direction.
* Deformation should spread naturally through neighboring regions: the hole stretches, the flesh bends, and the opposite side responds with a slight delay.
* After release, the ring should spring back softly, wobble a few times, and gradually settle.
* No instant snapping, endless oscillation, torn geometry, or collapsing central hole.
* Implement gravity and ground collisions. The ring should squash slightly on impact and recover its shape.
* Internal fibers, bubbles, and juice cells must deform with the flesh instead of remaining stationary.
* Clicking through the empty center must not grab the object.
INTERFACE
* A minimal editorial layout with generous whitespace.
* A large italic serif heading on the left: “Pineapple Jelly.”
* A compact “THE SPECIMEN” control panel on the right.
* Three color presets: Golden, Amber, and Rosé. Change the tint while preserving the material properties.
* Sliders for Firmness and Internal damping.
* Buttons: Give it a nudge, Reset, Turn it over, and Pause.
* Toggles: ¼ speed and Show mesh.
* Small live readouts for mass, volume relative to rest volume, and kinetic energy.
* All interface text in English.
* Support both mouse and touch interaction.
TECHNICAL REQUIREMENTS
* Use actual 3D geometry and WebGPU rendering, not a video or a Canvas 2D imitation.
* Generate all geometry and materials in code, without external models or image assets.
* Separate the simulation mesh from the smoother visual surface to maintain good performance.
* Display a clear fallback m
帖子正文
这段文字来自 X 原帖。
Interactive 3D pineapple jelly scene in the browser
Opus made the better jelly here, and it’s not even close 🍍🤯
Claude Opus 5.5 vs ChatGPT-6 Astra. Same idea - a gummy pineapple ring, but such different results
Opus nailed that soft, stretchy jelly feel. The juicy colors, translucent flesh, and detail inside make me genuinely want to take a bite
Astra’s version feels firmer, and the colors and material don’t quite do it for me. Opus comfortably wins this round
Estimated API cost:
Opus - $6.97
Astra - $11.63
Cheaper and tastier. What do you think? 👀