Trouble switching inputs with multi-canvas views

Questions
1

In relation to this docs page:

When I try to switch the engine.inputElement using:

Screen Shot 2021-06-17 at 4.28.03 pm
Screen Shot 2021-06-17 at 4.28.03 pm828×266 28.4 KB

It always seems to use the initial engine.inputElement and there’s no console errors.

I’d create a PG but I don’t think it’ll work with multi-canvas rendering.

I’ve basically been modifying the views demo.
https://www.babylonjs.com/demos/views/

2

There’s no inputElement getter/setter in the engine class (only a getInputElement method), so that can’t work.

Adding @PolygonalSun in case something has changed since the doc has been written.

3

@Evgeni_Popov hmmm looking through Engine class I can see that now but I thought the api docs were auto generated from code? inputElement property is in the api docs with comment “Gets or sets the HTML element to use for attaching events”

4

Ah I see it’s in EngineView class

5

Ah true, I forgot the engine code was split into several files.

So, I don’t know why it is not working… Are you able to test in 4.2?

6

I’ll try. The demo seems to accept the first assignment but in my code, subsequent assignments to inputElement don’t have any effect.

I’ll try testing in 4.2

1 Like
7

@Evgeni_Popov & @PolygonalSun I think I’ve confirmed this is a bug in 5.0.0alpha as it works fine in 4.2.0

Here’s the relevant demo links:

And the code:

1 Like
8

It does not seem to work in 4.2 neither: even when incrementing the canvas, when using the mouse I’m always rotating/moving the cube in the canvas #0.

Anyway, you need to also detach the previous camera / attach the new camera, something like that (index.html):

function incrementInputCanvas() {
    previousInputCanvasIndex = currentInputCanvasIndex;
    currentInputCanvasIndex++;
    if (currentInputCanvasIndex >= 4) {
        currentInputCanvasIndex = 0;
    }
    var inputCanvasId = "renderCanvas" + currentInputCanvasIndex;
    scene.detachControl();
    engine.views[previousInputCanvasIndex].camera.detachControl();
    engine.inputElement = document.getElementById(inputCanvasId);
    scene.attachControl();
    engine.views[currentInputCanvasIndex].camera.attachControl();
    updateInputCanvasName();
}

For this code to work, you should also change (index.js):

engine.registerView(document.getElementById("renderCanvas0"));

to:

engine.registerView(document.getElementById("renderCanvas0"), camera);
1 Like
9

That’s the expected behaviour. The input is changed from canvas to canvas but that input controls the camera of canvas #0.

Whereas in the 5.0.0 version the input is always locked to canvas #0, which is incorrect.

10

Ok, so I can’t help more.

There has been a lot of changes regarding input handling in 5.0, let’s see if @PolygonalSun has some ideas.

1 Like
11

Thanks for the info about input handling changes in 5.0.0 @Evgeni_Popov and yes I will need to do camera swaps in my own application, but with my demos above I just wanted to isolate the issue to input handling.

In the meantime I can revert to using 4.2.0 and an older version of TS to avoid the other issue I encountered last week with TS and 4.2.0.

12

I’m able to also repro the behavior that you’ve described. I think that what might be going on is that the event listeners are only being set for the first canvas that it finds. I’ll dig in more to see what’s actually going on.

2 Likes
14

So I’ve figured out what’s going on and I have a fix in the works. I’m hoping to have it live next week.

3 Likes
15

I have a fix in PR to address this: DeviceInputSystem - Modify system to support multiple canvas’/views by PolygonalSun · Pull Request #10599 · BabylonJS/Babylon.js (github.com)

4 Likes
16

PR is merged

1 Like
18

I will do the nightly in a bit

3 Likes