GPUImage добавляет настройки оттенка/цвета для каждого канала RGB (настройка красного цвета будет более розовой или оранжевой)

Препятствует попытка настроить оттенок определенного канала (или, точнее, конкретный диапазон цветов - в этом случае - красные). Глядя на фильтр оттенков, я подумал, что, может быть, я смогу добраться где-нибудь, комментируя зеленые и синие модификаторы, воздействуя на изменения только на красный канал:

 precision highp float;
 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;
 uniform mediump float hueAdjust;
 const highp  vec4  kRGBToYPrime = vec4 (0.299, 0.587, 0.114, 0.0);
 const highp  vec4  kRGBToI     = vec4 (0.595716, -0.274453, -0.321263, 0.0);
 const highp  vec4  kRGBToQ     = vec4 (0.211456, -0.522591, 0.31135, 0.0);

 const highp  vec4  kYIQToR   = vec4 (1.0, 0.9563, 0.6210, 0.0);
 const highp  vec4  kYIQToG   = vec4 (1.0, -0.2721, -0.6474, 0.0);
 const highp  vec4  kYIQToB   = vec4 (1.0, -1.1070, 1.7046, 0.0);

 void main ()
 {
     // Sample the input pixel
     highp vec4 color   = texture2D(inputImageTexture, textureCoordinate);

     // Convert to YIQ
     highp float   YPrime  = dot (color, kRGBToYPrime);
     highp float   I      = dot (color, kRGBToI);
     highp float   Q      = dot (color, kRGBToQ);

     // Calculate the hue and chroma
     highp float   hue     = atan (Q, I);
     highp float   chroma  = sqrt (I * I + Q * Q);

     // Make the user adjustments
     hue += (-hueAdjust); //why negative rotation?

     // Convert back to YIQ
     Q = chroma * sin (hue);
     I = chroma * cos (hue);

     // Convert back to RGB
     highp vec4    yIQ   = vec4 (YPrime, I, Q, 0.0);
     color.r = dot (yIQ, kYIQToR);
//  -->    color.g = dot (yIQ, kYIQToG); 
//  -->   color.b = dot (yIQ, kYIQToB);

     // Save the result
     gl_FragColor = color;
 }
);

Но это просто оставляет фотографию серым/синим и размытым или пурпурно-зеленым. Я на правильном пути? Если нет, как я могу изменить этот фильтр, чтобы воздействовать на отдельные каналы, оставив их неповрежденными?

Некоторые примеры:

Оригинал и эффект, который я пытаюсь достичь:

(Второе изображение почти незаметно отличается, однако оттенок красного канала был немного более розовым. Мне нужно настроить его между розовым ↔ оранжевым).

Но вот что я получил с B и G, прокомментировал:

(Левая сторона: < 0º, правая сторона: > 0º)

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

(Я также попытался добиться этого эффекта, используя GPUImageColorMatrixFilter, но я не очень далеко продвинулся).

Изменить: здесь моя текущая итерация шейдера с использованием кода @VB_overflow + обертка GPUImage, которая функционально влияет на входное изображение способом, подобным тому, к чему я стремился:

#import "GPUImageSkinToneFilter.h"

@implementation GPUImageSkinToneFilter

NSString *const kGPUImageSkinToneFragmentShaderString = SHADER_STRING
(
 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 // [-1;1] <=> [pink;orange]
 uniform highp float skinToneAdjust; // will make reds more pink

 // Other parameters
 uniform mediump float skinHue;
 uniform mediump float skinHueThreshold;
 uniform mediump float maxHueShift;
 uniform mediump float maxSaturationShift;

 // RGB <-> HSV conversion, thanks to http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
 highp vec3 rgb2hsv(highp vec3 c)
{
    highp vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    highp vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    highp vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    highp float d = q.x - min(q.w, q.y);
    highp float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

 // HSV <-> RGB conversion, thanks to http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
 highp vec3 hsv2rgb(highp vec3 c)
{
    highp vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    highp vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

 // Main
 void main ()
{

    // Sample the input pixel
    highp vec4 colorRGB = texture2D(inputImageTexture, textureCoordinate);

    // Convert color to HSV, extract hue
    highp vec3 colorHSV = rgb2hsv(colorRGB.rgb);
    highp float hue = colorHSV.x;

    // check how far from skin hue
    highp float dist = hue - skinHue;
    if (dist > 0.5)
        dist -= 1.0;
    if (dist < -0.5)
        dist += 1.0;
    dist = abs(dist)/0.5; // normalized to [0,1]

    // Apply Gaussian like filter
    highp float weight = exp(-dist*dist*skinHueThreshold);
    weight = clamp(weight, 0.0, 1.0);

    // We want more orange, so increase saturation
    if (skinToneAdjust > 0.0)
        colorHSV.y += skinToneAdjust * weight * maxSaturationShift;
    // we want more pinks, so decrease hue
    else
        colorHSV.x += skinToneAdjust * weight * maxHueShift;

    // final color
    highp vec3 finalColorRGB = hsv2rgb(colorHSV.rgb);

    // display
    gl_FragColor = vec4(finalColorRGB, 1.0);
}
);

#pragma mark -
#pragma mark Initialization and teardown
@synthesize skinToneAdjust;
@synthesize skinHue;
@synthesize skinHueThreshold;
@synthesize maxHueShift;
@synthesize maxSaturationShift;

- (id)init
{
    if(! (self = [super initWithFragmentShaderFromString:kGPUImageSkinToneFragmentShaderString]) )
    {
        return nil;
    }

    skinToneAdjustUniform = [filterProgram uniformIndex:@"skinToneAdjust"];
    skinHueUniform = [filterProgram uniformIndex:@"skinHue"];
    skinHueThresholdUniform = [filterProgram uniformIndex:@"skinHueThreshold"];
    maxHueShiftUniform = [filterProgram uniformIndex:@"maxHueShift"];
    maxSaturationShiftUniform = [filterProgram uniformIndex:@"maxSaturationShift"];

    self.skinHue = 0.05;
    self.skinHueThreshold = 50.0;
    self.maxHueShift = 0.14;
    self.maxSaturationShift = 0.25;

    return self;
}

#pragma mark -
#pragma mark Accessors

- (void)setSkinToneAdjust:(CGFloat)newValue
{
    skinToneAdjust = newValue;
    [self setFloat:newValue forUniform:skinToneAdjustUniform program:filterProgram];
}

- (void)setSkinHue:(CGFloat)newValue
{
    skinHue = newValue;
    [self setFloat:newValue forUniform:skinHueUniform program:filterProgram];
}

- (void)setSkinHueThreshold:(CGFloat)newValue
{
    skinHueThreshold = newValue;
    [self setFloat:newValue forUniform:skinHueThresholdUniform program:filterProgram];
}

- (void)setMaxHueShift:(CGFloat)newValue
{
    maxHueShift = newValue;
    [self setFloat:newValue forUniform:maxHueShiftUniform program:filterProgram];
}

- (void)setMaxSaturationShift:(CGFloat)newValue
{
    maxSaturationShift = newValue;
    [self setFloat:newValue forUniform:maxSaturationShiftUniform program:filterProgram];
}

@end

Ответ 1

Я сделал пример на ShaderToy. Используйте последний Chrome, чтобы увидеть его, на моей стороне он не работает в Firefox или IE, потому что он использует видео в качестве ввода.

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

В коде я конвертирую в HSV вместо YIQ, потому что это быстрее, делает настройку насыщения возможной и по-прежнему позволяет настроить оттенок. Также компоненты HSV находятся в интервале [0-1], поэтому нет необходимости обрабатывать радианы.

Итак, вот как это делается:

Вы выбираете ссылочный оттенок или цвет (в вашем случае красный оттенок)
Шейдер вычислит "расстояние" от текущего оттенка пикселя до оттенка.
Исходя из этого расстояния, уменьшите оттенок, если хотите розовый, увеличьте насыщенность, если хотите оранжевый.
Важно отметить, что оттенок ведет себя иначе, чем насыщенность и значение: его следует рассматривать как угол (подробнее здесь).

Ссылочный оттенок должен быть жестко запрограммирован, выбран пользователем (путем выбора цвета) или найден путем анализа содержимого изображения.

Существует множество различных способов вычисления расстояния, в примере я выбрал расстояние angular между оттенками.

Вам также необходимо применить некоторую фильтрацию после вычисления расстояния до "выбора" только ближайших цветов, например gaussian like function.

Вот код, без материала ShaderToy:

precision highp float;

// [-1;1] <=> [pink;orange]
const float EFFECT_AMOUNT = -0.25; // will make reds more pink

// Other parameters 
const float SKIN_HUE = 0.05;
const float SKIN_HUE_TOLERANCE = 50.0;    
const float MAX_HUE_SHIFT = 0.04;
const float MAX_SATURATION_SHIFT = 0.25;

// RGB <-> HSV conversion, thanks to http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
vec3 rgb2hsv(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);
}

// HSV <-> RGB conversion, thanks to http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

// Main
void main ()
{   
    // Sample the input pixel
    vec4 colorRGB = texture2D(inputImageTexture, textureCoordinate);

    // get effect amount to apply
    float skin_tone_shift = EFFECT_AMOUNT;

    // Convert color to HSV, extract hue
    vec3 colorHSV = rgb2hsv(colorRGB.rgb);  
    float hue = colorHSV.x;

    // check how far from skin hue
    float dist = hue - SKIN_HUE;        
    if (dist > 0.5)
        dist -= 1.0;
    if (dist < -0.5)
        dist += 1.0;
    dist = abs(dist)/0.5; // normalized to [0,1]

    // Apply Gaussian like filter
    float weight = exp(-dist*dist*SKIN_HUE_TOLERANCE);  
    weight = clamp(weight, 0.0, 1.0);

    // We want more orange, so increase saturation
    if (skin_tone_shift > 0.0)
        colorHSV.y += skin_tone_shift * weight * MAX_SATURATION_SHIFT;
    // we want more pinks, so decrease hue
    else
        colorHSV.x += skin_tone_shift * weight * MAX_HUE_SHIFT;

    // final color
    vec3 finalColorRGB = hsv2rgb(colorHSV.rgb);     

    // display
     gl_FragColor = vec4(finalColorRGB, 1.0);
}

Еще оранжевый:

Подробнее Розовый:

- EDIT -

Мне кажется, что вы не устанавливаете одинаковые значения в своем коде ObjectiveC. Если вы забудете, что этот шейдер получит нулевое значение для всех этих.

Код должен выглядеть следующим образом:

- (id)init
{
    if(! (self = [super initWithFragmentShaderFromString:kGPUImageSkinToneFragmentShaderString]) )
    {
        return nil;
    }

    skinToneAdjustUniform = [filterProgram uniformIndex:@"skinToneAdjust"];
    [self setFloat:0.5 forUniform:skinToneAdjustUniform program:filterProgram]; // here 0.5 so should increase saturation

    skinHueUniform = [filterProgram uniformIndex:@"skinHue"];
    self.skinHue = 0.05;
    [self setFloat:self.skinHue forUniform:skinHueUniform program:filterProgram];

    skinHueToleranceUniform = [filterProgram uniformIndex:@"skinHueTolerance"];
    self.skinHueTolerance = 50.0;
    [self setFloat:self.skinHueTolerance forUniform:skinHueToleranceUniform program:filterProgram];

    maxHueShiftUniform = [filterProgram uniformIndex:@"maxHueShift"];
    self.maxHueShift = 0.04;
    [self setFloat:self.maxHueShift forUniform:maxHueShiftUniform program:filterProgram];

    maxSaturationShiftUniform = [filterProgram uniformIndex:@"maxSaturationShift"];    
    self.maxSaturationShift = 0.25;        
    [self setFloat:self.maxSaturationShift forUniform:maxSaturationShiftUniform program:filterProgram];

    return self;
}
@end