glsl fragment shader color addition logic

Question

I 'm trying to apply a filter to a texture in WebGL, but I can't get my head around how colors add up in my fragment shader.

Say I have this for example, adding red and black together like so:

vec3 red = vec3(1., 0., 0.);
color.rgb = vec3(0., 0., 0.) + red;    

gl_FragColor = color;

It outputs the color red as I would expect. On the red channel we have 0. + 1. = 1.

But when applying the same logic to my current texture color, for info the alpha channel = 1.

vec3 red = vec3(1., 0., 0.);
color.rgb = texture.rgb + red;    

gl_FragColor = color;

I get this before and after:

Blacks remain black and it colorizes the white area, what is going on? Why does it not follow the same logic?

How do I go about colorizing the image so that black becomes my desired color and everything else is a lighter varient of said color.

Here's the full fragment shader code:

precision mediump float;

uniform sampler2D u_image;
uniform vec2 u_resolution;
uniform vec2 u_position;
uniform vec2 u_pointer;
uniform vec2 u_tex_size;
uniform float u_zoom;
uniform float u_mask_amplitude;
uniform float u_mask_top;
uniform float u_mask_bottom;

// the texCoords passed in from the this.vertex shader.
varying vec2 v_texCoord;

// scale from center
float scale(float a) {
    return a / (1. / u_zoom) - (.5 / (1. / u_zoom));
}

vec4 toGrayscale(in vec4 color){
    float average = (color.r + color.g + color.b) / 3.0;
    return vec4(average, average, average, 1.0);
}

vec4 colorize(in vec4 grayscale, in vec4 color){
    return grayscale * color ;
}

float luminance(vec3 rgb){
    // Algorithm from Chapter 10 of Graphics Shaders.
    const vec3 W = vec3(0.2125, 0.7154, 0.0721);
    return dot(rgb, W);
}

float dist(vec2 a, vec2 b){
    float x = a.x - b.x;
    x = x * u_resolution.x / u_resolution.y;
    float y = a.y - b.y;
    return sqrt((x * x) + (y * y));
}

void main() {
    
    // Look up a color from the texture.
    vec4 color = texture2D(u_image, v_texCoord);
    
    float x = v_texCoord.x;
    float y = v_texCoord.y;
    
    
    // map position
    x = x + (u_position.x) / 3.;
    y = y + u_position.y;
    
    
    // repeat & scaling
    float repeat_x = mod((x * 3.0), 1.0);
    
    
    // texture
    color = texture2D(u_image, vec2(repeat_x, y));
    
    
    // mask_offset
    
    vec2 pointer = (u_pointer + u_resolution / 2.) / u_resolution - 1.;
    float tex_offset = u_tex_size.x / u_resolution.x;
    
    
    pointer = pointer / u_zoom;
    pointer.x = pointer.x + u_position.x * tex_offset;
    pointer.y = pointer.y + u_position.y;
    
    vec2 text_coor = vec2((x * 3.) - 1.5, y - .5);
    
    
    text_coor.x = text_coor.x * tex_offset;
    // text_coor.y = text_coor.y * tex_offset;
    
    
    
    
    
    
    // should invert
    
    float PI = 3.1415926535897932384626433832795;
    
    float mask_top = u_mask_top / u_resolution.y;
    float mask_bottom = u_mask_bottom / u_resolution.y;
    
    mask_top = mask_top - .5; // .5 is center
    mask_bottom = mask_bottom - .5; // .5 is center
    
    float width = 10000./u_resolution.x;
    float amplitude = u_mask_amplitude;
    
    bool top = scale(v_texCoord.y) + mask_top > sin(scale(v_texCoord.x) * width - (PI / 2.)) * amplitude;
    bool bottom = scale(v_texCoord.y) + mask_bottom < sin(scale(v_texCoord.x) * width - (PI / 2.)) * amplitude;
    bool invert = top && bottom;
    
    
    
    
    //
    
    float dist = dist(pointer, text_coor) * 1.5;
    if(!invert) dist = dist / 3.;
    
    color.r = color.r + dist * u_zoom;
    color.g = color.g + dist * u_zoom;
    color.b = color.b + dist * u_zoom;
    
    
    // greyscale
    
    float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
    color = vec4(vec3(gray), 1.0);
    
    
    
    // invert
    
    if(invert){
        
        vec3 filter = vec3(0., 0.1215686275, 0.2039215686);
        color.rgb = 1. - color.rgb; // invert
        color.rgb = color.rgb + filter;
        
    }
    
    gl_FragColor = color;
    
}

Answer 1

I've figured out what is going on. I have a radial mask effect where I am multiplying the texture by a value before applying the color filter like so:

color.r = color.r + dist * u_zoom, 1.;
color.g = color.g + dist * u_zoom, 1.;
color.b = color.b + dist * u_zoom, 1.;

Turns out by doing so the value of each channel can be greater or less than 1. So when I go to add the filter, even though the color appear black on screen It's value must be less, so adding .2 to -.5 for example remains black.