How to reduce mouse input delay?

Questions
1

Hi, I’m using a camera with an input to pan the view with the mouse similar to Google Maps.

The movement is working fine, but for lower spec devices, there is a noticeable delay between moving the mouse and the camera moving in the scene, making the navigation not very responsive.

Playground with the camera: https://playground.babylonjs.com/#LU1XUJ#2

Bellow is a small video showing the delay (it’s in slow motion). You can see that the mouse cursor moves to a new position and only after a little while that the camera moves (and the mouse event is logged in the console).

To compare, navigating on Google Maps site, with satellite view and the 3d view enabled, on the same device, the delay is almost not noticeable, and it’s very responsible.

Recording in slow motion, Google Maps also doesn’t respond immediately to the mouse movement, but it’s seems to have a lower delay. On the video when the cursor reaches about 70% of the destination, you can see that the map already started to move, and a few frames next it’s already positioned.

So, I was thinking if there is something to make the mouse event to be triggered with some higher priority, or any other thoughts on how to make the camera more responsible to the mouse movement?

2

With each movement, there is a bit of overhead with things like picking. While it might not be the best solution, you could always try to disable picking if you’re not using it (eg. scene.skipPointerMovePicking = true). There’s also the option of just detaching controls and reading from an event listener to add to camera.inertialPanningX or Y. Are there any particular functionality requirements that you’d need to preserve?

3

Thanks for the response!

In my real app, skipPointerMovePicking was already set to true, but it doesn’t seems to make any visible difference. Anyway, I’ve updated the playground with this flag.

Updated playground: https://playground.babylonjs.com/#LU1XUJ#25

I also added the event listeners to the canvas, instead of responding to the scene events, and it also looks that the results are the same.

But I think it’s something related to the browser itself, I did a test with a simple html file, just to log the pointermove event, and it also have a delay between the movement and the event being triggered, and when it’s triggered, it seems that the accumulated events are triggered in a row.

Se in the image bellow, when the event was triggered, after moving something like 600px with a “moderate speed”, 5 events was triggered in sequence.

image
image1265×519 42.3 KB

So, if the event is somehow triggered faster by the browser, the scene would be more responsive to mouse inputs.

Again, using Google Maps as a comparison, it really looks that it can respond to mouse events much faster than my simple html file with just a div.

See below, with just a small movement, the map already starts to move. Well, ok, it’s not a very precise test, since I tried to simulate the same mouse movement speed with my hand. But the feeling is that somehow Google Maps can respond almost immediately to mouse input.

image

4

This is one of the only way to do it in the browser to get low latency inputs: Low-latency rendering with the desynchronized hint - Chrome Developers

5

Hi @sebavan, thanks for the article!

Doing some testes with desynchronized = true when creating the engine/canvas, it seems to improve the responsiveness of the camera movement in my dev machine. The mouse event continues to be triggered after a little delay, but the rendering of the new camera position appears to be faster.

But when testing in our target device (a windows 10 tablet, with lower spec), setting desynchronized = true made the rendering getting stucked while moving the mouse, and only when stopping moving the mouse the camera is updated, see below:

I’ll keep doing some tests, maybe I can found another way to improve the performance of the scene.

Anyway, thanks for the help!

1 Like
6

Mmmm… if this is indeed a solution to get better performance on lower spec devices what are the drawbacks of not making this be the default setup for babylon? honest question. I mention this because I have a client who has software using babylon and sometimes some of his staff browse the app with a potato and then complain to him … which he forwards to me asking what can i do about it, rinse and repeat. My app is optimized and I even have a option to use reduced rendering ( removes post processing mostly and looks terrible ). IM actually thinking to just bake lighting and ao now to try circumvent these issues. It really sucks when this becomes an issue lol.

Anyway interested to know about this solution because anything that can be added as further optimization is an automatic “yes please” from me.

7

It might actually draw more often I believe and I would think that it probably requires more performance.

8

i did go read the link but no other in depth research. It might poll more often but the also describe it using some or other direct to display pipeline that is better. Well as you say , maybe better for latency but perhaps worse for performance. i will remember to try look into it more myself and get to the bottom of that question then

thanks

9

Would be amazing if you can share back as I never tried it for myself and usually it differs somehow from the article I read :slight_smile: