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 轮廓。
- 没有控制台错误。页面永远不会变空白。
