kaos1000 Posted November 2, 2013 Share Posted November 2, 2013 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 kaos Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 2, 2013 Share Posted November 2, 2013 Just set the scene.clearColor to a new BABYLON.Color4 value with alpha value != 1 Quote Link to comment Share on other sites More sharing options...
kaos1000 Posted November 2, 2013 Author Share Posted November 2, 2013 I'm sorry, I'm way new to this. I used: scene.clearColor = new BABYLON.Color4(1,0,0,0); I understand how to set the RGB values, but no matter what I put in the 4th value, there is no alpha. the above code produces a red background to the scene. Quote Link to comment Share on other sites More sharing options...
vbillet Posted November 2, 2013 Share Posted November 2, 2013 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. JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
kaos1000 Posted November 2, 2013 Author Share Posted November 2, 2013 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 Quote Link to comment Share on other sites More sharing options...
vbillet Posted November 2, 2013 Share Posted November 2, 2013 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 ? Quote Link to comment Share on other sites More sharing options...
kaos1000 Posted November 2, 2013 Author Share Posted November 2, 2013 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>Html: <div id="rootDiv"> <canvas id="renderCanvas"></canvas></div>It shows my box rotating against a black background. Quote Link to comment Share on other sites More sharing options...
vbillet Posted November 2, 2013 Share Posted November 2, 2013 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> Quote Link to comment Share on other sites More sharing options...
Temechon Posted November 2, 2013 Share Posted November 2, 2013 Hi, I think the background transparency is not took into account in babylon 1.5.2, only in 1.5.3. Could you please update to babylon 1.5.3 and try again ? JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 2, 2013 Share Posted November 2, 2013 I confirm what Temechon said Quote Link to comment Share on other sites More sharing options...
kaos1000 Posted November 2, 2013 Author Share Posted November 2, 2013 Could you please update to babylon 1.5.3 and try again ? Hot Diggity!!!! That was it, Thx much folks. I will make sure I am up to date next time I'm fussing with stuff. kaos Quote Link to comment Share on other sites More sharing options...
crg Posted November 5, 2013 Share Posted November 5, 2013 I have used this: scene.autoClear = false; and it has worked for all my websites. If this is depricated or just simply wrong... let me know. Jaskar 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 5, 2013 Share Posted November 5, 2013 It is also ok:) Quote Link to comment Share on other sites More sharing options...
rgalindox Posted June 6, 2017 Share Posted June 6, 2017 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 7, 2017 Share Posted June 7, 2017 This should work can you reproduce it in the PG? Quote Link to comment Share on other sites More sharing options...
russoll Posted August 31, 2018 Share Posted August 31, 2018 hi sorry if this is repetitive, but i tried the changed as stated above, but u cant get the black backround to become transparent... any ideas...thanks Quote Link to comment Share on other sites More sharing options...
Guest Posted September 4, 2018 Share Posted September 4, 2018 Can you repro your current problem somewhere? It is impossible to help without it Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.