Create "Frostbay." — an interactive miniature Arctic diorama as ONE self-contained HTML file using native WebGPU (WGSL). Everything procedural: no libraries, no imported models, no image textures, no network requests.
SCENE
- A clear rectangular block of cold sea (≈10 × 7 units, ~1.6 deep) resting on a thick, glossy jelly foundation with rounded edges and soft layered bands of icy blue and pale lavender.
- A snowy rock island toward the back: wet dark rock at the tide line, a cut "core-sample" cross-section where it meets the glass, a few rounded boulders on the sea floor.
- An igloo built from individual curved snow blocks (rows offset like brickwork), a block entrance tunnel, a warm amber ice window and a glowing interior.
- A wooden plank pier on posts with a hanging lantern; a fluttering red-and-white flag on a pole.
- An orange kayak with a double-bladed paddle; ~10 irregular ice floes; a larger ice raft.
- Two harbour seals (spotted, pale muzzle): one basking on a shore ledge of the island, one lying on the raft.
- A humpback whale: one smooth continuous lofted body, pale throat pleats and belly, mouth line, eyes, knobbly rostrum, very long pale flippers, small dorsal fin, wide flukes.
- Calm editorial backdrop; the diorama casts a soft shadow on an unseen floor.
WATER (a real simulation, not a shader trick)
- Height-field long-wave sim (∂²h/∂t² = ∇·(g·depth ∇h)) on a ~200×140 grid, flux form (volume-conserving), fixed 180 Hz substeps, damping + light viscosity + hard clamps: stable at every slider setting and during frantic drags.
- Waves slow and steepen over the shallows, wrap around the island, reflect off the glass and settle.
- Press = a soft plunger making a deep hollow with a raised, volume-neutral rim; dragging sweeps it (speed-limited) and leaves real 3D wakes. Hover never makes waves. Touch supported.
- Dragging a glass side tilts and slides the block on its jelly (damped springs that wobble back) and the sea sloshes toward the new level; a local soft bulge follows the hand. Pulling a jelly edge stretches it locally, then it wobbles home.
- Floating things follow local height and averaged slope, drift, bump each other, avoid shallows and glass.
LIFE
- Kayak: draggable (with a wake). A strong local wave — high swing AND steep averaged slope across the hull — rolls it 180° and leaves it upside down; ordinary ripples and blizzard chop only rock it; never capsizes while held.
- Raft seal: breathes, looks around, articulated flippers. Strong waves make it lose balance, slip off head-first, fall in with a splash, then swim — head up, coordinated hind-flipper strokes, steering away from shallows and glass — and later hauls itself back onto the raft.
- Shore seal: breathes, gazes, scratches with a fore flipper, lifts its head when big waves come.
- Whale: its spine follows the path its head has swum, so it always moves head-first and bends through turns, never sliding backward. "Call the whale" (button or double-click / double-tap) brings it up to the surface, it blows a misty spout, its back heaves the water, then it dives with the flukes rolling under.
LOOK
- Opaque pass to HDR with 4× MSAA plus a distance buffer; water pass with screen-space refraction (wave-driven), depth absorption (deep cold blue, no tropical turquoise), Fresnel sky reflection, restrained soft highlights, foam on crests and shallows, side walls showing the underwater cross-section with a crisp waterline and total internal reflection.
- Moving caustics on everything under the surface, focused by the live wave curvature; soft key-light shadows; neutral tone mapping.
- Modes: Daylight, Snowfall (overcast, falling snow), Aurora night (green/violet curtains, twinkling stars, warm igloo and lantern light with reflections on the water). Blizzard toggle: dense wind-driven snow, gusts and chop on the sea.
UI
- Restrained editorial layout: large italic serif "Frostbay.", short atmospheric subtitle, live status pill, compact panel (weather segments, blizzard switch, jelly firmness, wave damping, tide, Call the whale, Pause, Reset, Camera), concise hints, readouts for seal, kayak, whale and swell; orbit and zoom (pinch on touch).
- Pause freezes all motion; Reset restores sea, block, raft seal and upright kayak.
- Mobile: stacked layout, collapsible controls, ≥44 px touch targets. Clear fallback card if WebGPU is unavailable.
Test water interaction, stability, animals, kayak drag and capsize, whale call, weather modes, pause/reset, shader compilation and mobile layout. Return the finished HTML only.
한국어 번역
"Frostbay."를 만들어 주세요 — 네이티브 WebGPU(WGSL)를 사용하는 하나의 자체 완결형 HTML 파일로 구현된 인터랙티브 미니어처 북극 디오라마. 모든 것은 절차적: 라이브러리 없음, 임포트 모델 없음, 이미지 텍스처 없음, 네트워크 요청 없음.
장면
- 투명한 직사각형의 차가운 바다 블록(≈10 × 7 유닛, 깊이 ~1.6)이 둥근 모서리와 얼음빛 파랑·옅은 라벤더의 부드러운 층상 띠를 지닌 두껍고 광택 있는 젤리 기반 위에 놓여 있음.
- 뒤쪽으로 눈 덮인 바위 섬: 조수선의 젖은 어두운 바위, 유리와 만나는 곳의 잘린 "코어 샘플" 단면, 해저의 둥근 바위 몇 개.
- 개별 곡선 눈 블록으로 쌓은 이글루(벽돌처럼 줄을 어긋나게), 블록으로 된 입구 터널, 따뜻한 호박색 얼음 창, 빛나는 내부.
- 말뚝 위의 나무 판자 부두와 매달린 등불; 깃대에서 펄럭이는 빨강-흰색 깃발.
- 양날 패들이 있는 주황색 카약; ~10개의 불규칙한 유빙; 더 큰 얼음 뗏목.
- 두 마리의 항구물범(점무늬, 옅은 주둥이): 한 마리는 섬의 해안 턱에서 일광욕, 한 마리는 뗏목 위에 누워 있음.
- 혹등고래: 매끄럽게 이어진 하나의 로프트 몸체, 옅은 목 주름과 배, 입선, 눈, 울퉁불퉁한 주둥이, 매우 긴 옅은 가슴지느러미, 작은 등지느러미, 넓은 꼬리지느러미.
- 차분한 에디토리얼 배경; 디오라마는 보이지 않는 바닥에 부드러운 그림자를 드리움.
물 (셰이더 트릭이 아닌 실제 시뮬레이션)
- ~200×140 그리드에서의 높이장 장파 시뮬레이션(∂²h/∂t² = ∇·(g·depth ∇h)), 플럭스 형태(체적 보존), 고정 180 Hz 서브스텝, 감쇠 + 가벼운 점성 + 하드 클램프: 모든 슬라이더 설정과 격렬한 드래그 중에도 안정적.
- 파도는 얕은 곳에서 느려지고 가팔라지며, 섬을 감싸 돌고, 유리에 반사되어 잦아든다.
- 누르기 = 깊은 움푹함을 만들고 볼륨 중립적인 융기 테두리를 남기는 부드러운 플런저; 드래그하면 (속도 제한 하에) 쓸어가며 실제 3D 항적을 남긴다. 호버는 절대 파도를 만들지 않는다. 터치 지원.
- 유리 측면을 드래그하면 블록이 젤리 위에서 기울고 미끄러지며(되돌아 흔들리는 감쇠 스프링) 바다가 새로운 수위 쪽으로 출렁인다; 손을 따라 국소적인 부드러운 팽창이 생긴다. 젤리 가장자리를 당기면 국소적으로 늘어났다가 흔들리며 제자리로 돌아온다.
- 떠 있는 물체들은 국소 높이와 평균 경사를 따르고, 표류하며, 서로 부딪히고, 얕은 곳과 유리를 피한다.
생명
- 카약: 드래그 가능(항적 포함). 강한 국소 파도 — 큰 진폭과 선체를 가로지르는 가파른 평균 경사 모두 — 가 180° 뒤집어 거꾸로 남긴다; 보통의 잔물결과 폭풍우의 파동은 흔들기만 한다; 잡고 있는 동안에는 절대 전복되지 않는다.
- 뗏목 물범: 숨쉬고, 주위를 둘러보고, 관절이 움직이는 지느러미. 강한 파도에 균형을 잃고 머리부터 미끄러져 첨벙 빠진 뒤 헤엄친다 — 머리를 들고, 뒷지느러미를 조화롭게 저으며, 얕은 곳과 유리를 피해 방향을 잡는다 — 이후 스스로 뗏목 위로 다시 올라온다.
- 해안 물범: 숨쉬고, 응시하고, 앞지느러미로 긁으며, 큰 파도가 오면 머리를 든다.
- 고래: 척추가 머리가 헤엄친 경로를 따라가므로 항상 머리부터 움직이고 회전할 때 휘어지며, 절대 뒤로 미끄러지지 않는다. 「Call the whale」(버튼 또는 더블클릭 / 더블탭)을 하면 수면으로 올라오고, 물안개 같은 물기둥을 뿜고, 등이 물을 밀어 올린 뒤 꼬리지느러미를 말아 넣으며 잠수한다.
비주얼
- 4× MSAA와 거리 버퍼를 사용하는 HDR 불투명 패스; 스크린 공간 굴절(파도 구동), 깊이 흡수(깊고 차가운 파랑, 열대의 터키석색 없음), 프레넬 하늘 반사, 절제된 부드러운 하이라이트, 파도 마루와 얕은 곳의 거품, 선명한 수면선과 전반사가 보이는 수중 단면을 드러내는 측벽을 갖춘 물 패스.
- 수면 아래 모든 것에 움직이는 코스틱스, 실시간 파도 곡률에 의해 집광됨; 부드러운 키 라이트 그림자; 중립 톤 매핑.
- 모드: Daylight, Snowfall(흐림, 내리는 눈), Aurora night(녹색/보라색 커튼, 반짝이는 별, 따뜻한 이글루와 등불 빛이 물에 반사됨). Blizzard 토글: 바람에 몰아치는 짙은 눈, 돌풍과 바다의 너울.
UI
- 절제된 에디토리얼 레이아웃: 크고 이탤릭인 세리프 "Frostbay.", 짧은 분위기 부제, 라이브 상태 필, 컴팩트 패널(날씨 세그먼트, blizzard 스위치, 젤리 단단함, 파도 감쇠, 조수, Call the whale, Pause, Reset, Camera), 간결한 힌트, 물범·카약·고래·너울의 수치 표시; 궤도 회전과 줌(터치에서는 핀치).
- Pause는 모든 움직임을 정지시키고; Reset은 바다, 블록, 뗏목 물범, 똑바로 선 카약을 복원한다.
- 모바일: 세로로 쌓인 레이아웃, 접을 수 있는 컨트롤, ≥44 px 터치 타깃. WebGPU를 사용할 수 없을 때 명확한 대체 카드.
물 상호작용, 안정성, 동물들, 카약 드래그와 전복, 고래 호출, 날씨 모드, 일시정지/리셋, 셰이더 컴파일, 모바일 레이아웃을 테스트해 주세요. 완성된 HTML만 반환해 주세요.
