I'm using textures on a globe, and one of them (location2) contains flag images with a white background. I've tried modifying my shader to remove the near-white areas while keeping the flag colors intact, but the flags still appear unclear.

I load several textures (day map, clouds, location1, and location2) in my React Three Fiber setup, and location1 already has a black background. Here’s my setup in index.tsx:

TYPESCRIPTCopied
import { Sphere } from "@react-three/drei";
import { SRGBColorSpace, ShaderMaterial, Vector3 } from "three";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import { useFrame, useLoader } from "@react-three/fiber";
import { earthFragmentShader, earthVertexShader } from "./shaders";
import { useEffect, useRef } from "react";
import { Atmosphere } from "../Atmosphere";

const verteces = Math.pow(2, 9);

export const Earth = ({ lightDirection }) => {
  const [earthDayTexture, cloudTexture, location1Texture, location2Texture] = useLoader(
    TextureLoader,
    [
      "/experiment-earth-assets/8k_earth_daymap.jpg",
      "/experiment-earth-assets/8k_earth_clouds.jpg",
      "/experiment-earth-assets/location1.jpg",
      "/experiment-earth-assets/location2.png"
    ]
  );

  earthDayTexture.colorSpace = cloudTexture.colorSpace = 
    location1Texture.colorSpace = location2Texture.colorSpace = SRGBColorSpace;

  const uniformsRef = useRef({
    dayMap: { value: earthDayTexture },
    cloudMap: { value: cloudTexture },
    location1Map: { value: location1Texture },
    location2Map: { value: location2Texture },
    uTime: { value: 0 },
    lightDirection: { value: new Vector3() },
  });

  useFrame((_, delta) => {
    uniformsRef.current.uTime.value += delta;
  });

  useEffect(() => {
    if (lightDirection) {
      uniformsRef.current.lightDirection.value.copy(lightDirection);
    }
  }, [lightDirection]);

  return (
    <> 
      <Sphere args={[1, verteces, verteces]}> 
        <shaderMaterial
          vertexShader={earthVertexShader}
          fragmentShader={earthFragmentShader}
          uniforms={uniformsRef.current}
        /> 
      </Sphere>
      <Atmosphere lightDirection={lightDirection} /> 
    </> 
  );
};

And my shader implementation in shader.js is as follows:

JAVASCRIPTCopied
import {
  curveUp,
  perturbNormalArb,
  simplexNoise,
  valueRemap,
} from "../../../utils/shader-utils";

export const earthVertexShader = /*glsl*/ `
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 wPos;

void main() {
  vUv = uv;
  vNormal = normal;

  wPos = (modelMatrix * vec4(position, 1.0)).xyz;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;

JAVASCRIPTCopied
export const earthFragmentShader = /*glsl*/ `
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 wPos;

const float PI = 3.141592653;

uniform sampler2D dayMap;
uniform sampler2D cloudMap;
uniform sampler2D location1Map;
uniform sampler2D location2Map;
uniform float uTime;

${valueRemap}
${perturbNormalArb}
${curveUp}
${simplexNoise}

void main() {
  vec3 normal = normalize(vNormal);
  vec3 viewDirection = normalize(cameraPosition - wPos);

  // Sample textures with increased brightness
  vec3 finalColor = texture2D(dayMap, vUv).rgb * 1.4;  // Simple brightness multiplier
  vec4 cloudColor = texture2D(cloudMap, vUv);
  vec4 location1Color = texture2D(location1Map, vUv);
  vec4 location2Color = texture2D(location2Map, vUv);

  // Add location1 (black background)
  if (location1Color.r > 0.1) {  // Only blend if it's not part of the black background
    finalColor = mix(finalColor, vec3(1.0), location1Color.r);
  }

  // Add location2 (flags) with stricter white removal
  if (location2Color.a > 0.1) { // Check alpha to ensure flags are visible
    vec3 flagColor = location2Color.rgb;

    // Remove near-white areas using a stricter threshold
    if (max(flagColor.r, max(flagColor.g, flagColor.b)) < 0.95 ||  // Not pure white
        min(flagColor.r, min(flagColor.g, flagColor.b)) < 0.8) {  // Not near-white
      // Enhance the remaining flag colors for clarity
      flagColor = pow(flagColor, vec3(0.8)) * 1.6; // Adjust gamma and brightness
      finalColor = mix(finalColor, flagColor, location2Color.a);
    }
  }

  // Add clouds
  float cloudIntensity = cloudColor.r;
  finalColor = mix(finalColor, vec3(1.0), cloudIntensity * 0.3);

  // Add atmosphere glow
  float fresnel = pow(1.0 - dot(normal, viewDirection), 2.0);
  float atmosphereIntensity = fresnel * 0.3;
  finalColor = mix(finalColor, vec3(0.6, 0.8, 1.0), atmosphereIntensity);

  // Ensure we don't exceed maximum brightness
  finalColor = min(finalColor, vec3(1.0));

  gl_FragColor = vec4(finalColor, 1.0);
}`;

I would love any insights on adjusting the shader logic to better remove the unwanted white background while keeping the flags vivid. What changes can I make to improve the visual clarity of the flags?