I’m new to Babylon and it was asked to me to change the background color to a gradient.
So I understand I can change the color of the background with : scene.clearColor = new BABYLON.Color3();
but that’s just for one color, not a gradient. I tried :
var backgroundMaterial = new BABYLON.BackgroundMaterial(“background”, scene);
backgroundMaterial.topColor = new BABYLON.Color3(1, 0, 0); // Rouge
backgroundMaterial.bottomColor = new BABYLON.Color3(1, 1, 0); // Jaune
backgroundMaterial.useEquirectangularFOV = false;
scene.clearColor = backgroundMaterial;
but it doesn’t work, my scene appear just black.
Any ideas ? (oh and I don’t have to use a skybox and I know I can do it with an image but I have to found how to do it directly with scene.clearColor.)
You can use the gradient material for a mesh and if you use the camera as a parent, you can “fix” it at the same position even if the camera is moved.
gradientColor with HemisphericLight | Babylon.js Playground (babylonjs.com)
Oh thank you! A little bit weird but I suppose it make it ^^
I thought there was a simpler way with just scene.clearColor but it seems thats not the case.
I just dont understand why it cant be simple ? I mean in CSS, you can set up the background color just by saying background: blue, and if you want a gradient you just have to write : background: linear-gradient(…);
Here, in Babylon, if you want to change the color you just have to write : scene.clearColor = new BABYLON.Color3(0, 0, 0, 0) but for gradient you cant write new BABYLON.Color3(linear gradient)
I dont understand why it cant be simple just for a gradient …
The simple answer is that Babylon doesn’t use CSS, it uses WebGL, which is a totally different API. The clearColor parameter is mapped directly to the WebGLRenderingContext.clearColor method WebGLRenderingContext.clearColor() - Web APIs | MDN (mozilla.org), which doesn’t accept a gradient.
However, since shaders are very flexible, you can reach a background gradient effect through many methods, one example would be here: Babylon.js Playground (babylonjs-playground.com)
Thank you very much for all you answers! Very clear and simple to understand for a noob like me! ^^
And sorry for my english, not my maternal language ^^’
Again, one of these very simple shaders (although not NME) that should find a place in the doc (my opinion). Not sure how this should all be organized, but there’s an entire world around this. It deserves a better structure and accessibility than what we have just now.
I’m struggling with the problem of setting a gradient background for a button, it looks similar to this question, and there is my solution:
Linear Gradient Background Button | Babylon.js Playground (babylonjs.com)
Not sure to understand, your gradient works here ?
Not exactly work here… I create another PG using 2D GUI to set the background of a scene.
Linear Gradient Scene Background | Babylon.js Playground (babylonjs.com)
What is the result you expect to see?
What does not work ? I can see the gradient there
What do you see ?