WebGL的 - 做的每一帧

我试图重新这段代码在2D情况下取得的效果上没有空白的画布：WebGL的 - 做的每一帧

// 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

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

来源

2016-12-27 towc

其他类似的问题或相关答案包括http://stackoverflow.com/questions/33327585/why-webgl-clear-draw -to-front-buffer和http://stackoverflow.com/questions/35493509/webgl-draw-in-event-handler-seems-to-clear-the-canvas，http://stackoverflow.com/questions/9491417/when-webgl-decide-to-update-the-display，http://stackoverflow.com/questions/11546642/why-does-webgl-canvas-turn-white-on-the-second-frame-when-alpha -is-masked， – gman

@gman我最终被链接到你发布的最后一个答案。我认为仍然值得保留这个问题，注意它与所有其他人有关，因为它涵盖了更多的使用Google搜索的可能性，因为这个问题在很多方面都是可以解释的。我不介意，如果你不改变主意，当然 – towc

没问题，这是重复问号的用途。人们可以搜索，找到你的问题措辞，并导致答案。 – gman

事实证明这个问题是有效的，在每一帧，drawingBuffer被清除。这可以通过定义gl时添加属性，如this mdn page覆盖指出：

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

来源

2016-12-27 16:36:43 towc

WebGL的 - 做的每一帧

回答

相关问题