Unwanted focus tints on 3d objects

[joshon]

Hi,

I am making a greyscale web app using R3F. I have some little table icon that looks like this:

But sometimes (I can't work out exactly how to repro yet - but it may have something to do with focus) it looks like this:


And sometimes rather than a green or red tint it has a bluish one.

It seems like the sort of thing that -webkit-touch-callout: none; -webkit-user-select: none; or -webkit-tap-highlight-color: rgba(0,0,0,0); might fix in regular css/html.

Why is it happening in R3F and how do I prevent it?

[drcmda]

there's no focus or selection highlight in webgl, the canvas is a bunch pixels unrelated to the dom. i've never heard of anything tinting something just like that in threejs. the only explanation is that you somehow color it that way, tonemap it, effects, encoding, colored light, ... something has to cause it. best make a codesandbox.

[joshon]

Thanks, I must be doing it somewhere... I will track it down!

[joshon]

Thanks @drcmda

I have not managed to locate the bug in my code, but I have made a code sandbox to replicate the problem:
https://codesandbox.io/s/tables-color-test-sghcj?file=/src/App.js:2278-2926

I have tried to simplify it down from what I have in my app, but it is still overly complex for a demo, however, it shows a version of the bug pretty dramatically. I will remove zustand and immer tomorrow.

The biggest observation I have - is that if I change the colors I use to show the selection state the bug disappears (or is repressed). In my app, I am actually using the greyscale selection colors - but the bug still manifests occasionally.

In this image the selected table is pink - but should be red.

[joshon]

I think I fixed it - but I don't understand how it works yet:

https://codesandbox.io/s/tables-color-test-forked-uj8ks?file=/src/App.js:2623-2648

      col.setHex(bool ? 0xff0000 : 0x0000ff)
      col.convertLinearToSRGB()

After setting the color I call convertLinearToSRGB() and it fixes the problem, at least in this sandbox.