webgl - 不要在每个框架上清空画布

Question

我试图在二维上下文中重新创建此代码所实现的效果：

// 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中，您可以使用以下方法获得类似的“源代码”透明度：

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

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

上面代码的问题在于，每个帧看起来像前一帧中画布上的任何内容都被完全删除，因此可以在每个帧中看到半透明，但不能跨帧，如canvas.getContext('2d')中“跟踪”的情况。

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

但显然如果有办法告诉画布不要删除每一帧的所有内容，这一切都可以避免，我猜这只是问题。

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

答案可能包括对图书馆的建议，但最终应该是香草。如果我对该问题做出了错误的假设，理想情况下，答案应首先说明实际问题，如果有的话，提供解决方案。如果唯一的解决方案是实际发送纹理，那么知道是否有非常快/短/有效的方式将画布作为纹理发送将会很有帮助。

Answer 1

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

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