How to combine texture color and uniform color in fragment shader?

Question

I want to use one shader for both, coloured rectangles and/or rectangles which render textures. This is my approach:

precision mediump float;
uniform vec4 u_color;

uniform sampler2D u_image;
varying vec2 v_texCoord;

void main(void) {

vec4 texCol = texture2D(u_image, v_texCoord);

gl_FragColor = texCol * u_color;
}

But I get nothing. Where is my mistake?

Answer 1

If you do not have a valid texture specified for the sampler, the texture2D call will return transparent black — vec4(0.0, 0.0, 0.0, 0.0). Multiplying by that value will always produce black again.

Instead of trying to use “no texture”, use a texture which has exactly one pure white texel. This will cause the multiplication to yield the u_color.

Or, you can simply switch between two shader programs, one for untextured geometry and one for textured geometry. Switching programs (gl.useProgram) is not very expensive.