How to set the stage background transparent

Help & Support
1

Hi everyone, I’m use the model-viewer to preview glb files,the model stage get black background.How to set the background transparent.

image
image645×750 53.6 KB

2

At the bottom of the rendering tab select transparent canvas

image

Then make sure your cameras clear color has an alpha of zero

image

3

Thanks,You gave me a direction.I’m using the model-viewer with reactjs.If set deviceTypes: [‘webgpu’], It’s will be ok.But use webGL2 the stage still have a black background

image
image671×759 23.1 KB

4

Sorry, do you have a sample model/project that we could take a look at?

cc @mvaligursky

5

What even is that black object anyway? If it is an entity like a plane or something similar just delete the thing.

6

I’m using chrome 128.0.6613.138,I also believe it’s an issue at the canvas level, but I don’t know how to start solving it. thanks you give me a idea

8

I upload the code to codesandbox.Looks ok.but in my project.the black background still exist

9

I am not sure what that black transparent plane on your screenshot is. Are you sure it is part of your model? Maybe something in your scene, like a plane? Or some script is adding something?

  1. I downloaded your model from the code sandbox, and created a blank project.
  2. I go to project settings and enable Import Hierarchy option.
    image
  3. I drag and drop your cake.glb into assets, and PlayCanvas generates assets out of it.
    image
  4. I drag and drop generated template into scene, and it looks fine:
    image
    image819×381 82.2 KB

    image
1 Like
10

It looks like they are using a fork of the model viewer GitHub - playcanvas/model-viewer: 3D model viewer supporting glTF 2.0 and PLY (3d Gaussian Splats) and saying that using WebGPU that plane is meant to be a transparent shadow catcher

But on WebGL (2?) on their machine, it looks like a standard transparent black square

On my system running the sandbox as is, I get this

image
image1362×1358 71.5 KB

11

I see, so they forked the viewer and it works fine for them in codesandbox, but not on their machine (webgl2).

I tried to fork the viewer and it works fine for me, same as the online version:

image
image994×842 166 KB

So that plane at the bottom is the transparent shadow plane. And for some reason it looks like that on WebGL2 for them in their project, but not in codesandbox on the same machine… I am puzzled. Maybe some project rendering settings make the difference? Not sure. @mvaligursky any ideas?

12

Not sure what the difference could be to be honest. Likely not something on the engine side, as that is the same, possibly canvas side?

1 Like
13

Right, good point. @lxl9435 worth checking your HTML canvas element / page have the same css style properties.

14

I can confirm it’s not from the model itself

15

Right,When I use set deviceType: [‘webgpu’],it’s will be ok,in webgl2 mode,the black background will show,I opened CodeSandbox, and it’s working fine too.

16

image
image597×657 53.5 KB

createGraphicsDevice(canvas, {
                //deviceTypes: ['webgpu'],
                glslangUrl: '/static/lib/glslang/glslang.js',
                twgslUrl: '/static/lib/twgsl/twgsl.js',
                antialias: false,
                depth: false,
                stencil: false,
                xrCompatible: false,
                powerPreference: 'high-performance',
            }).then((device) => {
                try {
                    observer.set('runtime.activeDeviceType', device.deviceType);
                    viewer = new Viewer(canvas, device, observer, skyboxUrls);
                    window.viewer = viewer
                    if (flag) {
                        const files = [
                            {
                                url: fileUrl,
                                // 根据fileurl把文件名切出来
                                filename: fileUrl.split('/').pop(),
                            }
                        ]
                        viewer.loadFiles(files)
                        // viewer.setLightEnabled(true)
                        // viewer.setLightFollow(true)
                    }
                } catch (e) {
                    console.log(e)
                }
            }).catch(err => {
                console.log(err)
            })
17

Again, please make sure your HTML canvas element has the same css style in your project and in code sandbox.