Strange issue in @latest related to canvas size/settings?

Questions
1

I recently updated my (large nontrivial) project from Babylon 5.2.0 to 5.13.2, and I started seeing an occasional bug. About 50% of the time, when the scene first initializes it looks like the camera is weirdly zoomed in on the lower-left part of the scene. The issue seems to be related to canvas properties, because if I change the width or height of the canvas that Babylon is rendering into, the scene starts rendering correctly.

In trying to isolate the bug, I noticed by accident that running the following code also fixes the issue:

    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    var url = canvas.toDataURL('image/png')

That code isn’t touching babylon at all, so I suppose something magical may be going on - perhaps related to babylon listening for DOM events related to canvas elements, or similar.

Does anyone have any idea what might be going on? I never had the issue in 5.2, so I suppose it’s related to a relatively recent update.

Thanks!

2

As far as I know we are not listening to any canvas event :frowning: so this may also be related to a browser issue?

Do you repro with Firefox for instance?

3

Hm, I’ve just tested and the issue doesn’t reproduce at all in Firefox/current, but it happens often in Chrome (mac). I guess possibly a timing issue with the state of the canvas at the time when Babylon initializes?

But it definitely wasn’t happening under Babylon 5.2.0 so I guess there are several things going on. I tried some random hacks - like waiting a few seconds between creating the canvas and initializing Babylon, but the issue still happens reliably.

Did anything change recently in Babylon, related to how the engine initializes with respect to the canvas element?

4

Nothing that I can remember for a while. Initi phase is relatively stable. I even checked the blame page of our init code :frowning:

5

See: Babylon.js/packages/dev/core/src/Engines/thinEngine.ts at master · BabylonJS/Babylon.js (github.com)

Only change is for the version string

6

Hi DK, thanks for checking.

I tested further and I think this was a Chrome bug. I must have updated Babylon and Chrome around the same time, making it look like a Babylon issue.

Thanks!

1 Like
7

Ok thanks! I somehow prefer that ;D