DeviceSourceManager : Keyboard not detected after upgrading Babylon from 4.2 to 5.3

Bugs
1

Hi,
It’s been a long time, my last post was on html5gamedev haha
Recently I decided to dust off a remake of a project I made some years ago.
This remake was on Babylon 4.20 and I wanted to upgrade to the latest version of Babylon : 5.30.
And there it is the catastrophe : my device Manager not working anymore.
Or more precisely, my keyboard isn’t detected, only my Mouse and my Xbox Controller work. I tested with some playground and my keyboard is detected perfectly.
I compared and I havn’t see big difference with demos. My current setup is quite weird because I use the Device Manager of Babylon to control a CesiumJS Map.

I tested on Firefox and Vivaldi/Edge
I tested with another keyboard

A simplified version of my Input Manager (in src/inputs/ in my repo):

import {
  DeviceSourceManager,
  Scene,
  DeviceType,
  XboxInput,
  DeviceSource,
  Nullable,
} from "@babylonjs/core"
import { IAControl, IAControlList, IAMaps, InputActions } from "./inputActions"

export class InputManager {
  private dsm: DeviceSourceManager
  constructor(scene: Scene) {
    this.dsm = new DeviceSourceManager(scene.getEngine())

    this.dsm.onDeviceConnectedObservable.add((device: DeviceSource<DeviceType>) => {
      switch (device.deviceType) {
        case DeviceType.Keyboard:
// This never log :(
          console.log("Keyboard")
          break
        case DeviceType.Mouse:
//This always log
          console.log("Mouse")
          break
        case DeviceType.Xbox:
//This log when I connect my xbox controller
          console.log("Xbox")
          break
        case DeviceType.DualShock:
          console.log("Dualshock")
          break
      }
    })

    this.dsm.onDeviceDisconnectedObservable.add((device) => {
      console.log("Lost Connection")
    })

    this.dsm.getDeviceSource(DeviceType.Keyboard)?.onInputChangedObservable.add((device) => {
      console.log("device -> ", device.currentState)
    })
  }

I can share my repo if you want to test in live, just need to do an npm install and npm run start :
working version with Babylon 4.2 https://github.com/IchbinRob/Sur_tout_le_trajet/tree/main
Broken version with Babylon 5.3 https://github.com/IchbinRob/Sur_tout_le_trajet/tree/update-test (I’ve upgraded some other things, but I tested to update only babylon, and the result is the same)

Thank you for your help :pray:

2

@PolygonalSun is out input guru and can probably help here ?

1 Like
3

So, when I took a look at the code snippet, it worked for me in the Playground. I tried forking your repo to take a look. I was able to reproduce what you were seeing. It seems that the issue is that, specifically in 4.2, all keyboard events in the DeviceSourceManager are sent to the window object, rather than to the canvas. The was originally corrected to the canvas in later releases because keyboard input should only affect the canvas when the canvas has focus. Since all input is now being routed to the canvas, I believe that there may be something that’s preventing focus on the canvas (maybe tabIndex, maybe something in Cesium’s code). When I explicitly called this.canvas.focus() as part of my troubleshooting, input started to be received until I clicked away.

I’d recommend taking a look to see if there might be something within your code or Cesium that could be preventing access to the canvas object. Unfortunately, I’m not too familiar with Cesium, otherwise, I could provide more specific guidance.

2 Likes
4

Ok, I found the problem. Cesium has is own canvas (which I stream in a shader in a babylon canvas) And it’s this Cesium’s Canvas which take focus.

Thank you !
Always a good vibe with Babylon’s community :sparkles:

1 Like