Use a ResizeObserver
to detect changes in canvas size
#1121
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Today, in each scene
tick
, the canvas and window sizes are compared to their previous values to detect if the pixel-size of the canvas needs to be updated. By doing that, calls happen to.clientWidth
and.clientHeight
properties, and this can trigger DOM layout calculations per-tick
, which adds overhead to the rendering process (according to Chrome Profiler).Instead, this PR pretty much simplifies the mechanism and delegates the knowledge about if the canvas resized to a
ResizeObserver
, which avoids to kick any extra DOM layout calculation. With this the resize-handling code gets simpler and more performant.Bonus track
Also, when the
Perspective
matrix is updated, the class will make sure to mark itsCamera
as "dirty" so it updates the matrix. This is needed in some cases so the camera gets aware that the x/y axis-ratio has changed, as the aspect ratio is handled on the projection matrix.Reference
ResizeObserver
is supported on all major browsers since around 3 years ago: