HtmlMesh Renders Incorrectly When Browser Window is Resized

[Dorado8]

In the example [https://www.babylonjs-playground.com/#Y2LIXI#44], when you drag to resize the right-side canvas, you will notice that the overlayMesh and overlayMeshDiv are misaligned. After reviewing the source code, I found that the issue lies in the createGetCanvasRectGenerator function in the utils.ts file. This method uses updateInterval for throttling, which causes the final render to be misaligned. This issue is most noticeable when the browser is zoomed in or out. My solution is to use lodash.throttle(boundOnResize, 500, { leading: true, trailing: true }) for throttling.

11_202472617526.mp4

[Dorado8]

After making this change, the HtmlMesh renders correctly. I initially positioned it on the yellow sphere, and no matter how the canvas size is changed, it remains properly aligned.

22_2024726171047.mp4

[PSI497]

for anyone looking for a solution that does the resizing immediately by the next render, I wrote about another hacky workaround to solve this in BabylonJS/Babylon.js#15788

[deltakosh]

Closing as we will tackle it with BabylonJS/Babylon.js#15788