Give specific color to texture in fragment shader

Questions
1

Hi,

I am trying to apply a specific color to a texture that is added to a circle that is drawn in the fragment shader. However the texture won’t take the color. In the following jsfiddle I have drawn a red circle with a green border. Inside the red circle I would like to add the texture and apply any color to that texture. In the jsfiddle I am trying to make this texture blue.
https://jsfiddle.net/tqn9k4ha/18/

2

I’m not sure what you mean, i don’t see any green border, but maybe like this?
https://jsfiddle.net/02smryLf/

3

Or like this: https://jsfiddle.net/prisoner849/f4xkdzu7/
There is no green border because there is no data in the respective attribute.
This line needs to be added: borderColor.toArray(this._bordercolors, i * 3)

4

I updated the jsfiddle https://jsfiddle.net/tqn9k4ha/20/
However it’s not about the border, I want to color the texture without the color of the background interfering.

5

So, that’s how you can do it in the shader:

          uv = gl_PointCoord;
          uv.y = 1. - uv.y;
          float texValue = texture2D(textures[0], uv).r;
          
          vec4 col = vec4(0, 1, 1, 1); // the color of texture
	  gl_FragColor = mix(gl_FragColor, col, texValue);
6

Like that? https://jsfiddle.net/ykou3t1b/

7

Your fiddle does the trick, but could you explain what you did?
uv = gl_PointCoord;
uv.y = 1. - uv.y;
float texValue = texture2D(textures[0], uv).r;
vec4 col = vec4(1, 1, 1, 1); // This is the color I can change?
gl_FragColor = mix(gl_FragColor, col, texValue);

8

Yes like that thank you. How exactly does this work?

9

You just added the texture color (additive blending basically), instead you need to alpha blend them gl_FragColor = mix(gl_FragColor, texture, texture.a);

10

Will need to look into blending more to fully understand, but thank you @Fyrestar and @prisoner849 for your help.

2 Likes