Three.js: premultipliedAlpha seems to be always true in Chrome

[NataliaDSmirnova]

Description of the problem

I render transparent object with NormalBlending on transparent background. And in chrome the object looks paler than in other browsers. At the same time if I get an image using toDataURL, the image is correct everywhere.

The screenshot of Chrome

The screenshot of Opera

There is a live example:

• jsfiddle (latest release branch)

Three.js version

• [ ] Dev
• [x] r93
• [ ] ...

Browser

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

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[WestLangley]

This is likely a browser issue, not a three.js issue.

However, renderer.premultipliedAlpha should be true (the default) if you are using NormalBlending and want compositing with the canvas background to be correct.

Why are you setting renderer.premultipliedAlpha to false?

[Mugen87]

I can see the same visual output in Safari like in Opera. Firefox and Chrome handle it differently. Seems to be a Webkit issue.

[WestLangley]

@Mugen87 On my mac, it appears to me that it is _Chrome_ that is compositing correctly; Safari incorrectly.

[Mugen87]

I'm not sure how the browser should correctly perform the compositing. Let's take this fiddle as our test case (it's from the initial post but with MeshBasicMaterial). The color of the cube is (1,0,0,0.5), the background is defined as #000. Which final color value would we expect for enabled and disabled premultipliedAlpha assuming NormalBlending?

[WestLangley]

Which final color value would we expect for enabled and disabled premultipliedAlpha assuming NormalBlending?

premultipliedAlpha   composited color
------------------   ----------------
true                 rgb( 128, 0, 0 )
false                rgb(  64, 0, 0 )

But as I said, it is not correct to set premultipliedAlpha to false when using NormalBlending.

[NataliaDSmirnova]

@Mugen87 Thank you for correcting fiddle. It's much better now.
@WestLangley Why is it incorrect to set premultipliedAlpha to false? I want to have canvas containing rgbA image without premultiplying. Because I assume to blend canvas with some background html element later.
At the same time my scene contains opaque and transparent objects, and I want to blend transparent objects with already rendered opaque objects in frameBuffer.
Where am I wrong?

[Mugen87]

@WestLangley Can you please elaborate a bit how you've calculated the composited color for both cases?

[WestLangley]

In three.js, when using the default NormalBlending, the drawing buffer will contain colors with premultiplied alpha.

Consequently, if you want the browser to properly composite the drawing buffer with the canvas background, you must tell the browser that the drawing buffer is premultiplied. You do that by setting premultipliedAlpha to true.

[Mugen87]

Interesting: https://bugs.webkit.org/show_bug.cgi?id=33386

Since the bug is still open, it might make more sense to push the issue on browser side.

@NataliaDSmirnova Any chances you add comment to the linked webkit bug? I guess it just needs some attention :wink:

[NataliaDSmirnova]

@Mugen87 I've just added a comment to a little bit more recent bug in chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=599285.
Thanks a million for your attention and link

[Mugen87]

Closing the issue. The problem needs to be tracked on browser side.