Rendering WebGL Image In Headless Chrome Without A GPU

January 23, 2023 Post a Comment

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,

Solution 1:

There's an open bug which affects systems without X11 libraries: crbug.com/swiftshader/79. It prevents Chrome OS from running with SwiftShader, but the same issue would also happen on a headless Linux system which has no X11 support.

Fortunately it should be feasible to install X11 and get things running. I'm not 100% sure which packages provide the necessary libraries, but try these: xorg xserver-xorg xvfb libx11-dev libxext-dev libxext-dev:i386

Eventually the SwiftShader bug will be fixed so it doesn't require X11 whatsoever.

Solution 2:

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>

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.

Solution 3:

I don't know if this can help you, but there are options you can set when creating a WebGL context. Depending on the browser implementation, you can have different default values.

Have you tried to force preserveDrawingBuffer to true ?

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

Here is what MDN says about this option:

Baca Juga

preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.

Solution 4:

If you want to run it on server and have no GPU available there, you need to use something instead of it.

WebGL 1.0 is based on OpenGL ES 2.0 spec, which is based on OpenGL 2.1 spec. There is Mesa library(https://en.wikipedia.org/wiki/Mesa_(computer_graphics)), which implements software renderer and is used for validation of OpenGL implementation by vendors. I think it supports OpenGL up to 3.1, but I can be wrong and now it supports version even highier.

It's possible to install Mesa as driver in *nix and have it do OpenGL rendering using software implementation.

I suggest to check accepted answer here: how to force chrome to use mesa software driver for webgl I'm pretty sure it will solve your issue

Solution 5:

Setting preserveDrawingBuffer to true solved the problem for me

JavaScript Download