Hi all,
I have an online project running with Babylon JS where I need to remove the gray and white background (which Babylon JS has by default), and leave the canvas completely transparent.
I need to see what’s behind the canvas, and I can not …
How is it done, editing the .js or directly from my own html code?
Visit my project here
And the .js here
Thanks!
Did you try to set the scene clearcolor?
https://doc.babylonjs.com/api/classes/babylon.scene#clearcolor
The 4th part of Color4 is the alpha (transparency), So:
https://playground.babylonjs.com/#U490IZ
As @brianzinn mentions the clear color is perhaps the way to go. But keep in mind, there has to be a color in the background for every space there isn’t a mesh or some element to render.
It sounds as though perhaps you’re not setting your camera’s Z depth to be far enough. Otherwise, I’m not really certain what you’re asking.
Galen
he wants what is behind the canvas to be visible. you can test by inspecting the canvas and editing the containing div (id=canvas-zone) style to include: background-color: green; and you will see that becomes the background of the canvas.
Yes. As people above said.
scene.clearColor = new BABYLON.Color4 and in CSS for canvas
background: transparent.
Should work.
I am not sure but I think that will leave you with bottom ground visible, which as I can see essentially you don’t need
and you can remove it. I think that background material used for ground cannot have clear color with alpha channel (color4) I am not sure why is that. Even tho it can have texture that has alpha color, as in example you showed us.
You can see on my test image just that. Part of the canvas that has cleanColor with alpha channel is transparent (whole canvas has background:transparent in CSS). But white space you see on image is ground mesh that you also have. So without it it would be okay for you (I have mirror material for reflection, and shadows so I kinda need it, but as I can see you don’t have those).
Hi all,
Thanks for trying to help me…
My current problem is that if you look at my way of loading the .glTF ( < babylon > … < / babylon > ), you will see that I do not have any other script in my HTML, and… I do not have the way to modify the scene (the canvas).
< babylon templates.main.params.fill-screen = “true” >
< model url=“models/vertical.gltf” ) >< scaling x=“1” y=“1” z=“1” >< / scaling>< / model >
< camera >< behaviors >< auto-rotate type=“1” >< /auto-rotate >< / behaviors >< / camera >
< / babylon >
So, what would be the most appropriate script to try to make the canvas transparent?
Note:
If I replace my current code:
< babylon > … < / babylon >
For this one another simpler:
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
var box = BABYLON.Mesh.CreateBox("box", '3', scene);
box.material = materialforbox;
scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
Yes I get a transparent canvas, but here I get a little lost and I do not know how to load my current glTF model.
See my modified line: scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);
I’m very new to Babylon, sorry if something escapes me.
Any idea ?
if you want to use the viewer and get access to scene object, check out the advanced topic:
https://doc.babylonjs.com/extensions/advanced_usage#finding-the-babylon-engine-scene-and-camera
otherwise you will likely want to use the sceneloader to add models to your scene - if you want to create the scene yourself:
https://doc.babylonjs.com/how_to/load_from_any_file_type
Thanks, sounds interesting.
I am following this example:
https://doc.babylonjs.com/how_to/load_from_any_file_type
But I do not know how to load my maps linked to the glTF (exported from 3D Max).
The scene is not displayed, and the “canvas” is not displayed in the browser inspector, only the HTML.
How do I add my image maps and the .bin to the script?
< script src=“https://cdn.babylonjs.com/babylon.js”>< / script>
< script src=“https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js”>< / script>
var delayCreateScene = function () {
// Create a scene.
var scene = new BABYLON.Scene(engine);
// Create a default skybox with an environment.
//var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
//var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
// Append glTF model to scene.
//BABYLON.SceneLoader.Append("models/", "vertical.gltf", scene, function (scene) {
BABYLON.SceneLoader.Append("models/vertical.gltf", scene, function (scene) {
// Create a default arc rotate camera and light.
//scene.createDefaultCameraOrLight(true, true, true);
// The default camera looks at the back of the asset.
// Rotate the camera by 180 degrees to the front of the asset.
//scene.activeCamera.alpha += Math.PI;
});
return scene;
};
You cannot mix preview and regular versions
Try to change to:
< script src=“https://preview.babylonjs.com/babylon.js”>< / script>
< script src=“https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js”>< / script>
Ok, thanks, I changed the url of the scripts, but my model does not load me (and the browser inspector does not show the canvas either).
There’s something I’m doing very badly, and I can not find what it is …
var delayCreateScene = function () {
// Create a scene.
var scene = new BABYLON.Scene(engine);
// Create a default skybox with an environment.
//var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
//var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
// Append glTF model to scene.
//BABYLON.SceneLoader.Append("./", "vertical.gltf", scene, function (scene) {
//BABYLON.SceneLoader.Append("models/", "vertical.gltf", scene, function (scene) {
BABYLON.SceneLoader.Append("models/vertical.gltf", scene, function (scene) {
// Create a default arc rotate camera and light.
//scene.createDefaultCameraOrLight(true, true, true);
// The default camera looks at the back of the asset.
// Rotate the camera by 180 degrees to the front of the asset.
//scene.activeCamera.alpha += Math.PI;
});
return scene;
};
Can you show us how you create the engine?
I did a demo of the viewer at some point and made the background invisible. Here is the page and source. Not sure how much it will help, but maybe it’ll give you some ideas.
Your code is incomplete, you need to setup a canvas and create an engine:
https://doc.babylonjs.com/babylon101/first#your-own-html
You are nearly there! Follow the link from deltakosh. You need add a <canvas …/> to your html, attach to it and you should see your scene! Let us know how it goes.
Thanks, but It does not work for me There is no canvas in the browser inspector…
I see nothing…
< body >
< canvas > < / canvas >
var delayCreateScene = function ( ) {
// Create a scene
var scene = new BABYLON.Scene(engine);
// Create a default skybox with an environment.
//var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
//var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
// Append glTF model to scene.
//BABYLON.SceneLoader.Append("./", "vertical.gltf", scene, function (scene) {
//BABYLON.SceneLoader.Append("models/", "vertical.gltf", scene, function (scene) {
BABYLON.SceneLoader.Append("models/vertical.gltf", scene, function (scene) {
scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001) ;
// Create a default arc rotate camera and light.
scene.createDefaultCameraOrLight(true, true, true) ;
// The default camera looks at the back of the asset.
// Rotate the camera by 180 degrees to the front of the asset.
scene.activeCamera.alpha += Math.PI;
} ) ;
return scene;
} ;
< / body >
Can you do a github repo or something?
You just just be able to do something like this in your HTML body:
<canvas id=“renderCanvas” touch-action=“none”></canvas>
Then in your script get the canvas element (this is also copied from deltakosh link)
var canvas = document.getElementById(“renderCanvas”); // Get the canvas element
Then you pass that canvas object to your Engine when it is created…
Thanks, but it does not work for me.
I think I’m going to give up. I can not believe that it is so difficult to remove the background from Babylon, and leave it transparent …
It’s a struggle to learn new things for me, too. If you wanted to share your project ZIP it up and attach it and we can take a look.
Also, share with us how the docs are not clear. They need to be built for the perspective of somebody that has not done this before.