제작자: Theodore
라이브 체험 설명
Willow Ferry는 브라우저에서 실시간으로 렌더링되는 중국 강남의 수향 마을입니다. 흰 벽과 검은 기와, 말머리 박공벽, 등롱을 내건 처마 아래 격자 창살로 된 가게 정면, 수로를 가로지르는 아치형 돌다리, 나루터 돌계단에 매어 둔 오봉선, 비취빛 물 위로 늘어진 버드나무가 있습니다. 로딩 화면이 분위기를 잡아 줍니다. “Follow the water. Come home a little late.”
마을에는 마을만의 하루가 흐릅니다. 골든아워, 블루아워, 달밤, 새벽, 아침, 오후가 약 7분에 한 바퀴씩 돌고, 해와 달은 쉼 없이 움직이며 그림자도 그 뒤를 따라 천천히 돌아갑니다. T를 누르고 있으면 시간이 더 빨리 흐르고, 1–5를 누르면 오후, 골든아워, 블루아워, 달빛, 안개비로 바로 넘어갑니다. 안개비는 시간대가 아니라 날씨여서, 선택하면 다른 시간대를 고를 때까지 시계가 멈춥니다.
←/→ 키로 여섯 개의 시점을 차례로 넘길 수 있습니다. Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist, The Slow Boat입니다. 시점마다 짧은 문구가 함께 나오며, 그중 일부는 시간대에 따라 바뀝니다. 골든아워의 Willow Bank에는 “The sun rests in the arch.”라는 문구가 나옵니다. Moon Bridge의 문구는 볜즈린의 시 「단장」(断章)을 변주한 것입니다. “You stand on the bridge to watch the view. / From a window, someone watches you.”
드래그해서 주위를 둘러보고, 스크롤로 앞으로 미끄러지듯 나아가고, WASD로 걸으며(Shift로 가속, Q/E로 상승·하강), 클릭으로 초점을 맞춥니다. 조리개 버튼은 f/1.4에서 f/16까지 단계적으로 바뀌고, 마지막 단계에서는 피사계 심도가 꺼져 모든 것이 선명해집니다. 카메라에는 끌 수 있는 은은한 핸드헬드 흔들림(Drift)이 있으며, H를 누르면 인터페이스가 숨겨집니다. “Ride the boat”를 누르면 배가 수로를 따라 흘러가는 동안 카메라가 뱃머리로 미끄러지듯 내려앉습니다. ←/→(A/D)로 방향을 틀고, ↑(W)로 노를 더 힘차게 젓고, ↓(S)로 속도를 늦추며, 손을 떼면 배는 다시 제 항로를 찾아갑니다. 항로에서 벗어날 수 있는 폭은 경로를 따라 실측해 두었기 때문에, 배가 석축이나 정박한 배, 다리의 아치에 부딪히는 일은 없습니다.
마을 전체는 코드로 만들어졌습니다. 집, 아치형 돌다리, 오봉선, 등롱, 버드나무, 복숭아나무, 석축의 돌 블록과 계단은 모두 Blender Python 스크립트로 생성해 GLB로 내보냈습니다. 주택 생성기는 필지를 나누고, 집 유형을 고르고, 높이에 맞춰 말머리 박공벽을 배치하고, 집 사이사이에 담장을 두른 작은 정원을 끼워 넣습니다. 손으로 배치한 것은 나루터 돌계단 옆의 주인공 집 한 채뿐입니다. 하늘과 일부 회벽, 돌, 목재, 자갈 표면에는 Poly Haven의 CC0 실사 하늘과 스캔 텍스처를 사용했고, 그 밖의 모든 텍스처와 사운드 역시 스크립트에서 만들어집니다.
인터페이스는 영어로만 제공되며, 사운드는 첫 클릭과 함께 시작됩니다. 데스크톱 Chrome, Edge, Safari에서 가장 잘 동작하며, WebGPU가 없는 환경에서는 WebGL2로 전환됩니다. 처음 방문할 때는 40 MB 남짓을 내려받기 때문에 로딩 화면이 잠시 이어집니다.
브라우저에서 실행되는 방식
웹 쪽은 Vite로 three.js r186의 WebGPU 렌더러 위에 만들었고, 모델은 meshopt로 압축했습니다. Blender에서 넘어온 모델의 머티리얼은 이름을 기준으로 TSL로 다시 만듭니다. 수위선 얼룩, 이끼, 커스틱, 풍화, 바람에 흔들리는 움직임, 창문과 등롱의 밤 불빛은 모두 셰이더에서 계산하며, 같은 TSL 머티리얼이 WebGL2에서도 그대로 동작합니다.
가장 공을 들인 부분은 물입니다. 반사, 굴절, 탁도와 흡수, 해와 달이 수면에 만드는 반짝임과 달빛 길, 빗방울 파문, 바람이 만든 물결 무늬, 배가 남기는 항적과 뱃머리에 밀려나는 물까지 담았습니다. 하늘은 Poly Haven의 실사 하늘로, 시간대 사이를 크로스페이드하며 환경광과 해·달의 방향도 함께 제공합니다. 구름 그림자가 마을과 언덕, 수면 위를 흘러가고, 수로에는 낮은 안개 띠가 깔리며, 반딧불이와 떠다니는 먼지, 빗줄기도 있습니다.
후처리로는 SSAO(환경광에만 적용), 안개 띠, 블룸, 피사계 심도, 컬러 그레이딩, FXAA를 더합니다. 자동 초점은 DSLR처럼 화면 중앙에서 레이를 쏘아 맞추며(three-mesh-bvh로 가속), 클릭해서 초점 위치를 직접 고를 수도 있습니다. 빠른 속도를 유지하기 위해 씬을 레이어로 나눴습니다. 수키와, 격자 창살, 황동 장식 같은 세부 요소는 메인 뷰에서만 그리고 28미터 밖에서는 아예 숨기며, 수로 바닥과 자갈은 반사에 넣지 않고, 석조물과 나무는 SSAO 프리패스에서 제외합니다. 키 라이트의 그림자는 광원이 움직일 때 다시 그리고, 그렇지 않을 때는 5프레임마다 한 번 다시 그립니다. 배의 부품은 로드할 때 머티리얼별로 병합하고, 풀과 석축의 돌은 인스턴싱으로 그립니다.
모든 사운드는 Web Audio로 실시간 합성하며, 오디오 파일은 단 하나도 없습니다. 찰랑이는 물소리와 물방울 소리(물에 가까울수록 커짐), 버드나무 사이를 스치는 바람, 낮의 새소리, 밤의 귀뚜라미와 개구리 울음, 멀리서 울리는 절의 종소리, 배를 탈 때의 노 젓는 소리, 그리고 음악 역할을 하는 드문드문한 5음 음계의 현 뜯는 소리가 있습니다.
