在没有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屋!