Pixi.js: "WebGL não suportado neste navegador" ao usar Chrome 74 com GTX 780

Criado em 19 mai. 2019 · 43Comentários · Fonte: pixijs/pixi.js

Eu tentei pesquisar o erro no Google, mas ele veio com apenas 1 resultado que é um site chinês que é um link morto.

Comportamento esperado

Pixi.js carrega e executa sem erros com webpack. Ele funciona corretamente quando eu costumava empacotá-lo e usar o browserify.

Comportamento Atual

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

Solução possível

Não tenho muita experiência no ecossistema javascript, então isso pode ser devido a uma configuração ruim do webpack 4, qualquer ajuda seria muito apreciada!

Ambiente

Typescript 3.4.5, Pixi.js 5.0.2, Webpack 4.31.0

Webpack.config.js, a seção Client é a parte do código que usa 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 versão : 5.0.2
Navegador e versão : Chrome 74.0.3729.157
SO e versão : _e.g. Windows 10

Fonte

winterNebs

Comentários muito úteis

Ativar a aceleração de hardware fez isso por mim.

Chrome -> Configurações (⌘,) -> Avançado -> Sistema -> habilitar primeiro

mariocastanoromeo em 4 jun. 2019

👍8 🎉3 🚀2

Todos 43 comentários

Se WebGL não for compatível com este navegador, use pixi.js-legacy para suporte de fallback canvas2d.

Esse pacote é diferente em npm. Sua configuração usa pixi.js

ivanpopelyshev em 20 mai. 2019

Se WebGL não for compatível com este navegador, use pixi.js-legacy para suporte de fallback canvas2d.
Esse pacote é diferente em npm. Sua configuração usa pixi.js

Mas o navegador que estou usando claramente suporta WebGL

winterNebs em 20 mai. 2019

Os exemplos da v5 em https://pixijs.io/examples/ funcionam para você? Essa página que você mostrou é webgl básico, sim ou não. Mas quando criamos um contexto webgl, nós o solicitamos com alguns parâmetros extras, como requerer suporte a estêncil.

Esse é o erro, de qualquer maneira, e por que esse é o nosso ângulo de tentar ajudar. Nunca vimos esse erro fora do dispositivo sem suporte para webgl ou os parâmetros webgl que o pixijs requer

themoonrat em 20 mai. 2019

Os exemplos da v5 em https://pixijs.io/examples/ funcionam para você? Essa página que você mostrou é webgl básico, sim ou não. Mas quando criamos um contexto webgl, nós o solicitamos com alguns parâmetros extras, como requerer suporte a estêncil.
Esse é o erro, de qualquer maneira, e por que esse é o nosso ângulo de tentar ajudar. Nunca vimos esse erro fora do dispositivo sem suporte para webgl ou os parâmetros webgl que o pixijs requer

Esses exemplos não funcionam (v4 funciona, mas não v5) e também apresentam o mesmo erro. Isso me parece muito estranho, não sei por que meu navegador não oferece suporte para isso.

Eu também verifiquei meu aplicativo pixi.js funcionando e ele está usando o 5.0.0-rc.2, que pode ser o motivo pelo qual funciona?

Obrigado novamente pela ajuda

winterNebs em 20 mai. 2019

A v4 funcionará porque está voltando para o renderizador de tela. No lançamento oficial da v5 não, a menos que você esteja usando o pacote legado.

Então, talvez seu cartão gfx suporte webgl, mas não tenha algo como suporte de estêncil que precisamos para mascarar, então rejeitamos tentar usá-lo?

themoonrat em 20 mai. 2019

Apenas no caso de ser estêncil, tente atualizar seu driver gráfico.

No entanto, será muito engraçado se descobrir que o webpack realmente afeta as coisas :)

ivanpopelyshev em 20 mai. 2019

Ok, isso é muito estranho, meu desktop (i7 7700k, gtx 780) não funciona, mas funciona no meu livro de superfície 1, no meu iPhone XS e nos meus amigos macbook pro 2015. Meu gpu é meio velho, mas eu não Acho que esse seria o problema.

A menos que haja algo mais que eu deva tentar, acho que vou apenas usar o pacote legado, pois quero o máximo de compatibilidade (e também não posso desenvolver algo que não posso executar)

winterNebs em 20 mai. 2019

Reinstale o driver gráfico, versão para frente ou para trás. GPU não é um problema, mas parte aberta do driver é.

ivanpopelyshev em 20 mai. 2019

👎1

Espere um segundo, me sinto muito idiota, acho que é um problema de cromo, funciona no Microsoft Edge ... embora eu estivesse usando cromo no meu laptop e no telefone, então foi estranho.

winterNebs em 20 mai. 2019

Os navegadores têm uma lista negra para hardware diferente ... às vezes é apenas para desabilitar o webgl completamente, mas às vezes é para proibir certos recursos em certas versões de hardware / driver se houver problemas conhecidos.

themoonrat em 20 mai. 2019

Atualizei o título deste problema (não é um problema do Webpack + PixiJS) e marquei como "Não corrige", pois parece muito provável que seja um problema de hardware / driver.

bigtimebuddy em 20 mai. 2019

Ok, então usar pixi.js-legacy e mudar tudo para fazer referência a pixi.js-legacy ainda dá o mesmo erro.

Eu verifiquei minha versão de trabalho usando 5.0.0-rc.2 e _funciona_ usando webgl2:

Mas usar 5.0.0-rc.2 me dá este erro: "Uncaught TypeError: Não é possível ler a propriedade 'performMixins' de undefined" na minha versão do webpack.

Qualquer ajuda seria apreciada, obrigado!

winterNebs em 20 mai. 2019

Não use 5.0.0-rc.2. Use a versão mais recente: 5.0.3

bigtimebuddy em 20 mai. 2019

Eu tentei apenas 5.0.3, "Erro não detectado: WebGL não suportado neste navegador, use" pixi.js-legacy "para suporte a canvas2d de fallback." como antes. Eu tenho uma versão em execução usando PixiJS 5.0.0-rc.2 que diz que está em execução com WebGl 2, há algum novo recurso adicionado ao 5.0.1+ que faria com que ele não funcionasse?

winterNebs em 20 mai. 2019

Fazer mais alguns testes mostra alguma estranheza potencial

No limite
Os exemplos

Exemplos V4 executados com _WebGL 1 again_

Meu jogo de trabalho (https://ascension.azurewebsites.net/game.html) roda Pixi.js 5.0.0-rc.2 roda com _Webgl 1_

Meu jogo webpack carrega com Pixi.js 5.0.3 com _WebGL 1_, mas não funciona corretamente
No Chrome
V5 não funciona

V4 funciona, mas com _canvas_

Meu jogo de trabalho roda com 5.0.0-rc.2 com _webgl 2_

Meu jogo webpack apresenta o erro conforme explicado na postagem com 5.0.3

Não tenho certeza se isso ajuda em tudo, mas parece estranho para mim

winterNebs em 20 mai. 2019

Prevejo que a única boa maneira é fazer uma função que crie o contexto da mesma forma que o pixi (pede " stencil: true " e testa-o sem pixi, apenas um html + js simples.

Então você pode dar seu relatório com especificações e demonstração para os desenvolvedores de cromo no bugtracker de cromo.

Eu entendo que é um caminho muito longo, mas, em comparação com o Mozilla, eles são mais rápidos e há uma esperança :)

Pergunto novamente: você tentou atualizar o driver?

ivanpopelyshev em 21 mai. 2019

Prevejo que a única boa maneira é fazer uma função que crie o contexto da mesma forma que o pixi (pede " stencil: true " e testa-o sem pixi, apenas um html + js simples.
Então você pode dar seu relatório com especificações e demonstração para os desenvolvedores de cromo no bugtracker de cromo.
Eu entendo que é um caminho muito longo, mas, em comparação com o Mozilla, eles são mais rápidos e há uma esperança :)
Pergunto novamente: você tentou atualizar o driver?

Sim, eu atualizei meus drivers, também ativei o webGL 2.0 compute no Chrome: // flags .

Então você suspeita que seja um problema no lado do Chrome? Vou tentar sua sugestão e ver o que acontece.

Coincidentemente, o gtx 780 e o 780ti também tiveram problemas para travar durante o jogo "Nier Automata", pode ser que os drivers desta placa estejam corrompidos de alguma forma.

winterNebs em 21 mai. 2019

Ok, eu escrevi este javascript de teste rápido:

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

E parece que não importa o que eu tente, não consigo fazer com que o estêncil seja verdadeiro. Tentei fazer isso no meu pc e laptop (laptop funciona com v5). Não tenho certeza do que fazer neste momento.

winterNebs em 21 mai. 2019

Faça um hack para o pixi que o desabilite, remova o anexo de estêncil que é criado por padrão para os framebuffers RenderTexture e tente não usar máscaras;)

Alternativamente, vá por outro caminho, experimente drivers ANTIGOS :) A propósito, os usuários de linux têm esse tipo de problema com frequência

ivanpopelyshev em 21 mai. 2019

Ok, estou encerrando este problema. Pixi.js parece funcionar corretamente usando o firefox (webgl 2), então, por enquanto, vou apenas usá-lo. Eu acho que pode ser uma combinação _específica_ de drivers + cromo fazendo com que ele não funcione. Eu tentei vários exemplos v5 em máquinas que variam de antigos mac books, velhas máquinas com Windows 7 e meu laptop com Windows 10. Apenas parece que meu pc é um outlier estranho, se as pessoas se depararem com esse problema com o firefox, chrome e edge, pode valer a pena reabrir este tíquete.

Obrigado por toda a ajuda pessoal!

winterNebs em 22 mai. 2019

👍1

Ok, não reabrindo. Foi 100% minha instalação do Chrome, algo de alguma forma bagunçou tudo, mudar para o canal beta parecia ter corrigido.
(Brincar com chrome: // flags não ajudou e remover todas as extensões também não ajudou).

winterNebs em 22 mai. 2019

Esse tipo de problema é muito útil para futuros usuários que podem estar enfrentando o mesmo problema em um ambiente semelhante. Obrigado por fornecer tantos detalhes.

bigtimebuddy em 22 mai. 2019

👍1

Ok, não reabrindo. Foi 100% minha instalação do Chrome, algo de alguma forma bagunçou tudo, mudar para o canal beta parecia ter corrigido.
(Brincar com chrome: // flags não ajudou e remover todas as extensões também não ajudou).

Posso confirmar que isso funcionou para mim também. A instalação do Chrome beta executou o aplicativo corretamente. Obrigado.

marwan38 em 25 mai. 2019

Descoberta aleatória: não é culpa do Chrome Beta:

Por algum motivo, minha aceleração de hardware foi desativada.

winterNebs em 2 jun. 2019

👍5

Ativar a aceleração de hardware fez isso por mim.

Chrome -> Configurações (⌘,) -> Avançado -> Sistema -> habilitar primeiro

mariocastanoromeo em 4 jun. 2019

👍8 🎉3 🚀2

@ivanpopelyshev Isso poderia ser resolvido usando um método alternativo para mascarar em WebGL? Há mais algumas opções com explicações sobre este thread stackoverflow

Adamfsk em 10 jul. 2019

Acho que se habilitarmos manualmente não ajudará o usuário. O código abaixo funcionou para mim!
import * as PIXI from 'pixi.js-legacy'

HarishBoke em 3 set. 2019

Também encontrei esse problema usando o Chrome devido à minha configuração de aceleração de hardware estar desabilitada. Devo ter desativado há algum tempo, porque deveria estar ativado por padrão.

Mas estou curioso para saber por que o Pixi não carrega neste caso, porque não deveria estar voltando para a tela do HTML 5?

immanuelx2 em 9 set. 2019

👍3 👎1

@ immanuelx2 O documento do qual você postou uma captura de tela não está atualizado. O fallback da tela foi movido para o branch legado da v5.0.0 - Veja o anúncio de lançamento aqui: https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

Use pixi.js-legacy se ainda precisar de um fallback de canvas; o branch master não contém mais suporte para canvas, é WebGL “apenas” e mais rápido para ele.

Adamfsk em 10 set. 2019

👎1

Encontrei este problema ao abrir meu aplicativo em uma nova guia depois de receber o erro: CONTEXT_LOST_WEBGL

Fechar o Chrome e reiniciá-lo resolveu para mim

EDITAR:
Eu tentei reproduzir conforme minhas etapas acima, mas não consegui

especificidades:
cromo: 77.0.3865.90
osx: 10.14.6
gráficos: Radeon Pro Vega 20 4 GB, Intel UHD Graphics 630 1536 MB

RossKinsella em 25 set. 2019

Estou tendo um problema semelhante ao @winterNebs, mas para mim, o Chrome parece estar bem na versão> 5.0.0-rc.2 e o firefox está me dizendo que o webgl não é compatível

g7parsh em 10 out. 2019

Caso outra pessoa tenha esse problema. Tive que ativar manualmente a sinalização " Substituir lista de renderização de software " chrome: // flags

especificidades:
cromo: 78.0.3904.97
osx: 10.13.6

goodgecko em 12 nov. 2019

🎉3 👍3

Obrigado @goodgecko - embora a biblioteca ainda precise de consertos; não é razoável ou viável pedir aos usuários finais que executem essa etapa para contornar isso. O fallback automático precisa ser confiável.

erayd em 12 nov. 2019

👍3

Tenho exatamente esse problema no Linux e no Windows no Brave Browser 1.1.23 baseado no Chromium 79.0.3945.88
O interessante é que o Chrome usual baseado na mesma compilação do Chromium funciona perfeitamente.
O Firefox 71.0 funciona perfeitamente sem nenhum problema.

@goodgecko dica não ajudou

konchunas em 22 dez. 2019

👍1

Verifique o estado de aceleração (avançada) de hardware das configurações do Chrome? O mesmo problema apareceu quando eu fechei essas opções no Chrome.
Desejo que isso ajude.

h0ngzhe em 8 jan. 2020

👍2

Verifique o estado de aceleração (avançada) de hardware das configurações do Chrome? O mesmo problema apareceu quando eu fechei essas opções no Chrome.
Desejo que isso ajude.

Isso funcionou para mim. Tive que ligar a aceleração de hardware

choopk em 17 fev. 2020

Ainda mais estranho para mim. O https://get.webgl.org/ está funcionando. Os exemplos PIXI v5 funcionam bem, mesmo aquele com máscaras

Mas quando tento abrir meu jogo, ele diz que WebGL não é compatível.

Fxlr8 em 22 mar. 2020

Caso outra pessoa tenha esse problema. Tive que ativar manualmente a sinalização " Substituir lista de renderização de software " chrome: // flags
especificidades:
cromo: 78.0.3904.97
osx: 10.13.6

Isso funcionou para mim, obrigado!

othneildrew em 24 mar. 2020

Eu tive o mesmo problema no Chrome estável 80.0. +, Ubuntu 18.04 usando o driver de código aberto X.Org X Server Nouveau. Passei no teste WebGL e percebi que deveria ser o driver, então depois de instalar um proprietário (Nvidia), tudo funcionou bem agora.

Rock-son em 2 abr. 2020

Descoberta aleatória: não é culpa do Chrome Beta:
Por algum motivo, minha aceleração de hardware foi desativada.

Mesmo aqui. Desativei a aceleração de hardware. Eu já havia desabilitado para gravar o navegador no OBS.

Maelfyn em 11 abr. 2020

O mesmo problema aqui com o Chrome 83 | macos 10.13.6 | nVidia Geforce 210

Os exemplos PixiJS estão funcionando bem com o Firefox:
saída do console

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

mas com o Chrome, está voltando para o Canvas:
console de saída

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

Os exemplos do

bySabi em 21 jun. 2020

Funcionou para mim!

hu-qi em 9 jul. 2020

Podemos bloquear este tópico? Não há mais nada a contribuir aqui, a questão era como acelerar.

Se você ainda tiver um problema, é um problema diferente, então você deve abrir um novo tópico em vez de necroar este.

winterNebs em 9 jul. 2020

Esta página foi útil?

0 / 5 - 0 avaliações

Questões relacionadas

PIXI.Text não pode ser exibido quando adicionado a um contêiner filho

gaccob · 3Comentários

ColorMatrixFilter como usar por cor

neciszhang · 3Comentários

Contexto WebGL restaurado incorretamente (pixi v5)

YuryKuvetski · 3Comentários

Ubuntu - WebGL fica lento e trava

zcr1 · 3Comentários

[Question] Padronizando a propriedade âncora para todos os objetos de exibição

st3v0 · 3Comentários