webgl - 不要在每一帧上清空画布[重复]答案

【问题标题】：webgl - don't empty canvas on each frame [duplicate]webgl - 不要在每一帧上清空画布[重复]
【发布时间】：2017-05-11 20:53:45
【问题描述】：

我试图在 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.getContext('2d') 中“trail”的情况。

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

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

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

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

【问题讨论】：

其他类似问题或相关答案包括stackoverflow.com/questions/33327585/…和stackoverflow.com/questions/35493509/…、stackoverflow.com/questions/9491417/…、stackoverflow.com/questions/11546642/…、
@gman 我最终被链接到您发布的最后一个答案。我认为仍然值得保留这个问题，并指出它与所有其他问题相关，因为它涵盖了更多谷歌搜索的可能性，因为这个问题可以通过多种方式解释。当然，如果你不改变主意，我不介意
没问题，这就是重复问号的用途。人们可以搜索，找到以您的方式表达的问题并获得答案。

【解决方案1】：

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

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

【讨论】：