Pixi.js: Chrome 74 w / GTX780を使用する場合の「このブラウザではWebGLはサポートされていません」

このブラウザでWebGLがサポートされていない場合pixi.js-legacy 、フォールバックcanvas2dのサポートに

これはnpmの別のバンドルです。 構成ではpixi.js使用します

このブラウザでWebGLがサポートされていない場合pixi.js-legacy 、フォールバックcanvas2dのサポートに

これはnpmの別のバンドルです。 構成ではpixi.js使用します

しかし、私が使用しているブラウザは明らかにWebGLをサポートしています

https://pixijs.io/examples/にあるv5の例は役に立ちますか？ あなたが示したそのページは基本的なwebglであり、はいまたはいいえです。 ただし、webglコンテキストを作成するときは、ステンシルのサポートを要求するなど、いくつかの追加パラメーターを使用して要求します。

とにかく、それがエラーです。それが私たちの助けようとする角度です。 webglまたはpixijsが必要とするwebglパラメータをサポートしていないデバイスの外部でエラーが発生するのを見たことがありません

https://pixijs.io/examples/にあるv5の例は役に立ちますか？ あなたが示したそのページは基本的なwebglであり、はいまたはいいえです。 ただし、webglコンテキストを作成するときは、ステンシルのサポートを要求するなど、いくつかの追加パラメーターを使用して要求します。

とにかく、それがエラーです。それが私たちの助けようとする角度です。 webglまたはpixijsが必要とするwebglパラメータをサポートしていないデバイスの外部でエラーが発生するのを見たことがありません

これらの例は機能せず（v4は機能しますが、v5は機能しません）、同じエラーが発生します。 それは私には本当に奇妙に思えます、なぜ私のブラウザがそれをサポートしていないのかわかりません。

動作しているpixi.jsアプリも確認しましたが、5.0.0-rc.2を使用しています。これが、動作する理由かもしれません。

助けてくれてありがとう

v4は、キャンバスレンダラーにフォールバックしているため機能します。 v5の公式リリースでは、レガシーパッケージを使用していない限りそうではありません。

それで、おそらくあなたのgfxカードはwebglをサポートしていますが、マスキングに必要なステンシルサポートのようなものを持っていないので、それを使用しようとすることを拒否しますか？

ステンシルの場合は、グラフィックドライバを更新してみてください。

しかし、webpackが本当に物事に影響を与えることが判明した場合は非常に面白いでしょう:)

さて、これは非常に奇妙です。私のデスクトップ（i7 7700k、gtx 780）はそれを実行しませんが、Surface Book 1、iPhone XS、および友人のmacbook pro 2015では機能します。私のgpuは少し古いですが、私はしませんでした。それが問題になると思います。

他に試すべきことがない限り、最大限の互換性が必要なため、レガシーパッケージを使用するだけだと思います（また、実行できないものを実際に開発することはできません）

グラフィックドライバを再インストールし、バージョンを順方向または逆方向にします。 GPUは問題ではありませんが、ドライバーのopengl部分は問題です。

ちょっと待ってください、私は本当にばかげていると感じます、それはクロームの問題だと思います、それはマイクロソフトエッジで動作します...私はラップトップと電話の両方でクロームを使用していたのでそれは奇妙でした。

ブラウザには、さまざまなハードウェアのブラックリストがあります... WebGLを完全に無効にする場合もありますが、既知の問題がある場合は、特定のハードウェア/ドライババージョンの特定の機能をブラックリストに登録する場合もあります。

この問題のタイトル（Webpack + PixiJSの問題ではない）を更新し、「修正しない」とマークしました。これは、ハードウェア/ドライバーの問題である可能性が非常に高いためです。

さて、pixi.js-legacyを使用し、すべてを変更してpixi.js-legacyを参照すると、同じエラーが発生します。

5.0.0-rc.2を使用して動作バージョンを確認しましたが、webgl2を使用して動作します。

しかし、5.0.0-rc.2を使用すると、次のエラーが発生します：「UncaughtTypeError：Undefinedのプロパティ 'performMixins'を読み取れません」私のwebpackバージョンでは。

どんな助けでもありがたいです！

5.0.0-rc.2は使用しないでください。 最新リリースを使用する：5.0.3

5.0.3「キャッチされないエラー：このブラウザではWebGLがサポートされていません。フォールバックcanvas2dのサポートには「pixi.js-legacy」を使用してください。」を試しました。 従来通り。 PixiJS 5.0.0-rc.2を使用してWebGl 2で実行されているバージョンを実行していますが、5.0.1 +に追加された、機能しない新機能はありますか？

もう少しテストを行うと、潜在的な奇妙さが示されます

1. 端に
   V5の例は実行されますが、_WebGL 1？_を使用します。
   
   V4の例は_WebGL1で再び実行されます_
   
   私の作業中のゲーム（https://ascension.azurewebsites.net/game.html）はPixi.js5.0.0を実行します-rc.2は
   
   私のwebpackゲームはPixi.js5.0.3と_WebGL1_で読み込まれますが、正しく機能しません
   
2. Chromeの場合
   V5が機能しない
   
   V4は動作しますが、_canvas_で動作します
   
   私の作業中のゲームは5.0.0-rc.2と_webgl2_で実行されます
   
   私のwebpackゲームには、 5.0.3の投稿で説明されているエラーがあります
   

これがまったく役立つかどうかはわかりませんが、私には奇妙に思えます

唯一の良い方法は、pixiと同じようにコンテキストを作成する関数を作成することだと予測しています（「 stencil：true 」を要求し、pixiを使用せずに、単なるhtml + jsでテストします。

次に、仕様とデモを含むレポートを、クロムバグトラッカーのクロム開発者に提供できます。

私はそれが非常に長い道のりであることを理解していますが、Mozillaと比較して、それらはより速く、希望があります:)

もう一度質問します。ドライバーを更新しようとしましたか？

唯一の良い方法は、pixiと同じようにコンテキストを作成する関数を作成することだと予測しています（「 stencil：true 」を要求し、pixiを使用せずに、単なるhtml + jsでテストします。

次に、仕様とデモを含むレポートを、クロムバグトラッカーのクロム開発者に提供できます。

私はそれが非常に長い道のりであることを理解していますが、Mozillaと比較して、それらはより速く、希望があります:)

もう一度質問します。ドライバーを更新しようとしましたか？

はい、ドライバーを更新しました。Chrome ：// flagsでもwebGL2.0コンピューティングをオンにしました。

それで、それはChrome側の問題だと思いますか？ 私はあなたの提案を試してみて、何が起こるか見ていきます。

偶然にも、ゲーム「Nier Automata」のプレイ中に、gtx 780と780tiでクラッシュの問題が発生しました。これは、このカードのドライバーが何らかの形で壊れている可能性があります。

さて、私はこのクイックテスト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());

そして、私が何をしようとしても、ステンシルを真実にすることはできないようです。 私は自分のPCとラップトップの両方でこれを試しました（ラップトップはv5で動作します）。 この時点で何をするのかわかりません。

pixiをハックして無効にし、RenderTextureフレームバッファ用にデフォルトで作成されたステンシルアタッチメントを削除し、マスクを使用しないようにします;）

または、逆に、古いドライバを試してください:)ところで、Linuxユーザーはこの種の問題を頻繁に抱えています

さて、この問題を閉じます。 Pixi.jsはfirefox （webgl 2）を使用して正しく機能しているように見えるので、今のところはそれを使用します。 ドライバーとクロームの_特定の_組み合わせが原因で動作しない可能性があると思います。 私は、古いMacブック、古いWindows 7マシン、Windows 10ラップトップなど、さまざまなマシンでv5の例を複数試してみました。 私のPCは奇妙な外れ値のようです。Firefox、Chrome、Edgeでこの問題が発生した場合は、このチケットを再度開く価値があるかもしれません。

すべての助けてくれてありがとう！

再開しないでください。 それは100％私のクロームインストールでしたました、ベータチャンネルへの切り替えはそれを修正したようでした。
（chrome：// flagsをいじっても役に立たず、すべての拡張機能を削除しても何も起こりませんでした）。

このタイプの問題は、同様の環境で同じ問題が発生する可能性がある将来のユーザーにとって非常に役立ちます。 たくさんの詳細を提供してくれてありがとう。

再開しないでください。 それは100％私のクロームインストールでしたました、ベータチャンネルへの切り替えはそれを修正したようでした。
（chrome：// flagsをいじっても役に立たず、すべての拡張機能を削除しても何も起こりませんでした）。

これが私にもうまくいったことを確認できます。Chromeベータ版をインストールすると、アプリは正常に実行されました。 ありがとう。

ランダムな発見：それはクロームベータのせいではありません：

何らかの理由で、ハードウェアアクセラが無効になりました。

ハードウェアアクセラレーションを有効にすることで、私はそれを実現しました。

Chrome->設定（⌘、）->詳細設定->システム-> 1番目を有効にする

@ivanpopelyshevこれは、WebGLでマスキングするための代替方法を使用して解決できますか？ このstackoverflowスレッドの説明付きのオプションがさらにいくつかあり

手動で有効にしてもユーザーの役に立たないと思います。 以下のコードは私のために働いた！
import * as PIXI from 'pixi.js-legacy'

ハードウェアアクセラレーション設定が無効になっているため、Chromeを使用してもこの問題が発生しました。 デフォルトで有効になっているはずなので、しばらく前に無効にしたに違いありません。

しかし、この場合、Pixiがロードに失敗する理由に興味があります。これは、HTML5キャンバスにフォールバックするべきではないためです。

@ immanuelx2スクリーンショットを投稿したドキュメントは最新ではありません。 キャンバスのフォールバックはv5.0.0からレガシーブランチに移動されました-ここでリリースの発表を参照してください：

それでもキャンバスのフォールバックが必要な場合は、pixi.js-legacyを使用してください。 マスターブランチにはcanvasのサポートが含まれなくなり、WebGL「のみ」であり、より高速になります。

エラーが発生した後、新しいタブでアプリケーションを開くと、この問題が発生しました： CONTEXT_LOST_WEBGL

Chromeを閉じてから再起動すると、問題が解決しました

編集：
上記の手順に従って複製を試みましたが、再現できませんでした

詳細：
クローム：77.0.3865.90
osx：10.14.6
グラフィック：Radeon Pro Vega 20 4 GB、IntelUHDグラフィック6301536 MB

だから私は@winterNebsと同様の問題を抱えてい

他の誰かがこの問題を抱えている場合に備えて。 フラグ「オーバーライドソフトウェアレンダリングリスト」を手動で有効にする必要がありましたchrome：// flags

詳細：
クローム：78.0.3904.97
osx：10.13.6

@goodgeckoに感謝し

Chromium79.0.3945.88に基づくBraveBrowser 1.1.23のLinuxとWindowsの両方で、この正確な問題が発生します。
同じChromiumビルドに基づく通常のChromeが完全に機能するのは興味深いことです。
Firefox 71.0は、問題なく問題なく動作します。

@goodgeckoのヒントは役に立ちませんでした

Chrome設定のハードウェアアクセラレーション（高度）状態を確認しますか？ Chromeでこのオプションを閉じると、同じ問題が発生しました。
これがお役に立てば幸いです。

Chrome設定のハードウェアアクセラレーション（高度）状態を確認しますか？ Chromeでこのオプションを閉じると、同じ問題が発生しました。
これがお役に立てば幸いです。

これは私のために働いた。 ハードウェアアクセラレーションをオンにする必要がありました

私にとってはさらに奇妙です。 https://get.webgl.org/が機能しています。 PIXI v5の例は、マスクを使用している場合します

しかし、ゲームを開こうとすると、WebGLがサポートされていないと表示されます。

他の誰かがこの問題を抱えている場合に備えて。 フラグ「オーバーライドソフトウェアレンダリングリスト」を手動で有効にする必要がありましたchrome：// flags

詳細：
クローム：78.0.3904.97
osx：10.13.6

これは私のために働いた、ありがとう！

オープンソースのX.OrgX Server Nouveauドライバーを使用しているChrome安定版80.0。+、Ubuntu18.04でも同じ問題が発生しました。 私はWebGLテストに合格し、それがドライバーである必要があると考えたので、独自のテスト（Nvidia）をインストールした後、すべてが正常に機能するようになりました。

ランダムな発見：それはクロームベータのせいではありません：

何らかの理由で、ハードウェアアクセラが無効になりました。

こっちも一緒。 ハードウェアアクセラレーションを無効にしました。 以前、OBSでブラウザを録画するために無効にしました。

Chrome83でも同じ問題が発生します| 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の例は、 際に正常に機能しています。 Webコンソールを開いて確認します。

それは私のために働いた！

このスレッドをロックできますか？ ここで貢献することはこれ以上ありません。問題はハードウェアアクセラレーションでした。

それでも問題が解決しない場合は、別の問題なので、このスレッドを壊すのではなく、新しいスレッドを開く必要があります。