Дизайн шейдера переливающейся жидкости

Эффект масла на воде, построенный на математике

Iridescent Liquid — официальный пример OpenDesign, построенный вокруг одного WebGL-превью, а не набора экранов приложения. Заголовок «LIQUID IRIDESCENCE» лежит поверх насыщенного поля из текучих фиолетовых, голубых, розовых и розово-красных форм. Холст здесь главный объект, а поясняющий текст расположен рядом с траекторией чтения внизу слева.

В подписи эффект назван «living oil-on-water field». Реализация рисует полноэкранный треугольник с процедурным шумом, а не сферу и не фотографическую текстуру. Так можно намекнуть на жидкий материал, не изображая конкретный предмет. Язык материала — визуальная метафора, а не доказательство физически точной симуляции масла или воды.

Вверху «OPENDESIGN · WEBGL PREVIEW» указывает контекст, а «REAL-TIME · GPU» описывает способ отрисовки. Эти подписи ориентируют зрителя до чтения крупного заголовка, но их следует считать описательным текстом интерфейса, а не доказательством измеренной частоты кадров или производительности в продакшене.

01

Сплошной холст

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

02

Контраст на текстуре

Крупные белые буквы отделяют сообщение от плотного цветового поля, но их положение должно оставаться стабильным при смене фона.

Где уместен этот дизайн

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

Подсказка «MOVE THE CURSOR ↗» превращает зрителя из наблюдателя в участника. Приложенные состояния показывают один холст с разными границами цвета и расположением волн, тогда как оверлей остаётся прежним. Благодаря этому смена состояния читается ясно: композиция меняется, а рамка чтения — нет.

Композиция и движение

В дизайне выстроен чёткий вертикальный порядок чтения: контекстные подписи вверху, огромный заголовок «LIQUID IRIDESCENCE» внизу слева, под ним поясняющий текст, а подсказка про курсор — внизу справа. Внимание распределяется по широкому холсту, а главное сообщение собрано в один читаемый блок.

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

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

Цвет как структура

Палитра — не единый градиент. Она организована как широкие цветные течения, окаймлённые светлыми светящимися контурами. Голубой и бирюзовый дают более холодные вкрапления в доминирующем пурпурно-фиолетовом поле, а бледно-розовые линии показывают направление течения. Это разнообразие придаёт холсту объём без буквальной геометрии.

Стабильная рамка чтения

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

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

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

Как адаптировать

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