"WebGL unsupported in this browser" when using Chrome 74 w/ GTX 780

[winterNebs]

I've tried googling the error, but it comes up with only 1 result that is a Chinese website that is a dead link.

Expected Behavior

Pixi.js loads and runs without errors with webpack. It does run properly when I used to bundle it then use browserify.

Current Behavior

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

Possible Solution

I'm not very experienced in the javascript ecosystem so this could be due to a poor configuration of webpack 4, any help would be greatly appreciated!

Environment

Typescript 3.4.5, Pixi.js 5.0.2, Webpack 4.31.0

Webpack.config.js, the Client section is the part of the code that uses pixi.js

/// <binding BeforeBuild='Run - Development' />
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
var pixiModule = path.join(__dirname, '/node_modules/pixi.js/')
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = [
    // Server
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./app.ts",
        output: {
            filename: "./app.js"
        },
        target: 'node',
        node: {
            __dirname: false,
            __filename: false,
        },
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" }
            ]
        },
        plugins: [
            new CleanWebpackPlugin()
        ]
    },

    // Client
    {
        mode: "development",
        devtool: "inline-source-map",
        entry: "./public/typescripts/entry.ts",
        output: {
            library: "ASC",
            filename: "public/client.js"
        },
        target: 'web',
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            alias: {
                'PIXI': pixiModule,
            },
            extensions: [".ts", ".tsx", ".js"]
        },
        module: {
            rules: [
                // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                { test: /\.tsx?$/, loader: "ts-loader" },
                { test: /\.json$/, include: path.join(__dirname, 'node_modules', 'pixi.js'), loader: 'json-loader' },
                //We expose the non minified pixi file as a global. The minified one was not working with our solution
                { test: pixiModule, loader: 'expose-loader?pixi' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'public/index.html',
                template: 'public/index.html',
                inject: false
            }),
            new HtmlWebpackPlugin({
                filename: 'public/game.html',
                template: 'public/game.html',
                inject: false
            })
        ]
    }
];

• pixi.js version: 5.0.2
• Browser & Version: Chrome 74.0.3729.157
• OS & Version: _e.g. Windows 10

[ivanpopelyshev]

If WebGL unsupported in this browser, use pixi.js-legacy for fallback canvas2d support.

That's different bundle in npm. Your configuration uses pixi.js

[winterNebs]

If WebGL unsupported in this browser, use pixi.js-legacy for fallback canvas2d support.

That's different bundle in npm. Your configuration uses pixi.js

But the browser I'm using clearly does support WebGL

[themoonrat]

Do the v5 examples at https://pixijs.io/examples/ work for you? That page you've shown is basic webgl, yes or no. But when we create a webgl context, we request it with a couple of extra parameters like requiring stencil support.

That's what the error is though, anyway, and why that's our angle of trying to help. We've never seen that error outside of the device not supporting webgl or the webgl parameters pixijs requires

[winterNebs]

Do the v5 examples at https://pixijs.io/examples/ work for you? That page you've shown is basic webgl, yes or no. But when we create a webgl context, we request it with a couple of extra parameters like requiring stencil support.

That's what the error is though, anyway, and why that's our angle of trying to help. We've never seen that error outside of the device not supporting webgl or the webgl parameters pixijs requires

Those examples don't work (v4 does, but not v5) and also give the same error. That's seems really weird to me, I'm not sure why my browser doesn't support that.

I also checked my working pixi.js app and it's using 5.0.0-rc.2, which might be why it works?

Thanks again for the help

[themoonrat]

v4 will work because it's falling back to canvas renderer. In the official release for v5 doesn't unless you're using the legacy package.

So perhaps your gfx card supports webgl but doesn't have something like stencil support which we need for masking, so we reject trying to use it?

[ivanpopelyshev]

Juts in case if its stencil, try update your graphics driver.

However it will be very funny if it turns out that webpack really affects things :)

[winterNebs]

Okay this is super weird my desktop (i7 7700k, gtx 780) doesn't run it, but it does work on my surface book 1, my iPhone XS, and my friends macbook pro 2015. My gpu is kinda old but I didn't think it'd be the issue.

Unless there's anything else I should try, I guess I'll just use the legacy package since I want maximum compatibility (and also I can't really develop something I can't run)

[ivanpopelyshev]

Reinstall the graphics driver, version forward or backward. GPU is not a problem, but opengl part of driver is.

[winterNebs]

Wait a second, I feel really dumb, I think it's a chrome issue, it works in Microsoft edge... though I was using chrome on both my laptop and phone so that was weird.

[themoonrat]

Browsers have a blacklist for different hardware... sometimes it's to just disable webgl altogether, but sometimes to blacklist certain features on certain hardware/driver versions if there are known issues.

[bigtimebuddy]

I updated the title of this issue (not a Webpack + PixiJS issue) and marked as "Won't Fix" since this seems very likely to be a hardware/driver issue.

[winterNebs]

Okay, so using pixi.js-legacy and changing everything to reference pixi.js-legacy still gives the same error.

I checked my working version using 5.0.0-rc.2 and it does work using webgl2:

But using 5.0.0-rc.2 gives me this error: "Uncaught TypeError: Cannot read property 'performMixins' of undefined" on my webpack version.

Any help would be appreciated thanks!

[bigtimebuddy]

Please don't use 5.0.0-rc.2. Use the latest release: 5.0.3

[winterNebs]

I just tried 5.0.3, "Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support." as before. I have a running version using PixiJS 5.0.0-rc.2 that says it's running with WebGl 2, are there some new features added to 5.0.1+ that would make it not work?

[winterNebs]

Doing a little more testing shows some potential weirdness

1. On Edge
   V5 examples do run but with WebGL 1?
   
   V4 examples run with WebGL 1 again
   
   My working game (https://ascension.azurewebsites.net/game.html) runs Pixi.js 5.0.0-rc.2 runs with Webgl 1
   
   My webpack game loads with Pixi.js 5.0.3 with WebGL 1 but doesn't work properly
   
2. On Chrome
   V5 doesn't work
   
   V4 works but with canvas
   
   My working game runs with 5.0.0-rc.2 with webgl 2
   
   My webpack game has the error as explained in the post with 5.0.3
   

Not sure if this helps at all, but seems weird to me

[ivanpopelyshev]

I predict that the only good way is to make a function that creates the context the same way pixi does (asks for "stencil:true" and test it without pixi, just a plain html+js.

Then you can give your report with specs and demo to chromium devs in chromium bugtracker.

I understand that its a very long way , but, compared to mozilla, they are faster and there's a hope :)

I ask again: did you try to update the driver?

[winterNebs]

I predict that the only good way is to make a function that creates the context the same way pixi does (asks for "stencil:true" and test it without pixi, just a plain html+js.

Then you can give your report with specs and demo to chromium devs in chromium bugtracker.

I understand that its a very long way , but, compared to mozilla, they are faster and there's a hope :)

I ask again: did you try to update the driver?

Yup I did update my drivers, I also turned on webGL 2.0 compute in Chrome://flags as well.

So you suspect it is a issue on Chrome's end? I'll try your suggestion and see what happens.

Coincidentally the gtx 780 and 780ti had issues crashing while playing the game "Nier Automata" as well, it might just be the drivers for this card are broken in some way.

[winterNebs]

Okay I wrote this quick test javascript:

    var canvas = document.createElement("canvas");
    // Get WebGLRenderingContext from canvas element.
	console.log("Context (no args):");
	var a = canvas.getContext("webgl");
	console.dirxml(a.getContextAttributes());
	console.log("Context (stencil):" );
	var b = canvas.getContext("webgl",{ stencil: true});
	console.dirxml( b.getContextAttributes());
	console.log("Context (failIfMajorPerformanceCaveat):" );
	var c = canvas.getContext("webgl",{ failIfMajorPerformanceCaveat: true});
	console.dirxml( c.getContextAttributes());
	console.log("Context (Both):" );
	var d = canvas.getContext("webgl",{ stencil: true, failIfMajorPerformanceCaveat: true });
	console.dirxml( d.getContextAttributes());
	console.log("Context (Alias):" );
	var e = canvas.getContext("webgl",{ antialias: false});
	console.dirxml( e.getContextAttributes());

And it seems like no matter what I try I can't get stencil to be true. I tried this both on my pc and laptop (laptop works with v5). I'm not sure what do do at this point.

[ivanpopelyshev]

Make a hack to pixi that disables it, remove stencil attachment that is created by default for RenderTexture framebuffers and try not to use masks ;)

Alternatively, go the other way, try OLD drivers :) Btw linux users have those kind of problems frequently

[winterNebs]

Okay I'm closing this issue. Pixi.js seems to work properly using firefox (webgl 2), so for now I'll just use that. I think it might be a specific combination of drivers + chrome causing it to not work. I've tried on multiple the examples v5 on machines ranging from old mac books, old windows 7 machines, and my windows 10 laptop. It just seems like my pc is some weird outlier, if people run into this issue with firefox, chrome and edge, it might be worth reopening this ticket.

Thanks for all the help guys!

[winterNebs]

Okay not reopening. It was 100% my chrome install, something somehow messed it up, switching to the beta channel seemed to have fixed it.
(Messing around with chrome://flags didn't help, and removing all extensions didn't do anything either).

[bigtimebuddy]

This type of issue is very useful for future users who might be experiencing the same issue in a similar environment. Thanks for providing so much detail.

[marwan38]

Okay not reopening. It was 100% my chrome install, something somehow messed it up, switching to the beta channel seemed to have fixed it.
(Messing around with chrome://flags didn't help, and removing all extensions didn't do anything either).

I can confirm this worked for me as well, Installing chrome beta ran the app fine. Thanks.

[winterNebs]

Random discovery: it is not chrome beta's fault:

For some reason my hardware accel was disabled.

[mariocastanoromeo]

Enabling hardware acceleration did it for me.

Chrome -> Settings (⌘,) -> Advanced -> System -> enable 1st

[Adamfsk]

@ivanpopelyshev Could this be solved by using an alternative method for masking in WebGL? There’s a couple more options with explanations on this stackoverflow thread

[HarishBoke]

I think if we enable it manually it won't help user. Below code worked for me!
import * as PIXI from 'pixi.js-legacy'

[immx2]

I ran into this issue as well using Chrome due to my Hardware Acceleration setting being disabled. I must have disabled it a while back because it is supposed to be enabled by default.

But I'm curious why the Pixi fails to load in this case, because shouldn't it be falling back to the HTML 5 canvas?

[Adamfsk]

@immanuelx2 The document you have posted a screenshot of is not up to date. The canvas fallback was moved to the legacy branch from v5.0.0 - See the release announcement here: https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

Use pixi.js-legacy if you still need a canvas fallback; the master branch no longer contains support for canvas, it is WebGL “only”, and faster for it.

[RossKinsella]

I ran into this issue upon opening my application in a new tab after getting the error: CONTEXT_LOST_WEBGL

Closing chrome and then restarting it resolved it for me

EDIT:
I have attempted to reproduce as per my above steps but was unable to do so

specifics:
chrome: 77.0.3865.90
osx: 10.14.6
graphics: Radeon Pro Vega 20 4 GB, Intel UHD Graphics 630 1536 MB

[g7parsh]

So im having a similar problem as @winterNebs but for me, Chrome seems to be fine on version > 5.0.0-rc.2 and firefox is telling me that webgl is not supported

[goodgecko]

Incase someone else has this issue. I had to manually enable the flag "Override software rendering list" chrome://flags

specifics:
chrome: 78.0.3904.97
osx: 10.13.6

[erayd]

Thanks @goodgecko - although the library still needs fixing; it's not reasonable or feasible to ask end-users to perform that step to work around it. Auto-fallback needs to be reliable.

[konchunas]

I have this exact problem on both Linux and Windows in Brave Browser 1.1.23 based on Chromium 79.0.3945.88
What is interesting that usual Chrome based on the same Chromium build works just perfectly.
Firefox 71.0 is just okay without any problems whatsoever.

@goodgecko tip didn't help

[h0ngzhe]

Check your Chrome settings hardware acceleration (advaned) state? The same issue showed up when i close this options on chrome.
Wish this helps.

[choopk]

Check your Chrome settings hardware acceleration (advaned) state? The same issue showed up when i close this options on chrome.
Wish this helps.

This worked for me. Had to turn on hardware acceleration

[Fxlr8]

Even weirder for me. The https://get.webgl.org/ is working. PIXI v5 examples work fine, even the one with masks

But when I try to open my game it says that WebGL is not supported.

[othneildrew]

Incase someone else has this issue. I had to manually enable the flag "Override software rendering list" chrome://flags

specifics:
chrome: 78.0.3904.97
osx: 10.13.6

This worked for me, Thanks!

[Rock-son]

I had the same problem on Chrome stable 80.0.+, Ubuntu 18.04 using open source X.Org X Server Nouveau driver. I passed WebGL test and figured it must be the driver so after installing proprietary one (Nvidia), everything works fine now.

[nevergrind]

Random discovery: it is not chrome beta's fault:

For some reason my hardware accel was disabled.

Same here. I had hardware acceleration disabled. I had previously disabled it for recording the browser in OBS.

[bySabi]

Same problem here with Chrome 83 | macos 10.13.6 | nVidia Geforce 210

PixiJS Examples are working fine with Firefox:
console output

PixiJS 5.3.0 - WebGL 1 - http://www.pixijs.com/

but with Chrome, is falling back to Canvas:
output console

PixiJS 5.3.0 - Canvas - http://www.pixijs.com/

@Fxlr8 examples are working fine cause in chrome falling back to Canvas. Open the web console and check it.

[hu-qi]

It worked for me!

[winterNebs]

Can we lock this thread? There is nothing more to contribute here, the issue was hw acceleration.

If you still have an issue, its a different problem so you should open a new thread instead of necroing this one.