Hi,
I have 2 scenes overlaying one another (the first is a UI using AdvancedDynamicTexture, the second is a 3D content).
Both have their own camera (one each), and are rendered like so :
this.UIScene = new BABYLON.Scene(this.engine);
this.UIContainer = new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var UICamera = new BABYLON.ArcRotateCamera("UICamera", 0, 0.8, 100, BABYLON.Vector3.Zero(), this.UIScene);
UICamera.layerMask = 0x40000000;
this.UIContainer.layer.layerMask = 0x40000000;
this.UIScene.autoClear = false;
// Register a render loop to repeatedly render the scene
this.engine.runRenderLoop(() => {
this.currentScene.scene.render();
this.UIScene.render();
});
The ("this.currentScene" is a wrapper class meant to easily change the second scene. It properly points to a valid instance of that class, which contains a valid scene.
All elements of the second scene are on the default layer mask, at 0x0FFFFFFF.
My issue is that, while the content of the first scene is rendered properly, the content of the second scene is rendered as if its camera viewport was a perfect square, then stretched to match the canvas real aspect ratio (which is about 16:9, so the content looks flattened).
I attached 2 pictures of my scene (the white icons on top are from the "UIscene", and the main content is from the "currentScene"). As you can see, when I make the canvas square, the second scene content is properly rendered, but when I let it take any other aspect ratio, (in this case 16:9), the image is clearly stretched).
Before anyone ask, I have set a resize event listener on the window to react to canva resize events (it works as expected) :
// Watch for browser/canvas resize events
window.addEventListener("resize", () => {
this.engine.resize();
});
I tried something similar on this PG, but there it works properly (you need to add the snippet above in the code to test the resize feature).
Thanks for you help !