Question

I have some GUI-like elements in my WebGL scene which have to be displayed in plain white and not be affected by the lighting in scene.

The texture is a HTML5 canvas element, which has plain white background.

But when I render the canvas in the scene, as a texture, its affected by the lighting and becomes light gray.

How do I display this texture exactly with the same color of the canvas (plain white)?

I suspect the answer is in the fragment shader and playing already a while with it… and yes, I got once a plain color but nothing else, and I want to display some text over the background color.

Thanks!

Answer 1

I got it! 😀

In the fragment shader I added a boolean variable:

uniform bool uNoLights;

And use only the texture pixel information, to determine the final color, when it’s set:

if (uNoLights) {
    gl_FragColor =  texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}  else {
    gl_FragColor =  lights * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}