Three.js: Slightly different color processing in different browsers with PNG files

[kareldonk]

Description of the problem

I noticed that there's a difference in color processing in threejs depending on the browser. In this case, Chrome and FireFox look the same, while in Edge the color looks slightly darker.
You can see what I mean when you go to: https://www.kareldonk.com/

I have an intro running on that page, and you'll note that the particles rotating around in a torus formation look slightly darker in Edge compared to Chrome and Firefox.

When I load a JPG map for the particles instead of a PNG, the color looks the same in all mentioned browsers.

This is probably related to the PNG issue mentioned here by user bhouston:
https://github.com/mrdoob/three.js/issues/6915

Three.js version

• [ ] Dev
• [X ] r84
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [] All of them
• [X] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

Hardware Requirements (graphics card, VR Device, ...)

Desktop: AMD Radeon HD 5700 Series
Tablet: Surface Pro 4

I'm seeing the same color difference on both my desktop and surface pro 4, running windows 10.

[mrdoob]

You can see what I mean when you go to: https://www.kareldonk.com/

Maybe you can share screenshots? I don't have a windows machine...

[kareldonk]

In this screenshot I turned off the fog so the difference becomes more apparent. If I use a JPEG image, the brightness for Edge becomes the same as FireFox (and Chrome). The PNG file is what makes the difference.

[kareldonk]

Here's an update:

I "fixed" this issue by loading the JPG map for the particles and only checking the alpha in the PNG. If the PNG is loaded however, you will see that the particles are slightly lighter (whiter) even in Chrome.
There appears to be a difference in color processing with PNG images.

Since I "fixed" the issue, you don't see the difference anymore on the default website. I added a parameter to load the PNG map so you can see the difference: https://www.kareldonk.com/?png=true

Add the last png=true to the URL and you can see the difference even in chrome between that version and the default version. Why is this difference there?

[mrdoob]

Nice! Also, very nice website!

[mrdoob]

I guess we should report this to Edge people, but I don't know anyone there.

[makc]

What about #6915 dev?

[kareldonk]

Nice! Also, very nice website!

Thanks, I built on the shoulders of giants. :) threejs is an amazing piece of work and I learned a lot from you and WestLangley's contributions everywhere on the Internet (especially stackoverflow).

I guess we should report this to Edge people, but I don't know anyone there.

As I said in my previous comment, I now found out that this issue is also present in Chrome and Firefox.
Just load these two URLs below in separate tabs, and switch between them, and you will see that in the one that uses color data from the PNG map, the particles look brighter.

1. https://www.kareldonk.com/
2. https://www.kareldonk.com/?png=true

In EDGE, both those URLs look the same. Not in Chrome and FireFox. I don't know why this is happening, but suspect it might be due to how PNG data is handled in threejs? Is this normal? I would expect a PNG and JPG of the same image to give roughly the same visual output. But this is too big of a difference in my opinion.

[mrdoob]

I can reproduce on Chrome/OSX. Would it be possible for you to create a jsfiddle for it?

[kareldonk]

Yes I could, but it'll probably be sometime next week. I have a few busy days ahead. I'll try to do it asap.

[kareldonk]

I have created a fiddle here: https://jsfiddle.net/7ye6n7d0/23/

You can set the variable 'usePNG' on the first line in the javascript to see the difference. Just open the fiddle in 2 separate tabs, and change the variable in one of them to 'false' and switch between the tabs to see the difference in brightness of the particles.

When 'usePNG == true' the fragment shader uses the color data from the PNG to render the particles which somehow looks brighter than when using color data from the JPG.
When 'usePNG == false' the fragment shader uses color data from the JPG and only uses the alpha from the PNG.

Both versions look identical in Edge. In FireFox and Chrome you can see a difference in brightness. The versions in Edge looks like the version in FireFox and Chrome with usePNG set to false.

I would not expect to see such a big difference in FireFox and Chrome since the png and jpg images look visually the same.

[mrdoob]

Hmm... I've spent a bit looking a the code but there are still many things that can be happening. For instance, right now you're doing this:

"if (aColor.a < ALPHATEST) discard;",

Jpegs do not have alpha channel.

Could you simplify the jsfiddle a bit more? Like just one Points object with no custom shader.

[WestLangley]

Yes, your example is way too complicated.

The issue appears to go away by setting

particleMap = new THREE.Texture( image );
particleMap.premultiplyAlpha = true; // PNG image only

but this issue is confounded by the very small point size ( 1 or 2 pixels ) in your shader and how the GPU down-samples the textures. The JPG has a black background; the PNG does not.

https://jsfiddle.net/7ye6n7d0/27/

I do not think this is a three.js issue.

[kareldonk]

I can confirm that using WestLangley's answer above for the PNG produces the same results in all browsers, as expected.