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