☑ Meaning of Scene Setting 'Transparent Canvas'

Hello,

As I understand checking that option on the Rendering settings is supposed to make the clear color of the camera transparent, so other html elements behind the canvas are visible. Am I correct?

If that is the case, it seems it is not working. Simple case:

Transparent canvas checked, and the clear color of the camera is drawn, not of the body element.
http://playcanv.as/p/r3qIOIv2

Or am I missing something?

No this is not what that option does. What it does is it it passes alpha: false to the WebGL context when it’s created which means that IF the camera clear color has alpha 0 then you see through the canvas. So if you want it to be transparent make sure you also set the alpha channel of the camera clear color to 0.

Hi Vaios, thank you for your reply.

I have set the camera clear color alpha to 0 but still I don’t see the blue color of the body HTML element, but the RGB clear color of the camera. Any ideas what am I missing?

https://playcanvas.com/editor/scene/408621

This looks like a bug because when I launch your scene I don’t see the project having the transparent canvas setting. It might be a race condition somewhere. One thing to try to see if it fixes it is turn transparent canvas off and on again and then launch again. Also if you publish do you see the same issue?

Sorry for the inconvenience.

Hi Vaios,

I can’t get it working no matter what, doesn’t work neither on the editor nor on a published build. Tried toggling on/off the option with no luck.

By the way, if I were to set the option in code, on which class can I find that toggle (Transparent Canvas)?

You can’t set that in code it happens before scripts are initialized because it needs to be done when the context is created.

I’ll have a closer look at this on Monday.

Thank you Vaios, mainly I am asking if I can set it in code (outside of a script) because I am using the engine directly, without the editor.

2 Likes

You can pass graphicsDeviceOptions: {alpha:true} inside the pc.Application constructor.

3 Likes

So actually the reason why transparent canvas is not working for you is because you have post effects on the camera. I think we disable blending with those post effects which is probably the reason why you don’t see transparency.

I think I’m gonna have to call in our graphics programmer here to help me out @Mr_F.

2 Likes

We’ve been looking at this recently and it seems that most of the post effects define color buffers with this format pc.PIXELFORMAT_R8_G8_B8 which means they don’t support alpha. If you change it to pc.PIXELFORMAT_R8_G8_B8_A8 it should work.

1 Like

Hi Vaios,

Thanks for the answer! So good that you remembered this question.

Hi, Vaios. I also want to use Transparent Canvas to set a background page.

But I am not using the engine directly and I use editor. I have checked the item Transparent Canvas in project setting and set the camera clear color alpha to 0.

Unfortunately, I still can not see the background page.

Thank you in advance !

Could you please start a new topic about this and also share a project link? Thanks!