Hi,
I have an issue with multiple scenes : the second scene is rendered as if the viewport was a square, which it is not. I posted about this issue on HTML5gamedevs, before noticing that Babylon forum is now longer active there (here is the link to the other post if needed for future reference : https://www.html5gamedevs.com/topic/45198-second-camera-viewport-fail-to-resize-on-engineresize/).
Anyway, here is the full post again :
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 canvas 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 (Babylon.js Playground), but there it works properly (you need to add the snippet above in the code to test the resize feature).
I also use a glow effect on certain meshes : those are rendered with the correct aspect ratio (see attached picture). I expect it is because they have their own layer (if I understood that correctly).
The glow effects are supposed to activate “OnPointerOverTrigger” on target meshes, and do so when the cursor is in the blue zone, yet out of the rendered texture, which makes me think that the mesh has a correct position and aspect ratio, and only the texture is badly rendered.
Here is a JSFiddle (https://jsfiddle.net/8wvfa3nr/) that reproduce the issue with a minimalist setup :
- a “hello world” text block in my AdvancedTextureLayout in the UIScene (first scene, overlay the second)
- a square box in my second scene
You can observe that if the canva is square, the cube looks cubical, but if you change the aspect ratio from 1:1, the cube starts either to stretch on the Y axis…
Thanks for your help !
