Дизайн шейдера с голографической фольгой

Поверхность фольги без текстур изображений

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

Композиция прямо представлена как «Thin-film interference over a crushed-foil surface», а палитра меняется в зависимости от угла обзора. Эта формулировка описывает предполагаемую визуальную модель; снимки подтверждают внешний вид отрисованной композиции и наличие сопровождающей её подсказки о взаимодействии, но не оптическую точность или производительность GPU.

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

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

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

Как движется композиция

Порядок восприятия остаётся неизменным во всех трёх предоставленных состояниях: небольшая метка предпросмотра OpenDesign расположена в левом верхнем углу, состояние GPU — в правом верхнем, крупный заголовок «HOLOGRAPHIC FOIL» занимает нижнюю левую область, а надпись «TILT THE FILM ↗» находится ближе к правому нижнему углу. Это стабильное наложение позволяет фону меняться, не создавая впечатления, что перед пользователем уже другой экран.

В заголовке используется жирная первая строка в верхнем регистре и вторая строка с более тонким начертанием. Благодаря этому контрасту «HOLOGRAPHIC» сразу приобретает визуальный вес, а «FOIL» остаётся визуально открытой на фоне движущейся поверхности. Компромисс состоит в том, что фон может конкурировать с более тонкими начертаниями букв, поэтому при каждом изменении палитры шейдера необходимо проверять контраст и расположение текста.

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

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

Исходная версия создаёт локальный холст WebGL2 и отслеживает движение указателя, на каждом кадре плавно приближая обе координаты к их целевым значениям. Эти координаты используются как эквивалент угла обзора, а не как физическая ориентация устройства или управление 3D-камерой. «TILT THE FILM» — статичная инструкция, а не кнопка. Снимки показывают временные состояния одного главного экрана и не подтверждают наличие подключённых сервисов, сохраняемых данных, оптическую точность, измеренную производительность или исторический процесс генерации.