Rendering WebGL image in headless chrome without a GPU
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.
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.
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:
preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.