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

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. image

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 43 (6 by maintainers)

Most upvoted comments

Enabling hardware acceleration did it for me.

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

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

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

For some reason my hardware accel was disabled.

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?

image

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.

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

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

@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.

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.

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!

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