有没有办法让 WebGL 在屏幕外渲染，而无需将 webgl canvas 附加到 DOM？

Question

我原以为这是一个很容易找到答案的问题，但事实证明它非常难以捉摸。基本上，我正在尝试使用 WebGL 来完成一些图像处理和生成任务的繁重工作，并且我希望它在屏幕外工作。理想情况下，我希望 WebGL 将场景渲染到我可以 gl.readPixels() 来自的帧缓冲区，或者渲染到 webgl canvas 这样我就可以将它用作 source 对于 context.drawImage()。问题是，我不想显示 webgl canvas 本身，我只想将它的一部分复制到一个可见的 canvas，我有一个常规的“2d”上下文。到目前为止，如果没有以下初始化，我似乎无法让它工作，这对我来说似乎是一个丑陋的 hack：

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?

目前，我正在将场景渲染到我创建的帧缓冲区：gl.createFramebuffer()，使用单个 gl.drawArrays() 调用，然后使用 gl.readPixels() 将结果输出到图像数据。将 glCanvas 附加到 DOM 它完全按计划工作。但是，如果我在附加 glCanvas 并隐藏它的地方省略了最后两行代码，那么当我尝试从渲染到的帧缓冲区中读取像素时，我将看不到任何图像。

我不明白为什么 glCanvas 需要附加到 DOM，如果它甚至没有被渲染到。我认为渲染到帧缓冲区完全发生在显卡上，缓冲区将持续存在供我用作纹理。除非至少有一个 webgl-context canvas 附加到 DOM，否则 WebGL 根本不会呈现这种情况吗？还是我遗漏了一些其他细节？谢谢！

Answer 1

您无需 canvas 中的 DOM 即可使用 WebGL。 WebGL Conformance Tests 中有很多运行的测试，而无需在 DOM

中添加 canvas

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>

也许您应该 post 再写一些代码。您可能还有其他错误。

更新

即将推出的还有 OffscreenCanvas API。截至 2017 年 11 月 15 日，它在 Firefox 和 Chrome 中都可用，在标志后面。它允许在 Web Worker 中使用 WebGL

更新 2

截至 Chrome 69 OffscreenCanvas 发货时没有标记。

有没有办法让 WebGL 在屏幕外渲染，而无需将 webgl canvas 附加到 DOM？

Is there a way to get WebGL to render offscreen, without the webgl canvas attached to the DOM?

html

javascript

webgl

html5-canvas

更新

更新 2