Repolode
Предложить
Humpalumps

Humpalumps/Ultra-Water

Рендерер океана в реальном времени для three.js (WebGL2): FFT-волны, прибой у берега, пена, каустика, подводный режим и плавающие объекты.

Открыть на GitHub
Звёзды
643
Форки
97
Открытые issues
0
Последний коммит
5 дней назад

Что это?

Ultra Water — рендерер океана в реальном времени на базе three.js и WebGL2, в комплекте с демонстрационной сценой острова. Волны создаются с помощью FFT-симуляции в стиле Tessendorf с четырьмя каскадами и капиллярным диапазоном для мелкой ряби. Поверхность затеняется попиксельно: GGX-блики солнца, плоские отражения острова, преломление и поглощение по закону Бугера — Ламберта.

Помимо открытой воды, проект моделирует прибой у берега на основе поля времени распространения эйконала, гребневую пену и кружевную пену, набег волн на пляж, а также кольца на воде при падении объектов. Каустика рассчитывается проецированием преломлённого света на плоскости на нескольких глубинах. В подводном режиме, когда камера находится на поверхности или под водой, отображаются окно Снелла, солнечные лучи и морской снег.

Плавающие ящики, бочки, буи и лодки используют высоты воды, вычисленные на GPU, для симуляции плавучести и сопротивления; для них предусмотрена отдельная карта теней. В проект входят встроенный в страницу HUD производительности и бенчмарк; качество автоматически настраивается для телефонов и планшетов.

Ключевые возможности

  • 01FFT-волны океана в четырёх каскадах с капиллярной рябью.
  • 02Прибой у берега с наклоняющимися гребнями, распадающимися волнами и эффектом мелководья.
  • 03Белая пена на гребнях и кружевная пена, покрытие которой со временем размывается.
  • 04Каустика, подводное окно Снелла и солнечные лучи.
  • 05Симуляция плавучести ящиков, бочек, буёв и лодок.
  • 06Профиль для мобильных устройств с автоматическим масштабированием разрешения.

Сценарии использования

  • Добавление реалистичного океана или озера на задний план веб-сцены three.js.
  • Изучение техник затенения океана с помощью FFT, каустики и пены в WebGL2.
  • Создание прототипов лодок и плавающих объектов, реагирующих на волны.
  • Замер производительности GPU-рендеринга в браузере.

Быстрый старт

  1. 1

    Установите зависимости

    npm install
  2. 2

    Запустите сервер разработки и откройте указанный URL localhost

    npm run dev

Что важно знать

  • Для плавной частоты кадров необходим браузер с поддержкой WebGL2 и достаточно мощный GPU.
  • Производительность на телефонах и планшетах зависит от температуры и устройства; кроме того, настройки для компьютеров могут вызывать падение частоты кадров на телефонах.

Темы

#three-js#webgl#graphics#water-simulation#fft#shaders#real-time-rendering#game-dev

Частые вопросы

Что такое Ultra-Water?
Рендерер океана в реальном времени для three.js (WebGL2): FFT-волны, прибой у берега, пена, каустика, подводный режим и плавающие объекты. Ultra Water — рендерер океана в реальном времени на базе three.js и WebGL2, в комплекте с демонстрационной сценой острова. Волны создаются с помощью FFT-симуляции в стиле Tessendorf с четырьмя каскадами и капиллярным диапазоном для мелкой ряби. Поверхность затеняется попиксельно: GGX-блики солнца, плоские отражения острова, преломление и поглощение по закону Бугера — Ламберта.
Ultra-Water можно использовать бесплатно? Какая у него лицензия?
Ultra-Water распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
Ultra-Water всё ещё поддерживается?
Активно поддерживается. Последний коммит в Ultra-Water — 2 нояб. 2026 г..
Для чего можно использовать Ultra-Water?
Добавление реалистичного океана или озера на задний план веб-сцены three.js. Изучение техник затенения океана с помощью FFT, каустики и пены в WebGL2. Создание прототипов лодок и плавающих объектов, реагирующих на волны. Замер производительности GPU-рендеринга в браузере.
Как установить Ultra-Water?
Установите зависимости: npm install Запустите сервер разработки и откройте указанный URL localhost: npm run dev
Где скачать Ultra-Water?
Исходный код и инструкции по установке — на GitHub: https://github.com/Humpalumps/Ultra-Water

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

regl-project / regl

Функциональная обёртка над WebGL, которая устраняет общее состояние GPU и позволяет описывать вызовы отрисовки как команды, компилируемые в оптимизированный JavaScript.

Фронтенд и UI#webgl#graphics#javascript
5,6 тыс.+1 за неделю329JavaScriptMITОбновлён 22 дня назад

pmndrs / postprocessing

Библиотека постобработки для three.js, которая объединяет полноэкранные эффекты, такие как bloom, SSAO и цветокоррекция, для сцен WebGL.

Фронтенд и UI#threejs#webgl#post-processing
3 тыс.+45 за неделю258JavaScriptZlibОбновлён 6 дней назад

gl-transitions / gl-transitions

Открытая коллекция из более чем 100 написанных сообществом GLSL-переходов между двумя изображениями для веба, мобильных устройств, Apple, Android, Rust и видеоредакторов.

Фронтенд и UI#glsl#webgl#transitions
2,2 тыс.+18 за неделю331GLSLOtherАктивно поддерживаетсяОбновлён 3 часа назад