Jam*_*rth 24 javascript google-chrome webgl pixi.js puppeteer
我正在尝试在没有GPU的Linux服务器上导出使用WebGL渲染的图像.要做到这一点,我使用无头Chrome,但导出的图像是黑色的(例如导出的图像,截取页面的截图显示其只是黑色的画布).我希望得到一些帮助,弄清楚为什么会这样.
要导出图像,我将图像渲染到画布,通过导出数据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'
]
该作者在6月份表示无头WebGL渲染是可能的,而且这个Chromium问题似乎证实了这一点,所以我想我错过了一些东西.有没有人有任何想法我做错了什么？
我尝试了几件事:
--use-gl=swiftshader-webgl,--use-gl=swiftshader,--use-gl=osmesa版本
这是我需要在我的服务器上安装才能运行chrome(源代码)
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
有一个开放的bug会影响没有X11库的系统:crbug.com/swiftshader/79.它阻止Chrome操作系统与SwiftShader一起运行,但同样的问题也会出现在没有X11支持的无头Linux系统上.
幸运的是,安装X11并使其运行应该是可行的.我不是100%确定哪些软件包提供了必要的库,但请尝试以下方法:xorg xserver-xorg xvfb libx11-dev libxext-dev libxext-dev:i386
最终将修复SwiftShader错误,因此它不需要任何X11.
所以我通过设置premultipliedAlpha为false来部分解决了这个问题.当它为真(默认)时,toDataURL将返回一个空图像.如果为false,则返回渲染图像.
<!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是真还是假.
我通过添加解决了这个问题
'--use-gl=angle'
到无头镀铬设置。我还删除了，'--disable-gpu'因为我认为这是修复一些错误的临时解决方法，不再需要。
你可以在 Chrome 源代码中找到与“angle”不同的选项（在 Chrome 源代码中找到这个是我最没想到的！）
| 归档时间： |
|
| 查看次数： |
6887 次 |
| 最近记录： |