Build a single-file interactive WebGL diorama (one index.html, no build step) with Three.js r160 loaded via an import map from https://cdn.jsdelivr.net/, plus OrbitControls and BufferGeometryUtils (mergeVertices, mergeGeometries) from three/examples/jsm. Everything is procedural — no external models or textures.
CONCEPT
"Torii at High Tide": a miniature Japanese shrine island inspired by Itsukushima, inside a 10×10 block of clear water with rounded edges (vertical corner radius ~0.6, top edge radius ~0.26), on a thin sand-colored base slab, on a warm washi-paper background with a soft floor shadow that fades out with distance (so long dusk shadows never streak across the page).
TERRAIN (heightfield ~400×400, clipped to the rounded block, with a boundary "skirt" so the cross-section shows through the water)
- Work in a local frame facing the camera (u = across, v = toward the viewer).
- A forested dome-shaped hill at the back (~2.4 high), a low sandy shrine terrace at its foot, then a wide, gently sloping tidal flat in front (from ~-0.06 down to ~-0.46), dropping to ~-1.0 at the front and sides.
- Two rocky granite headlands framing the bay, each with 1–2 leaning bonsai-style pines (segmented trunks + flattened canopy pads).
- A flattened clearing on the hill flank for the pagoda.
- Terrain shader: granite rock on steep slopes (speckled, darker wet band just above the waterline, algae-dark below it), sand with a wet line, darker wet intertidal sand below the high-tide mark, moss/grass on the hill and in patches on the terrace, snow on upward-facing surfaces in winter, procedural animated caustics under water. CPU-baked horizon AO per vertex plus canopy-cover darkening.
ARCHITECTURE (merge everything into one vertex-colored mesh + one emissive "glow" mesh; write a small Builder that adds boxes/cylinders/spheres/custom geometry with a color and a transform, then mergeGeometries)
- Ryōbu-style torii standing in the bay on the axis of the shrine (~1.9 tall): vermilion tapered main pillars with black base sheaths, four supporting sode-bashira legs with black caps and two connecting beams each, nuki tie beam, central strut with a dark plaque, shimaki, and a curved kasagi (extruded shape with upturned ends) with a black top layer. Pillars must end inside the shimaki, not poke through the kasagi.
- Shrine on stilts over the tidal flat: plank deck (with plank-gap strips and dark edge beams) on a grid of wooden stilts reaching the seabed; a main hall and a smaller front hall (white walls, vermilion posts and tie beams, shoji-style front panels = glow panels behind a thin dark lattice), a lower front stage with vermilion railings, and two roofed vermilion corridors on stilts running sideways then back to the shore.
- Roofs: a hip-roof generator with a concave profile and lifted eave corners (top surface dark cypress-bark brown, warm wood underside, pale fascia trim, black ridge cap).
- A five-storey pagoda on the hill clearing: stone plinth, white walls with vermilion posts, bracket layer, flared roofs decreasing in size, bronze finial with rings.
- Stone tōrō lanterns on the terrace and on the stage (hexagonal base, post, firebox with emissive windows, small roof, jewel).
VEGETATION
- ~4–5k canopy blobs (InstancedMesh of icospheres with vertex-noise displacement + fragment bump), clustered 2–4 per tree, per-instance AO from neighbour occlusion, brighter tops.
- Four kinds via an instance attribute: broadleaf, cherry, maple, pine (flattened pads). Cherries cluster lower on the hill and as 5 feature trees with visible trunks on the terrace; pines dominate the summit and the headlands.
- Colors come from per-kind dark/light palette uniforms that the JS blends across seasons.
SEASONS (cyclic 0..4 = spring, summer, autumn, winter; animated transition from a dock button)
- Spring: pink sakura, falling petals. Summer: lush green, no particles. Autumn: red maples, orange/yellow broadleaf, falling maple leaves. Winter: bare-ish brown deciduous blobs shrunk ~38%, snow on canopy tops, roofs, decks, rocks and ground; snowfall that melts instantly on the water.
WATER (realistic, not jelly)
- Pipeline: opaque scene → MSAA HalfFloat target with DepthTexture; copy to a second target, then draw the water with a custom ShaderMaterial doing a manual depth test; then floating particles; final fullscreen pass with ACES tone mapping, sRGB, subtle tilt-shift. Transparent canvas over the CSS background.
- Color from real thickness: reconstruct the depth behind each water pixel, Beer–Lambert absorption toward a deep scatter color derived from the user's water color (pale over the flats, blue in the deep; side walls get extra path length so they read as a water volume).
- Screen-space refraction, Fresnel sky reflection, sun glints from fine animated detail normals.
- Screen-space reflections (~26 ray-march steps against the depth buffer, fewer on mobile) so the torii, shrine and lit lanterns reflect in the water.
- Ripples: GPU wave equation on a 256×256 HalfFloat ping-pong target, fixed 60 Hz steps, land-mask texture so waves reflect off the shore. Cursor movement injects capsule drops along its path; a click makes a splash.
- Shore foam only where the terrain is near the water level AND gently sloped (no white outlines around cliffs, stilts or the torii pillars); foam band width scaled by slope; broken by noise.
- Tide: a dock toggle animates between high tide (0) and low tide (-0.55): the water block's rim moves and its sides stretch; at low tide the whole flat is exposed and the torii stands on wet sand.
PARTICLES (petals / leaves / snow, ~700 instanced quads, CPU-simulated)
- Spawn from cherry blobs (spring), deciduous blobs (autumn) or the sky (winter); flutter while falling; a gusting wind blows from the island toward the bay so they reach the water.
- Landing: on water they become floating (vertex shader lifts them by the same ripple + wave height as the water), drift slowly, get pushed by the cursor's movement and blown away by click splashes, strand when the tide drops, re-float when it rises; on land they rest and fade.
- Shapes drawn in the fragment shader: notched petal, five-lobed maple leaf, soft snow disc. Manual depth test against the scene depth.
KOI
- 7 koi (lathe body + forked fan tail + pectoral fins, merged), InstancedMesh with a swimming sway in the vertex shader and procedural patterns per type (kohaku, sanke, showa, ogon, plain orange). They wander, steer away from shallow water and the block walls, and flee the cursor and splashes. Rendered under the water so they are refracted and tinted.
TIME OF DAY (slider, shown as a clock from 11:00 to ~19:10)
- Sun elevation, color and intensity, hemisphere colors, and the water's sky reflection shift from noon to golden hour; towards dusk the shoji panels and lanterns glow (emissive) and three warm point lights light the shrine, the stage and the torii.
UI (editorial, minimal, English)
Brand "shiosai°" with a small torii mark, headline "A gate that / stands in the sea.", eyebrow "Shrine and tide, in miniature", a vertical caption "A study of tide and seasons", a location label "Shrine Cove · 34°16′ N · 132°19′ E", a floating pill dock (reset, season cycle with the current season name, High tide / Low tide toggle, Tune, fullscreen), hints and an adaptive FPS + "Season · time" readout in the footer, a glassy settings panel (season, time of day, falling petals; water color, tide level, wave height, ripple strength, clarity, caustics; sun azimuth, tilt-shift), and a "How it's made" card. Vermilion accent, light and dark themes via CSS tokens, responsive to 390 px (panel becomes a bottom sheet), prefers-reduced-motion respected, adaptive pixel ratio and a lighter mode for touch devices. Intro: the water fills the block while the camera eases in.
한국어 번역
단일 파일 인터랙티브 WebGL 디오라마를 만들어라(index.html 하나, 빌드 단계 없음). Three.js r160은 https://cdn.jsdelivr.net/ 에서 import map으로 불러오고, three/examples/jsm의 OrbitControls와 BufferGeometryUtils(mergeVertices, mergeGeometries)를 함께 사용한다. 모든 것은 절차적으로 생성한다 — 외부 모델이나 텍스처는 없다.
컨셉
"Torii at High Tide": 이쓰쿠시마에서 영감을 받은 미니어처 일본 신사 섬으로, 모서리가 둥근 10×10 블록의 맑은 물 안에 있고(수직 모서리 반경 ~0.6, 상단 모서리 반경 ~0.26), 얇은 모래색 베이스 슬래브 위에 놓이며, 따뜻한 화지 배경 위에서 거리에 따라 희미해지는 부드러운 바닥 그림자를 드리운다(황혼의 긴 그림자가 페이지를 가로질러 늘어지지 않도록).
지형 (높이 필드 ~400×400, 둥근 블록에 맞게 클리핑하고, 단면이 물을 통해 보이도록 경계 "스커트"를 둔다)
- 카메라를 마주하는 로컬 프레임에서 작업한다(u = 가로, v = 뷰어 쪽).
- 뒤쪽에 숲이 우거진 돔 모양 언덕(높이 ~2.4), 그 발치에 낮은 모래 신사 테라스, 그 앞으로 완만하게 경사진 넓은 갯벌이 이어진다(약 -0.06에서 -0.46까지), 앞쪽과 측면에서는 ~-1.0까지 떨어진다.
- 만을 감싸는 두 개의 바위 화강암 곶, 각각에 1–2그루의 기울어진 분재 스타일 소나무(마디진 줄기 + 평평하게 편 수관 패드).
- 언덕 측면에 탑을 위한 평평한 공터.
- 지형 셰이더: 급경사면에는 화강암 바위(반점 무늬, 수위선 바로 위의 더 어두운 젖은 띠, 그 아래는 조류로 어두워짐), 젖은 선이 있는 모래, 만조선 아래의 더 어두운 젖은 조간대 모래, 언덕과 테라스 곳곳의 이끼/풀, 겨울에는 위를 향한 표면의 눈, 물속의 절차적 애니메이션 코스틱스. 버텍스마다 CPU로 베이크한 지평선 AO와 수관 피복에 의한 어두워짐.
건축물 (모든 것을 하나의 버텍스 컬러 메시 + 하나의 발광 "글로우" 메시로 병합한다. 색상과 트랜스폼을 가진 박스/실린더/구/커스텀 지오메트리를 추가하는 작은 Builder를 작성한 뒤 mergeGeometries를 호출한다)
- 신사 축에 맞춰 만 안에 서 있는 료부(両部) 양식 도리이(높이 ~1.9): 검은 받침 덮개를 두른 주홍색 테이퍼드 주기둥, 검은 캡과 각각 두 개의 연결 보를 가진 네 개의 지지 다리 소데바시라, 누키 연결 보, 어두운 액자가 달린 중앙 버팀대, 시마키, 그리고 끝이 들린 압출 형상에 검은 상층을 얹은 곡선 카사기. 기둥은 시마키 안에서 끝나야 하며 카사기를 뚫고 나오면 안 된다.
- 갯벌 위에 말뚝으로 세운 신사: 해저까지 닿는 목재 말뚝 그리드 위의 널빤지 데크(널빤지 틈 띠와 어두운 가장자리 보 포함), 본전과 더 작은 앞 전당(흰 벽, 주홍색 기둥과 연결 보, 쇼지 스타일 전면 패널 = 얇은 어두운 격자 뒤의 글로우 패널), 주홍색 난간이 있는 낮은 앞 무대, 그리고 측면으로 이어졌다가 해안으로 돌아가는 말뚝 위의 지붕 달린 주홍색 회랑 두 개.
- 지붕: 오목한 프로파일과 들린 처마 모서리를 가진 우진각 지붕 생성기(윗면은 짙은 삼나무 껍질 갈색, 아래면은 따뜻한 목재색, 연한 파시아 트림, 검은 용마루 캡).
- 언덕 공터의 5층 탑: 돌 기단, 주홍색 기둥이 있는 흰 벽, 두공 층, 위로 갈수록 작아지는 들린 처마 지붕, 고리가 달린 청동 상륜.
- 테라스와 무대 위의 돌 도로 등롱(육각형 받침, 기둥, 발광 창이 있는 화실, 작은 지붕, 보주).
식생
- 약 4–5천 개의 수관 블롭(버텍스 노이즈 변위 + 프래그먼트 범프를 적용한 아이코스피어 InstancedMesh), 나무당 2–4개씩 군집, 이웃 폐색에 의한 인스턴스별 AO, 더 밝은 상단.
- 인스턴스 속성으로 네 종류: 활엽수, 벚나무, 단풍나무, 소나무(평평한 패드). 벚나무는 언덕 아래쪽에 군집하고 테라스에는 줄기가 보이는 5그루의 포인트 트리로 서며, 소나무는 정상과 곶을 지배한다.
- 색상은 종류별 다크/라이트 팔레트 유니폼에서 오고, JS가 계절에 따라 블렌딩한다.
계절 (0..4 순환 = 봄, 여름, 가을, 겨울, 독 버튼에서 애니메이션 전환)
- 봄: 분홍 벚꽃, 떨어지는 꽃잎. 여름: 무성한 녹색, 파티클 없음. 가을: 붉은 단풍, 주황/노랑 활엽수, 떨어지는 단풍잎. 겨울: 약 38% 줄어든 앙상한 갈색 낙엽수 블롭, 수관 상단과 지붕, 데크, 바위, 지면의 눈, 물 위에서 즉시 녹는 눈발.
물 (사실적, 젤리 아님)
- 파이프라인: 불투명 씬 → DepthTexture가 있는 MSAA HalfFloat 타깃, 두 번째 타깃으로 복사한 뒤 수동 깊이 테스트를 하는 커스텀 ShaderMaterial로 물을 그린다. 그다음 부유 파티클, 마지막으로 ACES 톤 매핑, sRGB, 은은한 틸트시프트를 적용하는 풀스크린 패스. CSS 배경 위의 투명 캔버스.
- 실제 두께에서 나오는 색: 각 물 픽셀 뒤의 깊이를 재구성하고, 사용자의 물 색에서 유도한 깊은 산란 색을 향해 Beer–Lambert 흡수를 적용한다(갯벌 위에서는 옅고 깊은 곳에서는 파랑, 측벽은 경로 길이가 더해져 물의 부피로 읽힌다).
- 스크린 스페이스 굴절, 프레넬 하늘 반사, 미세하게 애니메이션되는 디테일 노멀에서 나오는 햇빛 반짝임.
- 스크린 스페이스 반사(깊이 버퍼에 대해 약 26회 레이 마치, 모바일에서는 더 적게)로 도리이, 신사, 켜진 등롱이 물에 비친다.
- 물결: 256×256 HalfFloat 핑퐁 타깃에서 GPU 파동 방정식, 고정 60 Hz 스텝, 파도가 해안에서 반사되도록 육지 마스크 텍스처. 커서를 움직이면 경로를 따라 캡슐 드롭이 주입되고, 클릭하면 물보라가 생긴다.
- 해안 거품은 지형이 수면에 가까우면서 완만하게 경사진 곳에만 생긴다(절벽, 말뚝, 도리이 기둥 주변에 흰 테두리 없음), 거품 띠 폭은 경사에 비례하며 노이즈로 끊긴다.
- 조수: 독 토글이 만조(0)와 간조(-0.55) 사이를 애니메이션한다. 물 블록의 테두리가 움직이고 측면이 늘어난다. 간조에는 갯벌 전체가 드러나고 도리이는 젖은 모래 위에 서 있다.
파티클 (꽃잎 / 나뭇잎 / 눈, 약 700개의 인스턴스 쿼드, CPU 시뮬레이션)
- 벚나무 블롭(봄), 낙엽수 블롭(가을) 또는 하늘(겨울)에서 생성된다. 떨어지면서 팔랑이고, 섬에서 만 쪽으로 부는 돌풍에 실려 물에 닿는다.
- 착지: 물 위에서는 부유 상태가 되어(버텍스 셰이더가 물과 같은 물결 + 파고만큼 들어올린다) 천천히 표류하고, 커서 움직임에 밀리며 클릭 물보라에 날아가고, 조수가 빠지면 걸터앉았다가 다시 차오르면 뜬다. 육지에서는 쉬어가며 희미해진다.
- 프래그먼트 셰이더로 그리는 형상: 노치 진 꽃잎, 다섯 갈래 단풍잎, 부드러운 눈 원반. 씬 깊이에 대한 수동 깊이 테스트.
잉어
- 잉어 7마리(선반 몸통 + 갈라진 부채 꼬리 + 가슴지느러미, 병합), 버텍스 셰이더의 유영 흔들림과 유형별 절차적 무늬를 가진 InstancedMesh(고하쿠, 산케, 쇼와, 오곤, 단색 주황). 배회하고, 얕은 물과 블록 벽에서 벗어나 방향을 잡으며, 커서와 물보라를 피해 달아난다. 물 아래에서 렌더링되어 굴절되고 색이 입혀진다.
시간대 (슬라이더, 11:00부터 ~19:10까지의 시계로 표시)
- 태양 고도, 색, 강도, 헤미스피어 색, 물의 하늘 반사가 정오에서 골든 아워로 이동한다. 해질녘으로 갈수록 쇼지 패널과 등롱이 발광하고, 세 개의 따뜻한 포인트 라이트가 신사, 무대, 도리이를 비춘다.
UI (에디토리얼, 미니멀, 영어)
작은 도리이 마크가 있는 브랜드 "shiosai°", 헤드라인 "A gate that / stands in the sea.", 아이브로우 "Shrine and tide, in miniature", 세로 캡션 "A study of tide and seasons", 위치 라벨 "Shrine Cove · 34°16′ N · 132°19′ E", 떠 있는 알약형 독(리셋, 현재 계절 이름이 표시되는 계절 순환, High tide / Low tide 토글, Tune, 전체 화면), 힌트와 푸터의 적응형 FPS + "Season · time" 표시, 유리질 설정 패널(계절, 시간대, 떨어지는 꽃잎; 물 색, 조수 수위, 파고, 물결 강도, 투명도, 코스틱스; 태양 방위각, 틸트시프트), "How it's made" 카드. 주홍색 액센트, CSS 토큰 기반 라이트/다크 테마, 390 px까지 반응형(패널이 바텀 시트가 됨), prefers-reduced-motion 존중, 적응형 픽셀 비율과 터치 기기를 위한 라이트 모드. 인트로: 카메라가 천천히 들어오는 동안 물이 블록을 채운다.
