Build "Whole Melon": a single self-contained HTML file (all JS/CSS inline, no build step, no libraries) with a big whole watermelon made of glossy jelly that you can grab, wobble and cut into pieces with a knife. Render with raw WebGPU (WGSL); if WebGPU is missing, show a clean fallback card.
SHAPE AND MATERIAL
- The melon is a signed distance field: an ellipsoid (~32 cm long) lying on its side with a softly flattened belly.
- Layers by depth under the skin: dark-green skin with irregular darker stripes running pole to pole (seamless all the way around), a pale pith band, then translucent red flesh that brightens toward the rind. Add a pale yellow field spot on the belly, a stem scar at one end and a blossom end at the other.
- About 700 seeds in a three-lobed ring at roughly two thirds of the radius (teardrops, wide end pointing outward), plus tiny air bubbles. Mesh seeds only near cut faces; a seed the knife goes through is kept by one side and eased just under the new face, so it shows through a thin film of jelly.
- Three varieties: Crimson, Golden, Rosé.
PIECES AND CUTTING
- Every piece is the melon SDF clipped by the half-spaces of the cuts that made it, with the fresh edges rounded (smooth max). All pieces share the melon's original rest frame, so rind, pith, stripes and seeds stay exactly where they grew.
- Knife tool: the user draws a line across the melon. Read the stroke on top of what it crosses to get a vertical blade plane. For each piece the plane passes through, fit the piece's best rotation, carry the plane into rest space, and split the piece in two.
- Build the new pieces cooperatively (generators with a per-frame time budget) while a steel knife (brushed blade, wooden handle with rivets) lines up over the stroke and presses a groove into the jelly. Swap the new pieces in the moment the edge breaks through, carrying over the position and velocity of the flesh they came from, and let the blade wedge them apart as it sinks. Allow up to about 24 pieces and reject slivers.
- For each piece: a surface-nets render skin (evaluate only the blocks near the surface, one Newton step onto it), a hex lattice in the piece's principal frame with boundary nodes snapped onto the surface, and a fast barycentric embedding.
PHYSICS (XPBD on the CPU, fixed 60 Hz, 6 substeps)
- Cell-wise co-rotational shape matching (8-node cells, warm-started rotation, strain stiffening), tet volume constraints for near-incompressibility, rind firmer than flesh.
- Edge damping, plus damping of each piece's deformation relative to its rigid motion (never its fall or tumble), rolling resistance on the table, and sleep when calm.
- Piece-to-piece contact against each other's exact SDF in a best-fit frame; sleeping pieces act as walls. Floor contact with Coulomb friction.
- Hand tool: grab any piece and pull (soft patch attachment, with enough reach to drag pieces across a wide table). Scroll or a second finger twists while holding. Pinch or scroll zooms; dragging the empty table orbits the camera.
RENDERING (a photographic product shot)
- Procedural studio: pale paper sweep, overhead softbox, back-left strip light, cool fill card.
- Jelly: front faces refract the scene behind by the view-ray thickness (nearest-back-face pass), with Beer–Lambert absorption per material, milky scattering in the pith, a back-lit glow at thin edges, sugar glints, Fresnel studio reflections and GGX highlights.
- Seeds, bubbles and the knife are drawn before the jelly, so they are seen refracted through it.
- Normals follow the jelly's local deformation (cofactor of the node-averaged deformation gradient).
- A soft key shadow coloured by what the light crossed first (rosy through flesh, dark through rind), plus contact occlusion from a top-down height map. MSAA, Khronos PBR Neutral tone mapping.
UI (editorial, like a material study)
- Kicker "Material Studies / No. 010" and a big italic serif title "Whole / Melon."
- A panel with Tool (Hand / Knife), Variety, Firmness and Internal damping sliders, Nudge, Reset, ¼ speed, Show mesh and Pause.
- Live readouts: mass, volume %, kinetic energy, piece count. A collapsible "Inside the experiment" note.
- Responsive down to phones.
Quality bar: it should look and move like a real glossy jelly watermelon, and every cut face should look like a sliced jelly melon with seeds just under the surface. Test headlessly with screenshots: the whole melon, mid-cut, many pieces, a close-up of a cut face, and mobile.
한국어 번역
"Whole Melon"을 만드세요: 단일 자체 완결형 HTML 파일(모든 JS/CSS 인라인, 빌드 단계 없음, 라이브러리 없음)로, 잡고 흔들고 칼로 조각낼 수 있는 윤기 나는 젤리로 된 커다란 통수박을 구현하세요. 순수 WebGPU(WGSL)로 렌더링하고, WebGPU가 없으면 깔끔한 폴백 카드를 표시하세요.
형태와 재질
- 수박은 부호 있는 거리장입니다: 옆으로 누워 있고 배 쪽이 부드럽게 편평해진 타원체(길이 약 32cm)입니다.
- 껍질 아래 깊이별 층: 극에서 극으로 이어지는 불규칙한 진한 줄무늬가 있는 짙은 녹색 껍질(둘레 전체가 이음매 없이 이어짐), 옅은 흰색 속껍질 띠, 그다음 껍질 쪽으로 갈수록 밝아지는 반투명한 붉은 과육. 배 쪽에는 옅은 노란색 밭자국(field spot)을, 한쪽 끝에는 꼭지 자국을, 다른 쪽 끝에는 꽃자리(blossom end)를 추가하세요.
- 반지름의 약 3분의 2 지점에 세 갈래 고리 모양으로 놓인 약 700개의 씨(물방울 모양, 넓은 끝이 바깥을 향함)와 미세한 기포. 절단면 근처에만 씨를 메시로 만드세요. 칼이 관통한 씨는 한쪽 조각이 보유하고 새 면 바로 아래로 살며시 밀어 넣어, 얇은 젤리 막을 통해 비쳐 보이게 하세요.
- 세 가지 품종: Crimson, Golden, Rosé.
조각과 절단
- 각 조각은 수박 SDF를 자신을 만들어 낸 절단의 반공간으로 잘라낸 것이며, 새로 생긴 모서리는 둥글게 처리합니다(스무스 맥스). 모든 조각은 수박의 원래 정지 좌표계를 공유하므로 껍질, 속껍질, 줄무늬, 씨가 자라난 위치에 정확히 그대로 남습니다.
- 칼 도구: 사용자가 수박 위에 선을 그립니다. 스트로크를 그것이 가로지르는 표면 위에서 읽어 수직 칼날 평면을 구합니다. 평면이 지나가는 각 조각마다 조각에 가장 잘 맞는 회전을 맞추고, 평면을 정지 공간으로 옮긴 뒤 조각을 둘로 나눕니다.
- 새로운 조각들을 협력적으로(프레임당 시간 예산을 가진 제너레이터로) 만드는 동안, 강철 칼(브러시드 칼날, 리벳이 박힌 나무 손잡이)이 스트로크 위로 정렬되어 젤리에 홈을 눌러 넣습니다. 칼날이 젤리를 뚫고 나오는 순간 새 조각들로 교체하고, 원래 과육의 위치와 속도를 그대로 이어받게 하며, 칼날이 가라앉으면서 조각들을 벌려 놓도록 하세요. 최대 약 24조각까지 허용하고 얇은 조각은 거부하세요.
- 각 조각마다: 서피스 네츠 렌더 스킨(표면 근처의 블록만 평가하고 표면 위로 뉴턴 스텝 한 번 적용), 조각의 주축 좌표계에 놓이고 경계 노드가 표면에 스냅된 육각 격자, 그리고 빠른 무게중심좌표 임베딩.
물리 (CPU에서 XPBD, 고정 60 Hz, 서브스텝 6회)
- 셀 단위 공회전 형상 매칭(8노드 셀, 웜스타트 회전, 변형률 경화), 거의 비압축성을 위한 사면체 부피 제약, 과육보다 단단한 껍질.
- 에지 감쇠, 그리고 각 조각의 변형을 강체 운동(낙하나 구름은 절대 아님)에 상대적으로 감쇠하는 것, 테이블 위 구름 저항, 조용해지면 슬립.
- 최적 적합 좌표계에서 서로의 정확한 SDF에 대한 조각 간 접촉. 잠든 조각은 벽 역할을 합니다. 바닥 접촉에는 쿨롱 마찰을 적용합니다.
- 손 도구: 어떤 조각이든 잡아당길 수 있습니다(부드러운 패치 부착, 넓은 테이블을 가로질러 조각을 끌 수 있을 만큼 충분한 도달 범위). 잡고 있는 동안 스크롤하거나 두 번째 손가락으로 비틀 수 있습니다. 핀치나 스크롤로 확대/축소하고, 빈 테이블을 드래그하면 카메라가 궤도 회전합니다.
렌더링 (제품 사진 같은 샷)
- 절차적 스튜디오: 옅은 색 종이 스윕, 머리 위 소프트박스, 왼쪽 뒤 스트립 라이트, 차가운 색 필 카드.
- 젤리: 앞면은 시선 광선 두께(가장 가까운 뒷면 패스)만큼 뒤쪽 장면을 굴절시키며, 재질별 Beer–Lambert 흡수, 속껍질의 유백색 산란, 얇은 모서리의 역광 발광, 설탕 반짝임, 프레넬 스튜디오 반사, GGX 하이라이트를 적용합니다.
- 씨, 기포, 칼은 젤리보다 먼저 그려져 젤리를 통해 굴절된 모습으로 보입니다.
- 노멀은 젤리의 국소 변형(노드 평균 변형 구배의 여인자)을 따릅니다.
- 빛이 먼저 통과한 대상에 따라 색이 입혀지는 부드러운 키 그림자(과육을 통과하면 장밋빛, 껍질을 통과하면 어두움), 그리고 탑다운 높이 맵에서 얻은 접촉 오클루전. MSAA, Khronos PBR Neutral 톤 매핑.
UI (에디토리얼, 마치 재료 연구처럼)
- 키커 "Material Studies / No. 010"과 크고 기울임꼴인 세리프 제목 "Whole / Melon."
- Tool(Hand / Knife), Variety, Firmness, Internal damping 슬라이더와 Nudge, Reset, ¼ speed, Show mesh, Pause가 있는 패널.
- 실시간 표시: 질량, 부피 %, 운동 에너지, 조각 수. 접을 수 있는 "Inside the experiment" 노트.
- 휴대폰 크기까지 반응형으로 대응합니다.
품질 기준: 실제 윤기 나는 젤리 수박처럼 보이고 움직여야 하며, 모든 절단면이 표면 바로 아래에 씨가 있는 잘린 젤리 수박처럼 보여야 합니다. 스크린샷으로 헤드리스 테스트하세요: 통수박, 자르는 중간, 많은 조각, 절단면 클로즈업, 모바일.
