Is there a way to get WebGL for rendering off-screen, without a webgl canvas attached to the DOM?

Question

I thought it would be a simple question to find the answer, but it turned out to be very elusive. Basically, I'm trying to use WebGL for hard work on some of the processing and image generation tasks, and I want it to work on screen. Ideally, I would like WebGL to display the scene in a framebuffer with which I can gl.readPixels(), or on the webgl canvas so that I can use it as a source for context.drawImage(). The fact is that I do not want to display the webgl canvas itself, I only want to copy parts of it to a visible canvas, for which I use the usual "2d" context. So far, I can't get it to work without the following initialization, which seems like an ugly handle to me:

glCanvas = document.createElement('canvas');
glCanvas.width = 256;
glCanvas.height = 256;
document.body.appendChild(glCanvas); // seems necessary, but why?
glCanvas.style.visibility = 'hidden'; // ugh, is this the only way?

I am currently creating a scene for a framebuffer created with: gl.createFramebuffer()using one call gl.drawArrays()and then using gl.readPixels()to get the result in ImageData. With glCanvas attached to the DOM, it works exactly as planned. But if I leave these last 2 lines of code above, where I attach glCanvas and hide it, I don’t get the image when I try to read the Pixels from the framebuffer that I displayed.

, glCanvas DOM, . , framebuffer . , WebGL , webgl-, DOM? ? !

Answer 1

DOM, WebGL. WebGL Conformance Tests , DOM.

var gl = document.createElement("canvas").getContext("webgl");
gl.clearColor(1,0,1,1); // purple;
gl.clear(gl.COLOR_BUFFER_BIT);

// draw in 2d canvas
var ctx = document.querySelector("#c2d").getContext("2d");
ctx.drawImage(gl.canvas, 10, 20, 30, 40);

<canvas id="c2d"></canvas>

, . , .

---

OffscreenCanvas API. 2017/11/15 Firefox Chrome . WebGL Web Worker

2

Chrome 69 OffscreenCanvas .