Дизайн шейдера «жидкий металл»

Хромоподобная поверхность без изображений-текстур

Liquid Metal — официальный графический пример OpenDesign, построенный на одной шейдерной композиции на весь холст. Авторский заголовок «Molten chrome, zero textures.» задаёт главное ограничение: поверхность подана как исследование материала, а не как иллюстрация из графических ресурсов.

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

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

Артефакт полезнее всего там, где визуальная поверхность должна создавать атмосферу, не конкурируя с более крупной моделью взаимодействия. Сплошной холст может служить референсом для hero-блоков на WebGL, генеративных этюдов или айдентики, построенной на движении.

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

Как меняется композиция

На трёх кадрах остаются маленькая зелёная подпись LIQUID METAL, намного более крупный заголовок «Molten chrome, zero textures.», поясняющее описание и значок WebGL2 в правом верхнем углу. Под этой неизменной иерархией меняется шейдер. Шестислойный шум формирует поле высот; соседние выборки высоты дают оценку нормалей поверхности, а движущийся свет, резкая зеркальная составляющая и радужная палитра создают хромоподобный вид.

В view-1 преобладают бледно-лавандовый и белый, а поле прорезают узкие синие и фиолетовые каналы. View-2 смещается к более тёмным зелёным и синим полосам, и поверхность выглядит более направленной и вытянутой. В view-3 появляются более насыщенные пурпурные, оливковые и дымчато-серые участки. Это отдельные зафиксированные состояния, а не свидетельство выбора палитры пользователем или измеренного режима производительности.

01

View-1

Преобладают лавандовый и фиолетовый, а плотные белые блики создают мягкий хромовый вид.

02

View-2

Зелёные и глубокие синие каналы становятся заметнее, образуя более длинные направленные полосы.

03

View-3

Пурпурный, оливковый и дымчато-серый усиливают ощущение цветового разнообразия.

Стабильный текст, переменное поле

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

Отражающий контраст

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

Видимое поведение и границы

В исходном коде реализованы автоматический рендеринг WebGL2, анимация по прошедшему времени и изменение размера холста. Обработчиков указателя, кликов и клавиатуры нет. Локальная оценка частоты кадров обновляется примерно каждые полсекунды в значке WebGL2; она описывает текущий сеанс отрисовки, а не гарантированную производительность GPU. Эффект — процедурная визуальная имитация хрома, а не физическая симуляция расплавленного металла.

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

1. Оставьте холст локальным

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

2. Разделяйте кадры и метрики

   Используйте три кадра для обсуждения визуальных вариаций, а производительность во время выполнения измеряйте отдельно в целевой среде.