[SOLVED] Difficulties setting PlayCanvas background to transparent

Help & Support
1

Hi,
I want the canvas, PlayCanvas is rendering to, to overlap a html page with the PlayCanvas background set to transparent so that I can add 3D objects to the html page.

I did search the forum and tried the things indicated. But it doesn’t seem to work.

I tried this in the css:

html {
    background-color: transparent;
}

body {
    margin: 0;
    overflow: auto;
    background-color: transparent;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}

#top-part {
    height: 100vh;
}

my html is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>PlayCanvas Hello Cube</title>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="./javascript/playcanvas/playcanvas-stable.js"></script>
        <script src="./javascript/main.js" defer></script>
    </head>
    <body>
        <canvas id="top-canvas"></canvas>
        <div id="top-part">
            <h1>Exoleap Main Page</h1>
            <nav>
                <a href="#">Companies</a>
                <a href="book.html">Book</a>
            </nav>
            <p>Test on main page</p>
        </div>
        <footer>Copyright &copy; 2023 by Mechamania.</footer>
    </body>
</html>

in main.js I start the PlayCanvas. PlayCanvas works and objects are rendered. But background is not transparent.

I also tried to add this in the code:

var bd = document.getElementsByTagName("body")[0];
var ht = document.getElementsByTagName("html")[0];
var cv = document.getElementsByTagName("canvas")[0];
bd.style.backgroundColor = "transparent";
ht.style.backgroundColor = "transparent";
cv.style.backgroundColor = "transparent";

But that also did not work.
The element with the top-part id is not visible. The footer is. So I think the top-part is behind the Playcanvas. But it is not vissible because the PlayCanvas is not transparent.

2

Have you set the camera clear color to be transparent?

3

(PS if it’s an engine only question, can you help us by tagging the thread as ‘engine-only’ please?)

image

4

No, I didn’t. I assumed setting canvas background color to transparent should be enough.

5

Yest it is engine only.
I added the tag.

6

If Clear Color Buffer is enabled on the camera, it’s going to fill the rendering canvas with the Clear Color. So that needs to be transparent for the canvas to be transparent as well.

7

So it is better (more efficient) to disable Clear Color Buffer?

8

If you don’t disable clear color buffer then whatever was rendered last frame stays on the canvas.

9

You should create the engine with alpha support as well, for example:

        const app = new pc.Application(canvas, {
            mouse: new pc.Mouse(canvas),
            touch: new pc.TouchDevice(canvas),
            keyboard: new pc.Keyboard(window),
            graphicsDeviceOptions: { alpha: true }
        });

see more on its meaning here: HTMLCanvasElement.getContext() - Web APIs | MDN

1 Like
10

Ah ok, then I need to set it off course.

11

I did set the clearColor to transparent like this:

// create camera entity
const camera = new pc.Entity("camera");
camera.addComponent("camera", {
    clearColor: new pc.Color(0, 0, 0, 0),
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

But the background turns to black now.

12

Ahh, I didn’t see your post.

I did this and now it works!!

Thanks a lot.

1 Like
13

And for people how like to know:

I removed all the css stuff to set body, html and canvas to transparent and it still works!
Also removed the javascript code I posted above to set the style to transparent for body, html and canvas. And it still works.

So none of that seems necessary.

1 Like