How can I make the transparent background

Here is a simple example of what you need. I hope this helps you. It is really simple, just need to set basic things (canvas, engine, scene, camera, light)

And you cannot say it’s hard to remove background. It is literally one line of code.

@brianzinn

Here is the .zip with my project:

https://vercomo.es/Vercomo.zip

1 - The original is demo-babylon. html
2 - The best thing that I have advanced is demo-babylon-2. html

But in the second version I can not eliminate the background of the canvas, the camera is unconfigured and I have an aliasing of terror.

Thanks for any help possible …

I’m checking it out. I’ve never used the viewer before. I just need to setup a local webserver and try this code. You need to get the viewer (it needs an ID) and then you add a script like this:
<script>
BabylonViewer.viewerManager.getViewerPromiseById(‘viewer-id’).then(function(viewer) {
console.log(viewer.getBaseId());
viewer.sceneManager.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
});
</script>

You do not need to run any local server.
I do not use xampp, for example. Everything checked without problems…

The scene is not ready then. You can access the scene this way - first you need to set the id attribute on the <babylon …/> element. Then this gives you access to the scene:
<script>
BabylonViewer.viewerManager.getViewerPromiseById(‘viewer-id’).then(function(viewer) {
console.log(viewer.getBaseId());

viewer.onEngineInitObservable.add(function (scene) {
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
});

});
</script>

The only thing is that it had no effect. I did a console.log on the scene object and it is a scene, but also has a scenes array and changing clearColor of scene.scenes[0] did work. I cannot explain that, so somebody with more experience in the viewer will need to help you. The suggestions from the other people were based on your code samples that you were not using the viewer.

It does not work for me …

:hot_face:

got it. i had the wrong observable (I was copying from Advanced usage - Babylon.js Documentation). this does work:

BabylonViewer.viewerManager.getViewerPromiseById('viewer-id').then(function(viewer) {
 console.log(viewer.getBaseId());

viewer.onSceneInitObservable.add(function (scene) {
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
  console.log('scene:', scene);
  // scene.scenes[0].clearColor = new BABYLON.Color4(0, 0, 0, 0);
});   });

@brianzinn

Yes… If it works (the background is now transparent, bravo!), But the camera has been reconfigured (the model is seen from below, now), and the alias is still there with the zoom-out …

How to fix the camera and the aliasing?

Download: demo-babylon-3. html

https://vercomo.es/Vercomo-2.zip

1 Like

what is your devicePixelRatio - probably you need to add a check for that? it is not by default enabled to automaticaly work (adaptToDeviceRatio is 4th parameter when creating an engine).

I think you can do it with the engine observable:
viewer.onEngineInitObservable.add(function (engine) {
engine.setHardwareScalingLevel(1/(window.devicePixelRatio||1.0))
});

You need to add a listener on window resize event as well. I think that picks up when you switch screens.

you should make a new question with your other one about the camera.

1 Like

Sorry @Fernando, I did not realize you were using the Viewer :slight_smile:

Tying to ping @RaananW as he initially wrote the Viewer :slight_smile:

Catching up on messages. Did you manage to fix the issue?

1 Like

I spent hours looking for a solution to the transparent background problem. After reading this very helpful post I tried putting the scene.clearColor inside the render loop like this.

engine.runRenderLoop(function () {
if (scene) {
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
scene.render();
}
});

This works great, but I am not sure if it is performant or if there is a better way.
Hope this is helpful.

2 Likes

Hi @Mike_Behar.
Welcome to the board :wink:
Yes, maybe this is not the best solution.
I think is enough to add this line

scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

after you define your scene variable, and inside loop keep only scene.render()

1 Like

Hi @MarianG
Thanks for the welcome and the advice. I have just started playing around with b-js. I could not get a transparent canvas on earlier releases , but your suggestion works great in the latest preview version.
Eventually I will want to make a transparent background in viewer so I will continue to follow this tread.

So much more to learn…

Thanks again.

2 Likes