Direction inverted between Chrome and Firefox

Bugs
1

I built a mouse controlled top-down camera in Firefox, and when testing in Chrome I found that the
drag direction is inverted. Chrome inverts both the left/right and up/down movement from Firefox.

Here’s a playground demonstrating the issue:

2

cc @PolygonalSun

3

Or it could be the other way round :wink:
Jokes apart, note that it doesn’t do it on my mac version firefox vs chrome. Both act the same.
Could it be that ‘natural’ vs ‘weird :wink:’ (sry, I don’t remember the name) default behavior of the browser.
Where each browser would have its own defaults thinking that’s likely the best for us users :grin:
It kind of rings a bell to me but I mostly experienced it with the mouse scroll so far.

4

Right, should have mentioned this is happening on Windows 11 with FF 105.0.1 and Chrome 106.0.5249.103.

5

Another issue can be seen in firefox 105, if you move the camera directly instead of using the tracker (https://playground.babylonjs.com/#1BMY8T#3), when the plane reaches the top edge of the viewport it flickers to the bottom edge and back a few times until it’s halfway off the screen, then it continues off in the opposite of the expected direction. I had added the cameraTracker transform while prototyping in FF to fix this behavior, and removed it just now to check if it was necessary for Chrome, which it appears not to be.

6

@PolygonalSun would be great if you can have a quick look into this one ?

8

I can take a look at this and see what’s going on.

9

So, as I was testing this out, I noticed all of the values going into the position vectors were of the same sign so I asked the team about it. @bghgary suggested to take at the rotation and that it was most likely a gimbal lock issue. Basically, there are multiple values that could fit this rotation so if there are any discrepancies with how the math is done between browsers, it might cause this issue. One recommendation provided was to try using a rotation quaternion instead to make sure that it’s pointed exactly how you want it:

var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 10, 0), scene);
// Quaternion (x, y, z, w or ê)
camera.rotationQuaternion = new BABYLON.Quaternion(Math.sqrt(2) / 2, 0, 0, Math.sqrt(2) / 2)

Pic for conceptual reference:

image
image699×729 36.2 KB

If you substitute your line 15 with the quaternion one, it should make the behavior uniform.

11

Thanks!

Using the quaternion does create uniform behavior between chrome and firefox. Looks like my cameraTracker transform is still required to make it behave as expected, though. Without the tracker, both browsers have the bad behavior with the view randomly flipping when the plane is near the top and bottom edges of the viewport.

With tracker ( :+1:): https://playground.babylonjs.com/#1BMY8T#7

Without tracker (:-1:): https://playground.babylonjs.com/#1BMY8T#6

My issue is resolved, but probably worth noting the direct camera movement issue.

1 Like