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 스텝)
- 8 서브스텝의 XPBD 사면체 소프트 바디: 사면체별 공회전(co-rotational) 형상 매칭, 사면체별 부피 제약, 하드 엣지 변형률 한계(0.35×–1.8×), 엣지 속도 감쇠, 쿨롱 마찰이 있는 바닥 접촉, 구름 저항, 거의 정지했을 때의 부드러운 안정화.
- 렌더 메시는 사면체 내 무게중심 좌표 임베딩을 통해 CPU에서 스키닝됩니다. 법선은 매 프레임 삼각형에서 다시 계산합니다.
- 프레스 다이는 키네마틱 원형 플래튼입니다 (반지름 ~1.05, 둥근 모서리, 두께, 그 위의 램). 아래쪽으로는 마찰이 있는 천장, 위쪽으로는 선반, 테두리에서는 측벽 역할을 합니다. 두 개의 프레스 포스트는 솔리드입니다.
- bar 단위 압력 표시는 플래튼의 접촉 하중에서 나오며, 과일마다 스케일이 다릅니다.
터짐
- 젤리 높이의 52%에서 66% 사이의 무작위 압축 지점에서 파손됩니다.
- 각 라운드가 시작된 직후 백그라운드에서 파괴를 미리 계획해, 터지는 순간 자체는 즉각적입니다.
- 살짝 기울어진 벽을 가진 3D 보로노이 셀에서 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."
- 빨간 HOLD 버튼, Raise 버튼, 큰 숫자 bar 표시를 둘러싼 원형 압력 다이얼(0–400 bar 호, 빨간 영역).
- 아이콘이 있는 과일 칩.
- 플레이 모드에서 캡션 슬롯에는 "Grab a piece. Throw it."이 표시되고, 작은 "Press again" 및 "Next jelly" 버튼이 함께 나옵니다.
- 조작: Space 또는 ArrowDown을 누르고 있으면 프레스, ArrowUp은 올리기, R은 리셋, 1–4는 과일 선택. 휠은 줌, 더블클릭은 뷰 리셋.
- 카메라: 낮은 벤치 높이 시점; 과일마다 프레스 프레임이 요(yaw) 회전해 포스트가 젤리를 가리지 않습니다. 젤리가 마스트헤드와 덱 사이에 놓이도록 프레이밍이 조정되며, 더 좁은 무대로 휴대폰(세로)에서도 작동합니다.
사운드 (프로시저럴 Web Audio, 파일 없음)
압력에 따라 높아지는 유압 모터 웅웅거림, 젖은 squelch 소리, 고압에서 이따금 나는 삐걱임, 플래튼이 멈출 때의 밸브 쿵 소리, 큰 터지는 소리, 착지 시 부드러운 plop. 첫 상호작용에서 언락하세요.
품질 기준
- 노트북에서 부드러운 60 fps.
- 전환이 즉각적이도록 다른 과일의 메시와 셰이더를 백그라운드에서 워밍업.
- prefers-reduced-motion을 존중하세요.
- 접근성 라벨, role=meter 게이지, focus-visible 아웃라인.
- 콘솔 에러 없음. 페이지는 절대 빈 화면이 되지 않습니다.
