Build "Kiwi Jelly Wedge" — a single self-contained HTML file (inline JS/CSS, no libraries): a real-time WebGPU soft-body gummy kiwi wedge you can grab, stretch, lift and twist.
Object
One sixth of a thick kiwi slice: a pie-shaped wedge with 30° half-angle, radius ≈ 1.8 and thickness 0.56. Rounded corners (iq's exact pie SDF minus a rounding radius) and bevelled top/bottom edges.
Regions, measured from the tip in rest space:a cream core at the tip with a slightly lobed edge;
thin pale rays fanning out of the core every 2π/56, each with its own random brightness and length;
a darker, glassier ring around the seeds (blushes red in the Ruby variety);
bright juicy outer flesh with radial cell grain and a lighter band just under the skin;
a thin brown fuzzy skin on the arc wall.
Seeds:small flattened black teardrops, pointed end toward the core, in radial rows between the rays, at four depths;
the face layers break the cut surfaces like real seeds; the others float inside and show through the jelly;
wet glossy shading.
A few small air bubbles in the outer flesh.
Varieties: Green, Gold, Ruby.
Physics (XPBD tetrahedral soft body)
Mesh: 2D Delaunay of the rounded outline plus a hex lattice, extruded into prisms → tets.
Co-rotational per-tet shape matching (warm-started quaternion) plus volume constraints.
Stiffer skin and core tets; edge-velocity damping; floor contact with Coulomb friction.
Soft patch grab with bounded reach; scroll or a second finger twists the held patch.
Fixed 60 Hz step with 10 substeps; gentle settling.
Seeds and bubbles are separate meshes embedded in the tets by barycentric weights, so they ride with the flesh.
Rendering (WebGPU / WGSL)
Procedural photo-studio cyclorama with softboxes. Soft PCSS key shadow tinted green, plus contact AO from a top-down height map.
Seeds and bubbles are drawn in the scene pass. A back-face pass gives the view-ray thickness.
Jelly:refraction of the scene, with per-tap Beer–Lambert absorption by material (flesh, glassy seed ring, milky core and rays, opaque skin);
scattering, back-lit glow at thin edges, Fresnel studio reflections and GGX highlights;
a velvet sheen on the fuzzy skin;
sparse sugar glints in the flesh.
Post: exposure, Khronos PBR Neutral tone mapping, sRGB, dither.
UI (editorial "Material Studies / No. 028", English)
Italic serif title "Kiwi / Jelly." with the caption "An emerald wedge. A halo of seeds. A gentle wobble."
Status pill "WEBGPU · LIVE".
Panel "The Specimen": variety chips (skin / core / flesh bands); Firmness ("trembling → set") and Internal damping ("lively → syrupy") sliders; Give it a nudge, Reset, Pause; ¼ speed and Show mesh.
Readouts: Mass (g, 1 unit ≈ 1.6 cm at 1.3 g/cm³), Volume (% of rest), Kinetic (µJ).
A collapsible "Inside the experiment" with notes on the method.
Fallback "This kiwi needs WebGPU." Stacked mobile layout with no horizontal scroll.
한국어 번역
"Kiwi Jelly Wedge"를 만드세요 — 단일 자체 포함 HTML 파일(인라인 JS/CSS, 라이브러리 없음): 잡고 늘리고 들어 올리고 비틀 수 있는 실시간 WebGPU 소프트 바디 구미 키위 웨지.
오브젝트
두꺼운 키위 슬라이스의 1/6: 30° 반각, 반경 ≈ 1.8, 두께 0.56인 파이 모양 웨지. 둥근 모서리(iq의 정확한 파이 SDF에서 라운딩 반경을 뺀 것)와 베벨 처리된 상/하단 가장자리.
영역은 정지 공간에서 끝을 기준으로 측정: 끝부분의 살짝 로브진 가장자리를 가진 크림색 코어;
2π/56마다 코어에서 부채꼴로 뻗는 가늘고 옅은 광선, 각각 고유한 무작위 밝기와 길이를 가짐;
씨 주위의 더 어둡고 더 유리 같은 고리(Ruby 품종에서는 붉게 물듦);
방사형 세포 결이 있고 껍질 바로 아래에 더 밝은 띠가 있는 밝고 과즙 많은 외부 과육;
호 벽면의 얇고 갈색이며 솜털진 껍질.
씨: 코어를 향해 뾰족한 끝이 있는 작고 납작한 검은 물방울 모양으로, 광선 사이의 방사형 줄에 네 가지 깊이로 배치;
표면층은 실제 씨처럼 절단면을 끊고; 나머지는 내부에 떠서 젤리를 통해 비쳐 보임;
젖은 광택 셰이딩.
외부 과육에 작은 기포 몇 개.
품종: Green, Gold, Ruby.
물리 (XPBD 사면체 소프트 바디)
메시: 둥근 윤곽의 2D Delaunay와 헥스 격자를 프리즘으로 돌출 → 사면체.
사면체별 공회전 형상 매칭(웜 스타트 쿼터니언)과 부피 제약.
더 단단한 껍질과 코어 사면체; 에지 속도 감쇠; Coulomb 마찰을 적용한 바닥 접촉.
범위가 제한된 소프트 패치 잡기; 스크롤 또는 두 번째 손가락으로 잡은 패치를 비틂.
10 서브스텝의 고정 60 Hz 스텝; 부드러운 안정화.
씨와 기포는 무게중심 가중치로 사면체에 내장된 별도 메시이므로 과육과 함께 움직입니다.
렌더링 (WebGPU / WGSL)
소프트박스가 있는 절차적 포토 스튜디오 사이클로라마. 초록빛이 도는 부드러운 PCSS 키 섀도, 그리고 탑다운 높이 맵에서 나온 컨택트 AO.
씨와 기포는 씬 패스에서 그립니다. 백페이스 패스가 시선 광선의 두께를 제공합니다.
젤리: 씬의 굴절, 재질별(과육, 유리 같은 씨 고리, 유백색 코어와 광선, 불투명 껍질) 탭당 Beer–Lambert 흡수;
산란, 얇은 가장자리의 역광 글로우, Fresnel 스튜디오 반사 및 GGX 하이라이트;
솜털 껍질 위의 벨벳 광택;
과육 속의 드문 설탕 반짝임.
포스트: 노출, Khronos PBR Neutral 톤 매핑, sRGB, 디더.
UI (에디토리얼 "Material Studies / No. 028", 영어)
이탤릭 세리프 제목 "Kiwi / Jelly."와 캡션 "An emerald wedge. A halo of seeds. A gentle wobble."
상태 필 "WEBGPU · LIVE".
패널 "The Specimen": 품종 칩(skin / core / flesh 밴드); Firmness("trembling → set")와 Internal damping("lively → syrupy") 슬라이더; Give it a nudge, Reset, Pause; ¼ 속도와 Show mesh.
리드아웃: Mass (g, 1 단위 ≈ 1.6 cm, 1.3 g/cm³ 기준), Volume (정지 상태 대비 %), Kinetic (µJ).
방법에 관한 노트가 있는 접을 수 있는 "Inside the experiment".
폴백 "This kiwi needs WebGPU." 가로 스크롤이 없는 스택형 모바일 레이아웃.
