（forloop vs setInterval、requestAnimationFrame）を使用すると、出力が異なるレンダリングされます

Question

ForLoop vs（setInterval、requestAnimationFrame）の問題に直面しています 以下のコードはキャンバスに単純にランダムな矩形を描画します。
ここでコード全体をコピー/貼り付けするのではなく、関連するコードをデモで投稿します
問題は私が
を使用しているときです。 50以下のように画面上の矩形ではなくforloopの代わりに
2.if setIntervalまたはrequestAnimation（コールバック）を使用すると、単一の矩形が得られます。
2番目のケース新しいRectangleが描画されるたびに、描画されたRectangleはClearになります。最終的なo/pは単一のRectangleとして取得されますが、forloopを使用するとこれは起こりません。
は私が

ForLoop、のsetIntervalとrequestAnimationFrameの

ループのために使用して、私の場合をテストした：

function main() { 
..... 
    drawRects(); 
} 
function drawRects() { 
for(var i=0;i<50;i++){ 
    setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100)); 
    //draw Rectangle 
    .... 
}} 
main(); 

と： マイコードの流れは、この方法とDemoを行きます私は次のように出力を得ます：

のsetIntervalとrequestAnimationFrameのは/ similary使用：
マイコードFlowはこの道を行くとDemo：

function main() { 
..... 
    render(); 
} 
function render(){ 
    if(rectCount < 50){ 
     drawRects(); 
     rectCount++; 
    } 
    window.requestAnimationFrame(render); 
} 
function drawRects() { 
    setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100)); 
    //draw Rectangle 
    .... 
} 
main(); 

Answer 1

それは

を合成した後、WebGLのキャンバスをクリアするためです合成後にWebGLでキャンバスをクリアしないようにするには、コンテキストを作成するときにpreserveDrawingBuffer: trueを渡すことができます。

var gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true }); 

いくつかのperfの可能な費用で。詳細

https://stackoverflow.com/a/33331594/128511

https://stackoverflow.com/a/26790802/128511