oframe / ogl

Minimal WebGL Library
https://oframe.github.io/ogl/examples
3.77k stars 213 forks source link

transparency #129

Closed zlac closed 2 years ago

zlac commented 2 years ago

Thanks for the awesome job with this library!

I have a problem with transparent canvas and transparent objects. Here is an example

https://codepen.io/creativeinteractivemedia/pen/NWwMpYX

Semi transparent object (red plane with alpha 0.5) is over a non transparent object ( blue plane with alpha 1), the blue plane behind become transparent, on the part where is covered by red plane.

Screenshot 2022-02-21 at 22 38 42

Any idea how to fix this?

Thanks

eXponenta commented 2 years ago

Because canvas should be PMA

use a:

const renderer = new Renderer({ dpr: 2, alpha: true, premultipliedAlpha: true });

and you should know that in PMA mode all shader and blending should be in PMA too. this means that you should multiple rgb onto a

Screenshot_2022-02-22-01-46-42-130_com android chrome

zlac commented 2 years ago

Awesome, thanks much for your fast reply :)