Babylon canvas and flex layout

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

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

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

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

note: I do this offscreencanvas.

//Olav

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

1 Like

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

Let me tag @RaananW to take a look at this

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).

Hey :slight_smile:

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

1 Like

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!

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?

1 Like

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 :slight_smile:
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.

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

“if you tell me how”

How do you PM on this site? :wink:

You click on my user, and press “message” :slight_smile:

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

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

image

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

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.

1 Like

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

1 Like

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

2 Likes

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.