Золотая глубоководная медуза

Создайте интерактивную веб-страницу с медузами на Three.js. На фоне океана, светлого в центре и тёмно-синего по краям, покажите 6–10 золотистых полупрозрачных медуз, которые медленно вращаются и пульсируя поднимаются вверх; одновременно на экране должны оставаться видны как минимум три медузы, а любая медуза, пересекающая верхнюю границу, должна появляться вновь снизу. У каждой медузы должны быть оранжевые и кремово-белые радиальные полосы, пятна, внутреннее свечение и чёткий полупрозрачный край; сквозь зонтик должны быть видны гофрированные ротовые лопасти. При сокращении зонтика его край должен заметно раскрываться наружу.

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

Добавьте на фон мягкие каустики, имитацию объёмных световых завес и мерцающий планктон; используйте мягкое свечение и тональную компрессию ACES, чтобы передать глубоководное освещение. Корректно настройте сортировку прозрачных слоёв и сглаживание, чтобы щупальца оставались цельными и чёткими. Когда курсор приближается к медузе, её пульсация должна ускоряться, свечение — усиливаться, а щупальца должны получать лёгкий толчок. Поддержите перетаскивание мышью для поворота обзора и колесо прокрутки для масштабирования, с ограничением расстояния обзора и угла наклона. Замените золотых медуз на 15–20 сине-зелёных светящихся тропических рыб. Сохраните пружинную физику Верле для движения хвостов и плавников и заставьте косяк медленно кружить по сцене, избегая столкновений. Используйте WebGL2 с процедурными моделями и материалами. Без WebGPU, внешних моделей, аудио, панели управления и переключения между сценами. Предоставьте статическую веб-страницу, запускаемую напрямую, с локально включёнными зависимостями. Следуйте визуальному и физическому подходу Aurelia и сохраняйте указания авторства и лицензий для всего использованного кода и алгоритмов; если вы повторно используете оригинальную работу или алгоритм каустик Dave Hoskins, сохраните соответствующее указание лицензии.

Создайте интерактивную веб-страницу с медузами на Three.js. На фоне океана, светлого в центре и тёмно-синего по краям, покажите 6–10 золотистых полупрозрачных медуз, которые медленно вращаются и пульсируя поднимаются вверх; одновременно на экране должны оставаться видны как минимум три медузы, а любая медуза, пересекающая верхнюю границу, должна появляться вновь снизу. У каждой медузы должны быть оранжевые и кремово-белые радиальные полосы, пятна, внутреннее свечение и чёткий полупрозрачный край; сквозь зонтик должны быть видны гофрированные ротовые лопасти. При сокращении зонтика его край должен заметно раскрываться наружу.

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

Добавьте на фон мягкие каустики, имитацию объёмных световых завес и мерцающий планктон; используйте мягкое свечение и тональную компрессию ACES, чтобы передать глубоководное освещение. Корректно настройте сортировку прозрачных слоёв и сглаживание, чтобы щупальца оставались цельными и чёткими. Когда курсор приближается к медузе, её пульсация должна ускоряться, свечение — усиливаться, а щупальца должны получать лёгкий толчок. Поддержите перетаскивание мышью для поворота обзора и колесо прокрутки для масштабирования, с ограничением расстояния обзора и угла наклона. Сделайте каждую медузу кликабельной. При нажатии приостанавливайте её движение и показывайте информационную карточку с названием вида, глубиной обитания и двумя короткими фактами для широкой аудитории. Используйте WebGL2 с процедурными моделями и материалами. Без WebGPU, внешних моделей, аудио, панели управления и переключения между сценами. Предоставьте статическую веб-страницу, запускаемую напрямую, с локально включёнными зависимостями. Следуйте визуальному и физическому подходу Aurelia и сохраняйте указания авторства и лицензий для всего использованного кода и алгоритмов; если вы повторно используете оригинальную работу или алгоритм каустик Dave Hoskins, сохраните соответствующее указание лицензии.