Moving the camera with the keyboard BEFORE any mouse interaction (4.2.0)

Questions
1

Hi all. I recently noticed something that seems odd to me on 4.1 and 4.2 (but not 3.3 or 5.0alpha). I’m tempted to switch to 5.0, but this is for a public project, so I’d like to stick with the stable version (4.2) for now. Just wondering if anyone is aware of a temporary fix I can use until 5.0 is fully ready. Here are the details:

I want my users to be able to control the camera with both a mouse and a keyboard. When my scene initially loads, it does not respond to the keyboard. It is only after moving the camera with the mouse that the keyboard becomes responsive.

Even clicking on the canvas doesn’t seem to activate the keyboard. Only click and drag (to move the camera) does.

Here’s a playground: https://playground.babylonjs.com/#GFUP5D#3

After 1 second, the playground sets focus on the canvas and shows an alert message. After that (but without touching the scene with your mouse!), press the up arrow key. On 4.1 and 4.2, it does not respond to the keyboard. Now rotate the camera with your mouse and press the up arrow key again. It does respond.

In case it helps, here’s a demo scene outside the playground (using 4.2) so you can verify that it’s not because of the playground’s editor: https://durrantlab.com/tmp/babylon_probs/

Is there something I can add to my code to fix this behavior, without having to switch to 5.0alpha?

Thanks!

2

Unfortunately this would be a huge amount of code to backport risking more regressions that known issues in previous versions. 5.0shouldbe all stable on existing features. Only in development features should be at risk like webgpu. That said a regression might happen but we ll address them in less than a day :slight_smile:

1 Like
3

Thanks for the speedy response! I was hoping there was some flag that’s disabled by default in 4.2.0, but it sounds like it would require a fix that’s more trouble than it’s worth. I just installed 5.0.0-alpha.30, and I haven’t seen any problems in my app yet. Much thanks for letting me know that 5.0.0-alpha is stable on existing features. Take care.

1 Like
4

Hey @Jacob_Durrant, I know that you’re currently using 5.0 (which is awesome, btw), I just wanted to drop in and provide a bit of a hack that would enable the behavior that you’re looking for in 4.2. What you’d need to do to get it to work in 4.2 is to set the tabIndex before focusing:

...
setTimeout(() => {
        alert("I will now set focus on #renderCanvas: `document.getElementById(\"renderCanvas\").focus();`. Close this alert and press the up arrow BEFORE interacting with the scene via your mouse. No movement. Then rotate the camera with your mouse and press the up arrow again. It now works.");

        // Make sure the canvas has focus so that it can accept
        // keyboard input (not this code editor).
        var renderCanvas = document.getElementById("renderCanvas"); // Store ref to canvas.
        renderCanvas.tabIndex = engine.canvasTabIndex;  // Use ref to engine to get canvas' Tab Index and set it
        renderCanvas.focus();  // Finally, focus
    }, 1000);
...
5

Thank you, @PolygonalSun ! That fixed the problem I was having with 4.2. Turns out I do need to stick with 4.2 after all (not 5.0-alpha), because 5.0-beta does not seem to work on iPhone in VR mode when using the webxr-polyfill at https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js

Much apprecited!

6

Adding @RaananW for the webxr polyfill for when he is back from vacation.

7

Hi Jacob, does 4.2 work with the WebXR polyfill?

8

Hi @RaananW . I can confirm that it works with 4.2.0: https://durrantlab.pitt.edu/pvr/

1 Like
9

What have I done this time? :slight_smile:

This might have been caused by a specs update that was not implemented in the polyfill (hence it is working with an older version of babylon, implementing the old specs). Do you get an error in the console? I don’t have an iPhone so it will be hard for me to reproduce, but we have a few team members with iOS (and yet we still love them!) so they might be able to help debugging this.

10

We checked internally, this playground seems to be working on iOS as well (just a simple XR session with an empty scene):

Babylon.js Playground (babylonjs.com)

does this work on your device?

1 Like