Pixi.js: "WebGL non pris en charge dans ce navigateur" lors de l'utilisation de Chrome 74 avec GTX 780

Créé le 19 mai 2019 · 43Commentaires · Source: pixijs/pixi.js

J'ai essayé de rechercher l'erreur sur Google, mais il n'y a qu'un seul résultat qui est un site Web chinois qui est un lien mort.

Comportement attendu

Pixi.js se charge et s'exécute sans erreur avec webpack. Il fonctionne correctement lorsque j'avais l'habitude de le regrouper, puis d'utiliser browserify.

Comportement actuel

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

Solution possible

Je ne suis pas très expérimenté dans l'écosystème javascript donc cela pourrait être dû à une mauvaise configuration de webpack 4, toute aide serait grandement appréciée !

Environnement

Typescript 3.4.5, Pixi.js 5.0.2, Webpack 4.31.0

Webpack.config.js, la section Client est la partie du code qui utilise 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
Navigateur & Version : Chrome 74.0.3729.157
Système d' exploitation et version : _par ex. Windows 10

Source

winterNebs

Commentaire le plus utile

L'activation de l'accélération matérielle l'a fait pour moi.

Chrome -> Paramètres (⌘,) -> Avancé -> Système -> activer 1er

mariocastanoromeo le 4 juin 2019

👍8 🎉3 🚀2

Tous les 43 commentaires

Si WebGL n'est pas pris en charge dans ce navigateur, utilisez pixi.js-legacy pour la prise en charge de secours de canvas2d.

C'est un paquet différent dans npm. Votre configuration utilise pixi.js

ivanpopelyshev le 20 mai 2019

Si WebGL n'est pas pris en charge dans ce navigateur, utilisez pixi.js-legacy pour la prise en charge de secours de canvas2d.
C'est un paquet différent dans npm. Votre configuration utilise pixi.js

Mais le navigateur que j'utilise prend clairement en charge WebGL

winterNebs le 20 mai 2019

Les exemples v5 sur https://pixijs.io/examples/ fonctionnent-ils pour vous ? Cette page que vous avez montrée est de base Webgl, oui ou non. Mais lorsque nous créons un contexte webgl, nous le demandons avec quelques paramètres supplémentaires, comme exiger la prise en charge des gabarits.

C'est ce qu'est l'erreur, de toute façon, et c'est pourquoi c'est notre angle d'essayer d'aider. Nous n'avons jamais vu cette erreur en dehors de l'appareil ne prenant pas en charge webgl ou les paramètres webgl requis par pixijs

themoonrat le 20 mai 2019

Les exemples v5 sur https://pixijs.io/examples/ fonctionnent-ils pour vous ? Cette page que vous avez montrée est de base Webgl, oui ou non. Mais lorsque nous créons un contexte webgl, nous le demandons avec quelques paramètres supplémentaires, comme exiger la prise en charge des gabarits.
C'est ce qu'est l'erreur, de toute façon, et c'est pourquoi c'est notre angle d'essayer d'aider. Nous n'avons jamais vu cette erreur en dehors de l'appareil ne prenant pas en charge webgl ou les paramètres webgl requis par pixijs

Ces exemples ne fonctionnent pas (v4, mais pas v5) et donnent également la même erreur. Cela me semble vraiment bizarre, je ne sais pas pourquoi mon navigateur ne le supporte pas.

J'ai également vérifié mon application pixi.js qui fonctionne et elle utilise 5.0.0-rc.2, ce qui explique peut-être pourquoi cela fonctionne?

Merci encore pour votre aide

winterNebs le 20 mai 2019

La v4 fonctionnera car elle revient au rendu canvas. Dans la version officielle de la v5, ce n'est pas le cas, à moins que vous n'utilisiez le package hérité.

Alors peut-être que votre carte gfx prend en charge webgl mais n'a pas quelque chose comme le support de pochoir dont nous avons besoin pour le masquage, donc nous refusons d'essayer de l'utiliser ?

themoonrat le 20 mai 2019

Au cas où s'il s'agit d'un pochoir, essayez de mettre à jour votre pilote graphique.

Cependant, ce sera très amusant s'il s'avère que le webpack affecte vraiment les choses :)

ivanpopelyshev le 20 mai 2019

D'accord, c'est super bizarre, mon ordinateur de bureau (i7 7700k, gtx 780) ne l'exécute pas, mais il fonctionne sur mon Surface Book 1, mon iPhone XS et mes amis macbook pro 2015. Mon gpu est un peu vieux mais je ne l'ai pas fait. Je ne pense pas que ce serait le problème.

À moins que je ne doive essayer autre chose, je suppose que je vais simplement utiliser le package hérité car je veux une compatibilité maximale (et je ne peux pas vraiment développer quelque chose que je ne peux pas exécuter)

winterNebs le 20 mai 2019

Réinstallez le pilote graphique, version antérieure ou antérieure. Le GPU n'est pas un problème, mais la partie opengl du pilote l'est.

ivanpopelyshev le 20 mai 2019

👎1

Attendez une seconde, je me sens vraiment stupide, je pense que c'est un problème de chrome, cela fonctionne dans Microsoft Edge... même si j'utilisais Chrome à la fois sur mon ordinateur portable et mon téléphone, donc c'était bizarre.

winterNebs le 20 mai 2019

Les navigateurs ont une liste noire pour différents matériels... parfois, il s'agit simplement de désactiver complètement webgl, mais parfois de mettre en liste noire certaines fonctionnalités sur certaines versions de matériel/pilote s'il y a des problèmes connus.

themoonrat le 20 mai 2019

J'ai mis à jour le titre de ce problème (pas un problème Webpack + PixiJS) et marqué comme "ne sera pas corrigé" car il semble très probable qu'il s'agisse d'un problème de matériel/pilote.

bigtimebuddy le 20 mai 2019

D'accord, donc utiliser pixi.js-legacy et tout changer pour référencer pixi.js-legacy donne toujours la même erreur.

J'ai vérifié ma version de travail à l'aide de 5.0.0-rc.2 et cela fonctionne avec webgl2 :

Mais l'utilisation de 5.0.0-rc.2 me donne cette erreur : "Uncaught TypeError: Cannot read property 'performMixins' of undefined" sur ma version webpack.

Toute aide serait appréciée Merci!

winterNebs le 20 mai 2019

Veuillez ne pas utiliser 5.0.0-rc.2. Utilisez la dernière version : 5.0.3

bigtimebuddy le 20 mai 2019

Je viens d'essayer la version 5.0.3, "Erreur non détectée : WebGL non pris en charge dans ce navigateur, utilisez "pixi.js-legacy" pour la prise en charge de canvas2d de secours." comme avant. J'ai une version en cours d'exécution utilisant PixiJS 5.0.0-rc.2 qui dit qu'elle fonctionne avec WebGl 2, y a-t-il de nouvelles fonctionnalités ajoutées à 5.0.1+ qui le feraient ne pas fonctionner ?

winterNebs le 20 mai 2019

Faire un peu plus de tests montre une certaine étrangeté potentielle

Sur le bord
Les exemples

Exemples V4 exécutés avec _WebGL 1 à nouveau_

Mon jeu de travail (https://ascension.azurewebsites.net/game.html) exécute Pixi.js 5.0.0-rc.2 fonctionne avec _Webgl 1_

Mon jeu webpack se charge avec Pixi.js 5.0.3 avec _WebGL 1_ mais ne fonctionne pas correctement
Sur Chrome
V5 ne fonctionne pas

V4 fonctionne mais avec _canvas_

Mon jeu de travail fonctionne avec 5.0.0-rc.2 avec _webgl 2_

Mon jeu webpack a l'erreur comme expliqué dans le post avec 5.0.3

Je ne sais pas si cela aide du tout, mais cela me semble bizarre

winterNebs le 20 mai 2019

Je prédis que le seul bon moyen est de créer une fonction qui crée le contexte de la même manière que pixi (demande " stencil:true " et teste-la sans pixi, juste un simple html+js.

Ensuite, vous pouvez donner votre rapport avec les spécifications et la démo aux développeurs de chrome dans Chromium bugtracker.

Je comprends que c'est un très long chemin, mais, comparé à mozilla, ils sont plus rapides et il y a un espoir :)

Je demande à nouveau : avez-vous essayé de mettre à jour le pilote ?

ivanpopelyshev le 21 mai 2019

Je prédis que le seul bon moyen est de créer une fonction qui crée le contexte de la même manière que pixi (demande " stencil:true " et teste-la sans pixi, juste un simple html+js.
Ensuite, vous pouvez donner votre rapport avec les spécifications et la démo aux développeurs de chrome dans Chromium bugtracker.
Je comprends que c'est un très long chemin, mais, comparé à mozilla, ils sont plus rapides et il y a un espoir :)
Je demande à nouveau : avez-vous essayé de mettre à jour le pilote ?

Oui, j'ai mis à jour mes pilotes, j'ai également activé le calcul webGL 2.0 dans Chrome://flags .

Vous pensez donc qu'il s'agit d'un problème du côté de Chrome ? Je vais essayer votre suggestion et voir ce qui se passe.

Par coïncidence, les gtx 780 et 780ti ont également eu des problèmes de plantage en jouant au jeu "Nier Automata", il se peut que les pilotes de cette carte soient cassés d'une manière ou d'une autre.

winterNebs le 21 mai 2019

D'accord, j'ai écrit ce test javascript rapide :

    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());

Et il semble que peu importe ce que j'essaie, je ne peux pas faire en sorte que le pochoir soit vrai. J'ai essayé cela à la fois sur mon PC et mon ordinateur portable (l'ordinateur portable fonctionne avec la v5). Je ne sais pas quoi faire à ce stade.

winterNebs le 21 mai 2019

Faites un hack à pixi qui le désactive, supprimez la pièce jointe du pochoir qui est créée par défaut pour les framebuffers RenderTexture et essayez de ne pas utiliser de masques ;)

Alternativement, allez dans l'autre sens, essayez les anciens pilotes :) Les utilisateurs de Linux Btw ont fréquemment ce genre de problèmes

ivanpopelyshev le 21 mai 2019

Bon je clos ce sujet. Pixi.js semble fonctionner correctement avec firefox (webgl 2), donc pour l'instant je vais juste l'utiliser. Je pense que cela pourrait être une combinaison _spécifique_ de pilotes + chrome l'empêchant de fonctionner. J'ai essayé plusieurs exemples v5 sur des machines allant de vieux livres mac, de vieilles machines Windows 7 et mon ordinateur portable Windows 10. Il semble que mon ordinateur soit une valeur aberrante étrange, si les gens rencontrent ce problème avec firefox, chrome et edge, cela pourrait valoir la peine de rouvrir ce ticket.

Merci pour votre aide, vous tous!

winterNebs le 22 mai 2019

👍1

Bon pas de réouverture. C'était à 100% mon installation de chrome, quelque chose l'a gâché, le passage au canal bêta semblait l'avoir corrigé.
(Désembler avec chrome://flags n'a pas aidé, et la suppression de toutes les extensions n'a rien fait non plus).

winterNebs le 22 mai 2019

Ce type de problème est très utile pour les futurs utilisateurs qui pourraient rencontrer le même problème dans un environnement similaire. Merci d'avoir fourni autant de détails.

bigtimebuddy le 22 mai 2019

👍1

Bon pas de réouverture. C'était à 100% mon installation de chrome, quelque chose l'a gâché, le passage au canal bêta semblait l'avoir corrigé.
(Désembler avec chrome://flags n'a pas aidé, et la suppression de toutes les extensions n'a rien fait non plus).

Je peux confirmer que cela a également fonctionné pour moi, l'installation de la version bêta de chrome a bien exécuté l'application. Merci.

marwan38 le 25 mai 2019

Découverte aléatoire : ce n'est pas la faute de Chrome beta :

Pour une raison quelconque, mon accélération matérielle a été désactivée.

winterNebs le 2 juin 2019

👍5

L'activation de l'accélération matérielle l'a fait pour moi.

Chrome -> Paramètres (⌘,) -> Avancé -> Système -> activer 1er

mariocastanoromeo le 4 juin 2019

👍8 🎉3 🚀2

@ivanpopelyshev Cela pourrait-il être résolu en utilisant une méthode alternative de masquage dans WebGL ? Il y a quelques autres options avec des explications sur ce thread stackoverflow

Adamfsk le 10 juil. 2019

Je pense que si nous l'activons manuellement, cela n'aidera pas l'utilisateur. Le code ci-dessous a fonctionné pour moi!
import * as PIXI from 'pixi.js-legacy'

HarishBoke le 3 sept. 2019

J'ai également rencontré ce problème avec Chrome en raison de la désactivation de mon paramètre d'accélération matérielle. J'ai dû le désactiver il y a quelque temps car il est censé être activé par défaut.

Mais je suis curieux de savoir pourquoi le Pixi ne se charge pas dans ce cas, car ne devrait-il pas revenir au canevas HTML 5 ?

immanuelx2 le 9 sept. 2019

👍3 👎1

@immanuelx2 Le document dont vous avez posté une capture d'écran n'est pas à jour. Le canevas de secours a été déplacé vers la branche héritée de la v5.0.0 - Voir l'annonce de sortie ici : https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

Utilisez pixi.js-legacy si vous avez toujours besoin d'un canevas de secours ; la branche master ne contient plus de support pour canvas, c'est WebGL "seulement", et plus rapide pour cela.

Adamfsk le 10 sept. 2019

👎1

J'ai rencontré ce problème en ouvrant mon application dans un nouvel onglet après avoir obtenu l'erreur : CONTEXT_LOST_WEBGL

La fermeture de chrome puis son redémarrage l'ont résolu pour moi

ÉDITER:
J'ai essayé de reproduire selon mes étapes ci-dessus mais je n'ai pas pu le faire

détails:
chromé : 77.0.3865.90
osx : 10.14.6
graphiques : Radeon Pro Vega 20 4 Go, Intel UHD Graphics 630 1536 Mo

RossKinsella le 25 sept. 2019

J'ai donc un problème similaire à

g7parsh le 10 oct. 2019

Au cas où quelqu'un d'autre aurait ce problème. J'ai dû activer manuellement le drapeau " Remplacer la liste de rendu du logiciel " chrome://flags

détails:
chromé : 78.0.3904.97
osx : 10.13.6

goodgecko le 12 nov. 2019

🎉3 👍3

Merci @goodgecko - bien que la bibliothèque ait encore besoin d'être

erayd le 12 nov. 2019

👍3

J'ai exactement ce problème sur Linux et Windows dans Brave Browser 1.1.23 basé sur Chromium 79.0.3945.88
Ce qui est intéressant, c'est que Chrome habituel basé sur la même version de Chromium fonctionne parfaitement.
Firefox 71.0 est correct sans aucun problème.

L' astuce de

konchunas le 22 déc. 2019

👍1

Vérifier l'état de l'accélération matérielle (avancée) de vos paramètres Chrome ? Le même problème est apparu lorsque je ferme ces options sur Chrome.
Souhaitez que cela aide.

h0ngzhe le 8 janv. 2020

👍2

Vérifier l'état de l'accélération matérielle (avancée) de vos paramètres Chrome ? Le même problème est apparu lorsque je ferme ces options sur Chrome.
Souhaitez que cela aide.

Cela a fonctionné pour moi. J'ai dû activer l'accélération matérielle

choopk le 17 févr. 2020

Encore plus bizarre pour moi. Le https://get.webgl.org/ fonctionne. Les exemples PIXI v5 fonctionnent bien, même celui avec des masques

Mais lorsque j'essaie d'ouvrir mon jeu, il me dit que WebGL n'est pas pris en charge.

Fxlr8 le 22 mars 2020

Au cas où quelqu'un d'autre aurait ce problème. J'ai dû activer manuellement le drapeau " Remplacer la liste de rendu du logiciel " chrome://flags
détails:
chromé : 78.0.3904.97
osx : 10.13.6

Cela a fonctionné pour moi, merci!

othneildrew le 24 mars 2020

J'ai eu le même problème sur Chrome stable 80.0.+, Ubuntu 18.04 en utilisant le pilote open source X.Org X Server Nouveau. J'ai réussi le test WebGL et j'ai pensé que ce devait être le pilote, donc après avoir installé un pilote propriétaire (Nvidia), tout fonctionne bien maintenant.

Rock-son le 2 avr. 2020

Découverte aléatoire : ce n'est pas la faute de Chrome beta :
Pour une raison quelconque, mon accélération matérielle a été désactivée.

Pareil ici. J'avais désactivé l'accélération matérielle. Je l'avais précédemment désactivé pour enregistrer le navigateur dans OBS.

Maelfyn le 11 avr. 2020

Même problème ici avec Chrome 83 | macos 10.13.6 | nVidia Geforce 210

Les exemples PixiJS fonctionnent correctement avec Firefox :
sortie console

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

mais avec Chrome, on revient à Canvas :
console de sortie

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

Les exemples

bySabi le 21 juin 2020

ça a marché pour moi !

hu-qi le 9 juil. 2020

Pouvons-nous verrouiller ce fil? Il n'y a rien de plus à contribuer ici, le problème était l'accélération matérielle.

Si vous avez toujours un problème, c'est un problème différent, vous devriez donc ouvrir un nouveau fil au lieu de nécroiser celui-ci.

winterNebs le 9 juil. 2020

Cette page vous a été utile?

0 / 5 - 0 notes

Questions connexes

Centrer la scène sur un objet particulier

Darker · 3Commentaires

Minutage de l'animation MovieClip => fps

Makio64 · 3Commentaires

Quand la largeur et la hauteur d'un Sprite deviennent-elles valides ?

samueller · 3Commentaires

Beaucoup de conteneurs de particules à l'écran créent une explosion psychédélique impressionnante

distinctdan · 3Commentaires

Contexte WebGL restauré de manière incorrecte (pixi v5)

YuryKuvetski · 3Commentaires