Transparency blending difference with/without EffectComposer

Questions
, , , ,
1

Hi community,

I am currently upgrading an application from r132 to r178.
While following the migration guidelines, I applied the following steps:

  • sRGBColorSpace for renderer output and for input color textures
  • sRGB to Linear conversion for non-hex/css colors
  • Old lights intensity multiplied by PI
  • Added OutputPass to EffectComposer

While doing so, I noticed a difference on transparent materials blending with the background as soon as a pass other than RenderPass is active.
If I understood well, I think it’s because the blending applies in a WebGLRenderTarget (linear colorSpace) rather than on screen.

You can find here a reproduction with simple objects/materials: https://codepen.io/Jens84/pen/vEOwjzd

Is there anything wrong in what I am doing?
How can I achieve the same transparency blending when EffectComposer has more active passes than RenderPass alone?

Thanks in advance!

2

You might need to check your renderer.autoClear setting, and/or do manual renderer.clear(…), but someone more knowledgeable will be able to answer. I just wanted to recommend you can also check in pmndrs discord or on their github.

1 Like
3

I think you’re right that the difference is alpha blending in Linear-sRGB vs. sRGB color spaces. You’re not doing anything wrong, it’s mainly a limitation in WebGL that we can’t do blending in Linear-sRGB when post-processing isn’t enabled, otherwise it would be preferable.

Unfortunately workarounds to force blending in Linear-sRGB without post-processing are not possible, and workarounds to force blending in sRGB with post-processing are pretty cumbersome. So if you’re using post-processing in the real application, I would recommend adjusting color and opacity to get the result you want with the linear blending space, if that’s an option!