有没有办法让WebGL在屏幕外渲染,而没有附加到DOM的webgl画布？

Question

我认为这对于找到答案来说是一个简单的问题,但事实证明这是一个非常难以捉摸的问题.基本上,我正在尝试使用WebGL来完成一些图像处理和生成任务,并且我希望它能在屏幕外工作.理想情况下,我想WebGL的渲染场景的帧缓冲,我可以gl.readPixels()从,或到WebGL的画布,所以我可以用它作为源的context.drawImage().问题是,我不想显示webgl画布本身,我只想将它的一部分复制到一个可见的画布,我有一个常规的"2d"上下文.到目前为止,如果没有以下初始化,我似乎无法让它工作,这对我来说似乎是一个丑陋的黑客攻击:

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()将结果输出到ImageData.随着glCanvas附加到DOM,它完全按计划工作.但是如果我把上面最后两行代码放在我附加glCanvas并隐藏它的地方,当我尝试从我渲染的帧缓冲区中读取像素时,我得不到任何图像.

我不明白为什么glCanvas需要附加到DOM,如果它甚至没有被渲染到.我认为渲染到帧缓冲区完全出现在显卡上,并且缓冲区将持续存在以供我用作纹理.除非至少有一个webgl-context画布附加到DOM,否则WebGL根本不会渲染？或者我错过了其他一些细节？谢谢!

Answer 1

您不必在DOM中使用画布来使用WebGL.WebGL一致性测试中有大量测试,无需向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>

也许你应该发布一些代码.你可能还有一些其他的bug.

更新

即将推出也是OffscreenCanvas API.截至2017/11/15它在Firefox和Chrome后面都有一面旗帜.它允许在Web Worker中使用WebGL

更新2

从Chrome 69开始,OffscreenCanvas没有标志.