Offscreen Canvas, matchMedia

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.

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?

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);  
}

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?

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

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

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?

@PolygonalSun could you add defensive code around it ?

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

1 Like

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

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.

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

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

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

PR is merged

1 Like