Вывод визуализируется по-разному при использовании (forloop vs setInterval, requestAnimationFrame)

Question

Я столкнулся с проблемой с ForLoop vs (setInterval, requestAnimationFrame) Код ниже просто рисует случайный прямоугольник на холсте.
Я избегаю, чтобы этот вопрос был большой, скопировав сюда весь код, вместо этого я разместил соответствующий код с демо
Проблема в том, что я использую
1. Для цикла рисовать 50 Rectangle i get All 50 Прямоугольник на экране, как показано ниже, но вместо forloop
2.if я использую setInterval или requestAnimation (обратный вызов), я получаю Single rectangle.
Во втором случае Всякий раз, когда новый прямоугольник рисуется, ранее нарисованный прямоугольник является Clear, поэтому окончательный o/p i получается как единственный прямоугольник, но этого не происходит, если я использую forloop. Почему так?
Я проверил мой случай с

ForLoop, setInterval и requestAnimationFrame

, используя для цикла: Мой код Поток идет таким образом и Demo:

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(); 

и я получаю Выход как:

с помощью requestAnimationFrame/точно также с setInterval:
Мой код Поток идет таким образом и 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 }); 

при возможном расходе некоторых перфорации.

некоторых других Q & как то больше деталей

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

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