Дизайн шейдера Caustic Pool

Светящееся водное поле

Caustic Pool — официальный пример OpenDesign на WebGL2, представленный как цельный холст, а не последовательность экранов. Авторский заголовок “CAUSTIC POOL” расположен в левом нижнем углу поверх глубокого бирюзового поля с бледными ветвящимися нитями. Крупный двухстрочный заголовок первым обозначает тему; сопровождающий текст называет эффект “domain-warped ripples” и “caustic filaments”.

Такой порядок чтения делает работу понятной ещё до начала взаимодействия. На верхнем краю слева размещено “OPENDESIGN · WEBGL PREVIEW”, а справа — “REAL-TIME · GPU”, благодаря чему абстрактная поверхность получает компактную техническую рамку. Это осознанный компромисс: метки помогают сориентировать зрителя, но фиксированный оверлей немного конкурирует с непрерывной атмосферой.

01

Сначала заголовок, потом техника

“CAUSTIC POOL” обозначает визуальный мир до того, как описание вводит рябь с искажением домена, позволяя эффекту оставаться выразительным, а не исключительно техническим.

02

Инструкция у края

“CLICK THE WATER ↗” размещено в правом нижнем углу, вдали от блока заголовка, поэтому приглашение остаётся заметным и не прерывает основной путь чтения.

Где уместна композиция

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

Композиция также работает как визуальный фон для мероприятия, инсталляции или экспериментальной веб-функции, если окружающий опыт способен поддерживать поверхность, отрисовываемую на GPU. Её главное ограничение — фокус: поскольку в статической разметке нет авторских элементов управления, взаимодействие намеренно остаётся узким, а основную часть коммуникации выполняет визуальный ряд.

Как рябь и типографика делят пространство

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

Шейдер формирует свою яркую сеть за пять раундов вычислений со свёрнутыми координатами. При pointer-down он сбрасывает позицию и возраст ряби; затем синусоидальная радиальная волна изгибает координаты выборки и затухает с расстоянием и возрастом. Это создаёт впечатление света на воде без сетки, внешней текстуры или физического решателя жидкости. Фиксированный заголовок в левом нижнем углу и инструкция у противоположного края позволяют зрителям сравнивать меняющееся поле со стабильным текстом.

1. Зафиксируйте

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

2. Создайте контраст

   Используйте яркие нити на более тёмном бирюзовом поле, чтобы сделать сеть преломления читаемой без добавления диаграмм, элементов управления или декоративных панелей.

3. Пригласите к действию

   Разместите одну краткую инструкцию для указателя у противоположного нижнего края, связывая локальный жест с видимой метафорой воды.

Одна поверхность, несколько состояний

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

Граница возможностей

Исходный вариант реализует локальный рендеринг WebGL2, ввод pointer-down, обработку изменения размера и цикл отрисовки. Каждое нажатие заменяет предыдущую рябь, а не накапливает несколько независимых волн. Возраст ряби увеличивается на 1/60 с каждым кадром анимации, поэтому время её затухания зависит от фактической частоты кадров. Три снимка показывают состояния одного холста; без записанных трасс ввода они не демонстрируют независимо реакцию на нажатие.

Это визуальное приближение каустики, а не проверенная симуляция воды. Исходный вариант не подтверждает наличие подключённых сервисов, хранения пользовательских данных, измеренной производительности GPU, универсальной совместимости с устройствами ввода или модели, использованной изначально для генерации. При адаптации для продакшена протестируйте локальное поведение ввода и отсчёта времени в целевой среде, а не рассматривайте метку GPU или авторскую метафору воды как свидетельство соответствия требованиям.