Babylon canvas and flex layout

elb98rm · May 6, 2022, 1:13pm

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

elb98rm · May 6, 2022, 2:16pm

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

webgrid · May 6, 2022, 2:51pm

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

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

note: I do this offscreencanvas.

//Olav

carolhmj · June 3, 2022, 1:27pm

Hello just checking in, was your question answered? @elb98rm

elb98rm · June 4, 2022, 12:43pm

Hi,

Unfortunately this seems to a real bug here. I’ve found a work around, but it’s definitely a thing:

To be clear:

The event for the babylonjs happens BEFORE the CSS re-arrange of the layouts. This causes bad drawing effects as the CSS resizes after babylon “fixes” the size and it does NOT trigger the recalculation of the sizes: This causes stretching/warping of the images.
It also affects the babylonjs loading screen.

In order to sidestep this, I have manually created a loading div (as the generated screen was stretched). It hides and unhides a few items when ready, calling a 1 second delayed redraw, which is still after the CSS draw.

    $(document).ready(function() {
        setTimeout(function() {
            $('p.over-render').css("display", 'block');
            $('div.loading-screen').css("display", 'none').css("width", '100%');
            $('div.product-right canvas').css("display", 'block').css("width", '100%').css("height", 'auto');
            $('div.quote-preview canvas').css("display", 'block').css("width", '100%').css("height", 'auto');
            engine.resize();
        }, 1);
    });

I hope this helps other people, but I can confirm this is a bug with how babylonjs interacts with flex rendering.

Thanks
Rick

carolhmj · June 6, 2022, 4:54pm

Let me tag @RaananW to take a look at this

elb98rm · June 6, 2022, 8:21pm

To recreate in an obvious way, create:

A flex column layout
A left column 20em and the remaining stretching to 100%
Put a babylon render in the 100%

The initial render will happen before the CSS redraw.
If you resize the web browser this seems to fix it (hence me working out that a redraw is a solution).

RaananW · June 6, 2022, 10:41pm

Hey

I tried reproducing it but got my scene correctly rendered. Would you be able to share an HTML with the structure?

elb98rm · June 7, 2022, 8:23am

Not in public (it is a private website). I can gladly forward it to babylonjs email account.

If you can PM me I will provide the code!

RaananW · June 7, 2022, 3:32pm

Oh, i need a simple reproduction. not your project. That would be the best, because then I know that that with simple steps I can reproduce and debug. A simple HTML file with body and 3 HTML tags would probably be the best reproduction, especially if you are saying that it is happening with two-column flex layout.
Would that be possible?

elb98rm · June 7, 2022, 4:12pm

I can send you a single page html, but it will contain sensitive information (urls etc).
I dont want to be linking out access to STL files on a forum.

I will PM you a flat html page that references the other stuff… if you tell me how
I am aware this doesn’t SHOW properly (cross site security), but it does mimic the issue correctly.
One page, flat HTML… just don’t want it on a forum page.

RaananW · June 7, 2022, 4:14pm

sure! Send me a pm with the html attached or in a code block, I will be able to paste it locally. Thanks!

elb98rm · June 7, 2022, 4:21pm

“if you tell me how”

How do you PM on this site?

RaananW · June 7, 2022, 4:26pm

You click on my user, and press “message”

I’ll send you a PM, you can reply to it.

elb98rm · June 7, 2022, 6:40pm

Us normies can’t message you: it doesn’t appear. Replying to PM!

brianzinn · June 7, 2022, 10:25pm

I think it’s because the window resize event may trigger (too early). Did you try a canvas resize observer?

github.com

brianzinn/babylonjs-hook/blob/master/src/babylonjs-hook.tsx#L156

      
        
            const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
            setEngineContext(() => ({
              engine,
              canvas: reactCanvas.current
            }));
            
            
let resizeObserver: Nullable<ResizeObserver> = null;
            
            
const scene = new Scene(engine, sceneOptions);
            
            
if (props.observeCanvasResize !== false && window.ResizeObserver) {
              resizeObserver = new ResizeObserver(() => {
                engine.resize();
                if (scene.activeCamera /* needed for rendering */) {
                  // render to prevent flickering on resize
                  if (typeof onRender === 'function') {
                    onRender(scene);
                  }
                  scene.render();
                }
              });

The additional render call avoids a frame of wrong size. The reactCanvas.current in that code is just the Canvas Element that you are observing.

RaananW · June 8, 2022, 12:02am

I haven’t (and never will) block this. i’ll check! thanks

carolhmj · June 8, 2022, 12:48am

I think there’s a forum configuration for users having to post a certain number of times before being able to direct message others

carolhmj · July 7, 2022, 4:02pm

Btw we had a relatively similar discussion here: Engine.resize() on html element size change - Questions - Babylon.js (babylonjs.com) and what worked was adding engine.resize() to the render loop function.