2D canvas blending question, white text is invisible

Questions
1

Hi everyone,

I am studying three.js since one month now

I draw a cube using a basic mesh and plain blue materials on each face.

On the front face I am trying to draw text from a canvas 2D texture

When I set white for the canvas background color and black for the text color, the text shows up black properly.
However, as soon as I set the text color as white, the text becomes invisible.

Seems like there is a hidden multiply operation somewhere but I cannot find it

I tried THREE.NoBlending and NormalBlending but it is not working better.

There is no lighting, just a camera and a blue cube with white text.

Can someone give advice please?

2

Do you also update the canvas background?

1 Like
3

This is not surprising. White text on a white background should not be visible. The image from the canvas will simply be a white rectangle.

1 Like
4

yes the canvas background is updated

what i don’t understand is why all the white colors on the 2D canvas become transparent when applied as a texture

i think there is a multiply operation somewhere but cannot find where

5

What kind of blending you’re using, do you get the same result without any blending? Are you using the texture as a map or an alphaMap?

I think sharing your code can be more helpful.

1 Like
6

In the fragment shader 3js matersals calculates color as diffuseColor *= sampledDiffuseColor, therefore if current color of texture point is white, resulting color will the material color. If you want to obtain a white color of the text, you need to flood a canvas with а main color you want use for material, and set the material color to white.

1 Like
7

Thank you everyone for your replies, it turns out I just had forgotten this setting:
texture.colorSpace = THREE.SRGBColorSpace;