Автор Yong Su, ранее перенёсший знаменитое WebGL-демо воды Эвана Уоллеса на WebGPU, представил новую версию — теперь на Three.js с рядом улучшений.
Ключевые особенности симуляции
Реалтайм-симуляция воды в браузере реализована с использованием Three.js и включает:
- Рейтрейсинг отражений и преломлений — физически правдоподобное поведение света на поверхности воды.
- Каустики — динамические световые узоры на дне бассейна, зависящие от волн и положения источника света.
- Интерактивные объекты — 3D-объекты взаимодействуют с поверхностью воды, вызывая волны и искажения.
- Конфигурируемая форма бассейна — поддерживаются разные формы, включая скруглённые коробки.
- Режим камеры, следующей за источником света — позволяет изучать динамику каустик и бликов.
Система объектов и расширяемость
Система объектов сделана расширяемой: можно добавлять новые геометрии Three.js или собственные 3D-модели. Для интеграции требуется определить:
- шейдер рендера объекта;
- аппроксимацию смещения воды от объекта;
- логику hit test (проверка пересечения с водой);
- описание оптики (как объект влияет на отражения/преломления).
Интерактивность демо
Демо доступно в браузере и поддерживает управление:
- рисование по воде для создания ряби;
- перетаскивание фона для вращения камеры;
- перемещение сферы мышью;
- L — настройка источника света;
- G — включение/выключение гравитации;
- Пробел — пауза/продолжение симуляции.
Исходный код доступен в GitHub-репозитории. Также даётся ссылка на оригинальное WebGL-демо Эвана Уоллеса и упоминается, что Dan Greenheck выпустил крупное обновление Three.js Water Pro — комплексного решения для рендеринга океана на Three.js.
Выводы
- Порт WebGL-демо воды Эвана Уоллеса перенесён на Three.js с улучшенной графикой и интерактивностью.
- Реализованы рейтрейсинг отражений/преломлений, каустики и расширяемая система 3D-объектов.
- Демо полностью интерактивно и управляется из браузера без установки.
- Проект открыт на GitHub и может служить базой для собственных водных систем в Three.js.
- Для продакшн-океанов есть отдельное решение Three.js Water Pro с недавним крупным обновлением.
