Расчет цвета в шейдере

WebGL

Следующее описано расчет и преобразование GL_fragColor в шейдере:

Во-первых, расчет цвета

1. Добавить

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

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

2. Умножить

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

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

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

3. Меньше

Вычитание чистого цвета кажется бессмысленным, но1.0-color

x*(1−a)+y*a, по сути это тоже добавление цветов, но засчитывается определенная пропорция. Это не потому, что белый цвет добавляется к другим цветам и только к белому, чего в реальном мире не бывает.

mix()Может выполнять одноканальное или многоканальное слияние:

① Простой цветовой градиент

Возвращаясь к приведенному выше примеру, область перекрытия представлена ​​добавлением:

пройти черезmix()Переход к смешиванию двух цветов:

Почему дополнение иmix()Вы получаете другой цвет перехода? Вы можете подумать об этом.

② Сложный цветовой градиент

Назначьте различные функциональные кривые трем каналам RGB. plot — это упакованная функция рисования линий дляxyДвумерная декартова система координат для рисования кривой, pct представляетxСкорость изменения вала, когдаx是线性变化时，曲线为直线。 когдаxКогда это нелинейное изменение, будут разные кривые, что приведет к различным изменениям цветов градиента:

2. Преобразование цвета

1. На основе декартовой системы координат

RGB — это удобный для машин цветовой режим, но не для человека, потому что наше восприятие цвета часто сводится к следующему: «Какой цвет? Яркий или нет? Яркий или темный?». И режим HSL, и HSV(HSB) основаны на RGB и были созданы как более удобный и дружественный метод.refer

  • HSL — оттенок, насыщенность, яркость
  • HSV — оттенок, насыщенность, яркость
  • HSB оттенок, насыщенность, светлота

На следующей диаграмме показано, насколько легко понять человеку две цветовые модели:

Есть некоторые различия между HSL и HSB/HSV:

Вот формула преобразования:

// RGB 转 HSB
vec3 rgb2hsb( in vec3 c ){
    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz),
                 vec4(c.gb, K.xy),
                 step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r),
                 vec4(c.r, p.yzx),
                 step(p.x, c.r));
    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)),
                d / (q.x + e),
                q.x);
}

// HSB 转 RGB
//  Function from Iñigo Quiles
//  https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                             6.0)-3.0)-1.0,
                     0.0,
                     1.0 );
    rgb = rgb*rgb*(3.0-2.0*rgb);
    return c.z * mix(vec3(1.0), rgb, c.y);
}

То, как мы можем применить цвет HSB?

Когда мы позволяем оттенками изменить от0~1При увеличении вы обнаружите, что все цвета подбираются один за другим (здесь и насыщенность, и яркость установлены на 1):

Предположим, что яркость также меняется от0~1, и посмотрите, как это работает:

Вы обнаружите, что изменение яркости в горизонтальном направлении не очень хорошо, что, если оно происходит в вертикальном направлении?

А затем измените его в вертикальном направлении насыщенности, вы обнаружите, что с HSB все цветовые вариации лучше понимаются:

2. Полярная система координат

HSB изначально генерируются в полярных координатах (определяемых с точки зрения радиуса и угла), а не в декартовых координатах (определяемых с точки зрения xy). Чтобы сопоставить HSB с полярными координатами, нам нужно получить угол и расстояние до середины экрана пикселя. Отсюда мы используем функцию length() и функцию atan(y,x).

При использовании векторов и тригонометрических функций vec2, vec3 и vec4 рассматриваются как векторы, хотя иногда они представляют цвета. Мы начинаем относиться к цветам как к векторам, и на самом деле вы постепенно обнаружите, что гибкость этой философии может быть довольно мощной. ——refer

Категории