Pixi.js: 使用带有 GTX 780 的 Chrome 74 时“此浏览器不支持 WebGL”

创建于 2019-05-19  ·  43评论  ·  资料来源: pixijs/pixi.js


我试过在谷歌上搜索错误，但结果只有 1 个是中文网站，这是一个死链接。

预期行为

Pixi.js 加载并运行 webpack 时不会出错。 当我用来捆绑它然后使用 browserify 时，它确实运行正常。

当前行为

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

可能的解决方案

我在 javascript 生态系统中的经验不是很丰富，所以这可能是由于 webpack 4 的配置不佳，任何帮助将不胜感激！

环境

打字稿 3.4.5、Pixi.js 5.0.2、Webpack 4.31.0

webpack.config.js， Client部分是使用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版本：5.0.2
  • 浏览器和版本：Chrome 74.0.3729.157
  • 操作系统和版本：_e.g. 视窗 10
picture winterNebs

最有用的评论

启用硬件加速为我做到了。

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

picture mariocastanoromeo 于 2019-06-04
👍8 🎉3 🚀2

所有43条评论

如果此浏览器不支持 WebGL，请使用pixi.js-legacy作为后备 canvas2d 支持。

那是 npm 中的不同包。 您的配置使用pixi.js

ivanpopelyshev picture ivanpopelyshev 于 2019-05-20

如果此浏览器不支持 WebGL，请使用pixi.js-legacy作为后备 canvas2d 支持。

那是 npm 中的不同包。 您的配置使用pixi.js

但我使用的浏览器显然支持 WebGL
image
image

winterNebs picture winterNebs 于 2019-05-20

https://pixijs.io/examples/ 上的 v5 示例对您有用吗？ 您显示的那个页面是基本的 webgl，是或否。 但是当我们创建一个 webgl 上下文时，我们会使用一些额外的参数来请求它，比如需要模板支持。

无论如何，这就是错误所在，以及为什么这是我们试图提供帮助的角度。 我们从未见过设备外的错误不支持 webgl 或 pixijs 需要的 webgl 参数

themoonrat picture themoonrat 于 2019-05-20

https://pixijs.io/examples/ 上的 v5 示例对您有用吗？ 您显示的那个页面是基本的 webgl，是或否。 但是当我们创建一个 webgl 上下文时，我们会使用一些额外的参数来请求它，比如需要模板支持。

无论如何，这就是错误所在，以及为什么这是我们试图提供帮助的角度。 我们从未见过设备外的错误不支持 webgl 或 pixijs 需要的 webgl 参数

这些示例不起作用（v4 起作用，但 v5 不起作用）并且还会给出相同的错误。 这对我来说似乎很奇怪，我不确定为什么我的浏览器不支持它。

我还检查了我的工作 pixi.js 应用程序，它使用的是 5.0.0-rc.2，这可能是它工作的原因？

再次感谢您的帮助

winterNebs picture winterNebs 于 2019-05-20

v4 将工作，因为它回退到画布渲染器。 在 v5 的正式版本中，除非您使用的是旧包，否则不会。

所以也许你的 gfx 卡支持 webgl 但没有我们需要的模板支持，所以我们拒绝尝试使用它？

themoonrat picture themoonrat 于 2019-05-20

如果是模板，请尝试更新您的图形驱动程序。

然而，如果事实证明 webpack 真的影响了事情，那将是非常有趣的 :)

ivanpopelyshev picture ivanpopelyshev 于 2019-05-20

好吧，这太奇怪了，我的台式机（i7 7700k，gtx 780）不能运行它，但它可以在我的 Surface Book 1、我的 iPhone XS 和我的朋友 macbook pro 2015 上运行。我的 gpu 有点旧，但我没有不认为这是问题。

除非我应该尝试其他任何东西，否则我想我只会使用旧包，因为我想要最大的兼容性（而且我无法真正开发我无法运行的东西）

winterNebs picture winterNebs 于 2019-05-20

重新安装图形驱动程序，版本向前或向后。 GPU 不是问题，但驱动程序的 opengl 部分是。

ivanpopelyshev picture ivanpopelyshev 于 2019-05-20
👎1

等一下，我觉得真的很愚蠢，我认为这是一个 chrome 问题，它在 Microsoft Edge 中有效……尽管我在笔记本电脑和手机上都使用了 chrome，所以这很奇怪。

winterNebs picture winterNebs 于 2019-05-20

浏览器有针对不同硬件的黑名单……有时只是完全禁用 webgl，但有时如果存在已知问题，则将某些硬件/驱动程序版本的某些功能列入黑名单。

themoonrat picture themoonrat 于 2019-05-20

我更新了这个问题的标题（不是 Webpack + PixiJS 问题）并标记为“不会修复”，因为这很可能是硬件/驱动程序问题。

bigtimebuddy picture bigtimebuddy 于 2019-05-20

好的，所以使用 pixi.js-legacy 并将所有内容更改为引用 pixi.js-legacy 仍然会出现相同的错误。

我使用 5.0.0-rc.2 检查了我的工作版本，它_确实_使用 webgl2 工作：
image

但是在我的 webpack 版本上使用 5.0.0-rc.2 给了我这个错误：“Uncaught TypeError: Cannot read property 'performMixins' of undefined”。
image

任何帮助将不胜感激谢谢！

winterNebs picture winterNebs 于 2019-05-20

请不要使用 5.0.0-rc.2。 使用最新版本：5.0.3

bigtimebuddy picture bigtimebuddy 于 2019-05-20

我刚刚尝试了 5.0.3，“未捕获的错误：此浏览器不支持 WebGL，请使用“pixi.js-legacy”作为后备 canvas2d 支持。” 和以前一样。 我有一个使用 PixiJS 5.0.0-rc.2 的正在运行的版本，它说它与 WebGl 2 一起运行，是否有一些新功能添加到 5.0.1+ 中使其不起作用？

winterNebs picture winterNebs 于 2019-05-20

做多一点测试显示了一些潜在的怪异

  1. 边缘
    V5示例确实可以运行，但使用 _WebGL 1？_
    image
    V4示例再次使用 _WebGL 1 运行_
    image
    我的工作游戏 (https://ascension.azurewebsites.net/game.html) 使用 _Webgl 1_ 运行Pixi.js 5.0.0-rc.2
    image
    我的 webpack 游戏使用Pixi.js 5.0.3和 _WebGL 1_ 加载，但无法正常工作
    image
  2. 在 Chrome 上
    V5不起作用
    image
    V4工作，但与 _canvas_
    image
    我的工作游戏使用5.0.0-rc.2和 _webgl 2_ 运行
    image
    我的 webpack 游戏有5.0.3帖子中解释的错误
    image

不确定这是否有帮助，但对我来说似乎很奇怪

winterNebs picture winterNebs 于 2019-05-20

我预测唯一的好方法是创建一个函数，以与 pixi 相同的方式创建上下文（要求“ stencil:true ”并在没有 pixi 的情况下测试它，只是一个普通的 html+js。

然后，您可以在chromium bugtracker 中向chromium 开发人员提供带有规格和演示的报告。

我知道这还有很长的路要走，但是，与 mozilla 相比，它们更快，而且有希望:)

我再问：你有没有尝试更新驱动程序？

ivanpopelyshev picture ivanpopelyshev 于 2019-05-21

我预测唯一的好方法是创建一个函数，以与 pixi 相同的方式创建上下文（要求“ stencil:true ”并在没有 pixi 的情况下测试它，只是一个普通的 html+js。

然后，您可以在chromium bugtracker 中向chromium 开发人员提供带有规格和演示的报告。

我知道这还有很长的路要走，但是，与 mozilla 相比，它们更快，而且有希望:)

我再问：你有没有尝试更新驱动程序？

是的，我确实更新了我的驱动程序，我还在Chrome://flags 中打开了 webGL 2.0 计算。

所以你怀疑这是 Chrome 端的问题？ 我会试试你的建议，看看会发生什么。

巧合的是 gtx 780 和 780ti 在玩“尼尔自动机”游戏时也有崩溃的问题，这可能只是这张卡的驱动程序以某种方式损坏了。

winterNebs picture winterNebs 于 2019-05-21

好的，我写了这个快速测试 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());

似乎无论我尝试什么，我都无法使模板成真。 我在我的电脑和笔记本电脑上都试过这个（笔记本电脑适用于 v5）。 我不确定此时该做什么。

winterNebs picture winterNebs 于 2019-05-21

对 pixi 进行黑客攻击以禁用它，删除默认为 RenderTexture 帧缓冲区创建的模板附件并尽量不使用掩码；)

或者，换一种方式，尝试旧驱动程序:) 顺便说一句，Linux 用户经常遇到这些问题

ivanpopelyshev picture ivanpopelyshev 于 2019-05-21

好的，我正在关闭这个问题。 Pixi.js 似乎可以使用firefox (webgl 2) 正常工作，所以现在我只使用它。 我认为这可能是驱动程序 + chrome 的 _specific_ 组合导致它无法工作。 我已经在旧的 mac 书籍、旧的 windows 7 机器和我的 windows 10 笔记本电脑上尝试了多个示例 v5。 看起来我的电脑是一些奇怪的异常值，如果人们在使用 Firefox、chrome 和 Edge 时遇到这个问题，可能值得重新打开这张票。

感谢所有帮助的家伙！

winterNebs picture winterNebs 于 2019-05-22
👍1

好了不重开。 这是 100% 我的chrome 安装，不知何故搞砸了，切换到测试版频道似乎已经修复了它。
（乱用 chrome://flags 没有帮助，删除所有扩展也没有任何作用）。

winterNebs picture winterNebs 于 2019-05-22

此类问题对于可能在类似环境中遇到相同问题的未来用户非常有用。 感谢您提供如此详细的信息。

bigtimebuddy picture bigtimebuddy 于 2019-05-22
👍1

好了不重开。 这是 100% 我的chrome 安装，不知何故搞砸了，切换到测试版频道似乎已经修复了它。
（乱用 chrome://flags 没有帮助，删除所有扩展也没有任何作用）。

我可以确认这对我也有用，安装 chrome beta 可以很好地运行应用程序。 谢谢。

marwan38 picture marwan38 于 2019-05-25

随机发现：不是chrome beta的错：

由于某种原因，我的硬件加速被禁用。

winterNebs picture winterNebs 于 2019-06-02
👍5

启用硬件加速为我做到了。

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

mariocastanoromeo picture mariocastanoromeo 于 2019-06-04
👍8 🎉3 🚀2

@ivanpopelyshev这可以通过在 WebGL 中使用另一种掩蔽方法来解决吗？ 在此 stackoverflow 线程上还有更多选项和解释

Adamfsk picture Adamfsk 于 2019-07-10

我认为如果我们手动启用它对用户没有帮助。 下面的代码对我有用！
import * as PIXI from 'pixi.js-legacy'

HarishBoke picture HarishBoke 于 2019-09-03

由于我的硬件加速设置被禁用，我在使用 Chrome 时也遇到了这个问题。 我一定已经禁用它一段时间了，因为它应该默认启用。

但我很好奇为什么 Pixi 在这种情况下无法加载，因为它不应该回退到 HTML 5 画布吗？

image

immanuelx2 picture immanuelx2 于 2019-09-09
👍3 👎1

@immanuelx2您张贴截图的文件不是最新的。 画布回退已从 v5.0.0 移至遗留分支 - 请参阅此处的发布公告： https ://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

如果您仍然需要画布回退，请使用 pixi.js-legacy； master 分支不再包含对画布的支持，它“仅”是 WebGL，并且速度更快。

Adamfsk picture Adamfsk 于 2019-09-10
👎1

收到错误后，我在新选项卡中打开我的应用程序时遇到了这个问题： CONTEXT_LOST_WEBGL

关闭 chrome 然后重新启动它为我解决了它

编辑：
我曾尝试按照上述步骤进行复制，但无法这样做

具体：
铬：77.0.3865.90
操作系统：10.14.6
显卡：Radeon Pro Vega 20 4 GB，Intel UHD Graphics 630 1536 MB

RossKinsella picture RossKinsella 于 2019-09-25

所以我遇到了与@winterNebs类似的问题，但对我来说，Chrome 在版本 > 5.0.0-rc.2 上似乎没问题，firefox 告诉我不支持 webgl

g7parsh picture g7parsh 于 2019-10-10

如果其他人有这个问题。 我必须手动启用标志“覆盖软件渲染列表” chrome://flags

具体：
铬：78.0.3904.97
操作系统：10.13.6

goodgecko picture goodgecko 于 2019-11-12
🎉3 👍3

谢谢@goodgecko - 虽然图书馆仍然需要修复； 要求最终用户执行该步骤来解决它是不合理或不可行的。 自动回退需要可靠。

erayd picture erayd 于 2019-11-12
👍3

我在基于 Chromium 79.0.3945.88 的 Brave Browser 1.1.23 的 Linux 和 Windows 上都有这个确切的问题
有趣的是，基于相同 Chromium 构建的普通 Chrome 可以完美运行。
Firefox 71.0 很好，没有任何问题。

@goodgecko提示没有帮助

konchunas picture konchunas 于 2019-12-22
👍1

检查您的 Chrome 设置硬件加速（高级）状态？ 当我在 chrome 上关闭此选项时，出现了同样的问题。
希望这有帮助。

h0ngzhe picture h0ngzhe 于 2020-01-08
👍2

检查您的 Chrome 设置硬件加速（高级）状态？ 当我在 chrome 上关闭此选项时，出现了同样的问题。
希望这有帮助。

这对我有用。 必须开启硬件加速

choopk picture choopk 于 2020-02-17

对我来说更奇怪。 https://get.webgl.org/正在运行。 PIXI v5 示例工作正常，即使是带有遮罩的示例

但是当我尝试打开我的游戏时，它说不支持 WebGL。

Fxlr8 picture Fxlr8 于 2020-03-22

如果其他人有这个问题。 我必须手动启用标志“覆盖软件渲染列表” chrome://flags

具体：
铬：78.0.3904.97
操作系统：10.13.6

这对我有用，谢谢！

othneildrew picture othneildrew 于 2020-03-24

我在使用开源 X.Org X Server Nouveau 驱动程序的 Chrome stable 80.0.+、Ubuntu 18.04 上遇到了同样的问题。 我通过了 WebGL 测试并认为它一定是驱动程序，因此在安装专有驱动程序（Nvidia）后，现在一切正常。

Rock-son picture Rock-son 于 2020-04-02

随机发现：不是chrome beta的错：

由于某种原因，我的硬件加速被禁用。

同样在这里。 我禁用了硬件加速。 我之前禁用了它以在 OBS 中记录浏览器。

Maelfyn picture Maelfyn 于 2020-04-11

Chrome 83 也有同样的问题| macos 10.13.6 | nVidia Geforce 210

PixiJS 示例在 Firefox 中运行良好：
控制台输出

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

但是对于 Chrome，正在回退到 Canvas：
输出控制台

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

@Fxlr8示例工作正常，因为 chrome 回退到 Canvas。 打开 Web 控制台并检查它。

bySabi picture bySabi 于 2020-06-21

它对我有用！
image

hu-qi picture hu-qi 于 2020-07-09

我们可以锁定这个线程吗？ 这里没有什么可贡献的，问题是硬件加速。

如果您仍然有问题，那就是另一个问题了，所以您应该打开一个新线程而不是死掉这个线程。

winterNebs picture winterNebs 于 2020-07-09
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

distinctdan picture distinctdan  ·  3评论
neciszhang picture neciszhang  ·  3评论
softshape picture softshape  ·  3评论
samueller picture samueller  ·  3评论
SebastienFPRousseau picture SebastienFPRousseau  ·  3评论