Babylon canvas and flex layout

Questions
#1

Hi all,

I’ve been working with a layout that has a babylonjs area to display a render of a window on a roof. It is shown within an area, and is not the whole screen.

The layout has since been changed and I now need to use flex elements to size the relevant columns.

One column is fixed, the other is fluid (containing the render).

| Column A (fixed) | Column B (fluid, with render taking up 100%) |

I’m not sure exactly what’s going on, but the babylon render seems “calculate/correct” its size BEFORE the flex arrangement, and thus messes up the resultant column content size. It renders it far too big, pushing the other columns away.
To be clear: this is even with a forced/fixed column size.

Importantly: on resize, this is fixed. Columns align correctly.

I’ve added the following but it doesn’t seem to work:

        $(document).ready(function() {
            engine.resize();
        });

Does anyone have any workarounds/fixes for this?

Thanks
Rick

#2

Is it possible to encapsulate the whole babylon code and only fire it after “load” is complete?

#3

I do this with: window.addEventListener("resize", () => { resize(); });

I also do a check on “engine.areAllEffectsReady()” before resizing.

note: I do this offscreencanvas.

//Olav