在没有GPU的情况下以无头chrome渲染WebGL图像 [英] Rendering WebGL image in headless chrome without a GPU

问题描述

我正在尝试在没有GPU的Linux服务器上导出使用WebGL渲染的图像.为此，我使用的是无头Chrome，但是导出的图像是黑色的(导出的图像示例 ，拍摄页面的屏幕截图显示的是黑色的纯画布).我希望能得到一些帮助，弄清楚为什么会发生这种情况.

I'm trying to export an image rendered with WebGL on a linux server without a GPU. To do this I'm using headless Chrome however the exported image is black (example exported image, taking a screenshot of page shows its just canvas that is black). I was hoping for some help figuring out why this is happening.

要导出图像，我将图像渲染到画布中，通过canvas.toDataURL('image/jpeg')导出数据，然后将数据发布到服务器.我正在使用Pixi.js进行渲染，如果我使用画布渲染器，那么一切都可以在服务器上运行；这是WebGL渲染无法正常工作.值得注意的是，WebGL渲染在Macbook上的Chrome 63中可以正常工作.

To export the image I render the image into a canvas, export data via canvas.toDataURL('image/jpeg') and then post the data to the server. I'm using Pixi.js for rendering, if I use canvas renderer then everything works on the server; It's WebGL rendering thats not working. It's worth noting the WebGL render works fine in Chrome 63 on a Macbook.

我要使用木偶来控制Chrome.我要做的就是打开一个页面，等待一秒钟，然后再次关闭它:

To control Chrome I'm using Puppeteer. All I'm doing is opening a page, waiting a second, and then closing it again:

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

这些是puppeteer传递给Chrome的参数:

These are the arguments puppeteer passes to 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'
]

swiftshader作者在六月表示无头WebGL渲染是可能的，并且似乎是已确认此Chromium问题，所以我想我丢失了一些内容.有人知道我在做什么错吗?

The swiftshader author said in June headless WebGL rendering is possible and it seems to be confirmed by this Chromium issue so I guess I'm missing something. Has anyone got any ideas what I'm doing wrong?

我尝试过的几件事:

• 未传递--disable-gpu
• --use-gl=swiftshader-webgl，--use-gl=swiftshader，--use-gl=osmesa
• 进行全屏截图以查看其是否只是画布.整个屏幕只有黑色.

• Not passing in --disable-gpu
• --use-gl=swiftshader-webgl, --use-gl=swiftshader, --use-gl=osmesa
• Taking a full screen screenshot to see if its just canvas. Whole screen is just black.

版本

• Chrome浏览器:linux-515411
• 操纵者:0.13.0
• 节点:8.2.1
• Linux:CentOS 7

这是我需要在服务器上安装的程序才能运行chrome(来源)

This is what I needed to install on my server to get chrome to run (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

推荐答案

因此，我通过设置

So i've partially solved the issue by setting premultipliedAlpha to false. When it's true (default), toDataURL would return an empty image. When false, it returns the rendered image.

<!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>

有趣的是，如果我使用puppeteer拍摄屏幕截图，则无论premultipliedAlpha是对还是假，我都可以看到渲染的图像.

What is interesting is if I take a screenshot using puppeteer I can see the rendered image, regardless of whether premultipliedAlpha is true or false.

这篇关于在没有GPU的情况下以无头chrome渲染WebGL图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！