Hi!
I’m having a very strange issue. I am attempting to get a UI proof of concept working where there is the main scene (the game world) and the UI scene as as as a second scene. I saw this technique on the docs. For my game purpose there will be multiple UIs / menus so swapping and overlaying scenes is important. For this specific first test scene, it is a button panel at the bottom of the screen.
After some testing, I was able to get both scenes to render at the same time. However, the rendering of the second scene disables the lighting on the first scene. The first scene and second scene both have their own camera and lighting.
Note I deleted some launcher / initialization code from the example code below so that helpers didnt have to look through 200 lines of code. basically, my game initialization class loads a series of JS scripts that do various things. Before this happens, a blank scene is made. Then after the scripts are loaded, the 2nd scene, a UI scene is made. The UI scene simply adds one picture to the screen. It does this correctly, but when this 2nd scene / UI scene is active, we see the first scene lighting disappear. Disabling the 2nd scene then reenables lighting Note I do in fact have a camera and lighting for the first scene but I deleted that example code from below for tidiness. I know its working because only when the 2nd scene is enabled does the first scene have any issues.
At this link we see the example of the issue. The UI scene correctly shows an example panel, but the model on the main scene / 3d world is totally black. Turning off Scene 2 initialization and rendering fixes this.
Any help would be appreciated. Thanks so much!
class GameInitialization {
constructor(engineInstance) {
window.baseMenuUI = null;
this.scene = new BABYLON.Scene(this.engine);
}
/**
* Initializes the game by loading all necessary scripts and setting up the scene.
*/
initialize() {
this.loadScripts(scriptsToLoad, () => {
this.scene2 = new BaseGameUI(this.engine);
this.scene2.autoClear = false;
this.scene2.initUI();
var camera = new BABYLON.FreeCamera(
"camera",
new BABYLON.Vector3(0, 0, 0),
this.scene2
);
camera.setTarget(BABYLON.Vector3.Zero());
const light = new BABYLON.HemisphericLight(
"dayLight",
new BABYLON.Vector3(0, 1, 0),
this.scene2
);
light.intensity = 1;
// Set up resize handling
this.setupResizeHandler();
// Start the render loop
this.engine.runRenderLoop(() => {
this.scene.render();
// this.scene2.render();
//this.baseMenuUI.render();
});
this.buildScene();
});
}