Incorrect colors on Firefox and Edge


I really like webgl and three.js.
Among the reasons, I was pretty sure that as long as it works, it would work the same on every platforms.
Yet yesterday I had an issue in my project…
I was using, in a fragment shader, a png texture where the colors would be used to separate different areas, where to apply different effects.
I use png because it is capable of keeping the actual colors (I haven’t found a way to do so with jpeg).

On Chrome, it works as expected but as it turns out the colors Edge and Firefox give are not accurate.
I solved the issues by spreading my indexing values and testing less precisely, but still I would like to understand this issue and see if there is a way to avoid it.

Here is a sample reproducing the issue.
Try it in Chrome and try it in Edge and Firefox, you will see only Chrome renders with the right values.

Please let me know if you have any clue why only chrome gets the colors right, and if you know how to get them right on other platforms.


1 Like

Yeah, I’m also getting the buggy results on Mac OSX Firefox.
Instead of reading [128, 0, 0], I get [126, 3, 8].

What method are you using to read the colors back out? I’d like to see your code, it could be dozens of things.

Same here. Indeed, it would be interesting to know why this happens.

So, I don’t do much there.
I left the code at work, but basicaly to pick the color I render to a texture and extract the color with renderer.readRenderTargetPixels at the mouse position.
Much like what is done there for GPU ColorPicking:

If you check with a color picker, you will see it is the same color that is outputed by the default renderer target (on screen).
And as I said earlier, when reading the value directly in a shader, I would get the same results.

Also, just to be clear, the mesh I display uses MeshBasicMaterial (so light doesn’t matter), I don’t touch the gamma or the tone mapping, and the texture is set as nearest for min and mag filters.

So it’s not, I think, a matter of rendering.
I think this is really what the GPU is fed.

Interesting. I encountered a similar error also with PNG just yesterday. I have to be 100% sure it’s not my code, but knowing that you encountered the same is “positive”.

Might be worth to report the issue here ( and see what the Mozillians think about it.

1 Like