javascript - significa - Imagen de WebGL en cromo sin cabeza sin GPU

que significa alt en una imagen

Question

Estoy tratando de exportar una imagen renderizada con WebGL en un servidor Linux sin GPU. Para hacer esto, estoy usando Chrome sin cabeza, sin embargo, la imagen exportada es negra ( ejemplo , imagen exportada , al tomar una captura de pantalla de la página muestra su lienzo que es negro ). Esperaba alguna ayuda para averiguar por qué está sucediendo esto.

Para exportar la imagen, represento la imagen en un lienzo, exporto los datos a través de canvas.toDataURL(''image/jpeg'') y luego canvas.toDataURL(''image/jpeg'') los datos en el servidor. Estoy usando Pixi.js para renderizar, si uso un renderizador de lienzo, entonces todo funciona en el servidor; Es la representación de WebGL que no funciona. Vale la pena señalar que el procesamiento WebGL funciona bien en Chrome 63 en una Macbook.

Para controlar Chrome estoy usando Puppeteer . Todo lo que estoy haciendo es abrir una página, esperar un segundo y luego cerrarla de nuevo:

puppeteer
  .launch({
    args: [
      ''--no-sandbox'',
      ''--disable-setuid-sandbox'',
    ],
  })
  .then(browser => {
    return browser.newPage().then(page => {
      return page
        .goto(url)
        .then(() => page.waitFor(1000))
        .then(() => browser.close())
        .catch(err => console.error(''Failed'', err));
    });
  })

Estos son los argumentos que el titiritero pasa a Chrome:

[
  ''--disable-background-networking'',
  ''--disable-background-timer-throttling'',
  ''--disable-client-side-phishing-detection'',
  ''--disable-default-apps'',
  ''--disable-extensions'',
  ''--disable-hang-monitor'',
  ''--disable-popup-blocking'',
  ''--disable-prompt-on-repost'',
  ''--disable-sync'',
  ''--disable-translate'',
  ''--metrics-recording-only'',
  ''--no-first-run'',
  ''--remote-debugging-port=0'',
  ''--safebrowsing-disable-auto-update'',
  ''--enable-automation'',
  ''--password-store=basic'',
  ''--use-mock-keychain'',
  ''--user-data-dir=/tmp/puppeteer_dev_profile-GhEAXZ'',
  ''--headless'',
  ''--disable-gpu'',
  ''--hide-scrollbars'',
  ''--mute-audio'',
  ''--no-sandbox'',
  ''--disable-setuid-sandbox''
]

El autor de Swiftshader dijo en junio que la reproducción de WebGL sin cabeza es posible y parece estar confirmada por este problema de Chromium, así que supongo que me estoy perdiendo algo. ¿Alguien tiene alguna idea de lo que estoy haciendo mal?

Un par de cosas que he probado:

• No pasar en - deshabilitado-gpu
• --use-gl=swiftshader-webgl , --use-gl=swiftshader , --use-gl=osmesa
• Tomando una captura de pantalla de pantalla completa para ver si es sólo un lienzo. Toda la pantalla es negra.

Versiones

• Chrome: linux-515411
• titiritero: 0.13.0
• nodo: 8.2.1
• Linux: CentOS 7

Esto es lo que necesitaba instalar en mi servidor para que Chrome se ejecute ( Source )

yum install cups-libs dbus-glib libXrandr libXcursor libXinerama cairo cairo-gobject pango ffmpeg
rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/atk-2.22.0-3.el7.x86_64.rpm
rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/at-spi2-atk-2.22.0-2.el7.x86_64.rpm
rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/at-spi2-core-2.22.0-1.el7.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/g/GConf2-3.2.6-7.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libXScrnSaver-1.2.2-6.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libxkbcommon-0.3.1-1.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libwayland-client-1.2.0-3.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libwayland-cursor-1.2.0-3.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/g/gtk3-3.10.4-1.fc20.x86_64.rpm
rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/16/Fedora/x86_64/os/Packages/gdk-pixbuf2-2.24.0-1.fc16.x86_64.rpm

Answer 1

Así que resolví parcialmente el problema estableciendo premultipliedAlpha en falso. Cuando es verdadero (predeterminado), toDataURL devolverá una imagen vacía. Cuando es falso, devuelve la imagen renderizada.

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas" width="1080" height="1080"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById(''canvas'');
    var gl = canvas.getContext(''webgl'', {
        premultipliedAlpha: false
    });

    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
    gl.clearColor(0.99, 0, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var IMAGE_PREFIX = ''data:image/png;base64,'';
    var image = canvas.toDataURL(''image/png'').substring(IMAGE_PREFIX.length);

    // save(image)
  </script>
</body>
</html>

Lo que es interesante es que si tomo una captura de pantalla usando el puppeteer , puedo ver la imagen renderizada, sin importar si el premultipliedAlpha es verdadero o falso.

Answer 2

Hay un error abierto que afecta a los sistemas sin bibliotecas X11: crbug.com/swiftshader/79 . Evita que Chrome OS se ejecute con SwiftShader, pero el mismo problema también ocurriría en un sistema Linux sin cabeza que no es compatible con X11.

Afortunadamente, debería ser factible instalar X11 y poner las cosas en funcionamiento. No estoy 100% seguro de qué paquetes proporcionan las bibliotecas necesarias, pero pruebe estas: xorg xserver-xorg xvfb libx11-dev libxext-dev libxext-dev:i386

Finalmente, el error de SwiftShader se solucionará para que no requiera X11 en absoluto.

Answer 3

No sé si esto puede ayudarlo, pero hay opciones que puede establecer al crear un contexto de WebGL. Dependiendo de la implementación del navegador, puede tener diferentes valores predeterminados.

¿Has intentado forzar preserveDrawingBuffer a true ?

var gl = canvas.getContext( "webgl", {
    preserveDrawingBuffer: true
});

Esto es lo que dice premultipliedAlpha sobre esta opción:

preserveDrawingBuffer : si el valor es verdadero, los búferes no se borrarán y conservarán sus valores hasta que el autor los borre o los sobrescriba.

Answer 4

Si desea ejecutarlo en el servidor y no tiene GPU disponible allí, necesita usar algo en lugar de él.

WebGL 1.0 se basa en la especificación de OpenGL ES 2.0, que se basa en la especificación de OpenGL 2.1. Existe la biblioteca de Mesa ( https://en.wikipedia.org/wiki/Mesa_(computer_graphics) ), que implementa el renderizador de software y se utiliza para la validación de la implementación de OpenGL por parte de los proveedores. Creo que soporta OpenGL hasta 3.1, pero puedo estar equivocado y ahora soporta la versión aún más alta.

Es posible instalar Mesa como controlador en * nix y hacer que ejecute OpenGL usando la implementación del software.

Le sugiero que verifique la respuesta aceptada aquí: cómo forzar a Chrome a usar el controlador de software de mesa para webgl Estoy bastante seguro de que resolverá su problema