javascript - webgl - 不要清空每一帧上的 Canvas

Question

我试图在 2d 上下文中重新创建此代码实现的效果:

// frame background "repaint"
ctx.fillStyle = 'rgba(0,0,0,.08)';
ctx.fillRect( 0, 0, w, h );

// draw rest of frame

这本质上添加了一条“踪迹”。示例如下: http://codepen.io/towc/pen/mJzOWJ

我最终了解到，在 webgl 中，您可以通过使用以下方法获得类似的“source-over”透明度:

gl.blendFunc( gl.SRC_ALPHA, gl.ONE );
gl.enable( gl.BLEND );

是的，我没有使用任何花哨的着色器，也没有尝试实现 3D 半透明，我只是想要一个基于源的 alpha 值和目标的颜色值的简单合成。

上述代码的问题是，每一帧，看起来前一帧 Canvas 中的所有内容都被完全删除，因此在每一帧中都可以看到半透明，但不能跨帧看到，如canvas.getContext('2d')中的“踪迹”的情况.

作为跨帧半透明的解决方案，我总是可以退回到提供当前 Canvas 帧作为纹理并在新帧的开头绘制它，以便按照我想要的方式进行混合到。

但显然，如果有一种方法告诉 Canvas 不要删除每一帧的所有内容，这一切都可以避免，我只是猜测这就是问题所在。

这是我尝试过的:https://jsfiddle.net/206Ltsgo/ 跨帧半透明后，我应该能够得到这样的结果:http://codepen.io/towc/pen/bNWyOq

答案可以包括对图书馆的建议，但最终应该是普通的。如果我对这个问题做出了错误的假设，理想情况下，答案应该首先说明实际问题，如果有的话，提供解决方案。如果唯一的解决方案实际上是发送纹理，那么了解是否有非常快速/简短/有效的方法将 Canvas 作为纹理发送将很有帮助。

Answer 1

事实证明，问题实际上是在每一帧上，drawingBuffer 都被清除了。这可以通过在定义 gl 时添加属性来覆盖，如 this mdn page指出:

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