Create "Jelly Press": a single-file interactive 3D toy in HTML (all JS, CSS and WGSL shaders inline, no external assets except Google Fonts). Render with WebGPU; if WebGPU or an adapter is missing, show a clean fallback message instead of a blank page.
CONCEPT
Four translucent gummy jellies shaped like fruit slices sit one at a time on the steel bed of a hydraulic press. The player holds a big red button to lower the press. The jelly squashes and spreads, the pressure gauge climbs, and somewhere past half its height it bursts into pieces. After the burst the game does NOT end: the player can grab the pieces, drag them, throw them around, and squash them again.
THE JELLIES (chips at the bottom, keys 1–4)
1. Watermelon wedge (half-disc slab): red flesh with dark teardrop seeds, a pale rind band, a green striped skin.
2. Orange slice (half-disc): orange pulp segments separated by thin white membranes, pale pith, orange peel.
3. Fig half: pink flesh full of small golden seeds, a cream layer, a dark purple skin.
4. Pineapple ring: golden fibrous flesh with radial streaks and a hole in the middle.
Each jelly should look like real gummy candy: subsurface scattering, soft translucency, glossy specular highlights, soft shadows on a warm studio floor (cream/beige, tone-mapped).
PHYSICS (CPU, fixed 60 Hz step)
- XPBD tetrahedral soft body with 8 substeps: co-rotational per-tet shape matching, per-tet volume constraints, hard edge strain limits (0.35×–1.8×), edge velocity damping, floor contact with Coulomb friction, rolling resistance, and gentle settling when nearly still.
- Render mesh skinned on the CPU through barycentric embedding in the tets; normals recomputed from triangles every frame.
- The press die is a kinematic round platen (radius ~1.05, rounded edge, a thickness, a ram above it). It acts as a ceiling with friction below, a shelf on top, and a side wall at its rim. The two press posts are solid.
- Pressure readout in bar comes from the platen's contact load, scaled per fruit.
THE BURST
- Break at a random squash between 52% and 66% of the jelly's height.
- Plan the fracture in the background shortly after each round starts, so the burst itself is instant.
- 5–7 big pieces from 3D Voronoi cells with slightly tilted walls. On 3–4 of them, a far corner is chipped off by two cutting planes and split further into 2–4 small chips, which leaves jagged, notched edges.
- Assign tets to cells by centroid. Duplicate particles per chunk. Merge tiny islands into their neighbours.
- The new body adopts the old positions and velocities.
- Clip the skin triangles against each cell's half-spaces, and fill every cut face with a clean flat cap showing the fruit's interior (flesh, seeds, membranes). No stretched triangles, no holes.
- Kick pieces outward and upward from the press. Small chips fly faster and higher and tumble with random spin.
- Show a big italic verdict for about 2.5 s, then fade it: "Splat." (melon), "Squeezed." (orange), "Well, that's jam." (fig), "Crushed." (pineapple). Include a stat line: "Gave up at N bar and N% of its height."
AFTER THE BURST: PLAY MODE
- Picking: ray/triangle test against the skinned mesh, with a forgiving screen-space fallback for touch.
- Grabbing pins the grabbed patch (radius ~0.4, only particles of that chunk) to a target on a camera-facing drag plane. Small chips move whole; big pieces stretch and swing like jelly.
- Releasing throws the piece with the pointer's velocity.
- Pieces collide with each other. A particle found inside another chunk's tet is pushed out through that chunk's nearest skin face, with friction. Use a chunk AABB broad phase and a spatial hash of skin tets.
- Pieces stay on stage: side walls, plus an invisible front edge so nothing ends up under the controls or behind the camera.
- The press still works: hold to squash the pieces again (no second fracture); Raise lifts the platen.
- Wet "plop" sounds on landings; a small squelch on grab.
- Cursor: open hand over pieces, closed hand while dragging. Dragging empty space orbits the camera.
UI (editorial, minimal)
- Masthead top-left: "JELLY PRESS" in bold condensed caps, with "PRESS" filled in yellow/black hazard stripes. Subtitle: "Four gummies. One hydraulic press."
- Top-right: Reset and Sound toggle.
- Bottom deck:
- Caption line with escalating captions while pressing: "Contact." → "It's fine. It's jelly." → "Getting wider." → "That's a pancake now." → "It's making a noise." → "Please."
- Circular pressure dial (0–400 bar arc, red zone) around a red HOLD button, a Raise button, and a big numeric bar readout.
- Fruit chips with icons.
- In play mode the caption slot shows "Grab a piece. Throw it." with small "Press again" and "Next jelly" buttons.
- Controls: hold Space or ArrowDown to press, ArrowUp to raise, R to reset, 1–4 to pick a fruit. Wheel zooms; double-click resets the view.
- Camera: low bench-level view; the press frame yaws per fruit so the posts never block the jelly. Framing adapts so the jelly sits between masthead and deck; works on phones (portrait) with a narrower stage.
SOUND (procedural Web Audio, no files)
Hydraulic motor hum that rises with pressure, wet squelches, occasional creaks at high pressure, a valve clunk when the platen stops, a loud burst, soft plops on landing. Unlock on first interaction.
QUALITY BAR
- Smooth 60 fps on a laptop.
- Background warm-up of the other fruits' meshes and shaders so switching is instant.
- Respect prefers-reduced-motion.
- Accessible labels, a gauge with role=meter, focus-visible outlines.
- No console errors. The page never goes blank.
中文翻譯
創建 "Jelly Press"：一個單文件 HTML 交互式 3D 玩具（所有 JS、CSS 與 WGSL 着色器都內聯，除 Google Fonts 外沒有外部資源）。用 WebGPU 渲染；如果缺少 WebGPU 或適配器，就顯示一條乾淨的降級提示，而不是空白頁面。
概念
四塊半透明、做成水果切片形狀的軟糖果凍，一次一塊地放在液壓機的鋼製檯面上。玩家按住一個紅色大按鈕來下壓。果凍被壓扁、攤開，壓力錶讀數攀升，在超過其高度一半的某處爆裂成碎塊。爆裂之後遊戲並不會結束：玩家可以抓住碎塊、拖動它們、把它們四處扔，並再次壓扁它們。
這些果凍（底部標籤，按鍵 1–4）
1. 西瓜角（半圓片板）：紅色果肉帶着深色淚滴狀籽，一條淺色瓜皮帶，帶條紋的綠色外皮。
2. 橙子片（半圓片）：橙色果肉瓣，由薄薄的白膜分隔，淺色白瓤，橙色外皮。
3. 無花果半塊：粉色果肉佈滿細小的金色籽，一層奶油色，深紫色外皮。
4. 菠蘿圈：金色纖維狀果肉，帶放射狀紋路，中間有一個洞。
每塊果凍都應看起來像真正的軟糖：次表面散射、柔和的半透明感、有光澤的高光、溫暖影棚地面上的柔和陰影（奶油色/米色，經色調映射）。
物理（CPU，固定 60 Hz 步長）
- XPBD 四面體軟體，8 個子步：每個四面體的共旋轉形狀匹配、每個四面體的體積約束、硬性邊緣應變限制（0.35×–1.8×）、邊緣速度阻尼、帶庫侖摩擦的地面接觸、滾動阻力，以及接近靜止時的輕柔沉降。
- 渲染網格在 CPU 上通過四面體中的重心座標嵌入進行蒙皮；法線每幀由三角形重新計算。
- 壓模是一個運動學圓形壓板（半徑約 1.05，圓邊，有一定厚度，其上方有一個壓頭）。它充當下方帶摩擦的天花板、上方的架子，以及其邊緣處的一堵側牆。兩根壓機立柱是實心的。
- 以 bar 爲單位的壓力讀數來自壓板的接觸載荷，按水果分別縮放。
爆裂
- 在果凍高度的 52% 到 66% 之間的隨機壓扁程度處破裂。
- 每一輪開始後不久就在後臺規劃好斷裂，這樣爆裂本身是瞬時的。
- 由壁面略微傾斜的 3D Voronoi 單元生成 5–7 個大塊。其中 3–4 塊上，一個遠角被兩個切割平面削掉，並進一步裂成 2–4 個小碎片，從而留下參差、帶缺口的邊緣。
- 按質心把四面體分配給單元。每個碎塊複製一份粒子。把微小的孤島併入相鄰碎塊。
- 新物體沿用舊的位置和速度。
- 用每個單元的半空間裁剪表皮三角形，併爲每個切面填上乾淨平整的封蓋，露出水果的內部（果肉、籽、膜）。沒有拉伸的三角形，也沒有破洞。
- 把碎塊從壓機向外、向上踢出。小碎片飛得更快更高，並帶着隨機自旋翻滾。
- 顯示一行大號斜體評語，持續約 2.5 秒，然後淡出："Splat."（西瓜）、"Squeezed."（橙子）、"Well, that's jam."（無花果）、"Crushed."（菠蘿）。再加一行數據："Gave up at N bar and N% of its height."
爆裂之後：遊玩模式
- 拾取：對蒙皮網格進行射線/三角形檢測，觸控時使用寬容的屏幕空間回退方案。
- 抓取會把被抓取的區塊（半徑約 0.4，只含該碎塊的粒子）固定到面向相機的拖拽平面上的目標點。小碎片整體移動；大塊像果凍一樣拉伸並擺動。
- 鬆開時按指針的速度把碎塊拋出。
- 碎塊之間會互相碰撞。若粒子位於另一個碎塊的四面體內部，就通過該碎塊最近的表皮面把它推出，並帶摩擦。使用碎塊 AABB 寬相與表皮四面體的空間哈希。
- 碎塊留在舞臺內：側牆，外加一條不可見的前沿，確保沒有東西落到控件下方或相機背後。
- 壓機仍然可用：按住可以再次壓扁碎塊（不會二次斷裂）；Raise 會抬起壓板。
- 落地時有溼潤的 "plop" 聲；抓取時有一小聲 "squelch"。
- 光標：在碎塊上方是張開的手，拖拽時是握緊的手。拖拽空白處會環繞相機。
UI（編輯感、極簡）
- 左上角刊頭："JELLY PRESS"，粗體窄體大寫，其中 "PRESS" 填充黃/黑警示條紋。副標題："Four gummies. One hydraulic press."
- 右上角：Reset 與 Sound 開關。
- 底部面板：
- 按壓時逐級升級的說明文字行："Contact." → "It's fine. It's jelly." → "Getting wider." → "That's a pancake now." → "It's making a noise." → "Please."
- 圓形壓力錶盤（0–400 bar 弧，紅色區域）圍繞一個紅色 HOLD 按鈕、一個 Raise 按鈕，以及一個大號的數字 bar 讀數。
- 帶圖標的水果標籤。
- 遊玩模式下，說明文字槽顯示 "Grab a piece. Throw it."，並帶小的 "Press again" 與 "Next jelly" 按鈕。
- 操作：按住 Space 或 ArrowDown 下壓，ArrowUp 抬起，R 重置，1–4 選擇水果。滾輪縮放；雙擊重置視圖。
- 相機：檯面高度的低機位；壓機框架會隨水果改變朝向，使立柱永遠不會擋住果凍。構圖會自適應，讓果凍位於刊頭與底部面板之間；在手機上（豎屏）也能用，舞臺更窄。
聲音（程序化 Web Audio，無文件）
液壓馬達的嗡鳴隨壓力升高，溼潤的擠壓聲，高壓時偶爾的吱嘎聲，壓板停下時閥門的一聲悶響，一聲響亮的爆裂，落地時輕柔的噗通聲。首次交互時解鎖。
質量門檻
- 在筆記本電腦上流暢 60 fps。
- 在後臺預熱其他水果的網格與着色器，讓切換是瞬時的。
- 尊重 prefers-reduced-motion。
- 無障礙標籤、帶 role=meter 的儀表、focus-visible 輪廓。
- 沒有控制臺錯誤。頁面永遠不會變空白。
