Willow Ferry

Описание

Willow Ferry — водный городок Цзяннани, который рендерится в браузере в реальном времени: белые стены и тёмная черепица, щипцы «конские головы», решётчатые фасады лавок под увешанными фонарями карнизами, каменный арочный мост через канал, пришвартованные у ступеней лодки упэн и ивы, склонившиеся над нефритово-зелёной водой. Настроение задаёт уже экран загрузки: «Follow the water. Come home a little late.»

У городка свои сутки — золотой час, синий час, лунная ночь, рассвет, утро, день, — и полный круг они проходят примерно за семь минут: солнце и луна всё время движутся, а тени медленно ползут вслед за ними. Удерживайте 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. Генератор домов размечает участки, выбирает типы домов, расставляет щипцы «конские головы» в зависимости от высоты и вписывает между домами маленькие сады за оградой; вручную размещён только главный дом у ступеней переправы. Для неба и части поверхностей из штукатурки, камня, дерева и гальки взяты фотопанорамы неба и сканированные текстуры под CC0 с Poly Haven; все остальные текстуры, как и весь звук, тоже созданы скриптами.

Интерфейс только на английском языке, а звук включается после первого клика. Лучше всего проект работает в десктопных Chrome, Edge или Safari, а там, где нет WebGPU, переходит на WebGL2; при первом посещении скачивается чуть больше 40 МБ, поэтому экран загрузки ненадолго задержится.

Как это работает в браузере

Веб-часть построена на WebGPU-рендерере three.js r186 с использованием Vite, а модели сжаты meshopt. Когда модели приходят из Blender, их материалы по имени пересобираются на TSL: пятна у линии воды, мох, каустика, выветривание, покачивание на ветру и ночное свечение окон и фонарей — всё это вычисляется в шейдерах, а те же TSL-материалы работают и под WebGL2.

Больше всего сил ушло на воду: отражение, преломление, мутность и поглощение, блики солнца и луны и лунная дорожка, круги от дождя, пятна ряби от ветра, кильватерный след лодки и вода, которую она раздвигает носом. Небо — фотопанорама с Poly Haven, которая плавно перетекает из одного времени суток в другое и заодно задаёт окружающее освещение и направление на солнце и луну; тени облаков плывут по городку, холмам и воде, на канале лежат низкие полосы тумана, а ещё есть светлячки, парящие пылинки и полосы дождя.

Постобработка добавляет SSAO (только для окружающего света), полосы тумана, bloom, глубину резкости, цветокоррекцию и FXAA. Автофокус работает как у зеркальной камеры и пускает луч из центра кадра (с ускорением через three-mesh-bvh), но можно и кликнуть, чтобы самому выбрать точку фокусировки. Чтобы всё работало быстро, сцена разделена на слои: мелкие детали вроде покрывающей черепицы, решёток и латуни рисуются только в основном виде и полностью скрываются дальше 28 метров; дно канала и галька не попадают в отражения; а каменная кладка и деревья исключены из предварительного прохода SSAO. Тени от ключевого источника света перерисовываются, когда он движется, а в остальное время — каждый пятый кадр; детали лодки при загрузке объединяются по материалам, а трава и камни набережной рисуются через инстансинг.

Весь звук синтезируется на лету через Web Audio — нет ни одного аудиофайла: плеск воды и звук капель (громче у самой воды), ветер в ивах, птицы днём, сверчки и лягушки ночью, далёкий храмовый колокол, удары вёсел, когда вы плывёте на лодке, а вместо музыки — редкие щипковые ноты в пентатонике.