CopyShader opacity does not work as expected

Description of the problem

In examples/js/shaders/CopyShader.js, there is an issue with the fragment shader:

               "void main() {",

		"	vec4 texel = texture2D( tDiffuse, vUv );",
		"	gl_FragColor = opacity * texel;",

		"}"

Because texel is multiplied by opacity directly, all elements of the color are scaled by the opacity value. This means on a black background, the opacity is effectively applied twice. On any other background, the resulting color will end up darker than expect.

Proposed Solution:

Multiply only the alpha component by opacity:

		"void main() {",

		"	vec4 texel = texture2D( tDiffuse, vUv );",
		"	texel.a = opacity * texel.a;",
		"	gl_FragColor = texel;",

		"}"

Three.js version

• Dev
• r117
• …

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[WestLangley]

I have second thoughts on this…

I trust the original author knew what he was doing back in 2011.

CopyShader was designed to copy render target textures, which by default, have premultiplied alpha.

If you want to further scale the opacity, you need to scale all four components.

I would be inclined to revert https://github.com/mrdoob/three.js/pull/23671, and look elsewhere if there are issues.

[WestLangley]

Yes, likely.

One needs to check the three.js examples where this is used – used both directly and indirectly.

Check BlendShader.js, too.