Jump to content

Newbie question. Transparent scene background


Recommended Posts

Hi, I apologize if this has been answered, I did search the forum and didn't find anything.


I would simply like to know the code to render the scene window transparent, so the graphics appear on top of the web page background instead of the "blueish" default background that babylon.js uses.


Thx much



Link to comment
Share on other sites

In Chrome, when I set Alpha to 0, it produce also a nice red background also.


But when I set it like this :

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

, it produce a nice transparent background.

Thx for your response!


Dang. What version of chrome are you in? (Im in Version 30.0.1599.101 m)


When I used your code I get a black background :(

Link to comment
Share on other sites

I'm also in version 30.0.1599.101 m...


here is my web page code : 

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>Babylon - Basic scene</title>	<style>	   html, body, div, canvas {				width: 100%;				height: 100%;				padding: 0;				margin: 0;				overflow: hidden;		}	</style>	<script src="babylon.1.5.3.js"></script>	<script src="myrpg/main.js"></script> </head> <body>	<div style="position:absolute;top:450px;left:300px;width:300px;color:#000;height:30px; z-index:2;">		My super Babylon project... Here to shows scene's transparency.	</div>	<div id="rootDiv" style="position:absolute;border:1px solid black; z-index:3;">		<canvas id="canvas"></canvas>	</div> </body> </html>
Do you import scene or meshes ?
Link to comment
Share on other sites

Thx again so much for your help.

Here is my javascript:

	<script type="text/javascript" src="babylon.1.5.2.js"></script>	<script type="text/javascript" src="hand.minified-1.1.1.js"></script>
<script type="text/javascript">function do3d(){  // Get the Canvas element from our HTML below  var canvas = document.getElementById("renderCanvas");  // Load BABYLON 3D engine  var engine = new BABYLON.Engine(canvas, true);      var scene = new BABYLON.Scene(engine);  scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);   // Creating a camera looking to the zero point (0,0,0), a light, and a sphere of size 1  var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);  var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);  var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);	var box = BABYLON.Mesh.CreateBox("Box", 6.0, scene);  // Attach the camera to the scene  scene.activeCamera.attachControl(canvas);    // Once the scene is loaded, just register a render loop to render it  engine.runRenderLoop(function () {  box.rotation.x -= .02;    scene.render();  });  }</script>


 <div id="rootDiv">  <canvas id="renderCanvas"></canvas></div>

It shows my box rotating against a black background.

Link to comment
Share on other sites

I tried your code and all seems to work on my computer.


The only difference between our codes is now here : 

<script type="text/javascript" src="babylon.1.5.2.js"></script><script type="text/javascript" src="hand.minified-1.1.1.js"></script>

My corresponding code is : 

<script type="text/javascript" src="babylon.1.5.3.js"></script>
Link to comment
Share on other sites

  • 3 years later...

Hi guys, sorry for coming back to this thread. I'm importing a scene exported from Unity. I want the background to be green, but as soon as I import the .babylon scene it turns to black. This is the code:

BABYLON.SceneLoader.Load("", "assets/myscene.babylon", engine, function (scene) {

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
If I create a scene without invoking the SceneLoader.Load the background color works fine. Any idea or hint is welcome.
Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...