Генеративные шейдеры как бренд-ассеты

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

1. Параметризуйте бренд, а не результат

Выведите палитру, зерно, скорость потока и контраст как uniform, связанные с дизайн-токенами. Когда бренд меняется, вы меняете токен — и каждая поверхность следует за ним, вместо того чтобы заказывать сорок новых рендеров и пропустить шесть из них.

uniform vec3 uBrandPrimary;   // token: color.brand.primary
uniform vec3 uBrandSurface;   // token: color.surface.base
uniform float uGrain;
uniform float uTime;

float noise(vec2 p) {
  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = gl_FragCoord.xy / 1024.0;
  float flow = sin(uv.x * 3.0 + uTime * 0.2) * 0.5 + 0.5;
  vec3 color = mix(uBrandSurface, uBrandPrimary, flow);
  color += (noise(uv) - 0.5) * uGrain;
  gl_FragColor = vec4(color, 1.0);
}

2. Всегда поставляйте статичный запасной вариант

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

3. Кто владеет исходником

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