Pixi.js: "WebGL no es compatible con este navegador" cuando se usa Chrome 74 con GTX 780

Si WebGL no es compatible con este navegador, use pixi.js-legacy como respaldo de canvas2d.

Ese es un paquete diferente en npm. Su configuración usa pixi.js

Si WebGL no es compatible con este navegador, use pixi.js-legacy como respaldo de canvas2d.

Ese es un paquete diferente en npm. Su configuración usa pixi.js

Pero el navegador que estoy usando claramente es compatible con WebGL

¿Los ejemplos de v5 en https://pixijs.io/examples/ funcionan para usted? Esa página que ha mostrado es webgl básica, sí o no. Pero cuando creamos un contexto webgl, lo solicitamos con un par de parámetros adicionales, como requerir soporte de esténcil.

Sin embargo, ese es el error, de todos modos, y por qué ese es nuestro ángulo de intentar ayudar. Nunca hemos visto ese error fuera del dispositivo que no admite webgl o los parámetros de webgl que pixijs requiere

¿Los ejemplos de v5 en https://pixijs.io/examples/ funcionan para usted? Esa página que ha mostrado es webgl básica, sí o no. Pero cuando creamos un contexto webgl, lo solicitamos con un par de parámetros adicionales, como requerir soporte de esténcil.

Sin embargo, ese es el error, de todos modos, y por qué ese es nuestro ángulo de intentar ayudar. Nunca hemos visto ese error fuera del dispositivo que no admite webgl o los parámetros de webgl que pixijs requiere

Esos ejemplos no funcionan (v4 sí, pero no v5) y también dan el mismo error. Eso me parece realmente extraño, no estoy seguro de por qué mi navegador no lo admite.

También verifiqué mi aplicación pixi.js que funciona y está usando 5.0.0-rc.2, ¿cuál podría ser la razón por la que funciona?

Gracias de nuevo por la ayuda

v4 funcionará porque está recurriendo al renderizador de lienzo. En el lanzamiento oficial de v5 no lo hace a menos que esté usando el paquete heredado.

Entonces, tal vez su tarjeta gfx sea compatible con webgl pero no tenga algo como el soporte de la plantilla que necesitamos para el enmascaramiento, por lo que rechazamos intentar usarlo.

En caso de que sea una plantilla, intente actualizar su controlador de gráficos.

Sin embargo, será muy divertido si resulta que el paquete web realmente afecta las cosas :)

De acuerdo, esto es muy extraño, mi escritorio (i7 7700k, gtx 780) no lo ejecuta, pero funciona en mi Surface Book 1, mi iPhone XS y mis amigos MacBook Pro 2015. Mi gpu es un poco vieja pero no lo hice ' No creo que sea el problema.

A menos que haya algo más que deba probar, supongo que usaré el paquete heredado ya que quiero la máxima compatibilidad (y además no puedo desarrollar algo que no puedo ejecutar)

Reinstale el controlador de gráficos, versión hacia adelante o hacia atrás. La GPU no es un problema, pero la parte opengl del controlador sí lo es.

Espera un segundo, me siento realmente tonto, creo que es un problema de Chrome, funciona en Microsoft Edge ... aunque estaba usando Chrome tanto en mi computadora portátil como en mi teléfono, así que fue extraño.

Los navegadores tienen una lista negra para hardware diferente ... a veces es simplemente para deshabilitar webgl por completo, pero a veces para incluir en la lista negra ciertas funciones en ciertas versiones de hardware / controlador si hay problemas conocidos.

Actualicé el título de este problema (no es un problema de Webpack + PixiJS) y lo marqué como "No se solucionará" ya que parece muy probable que sea un problema de hardware / controlador.

Bien, entonces usar pixi.js-legacy y cambiar todo para hacer referencia a pixi.js-legacy todavía da el mismo error.

Verifiqué mi versión de trabajo usando 5.0.0-rc.2 y _funciona_ usando webgl2:

Pero el uso de 5.0.0-rc.2 me da este error: "Error de tipo no detectado: No se puede leer la propiedad 'performMixins' de undefined" en mi versión de paquete web.

¡Cualquier ayuda será apreciada, gracias!

No utilice 5.0.0-rc.2. Utilice la última versión: 5.0.3

Acabo de probar 5.0.3, "Error no detectado: WebGL no es compatible con este navegador, use" pixi.js-legacy "para la compatibilidad con canvas2d de respaldo". como antes. Tengo una versión en ejecución que usa PixiJS 5.0.0-rc.2 que dice que se está ejecutando con WebGl 2, ¿hay algunas características nuevas agregadas a 5.0.1+ que harían que no funcione?

Hacer un poco más de pruebas muestra algunas rarezas potenciales

1. Nervioso
   ¿Los ejemplos de
   
   Los ejemplos de
   
   Mi juego de trabajo (https://ascension.azurewebsites.net/game.html) ejecuta Pixi.js 5.0.0-rc.2 se ejecuta con _Webgl 1_
   
   Mi juego de paquete web se carga con Pixi.js 5.0.3 con _WebGL 1_ pero no funciona correctamente
   
2. En Chrome
   V5 no funciona
   
   V4 funciona pero con _canvas_
   
   Mi juego de trabajo se ejecuta con 5.0.0-rc.2 con _webgl 2_
   
   Mi juego de paquete web tiene el error como se explica en la publicación con 5.0.3
   

No estoy seguro de si esto ayuda en absoluto, pero me parece extraño.

Predigo que la única buena manera es hacer una función que cree el contexto de la misma manera que pixi (pide " stencil: true " y la prueba sin pixi, solo un html + js simple.

Luego, puede entregar su informe con especificaciones y demostración a los desarrolladores de chromium en chromium bugtracker.

Entiendo que es un camino muy largo, pero, en comparación con mozilla, son más rápidos y hay una esperanza :)

Le pregunto de nuevo: ¿intentó actualizar el controlador?

Predigo que la única buena manera es hacer una función que cree el contexto de la misma manera que pixi (pide " stencil: true " y la prueba sin pixi, solo un html + js simple.

Luego, puede entregar su informe con especificaciones y demostración a los desarrolladores de chromium en chromium bugtracker.

Entiendo que es un camino muy largo, pero, en comparación con mozilla, son más rápidos y hay una esperanza :)

Le pregunto de nuevo: ¿intentó actualizar el controlador?

Sí, actualicé mis controladores, también activé la computación webGL 2.0 en Chrome: // flags .

¿Entonces sospecha que es un problema por parte de Chrome? Probaré tu sugerencia y veré qué sucede.

Casualmente, las gtx 780 y 780ti también tenían problemas para fallar mientras jugaban al juego "Nier Automata", podría ser que los controladores de esta tarjeta están dañados de alguna manera.

De acuerdo, escribí esta prueba rápida de 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());

Y parece que no importa lo que intente, no puedo conseguir que la plantilla sea verdadera. Probé esto tanto en mi PC como en mi computadora portátil (la computadora portátil funciona con v5). No estoy seguro de qué hago en este momento.

Haga un truco para pixi que lo deshabilite, elimine el adjunto de la plantilla que se crea por defecto para los búferes de fotogramas de RenderTexture e intente no usar máscaras;)

Alternativamente, vaya al otro lado, pruebe los controladores ANTIGUOS :) Por cierto, los usuarios de Linux tienen ese tipo de problemas con frecuencia

Bien, estoy cerrando este problema. Pixi.js parece funcionar correctamente con firefox (webgl 2), así que por ahora lo usaré. Creo que podría ser una combinación _específica_ de controladores + chrome que hace que no funcione. Probé varios ejemplos v5 en máquinas que van desde libros antiguos de Mac, máquinas antiguas con Windows 7 y mi computadora portátil con Windows 10. Parece que mi PC tiene un valor atípico extraño, si la gente se encuentra con este problema con Firefox, Chrome y Edge, podría valer la pena volver a abrir este ticket.

¡Gracias por toda la ayuda chicos!

Está bien, no reabrir. Era 100% mi instalación de Chrome, algo de alguna manera lo estropeó, cambiar al canal beta parecía haberlo solucionado.
(Jugar con chrome: // flags no ayudó, y eliminar todas las extensiones tampoco hizo nada).

Este tipo de problema es muy útil para futuros usuarios que puedan estar experimentando el mismo problema en un entorno similar. Gracias por brindar tantos detalles.

Está bien, no reabrir. Era 100% mi instalación de Chrome, algo de alguna manera lo estropeó, cambiar al canal beta parecía haberlo solucionado.
(Jugar con chrome: // flags no ayudó, y eliminar todas las extensiones tampoco hizo nada).

Puedo confirmar que esto también funcionó para mí, la instalación de Chrome beta ejecutó bien la aplicación. Gracias.

Descubrimiento aleatorio: no es culpa de Chrome beta:

Por alguna razón, mi aceleración de hardware estaba deshabilitada.

Habilitar la aceleración de hardware lo hizo por mí.

Chrome -> Configuración (⌘,) -> Avanzado -> Sistema -> habilitar primero

@ivanpopelyshev ¿Podría solucionarse esto utilizando un método alternativo para enmascarar en WebGL? Hay un par de opciones más con explicaciones en este hilo de stackoverflow

Creo que si lo habilitamos manualmente no ayudará al usuario. ¡El siguiente código funcionó para mí!
import * as PIXI from 'pixi.js-legacy'

También encontré este problema al usar Chrome debido a que mi configuración de Aceleración de hardware estaba deshabilitada. Debo haberlo deshabilitado hace un tiempo porque se supone que está habilitado de forma predeterminada.

Pero tengo curiosidad por saber por qué Pixi no se carga en este caso, porque ¿no debería volver al lienzo HTML 5?

@ immanuelx2 El documento del que ha publicado una captura de pantalla no está actualizado. El respaldo de lienzo se movió a la rama heredada de v5.0.0. Vea el anuncio de lanzamiento aquí: https://medium.com/goodboy-digital/pixijs-v5-lands-5e112d84e510

Utilice pixi.js-legacy si aún necesita un respaldo de lienzo; la rama maestra ya no contiene soporte para lienzo, es "solo" WebGL, y más rápido para él.

Me encontré con este problema al abrir mi aplicación en una nueva pestaña después de recibir el error: CONTEXT_LOST_WEBGL

Cerrar Chrome y luego reiniciarlo lo resolvió por mí

EDITAR:
Intenté reproducir según mis pasos anteriores pero no pude hacerlo

detalles específicos:
cromo: 77.0.3865.90
osx: 10.14.6
Gráficos: Radeon Pro Vega 20 4 GB, Intel UHD Graphics 630 1536 MB

Así que tengo un problema similar al de @winterNebs, pero para mí, Chrome parece estar bien en la versión> 5.0.0-rc.2 y Firefox me dice que webgl no es compatible.

En caso de que alguien más tenga este problema. Tuve que habilitar manualmente la bandera " Anular lista de procesamiento de software " chrome: // flags

detalles específicos:
cromo: 78.0.3904.97
osx: 10.13.6

Gracias @goodgecko , aunque la biblioteca aún necesita ser

Tengo este problema exacto tanto en Linux como en Windows en Brave Browser 1.1.23 basado en Chromium 79.0.3945.88
Lo que es interesante es que el Chrome habitual basado en la misma compilación de Chromium funciona perfectamente.
Firefox 71.0 está bien sin ningún problema.

@goodgecko tip no ayudó

¿Verifica el estado de aceleración de hardware (avanzado) de la configuración de Chrome? El mismo problema apareció cuando cierro estas opciones en Chrome.
Deseo que esto ayude.

¿Verifica el estado de aceleración de hardware (avanzado) de la configuración de Chrome? El mismo problema apareció cuando cierro estas opciones en Chrome.
Deseo que esto ayude.

Esto funcionó para mí. Tuve que activar la aceleración de hardware

Aún más extraño para mí. Https://get.webgl.org/ está funcionando. Los ejemplos de PIXI v5 funcionan bien, incluso el que tiene máscaras

Pero cuando intento abrir mi juego, dice que WebGL no es compatible.

En caso de que alguien más tenga este problema. Tuve que habilitar manualmente la bandera " Anular lista de procesamiento de software " chrome: // flags

detalles específicos:
cromo: 78.0.3904.97
osx: 10.13.6

Esto funcionó para mí, ¡Gracias!

Tuve el mismo problema en Chrome estable 80.0. +, Ubuntu 18.04 usando el controlador de código abierto X.Org X Server Nouveau. Pasé la prueba de WebGL y pensé que debía ser el controlador, así que después de instalar uno propietario (Nvidia), todo funciona bien ahora.

Descubrimiento aleatorio: no es culpa de Chrome beta:

Por alguna razón, mi aceleración de hardware estaba deshabilitada.

Aquí igual. Tenía la aceleración de hardware desactivada. Lo había desactivado previamente para grabar el navegador en OBS.

El mismo problema aquí con Chrome 83 | macos 10.13.6 | nVidia Geforce 210

Los ejemplos de PixiJS funcionan bien con Firefox:
salida de consola

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

pero con Chrome, está recurriendo a Canvas:
consola de salida

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

Los ejemplos de

¡Funcionó para mí!

¿Podemos bloquear este hilo? No hay nada más que aportar aquí, la cuestión era cómo se aceleraba.

Si aún tiene un problema, es un problema diferente, por lo que debe abrir un nuevo hilo en lugar de necrocar este.