Каустики воды в браузере считаются лучами света в реальном времени

Разработчик под ником ScottieFox выложил в открытый доступ исходники проекта CAUSTIC//VOLUME — двух браузерных сцен с водой, где каустики на дне рассчитываются каждый кадр по лучам света. Каждая вершина мелкой сетки на поверхности отправляет один луч сквозь толщу вниз, и яркие линии возникают там, где соседние лучи сходятся на полу.

Обе версии — по одному HTML-файлу на three.js, без установки и без сборки: открыл в браузере, и оно работает. Код выложен под MIT, то есть его можно читать, править и использовать в коммерческих проектах, сохранив уведомление об авторских правах и тексте лицензии.

Как считается яркость каустик

Яркость берётся из отношения площадей: участок поверхности, чей свет упал на меньший участок дна, концентрирует его сильнее, и шейдер получает это отношение через экранные производные. Перекрывающиеся участки складываются — так и возникают характерные подвижные нити света. Солнечные лучи, входящие через стеклянную стенку ниже уровня воды, добавляются отдельно.

Поверхность собрана из 24 бегущих волн длиной от 1,2 метра до 12 сантиметров, направления разведены по золотому углу, чтобы волны близкой длины не шли рядом. Из-за этого сетка каустик получается ячеистой, а не полосатой, как было бы при однонаправленном волнении. Высоты волн подобраны так, чтобы каждый масштаб отклонял свет примерно одинаково — это и даёт самые резкие линии на дне.

Интерактивные круги на воде считает отдельная GPU-симуляция волнового уравнения на основе GPUComputationRenderer из three.js: она разносит по аквариуму клики пользователя, порывы ветра и кильватерный след утки, отражая всё это от стекла. Материал воды работает по формулам Френеля для отражения неба и закону Снеллиуса для преломления взгляда вглубь, за критическим углом включается полное внутреннее отражение, а цвет даёт поглощение по Бугеру — Ламберту: красный гаснет быстрее синего.

Одна демка для телефона, вторая — для топовой видеокарты

CAUSTIC//LITE — это стеклянный аквариум, резиновая утка на поверхности и переключаемый источник света: солнце или подвесная лампа. Кликом можно поднять волну и подтолкнуть утку, ползунками — менять высоту волн и турбулентность. Вся программа занимает около 990 строк вместе с комментариями и написана с расчётом на то, что её будут читать. Страница сама следит за частотой кадров и меняет разрешение рендера, а если WebGL 2 недоступен или three.js не загрузился, сцена вместе с уткой трассируется на обычном JavaScript в 2D-канвасе.

Полная версия — примерно 7500 строк, собранных из 18 модулей, и рассчитана на сильное железо: ей нужен WebGL 2 с расширением EXT_color_buffer_float. В ней добавлены:

• FFT-спектр океана поверх интерактивной симуляции ряби (iWave), пена и всплески;
• каустический объём, который гонит через воду световые шахты, и фотонная трассировка каустик с цветовой дисперсией;
• плавучесть по физике для игрушечного линкора, пиратского корабля, резиновой утки, бутылки с запиской, сундука, якоря, амфоры и водолазного шлема;
• стайные рыбы-клоуны и хирурги, пульсирующая медуза с колышущимися щупальцами, осьминог с двумя рядами присосок и боком ходящий краб;
• трёхмерная симуляция чернил и разноцветный песок, оседающий слоями, — и то и другое подхватывается течением, когда воду размешивают перетаскиванием;
• до трёх ламп со своими цветами и лазер, который преломляется на среднем уровне воды и отражается по стенкам;
• пресеты качества от Low до Insane с временным сглаживанием, блумом и глубиной резкости.

Отдельно любопытен подводный ракурс: трассировщик отрабатывает и полное внутреннее отражение, и окно Снеллиуса — тот самый круг неба, который видно снизу при взгляде на спокойную поверхность.

Где брать и что с этим можно делать

Проект CAUSTIC//VOLUME лежит на GitHub целиком: репозиторий можно скачать ZIP-архивом и открыть lite/index.html или sandbox/index.html локально. Сервер не нужен, three.js версии r186 подтягивается с CDN jsDelivr через import map и дальше кешируется браузером. Песочница пересобирается из модулей одной командой на Node 18, дополнительных зависимостей нет; опциональные тесты гоняют обе сцены в headless-Chromium через Playwright и падают на ошибках шейдеров.

Автор просит контрибьюторов сохранять два условия: каждая версия остаётся одним HTML-файлом на three.js без установки, а lite-вариант не должен превышать тысячу строк и обязан сохранять работоспособный CPU-фолбэк.

Почему такие демки снова делают в браузере

В реальном времени каустики чаще всего изображают дешёвым способом — заранее просчитанной анимированной текстурой, которую проецируют на дно; такой приём используется и в типовых примерах для three.js. В крупных движках физически корректный расчёт обычно появляется только вместе с трассировкой лучей либо остаётся внутри закрытой реализации, куда художник заглянуть не может. Ценность этой публикации, вероятно, именно в том, что читаемый вариант выложен целиком и без лицензионных ограничений.

Сам метод не новый: сравнение площадей исходного и преломлённого участка поверхности использовал ещё Эван Уоллес в своей демке на WebGL, которую до сих пор портируют на разные платформы — ссылки на такие порты приводит и 80 Level. Новое здесь — масштаб и доступность: тот же принцип развёрнут до полноценной песочницы с плавучестью, чернилами, песком и световыми шахтами, и при этом остаётся файлом, который открывается двойным кликом.

Появление проекта именно сейчас выглядит закономерным: WebGL 2 стал общим знаменателем всех актуальных браузеров, включая Safari, а float-таргеты перестали быть экзотикой, так что серьёзная симуляция в браузере стала заметно доступнее. Показательна и оговорка в документации о том, что Chrome с версии 141 перестал откатываться на программный WebGL на машинах без рабочего GPU, — отсюда и упор на CPU-фолбэк в lite-версии. Вокруг воды на three.js в целом заметно оживление, в том числе коммерческое, и бесплатный проект с подробным разбором алгоритмов задаёт планку того, что считается достижимым во вкладке браузера. Если формат однофайловых открытых техно-демо закрепится, у сообщества постепенно накопится корпус эталонных реализаций эффектов, которые раньше передавались из проекта в проект в виде приблизительных хаков.