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的 - 做的每一幀

回答

相關問題