Text Outline Color Differences

[amcdnl]

I'm trying to apply a text outline but the colors do not match what is expected. I'm using the drei helpers for react-three-fiber.

Below is an example screenshot where the outline is a grey where it is set to white.

The code for the label is declared like:

export const Label: FC<LabelProps> = ({
  text,
  fontSize,
  fontUrl,
  opacity,
  active
}) => {
  const normalizedColor = useMemo(() => new Color('#2A6475'), []);
  const normalizedStroke = useMemo(() => stroke ? new Color('#fff') : undefined, []);

  return (
    <Billboard position={[0, 0, 1]}>
      <Text
        font={fontUrl}
        fontSize={fontSize}
        color={normalizedColor}
        fillOpacity={opacity}
        textAlign="center"
        outlineWidth={1}
        outlineColor={normalizedStroke}
        depthOffset={0}
        maxWidth={100}
        overflowWrap="break-word"
      >
        {text}
      </Text>
    </Billboard>
  );
};

My canvas configuration is pretty basic and looks like this:

<Canvas
  gl={ {
    alpha: true,
    antialias: true,
  }}
  camera={{
    position: [0, 0, 1000],
    near: 5,
    far: 10000,
    fov: 10
  }}
>
  <color attach="background" args={[theme.canvas.background]} />
  <ambientLight intensity={0.5} />
  <fog attach="fog" args={[0xffffff, 4000, 9000]} />
</Canvas>

This project is open-source reagraph so you can see a example here ( thought its a dark theme but problem is still the same ): https://reagraph.dev/?path=/story/demos-themes--custom-theme

I was looking into this potentially having something to do with tone mapping but changing them doesn't seem to be the right fix ( as far as i can tell ), reference: https://stackoverflow.com/questions/64899716/color-differences-between-threejs-vanilla-js-and-react-three-fiber-create-re

My versions are:

    "three": "^0.141.0",
    "@react-spring/three": "9.4.4",
    "@react-three/drei": "^9.6.2",
    "@react-three/fiber": "^8.0.27",

Reference ticket: #73 (comment)

[lojjic]

This definitely appears related to color space management in R3F and/or Three.js. It's not just the text outline color that's being affected, it's also the main text color and also the colors of your graph node/edge elements -- check them with a color picker and you'll see what I mean, none of them match the hex colors set in the theme.

I see you're setting colorManagement={false} in GraphCanvas, but IIRC that's an older deprecated property. The current R3F exposes different props related to color management.

If I set <Canvas legacy linear flat ...> it seems to return the colors to match the exact input hex values, at least for those elements not affected by lighting. That may or may not be the correct solution for your use case, but it does show color management as the culprit rather than troika-three-text specifically.

Hope that helps!

[amcdnl]

That worked! THANK YOU SO MUCH!