Engine.resize() on html element size change

Been having the same problem, engine.resize() seems to do nothing when called after changing the canvas size via CSS (using ReactBootstrap).

Adding engine.resize() to the render loop however, seems to fix the behavior. Aspect ratios are now preserved.

Thought it might be a race condition, like the engine resize was being calculated before the canvas size change had completed (because React may be making the change asynchronously). But even adding delays before dispatching the resize event, does nothing.

So render loop it is.

TBH I have experienced this behavior somewhere else and wanted to dig into that soon (soon is very abstract. tomorrow? 3 weeks? I sadly don’t know yet :-)).
My temporary solution was to call engine.resize() 5 times (in 5 consecutive frames) instead of once, after a resize is needed. I know it is not a solution, it is just a suggestion to save a bit of computation time in your render loop. a very naive approach would be:

let numberOfTimes = 0;
//...
// Render loop
const renderLoop = () => {
  if(numberOfTimes--) {
    engine.resize();
  }
  scene.render();
}

// on resize needed callback - 
const onResizeNeeded = () => {
  numberOfTimes =5;
}

very naive. and of course can be better…

1 Like

I have the same problem and instead of 5 times, I’m just calling engine.resize() additionally once within the render loop.

I think in my case that’s because I’m opening a new browser tab in JS and this causes the Babylon.js render loop to stop (request animation frame) without having time to handle the resize event… Does that make sense?

Buy anyway this looks like to be a BJS bug :thinking:

if you think it’s a BJS issue we will be happy to see a reproduction. The issue I mentioned was because of the way react deals with redrawing