Text Rendering Discrepancy in Three.js

Based on your description of the issue with text rendering in Three.js, you're experiencing a common problem related to how textures with text are processed and displayed. The difference in appearance between black text on white versus white text on red is likely related to anti-aliasing and alpha handling in your shader material.

Possible Solutions

1. Adjust the alphaMap settings: If you're using a shader material, you might want to implement an alphaMap to control the opacity of your text more precisely. The MeshStandardMaterial documentation mentions:

   JAVASCRIPTCopied
   // The alphaMap is a grayscale texture that controls opacity
   // Black: fully transparent; White: fully opaque
   material.alphaMap = textTexture;

2. Text texture generation: When creating your text texture, ensure you're using consistent settings for anti-aliasing. You might need to adjust how the text is rendered to the texture initially.

3. Shader adjustments: In your shader material, you might need to add a threshold or adjustment for the text edges:

   GLSLCopied
   // Fragment shader example
   uniform sampler2D textTexture;
   uniform float threshold;
   
   void main() {
     vec4 texColor = texture2D(textTexture, vUv);
     // Apply threshold to sharpen edges
     texColor.a = smoothstep(threshold - 0.01, threshold + 0.01, texColor.a);
     gl_FragColor = texColor;
   }

4. Mipmapping and filtering: Check your texture's mipmapping and filtering settings:

   JAVASCRIPTCopied
   textTexture.minFilter = THREE.LinearFilter;
   textTexture.magFilter = THREE.LinearFilter;
   textTexture.generateMipmaps = false; // Try with and without mipmaps

Since you're using a custom shader material, you have full control over how the texture is processed. You might need to implement specific handling for text edges to ensure consistent rendering regardless of the background color.