javascript - 在没有 GPU 的情况下在 headless Chrome 中渲染 WebGL 图像

Question

我正在尝试在没有 GPU 的 Linux 服务器上导出使用 WebGL 渲染的图像。为此，我使用 headless Chrome，但导出的图像是黑色的( example exported image 、 taking a screenshot of page shows its just canvas that is black )。我希望得到一些帮助来弄清楚为什么会发生这种情况。

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

为了控制 Chrome，我使用 Puppeteer 。我所做的就是打开一个页面，等待一秒钟，然后再次关闭它:

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 的参数:

[
  '--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 author said in June headless WebGL rendering is possible 似乎是 confirmed by this Chromium issue 所以我想我错过了一些东西。有人知道我做错了什么吗？

我尝试过的一些事情:

• Not passing in --disable-gpu
• --use-gl=swiftshader-webgl , --use-gl=swiftshader , --use-gl=osmesa
• 截取全屏屏幕截图，看看它是否只是 Canvas 。整个屏幕都是黑色的。

版本

• Chrome:linux-515411
• puppeteer 师:0.13.0
• 节点:8.2.1
• Linux:CentOS 7

这是我需要在服务器上安装才能运行 chrome ( 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

有一个 Unresolved 错误会影响没有 X11 库的系统:crbug.com/swiftshader/79 。它会阻止 Chrome 操作系统与 SwiftShader 一起运行，但同样的问题也会发生在不支持 X11 的 headless Linux 系统上。

幸运的是，安装 X11 并使其运行应该是可行的。我不确定哪些软件包提供了必要的库，但请尝试以下这些:xorg xserver-xorg xvfb libx11-dev libxext-dev libxext-dev:i386

最终 SwiftShader 错误将得到修复，因此它不需要任何 X11。