Pixi.js: "WebGL renderer unsupported in this browser" in Chrome on latest Catalina

[ZachSaucier]

Expected Behavior

WebGL renderer to be used by pixi.

Current Behavior

WebGL Renderer not available to pixi.

I'm getting the following error when loading from the CDN, both on CodePen and locally:

Renderer.js:49 Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.

The pixi v5 demos run using pixi 5.2.0 but with the Canvas renderer.

I have double checked to make sure all of my drivers are up to date and that GPU processing is turned on. Other WebGL projects not using PIXI and they work fine. https://get.webgl.org/ works fine. It works fine in Firefox.

Environment

I have a pretty new Macbook.

• pixi.js version: 5.1.5
• Browser & Version: Chrome 78.0.3904.87 (Official Build) (64-bit)
• OS & Version: macOS Catalina 10.15.1 (19B88)
• Running Example: https://codepen.io/GreenSock/pen/Rwwymrd?editors=0010

[bigtimebuddy]

I was seeing something similar in Brave browser yesterday. Created this example with isWebGLSupported. See: https://codepen.io/bigtimebuddy/pen/Jjjvqqz?editors=0011

For me it was tracked down to this line:

const success = !!(gl && gl.getContextAttributes().stencil);

Throws this error:

Cannot read property 'stencil' of null"

@ZachSaucier are you getting something similar?

[ZachSaucier]

Yep, commenting out stencil: true, in that demo causes it to say that WebGL is not supported. Thanks for doing the hard work of debugging for me 😉

[bigtimebuddy]

@ivanpopelyshev where are we loosening the stencil requirement?

[ZachSaucier]

If possible, it'd be nice to get pixi working in Chrome on Catalina by Monday because we have a release happening then.

Is there some code I can add as a work-around for now to disabled the stencil? Something like PIXI.Application({stencil: true})?

[bigtimebuddy]

For a workaround, you can override this function and replace isWebGLSupported() with your own function that doesn't consider stencil

PIXI.Renderer.create = function create (options) {
    if (isWebGLSupported()) {
        return new PIXI.Renderer(options);
    }
    throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.');
};

[ZachSaucier]

Thanks, I worked around it by detecting WebGL differently inside of that function.

[ivanpopelyshev]

Yes, I can work on stencil stuff , because we made that refactoring and it wont make our code worse.

[ivanpopelyshev]

Also, can someone please go to their bugtracker and fish for information? We need a person in charge of contacting apple with WTF webgl demos :)

[irongaze]

+1 on this issue. Oddly, in our case we worked properly in Firefox, got the error only in Chrome on the same box. Chrome-specific issue, perhaps?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jacklynlxq]

For a workaround, you can override this function and replace isWebGLSupported() with your own function that doesn't consider stencil

PIXI.Renderer.create = function create (options) {
    if (isWebGLSupported()) {
        return new PIXI.Renderer(options);
    }
    throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.');
};

Sorry if it's a stupid question, but how should I override it? When I tried to override it by defining it again it says

Property 'create' does not exist on type 'typeof Renderer'.