Transparency does not show properly

Hi there,

One of my company’s client seems to have an issue with transparent materials, whether it’s on Chrome / Edge / Firefox the issue seems to be the same, and the project runs really slowly as well. The issue appeared a few weeks ago and was not present before. Here’s what it is supposed to look like :

image

And here’s what the client gets:

Capture d’écran Other halls

Every transparent material seems to have issues, here’s the same result on an iframe that uses transparency :

Capture d’écran main screen

Except from this issue and the low FPS, everything works ok. I do not have any issue on my end.

Could it be their GPU / GPU’s drivers ?

Have a great day !

Difficult to tell without a reproducible on our side.

This looks really odd as I suspect those are DOM elements.

Are you using a transparent canvas?

You may also want to try using an older version of the engine for a client build to see if it’s an issue with the recent engine releases.

Indeed, I haven’t been able to reproduce and it seems she’s the only one with this issue :confused:

I am using a transparent canvas, I’ll give a go to the Engine version :wink:

I’ll ask her to update her GPU’s drivers as well and see if that changes anything.

This is indeed a DOM element. Besides it might not be transparency after all :

image

This is the code for the iframe. The material differs from the on used on “Go To” bubbles, the first uses none as blend type, the other one uses alpha for transparency.

Try disabling the transparent canvas and see if that has any effect

1 Like

So that partly works :heart: ! The transparent bubbles now do not show weird colors, although my iframes now show a black screen

Hmm, not sure about that without being able to reproduce it :thinking: I can’t think on why an iframe video is just black.

How are you using the iframe? Is it just a DOM element added to the page?

Edit: Oh wait, you are using a CSS3 plane. In which case you do need a transparent canvas to see the iframe that is behind the WebGL canvas right?

That’s exactly right !

I can fork the project and strip it down of anything unrelated to the issue if you’d like !

edit : there you go my good man
https://playcanvas.com/editor/scene/1516544

You will need to enable transparent canvas again. When I suggested that, I assumed that the iframe was on top of the page, not under it to be stenciled/clipped through.

Without having a repro of the transparency issue, it could be a number of things including browsers and GPU differences.

I did notice that the far clip on the camera was very high. Please change it to 500 or lower. This can cause so odd z fighting and artifacts.

Preserve Drawing buffer is not needed so disable that as well.