WebGL清除每个setInterval之间 [英] WebGL Clears Between Each setInterval

问题描述

当按顺序调用 gl.drawArrays 时，它会在画布上绘制上一个图形的顶部。但是，当我把它放在 setInterval（）中时，它会在重绘之前清除画布。

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.

绘制矩形在彼此之上：

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

这是一个完整的小提琴。

我正在制作一个涉及实时操作大图像的游戏（使用移相器.js库为游戏循环，如果这有任何区别）。我希望能够只重绘图像所需的部分，而不是每个动画周期重绘整个图像。

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.

为什么webgl画布清晰如此？我可以保持清除吗？

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

推荐答案

将第51行更改为 var gl = getWebGLContext（document.getElementById （canvas），{preserveDrawingBuffer：true}）; 小提琴。

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

警告：上次我检查为firefox打开它会导致它显着减慢。

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

这篇关于WebGL清除每个setInterval之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！