Dynamically make the canvas transparent (Engine only)

I know there are similar QAs, but I couldn’t find the way for code to set the canvas transparent in run time like clicking a button to make it happen.
I know I can set “graphicsDeviceOptions: {alpha: true}” in pc.Application constructor, but I am looking for a method call instead so that I have the non-transparent mode at launching the app and then switch to the transparent mode dynamically later. Can you guys help out?

1 Like

Hi @cgopia94,

I think you can do that by:

  • Enabling alpha in the pc.Application constructor like you do.
  • To turn on/off the effect on runtime you can now use your active camera’s clean color. By setting the alpha to 1.0 you disable the effect, setting it to 0.0 you enable it back.

You can play with that in the editor as well, by checking Transparent Canvas in your project settings.

image

3 Likes

It works! Thank you so much!

2 Likes

A post was split to a new topic: Dynamically make the canvas transparent - Models look too bright

Hello @Marks,

To set a transparent canvas through the Application constructor, simply pass this option to its constructor:

var app = new pc.Application(canvas, { graphicsDeviceOptions: { alpha: true } });
app.start();

As for setting the camera’s clear color, you could try:

cameraEntity.camera.clearColor = new pc.Color(0, 0, 0, 0);