Build "Iceberg Jelly" — the next piece in my "Material Studies" series of jelly dioramas: a single self-contained HTML file using WebGPU (WGSL), no external libraries, English UI.
THE SCENE
A square block of jelly (5.2 × 5.2 units) standing on a pale, cool-grey paper studio backdrop with a soft floor shadow. Inside it, a polar bay:
- At the back left, a glacier flows down a valley between jagged mountains and ends in an ice cliff standing in deep water. The cliff has vertical runnels and blue bands. The glacier surface has chevron crevasses along its margins, transverse crevasses and seracs near the front, and grey lateral moraines. Its tongue is flanked by moraine banks, so only its front stands in the water.
- Mountains: a peaky left range and a spur on the right of the glacier, with a snowy ridge along the back. Dark volcanic rock with orange lichen, and snow in ragged patches on flatter and higher ground (not everywhere).
- At the back right, a low peninsula with an Adélie penguin rookery: an organic, irregular patch of round pebbles stained pink with krill, with pebble-ring nests. Behind it, a small research station (red and yellow huts on stilts, fuel drums, a radio mast with guy wires, a flag, a turning anemometer, a snowmobile) and a timber quay.
- A ragged skerry of two low rocks off to the front right, where Weddell seals haul out.
- The sea floor is grey gravel with shells, sponges, sea stars and swaying anemones, visible through the clear jelly front face.
- The cut faces of the block show candy-coloured strata, dark basalt columns under the land, and layered blue glacier ice with a dirty basal layer under the glacier.
PHYSICS
- Shallow-water simulation on a ~168² grid for the bay: waves, wakes, foam, refraction, caustics on the floor, light shafts, and absorption that depends on the flavour.
- Every piece of ice is a rigid body: tabular, dome, pinnacle and wedge bergs, growlers, pancake floes, and glacier slabs. Each is a star-shaped faceted mesh (superellipsoid plus lobes plus two octaves of noise), a lattice of mass points for buoyancy and drag, and contact spheres for ground, walls, each other and the ship. Settle stable poses at load so nothing capsizes at the start.
- Calving: three slabs stand along the cliff. About once a minute (or on demand) one breaks off with a crack, a puff of ice dust, a splash, spray and a wave, then capsizes until it finds a stable way up. The glacier slowly pushes a new slab out. Old slabs melt away.
- The displaced water is handed back to the waves without feedback: wakes only when a piece moves fast, splashes when it plunges in. Slow drift makes no waves.
- The jelly block itself wobbles, shears and squashes, and can be tipped by dragging its side.
LIFE
- An icebreaker, "Polaris" (red hull with a spoon bow, white superstructure, yellow funnel with smoke, a turning radar, a helideck), lies at the quay. Now and then (or on demand) she casts off, shoulders round the bay through the pack, pushing floes and bergs aside, and comes back alongside. A status line shows Alongside / Casting off / Under way / Breaking ice / Coming alongside, with a countdown or progress.
- 22 Adélie penguins: blue-black backs, white shirt fronts, white eye rings, pink feet. They stand on nests and look about, have the odd ecstatic display, waddle or toboggan to the beach, dive in, "fly" underwater with beating flippers, porpoise, leap out onto floes and bergs, and slide off when a floe tips. They chase silverfish and thrown fish.
- 3 Weddell seals (spotted grey) haul out on the skerry and floes, lift their heads, and go for swims.
- An orca (proper eye patch and grey saddle) patrols deep water, surfaces to blow and dives. Penguins keep clear of it.
- Schools of silverfish; gentle snowfall.
UI (same layout as the rest of the series)
Masthead "Material Studies / Iceberg Jelly." with a one-line description. A "WebGPU · Live" status pill. A glass control panel on the right that turns into a bottom sheet on mobile:
- Buttons: Calve (shows "Wait…" while no slab is ready), Cast off / Full ahead, Throw fish, Horn (Space).
- A water-energy meter; tallies for Calved, Capsized, Fed; the ship status line.
- Flavours: Glacier mint, Blue raspberry, Blackberry. Each changes the water's absorption, its tint and the strata.
- Sliders: Firmness, Wave damping, Snowfall.
- Reset, Pause, Sound on/off, View.
- A "How to play" footer.
Interaction: pick up and throw floes and bergs; drag across the water to make waves; drag the ground or the side of the block to tip it; drag empty space or right-drag to orbit; scroll or pinch to zoom.
Web Audio sounds: calving crack and rumble, splashes, a capsizing groan, ice knocking on the hull, a deep two-reed ship's horn, penguin plops, and wind that rises with the snowfall.
Show a fallback screen when WebGPU is unavailable. Respect prefers-reduced-motion. No network requests.
QUALITY BAR
Low-poly faceted ice with chalky snowy tops, glassy blue underwater parts, blue bands, sparkles and translucency. Soft shadows. Cool polar light. Performance around 60 fps on a laptop. Test headlessly: no NaNs over long soaks, a calm start, calving plus capsize, a full ship round trip, feeding, picking up ice, the mobile sheet, and no console errors.
Deliver the HTML file and publish it as an artifact.
한국어 번역
"Iceberg Jelly"를 제작하세요 — 젤리 디오라마로 이루어진 제 "Material Studies" 시리즈의 다음 작품입니다: WebGPU(WGSL)를 사용하는 단일 독립형 HTML 파일, 외부 라이브러리 없음, 영어 UI.
장면
옅고 차가운 회색 종이 스튜디오 배경 위에 서 있는 정사각형 젤리 블록(5.2 × 5.2 단위)이며, 바닥에는 부드러운 그림자가 드리워집니다. 그 내부에는 극지 만이 펼쳐집니다:
- 뒤쪽 왼편에서는 빙하가 들쭉날쭉한 산들 사이의 계곡을 따라 흘러내려 깊은 물 속에 서 있는 얼음 절벽에서 끝납니다. 절벽에는 세로로 패인 홈과 푸른 띠가 있습니다. 빙하 표면의 가장자리에는 갈매기자(chevron) 모양의 크레바스가, 앞쪽에는 가로 방향 크레바스와 세락(serac)이, 그리고 회색 측면 빙퇴석이 있습니다. 빙하의 설(舌)은 양옆이 빙퇴석 둑으로 둘러싸여 있어 앞쪽만 물속에 서 있습니다.
- 산: 뾰족뾰족한 왼쪽 산맥과 빙하 오른쪽의 지맥, 그리고 뒤쪽을 따라 눈 덮인 능선이 있습니다. 어두운 화산암에 주황색 지의류가 붙어 있고, 더 평평하고 높은 지대에는 눈이 너덜너덜한 조각으로 덮여 있습니다(모든 곳은 아님).
- 뒤쪽 오른편에는 아델리펭귄 번식지가 있는 낮은 반도가 있습니다: 크릴로 분홍빛으로 물든 둥근 자갈들의 유기적이고 불규칙한 패치이며, 자갈 고리 둥지가 있습니다. 그 뒤에는 작은 연구 기지(말뚝 위의 빨간색과 노란색 오두막, 연료 드럼, 당김줄이 달린 무선 안테나 마스트, 깃발, 회전하는 풍속계, 스노모빌)와 목재 부두가 있습니다.
- 앞쪽 오른편 떨어진 곳에는 낮은 바위 두 개로 이루어진 거친 암초가 있으며, 웨들물범이 그곳으로 올라와 쉽니다.
- 해저는 회색 자갈로 이루어져 있고 조개껍데기, 해면, 불가사리, 흔들리는 말미잘이 있으며, 투명한 젤리 앞면을 통해 보입니다.
- 블록의 절단면에는 캔디색 지층, 육지 아래의 어두운 현무암 기둥, 그리고 빙하 아래 더러운 기저층이 있는 층층의 푸른 빙하 얼음이 보입니다.
물리
- 만을 위한 약 168² 격자에서의 천해(shallow-water) 시뮬레이션: 파도, 항적, 거품, 굴절, 바닥의 코스틱(caustics), 빛줄기, 그리고 맛에 따라 달라지는 흡수.
- 모든 얼음 조각은 강체입니다: 탁상형, 돔형, 봉우리형, 쐐기형 빙산, 그라울러, 팬케이크 유빙, 빙하 판. 각각은 별 모양의 면 분할 메시(초타원체 + 로브 + 2옥타브 노이즈), 부력과 항력을 위한 질량점 격자, 그리고 지면·벽·서로·배에 대한 접촉 구체로 이루어집니다. 로드 시 안정적인 자세로 정착시켜 시작할 때 아무것도 뒤집히지 않게 합니다.
- 빙하 분리(calving): 세 개의 판이 절벽을 따라 서 있습니다. 약 1분에 한 번(또는 요청 시) 하나가 갈라지는 소리, 얼음 먼지 연기, 물보라, 비말, 파도와 함께 떨어져 나온 뒤, 안정적으로 떠오르는 방향을 찾을 때까지 뒤집힙니다. 빙하는 천천히 새로운 판을 밀어냅니다. 오래된 판은 녹아 사라집니다.
- 밀려난 물은 피드백 없이 파도로 되돌려집니다: 조각이 빠르게 움직일 때만 항적이 생기고, 물속으로 뛰어들 때 물보라가 생깁니다. 느린 표류는 파도를 만들지 않습니다.
- 젤리 블록 자체는 흔들리고, 전단 변형되고, 눌리며, 옆면을 드래그하면 기울일 수 있습니다.
생명
- 쇄빙선 "Polaris"(스푼 보우가 있는 빨간 선체, 흰색 상부 구조, 연기가 나는 노란 굴뚝, 회전하는 레이더, 헬리데크)가 부두에 정박해 있습니다. 때때로(또는 요청 시) 배는 출항하여 유빙 지대를 뚫고 만을 돌며 유빙과 빙산을 밀어내고 다시 부두 옆으로 돌아옵니다. 상태 줄에는 Alongside / Casting off / Under way / Breaking ice / Coming alongside가 카운트다운 또는 진행률과 함께 표시됩니다.
- 아델리펭귄 22마리: 청흑색 등, 흰 셔츠 앞면, 흰 눈 고리, 분홍 발. 둥지에 서서 주위를 둘러보고, 이따금 황홀 디스플레이를 하고, 뒤뚱거리거나 배로 미끄러져 해변으로 가고, 물속으로 뛰어들어 지느러미를 퍼덕이며 물속을 "날고", 돌고래처럼 뛰어오르고, 유빙과 빙산 위로 뛰어올랐다가 유빙이 기울면 미끄러져 내려옵니다. 은빛 물고기와 던져진 물고기를 쫓습니다.
- 웨들물범 3마리(점박이 회색)가 암초와 유빙 위로 올라와 쉬고, 머리를 들고, 헤엄치러 갑니다.
- 범고래 한 마리(제대로 된 눈 반점과 회색 안장 무늬)가 깊은 물을 순찰하고, 수면으로 올라와 물을 뿜고 잠수합니다. 펭귄들은 그것을 피합니다.
- 은빛 물고기 떼; 잔잔한 눈 내림.
UI (시리즈의 나머지와 동일한 레이아웃)
마스트헤드 "Material Studies / Iceberg Jelly."와 한 줄 설명. "WebGPU · Live" 상태 알약. 오른쪽의 유리 제어 패널은 모바일에서 하단 시트로 바뀝니다:
- 버튼: Calve(판이 준비되지 않았을 때는 "Wait…" 표시), Cast off / Full ahead, Throw fish, Horn (Space).
- 물 에너지 게이지; Calved, Capsized, Fed 집계; 선박 상태 줄.
- 맛: Glacier mint, Blue raspberry, Blackberry. 각각 물의 흡수, 색조, 지층을 바꿉니다.
- 슬라이더: Firmness, Wave damping, Snowfall.
- Reset, Pause, Sound on/off, View.
- "How to play" 푸터.
상호작용: 유빙과 빙산을 집어 던지기; 물 위를 드래그해 파도 만들기; 지면이나 블록 옆면을 드래그해 기울이기; 빈 공간을 드래그하거나 오른쪽 드래그로 궤도 회전; 스크롤 또는 핀치로 확대/축소.
Web Audio 사운드: 빙하가 갈라지는 소리와 웅성거림, 물보라, 뒤집힐 때의 신음, 선체에 부딪히는 얼음, 깊은 두 리드의 배 경적, 펭귄이 철퍽 들어가는 소리, 그리고 눈 내림에 따라 세지는 바람.
WebGPU를 사용할 수 없을 때는 대체 화면을 표시합니다. prefers-reduced-motion을 존중합니다. 네트워크 요청 없음.
품질 기준
분필 같은 눈 덮인 상단, 유리 같은 푸른 수중 부분, 푸른 띠, 반짝임, 반투명을 지닌 로우폴리 면 분할 얼음. 부드러운 그림자. 차가운 극지 광. 노트북에서 약 60 fps의 성능. 헤드리스로 테스트: 장시간 소크에서 NaN 없음, 조용한 시작, 빙하 분리와 뒤집힘, 선박의 완전한 왕복, 먹이 주기, 얼음 집어 올리기, 모바일 시트, 콘솔 오류 없음.
HTML 파일을 제공하고 아티팩트로 게시하세요.
