webgl

Question

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

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

// draw rest of frame

实质上添加了一个 "trail"。可以在这里看到一个例子：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').

中的 "trail"

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

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

这是我尝试过的方法：https://jsfiddle.net/206Ltsgo/ 跨帧半透明后应该可以得到这样的东西：http://codepen.io/towc/pen/bNWyOq

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

Answer 1

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

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

webgl - 不要在每一帧上清空 canvas