Offscreen Canvas, matchMedia

Questions
1

Hi!
After upgrading from version 4.1 to 5.7, when creating a scene in the worker, it gives an error matchMedia is not defined. Please prompt, with what it can be connected.

Π‘Π½ΠΈΠΌΠΎΠΊ экрана ΠΎΡ‚ 2022-05-24 13-41-42
Π‘Π½ΠΈΠΌΠΎΠΊ экрана ΠΎΡ‚ 2022-05-24 13-41-42800Γ—293 43.4 KB

2

Hello @amobi , welcome to the babylon.js forum!

Can you provide a little bit more details about your project? How are you setting up the scene? Are you able to repro your issue in the Playground?

3

Hello. Thanks for the kind words.
The code is deeply integrated into the project, it’s hard for me to reproduce this.
Implemented in this way: Offscreen Canvas | Babylon.js Documentation
In version 4.1 there are no problems, in 5.7 there is.

The simplest scene creation in the worker immediately gives an error.

onmessage = function(evt) {
    canvas = evt.data.canvas;
    var engine = new BABYLON.Engine(canvas, true);
    var scene = new BABYLON.Scene(engine);  
}
4

It seems like your browser does not have window.matchMedia defined. Are you getting this error in a specific browser or does it always happen? Which browser or environment are you using?

5

Yes, you are right, the problem is in Chrome. Works well in Firefox.

6

@PolygonalSun , I think this might be related to the latest change in the input handle code.

7

Hey @amobi, for this error that you’re seeing, what is the version of the browser that you’re using? Furthermore, if you open up a default playground, do you see this error in the console?

8

@PolygonalSun could you add defensive code around it ?

9

Yup, I’m currently working on a test to make sure that my solution will work.

1 Like
10

Update: While I am unable to create a reliable repro, I did notice that in a proof of concept that I made, the worker thread did not have context of the window and document. Because matchMedia is a part of window, my current working assumption is that this lack of context is causing the error. We use matchMedia in the WebDeviceInputSystem to check for mouse capabilities and pre-connect the mouse. I think that putting a guard to check for the function before calling would be the most prudent method to address this.

I think that what has been making this difficult to repro for me is that I haven’t figured out how to get the input system to attempt to initialize in the worker thread first to get the repro to happen. I’ll update when I have a fix in a PR

1 Like
12

Hey @PolygonalSun, thanks for the quick response. It looks like I have a problem. This happened because window was declared in the worker. After I removed the problem disappeared.

13

I added following code to ignore this error when having Babylon using offscreen canvas.

Object.defineProperty(globalThis, 'matchMedia', {
        value: () => {
            return {
                matches: false,
                addListener: () => { },
                removeListener: () => { }
            };
        }
    });
14

I created a PR to check for matchMedia so that should address the error, if it happens again: DeviceInputSystem: Add check for matchMedia in WebDeviceInputSystem by PolygonalSun Β· Pull Request #12586 Β· BabylonJS/Babylon.js (github.com)

1 Like
15

PR is merged

1 Like