WebGL Clears Between Each setInterval [duplicate]

问题

When gl.drawArrays is called sequentially, it draws over the top of the previous graphics on the canvas. However, when I put it inside a setInterval() it clears the canvas before redrawing.

code that draws the rectangles on top of each other:

for(var i =0; i < 10; i++) {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}

code that erases the canvas each time a new rectangle is drawn:

interval = setInterval(() => {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}, 500);

Here's a complete fiddle containing the above code.

I'm making a game that involves real time manipulation of a large image (using the phaser.js library for the game loop if that makes any difference). I would like to be able to just redraw only the needed portions of the image rather than redraw the entire image every animation cycle.

Why does the webgl canvas clear like this? Can I keep it from clearing?

回答1:

Change line 51 to var gl = getWebGLContext(document.getElementById("canvas"), {preserveDrawingBuffer: true}); fiddle.

Warning: last time I checked turning this on for firefox will cause it to slow down considerably.

来源：https://stackoverflow.com/questions/34831381/webgl-clears-between-each-setinterval

标签

html5-canvas

WebGL