html5 canvas - quieres - WebGL borra entre cada setInterval

juego canvas javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• WebGL: evita que el búfer de color se borre 1 respuesta

Cuando se llama gl.drawArrays secuencialmente, dibuja sobre la parte superior de los gráficos anteriores en el lienzo. Sin embargo, cuando lo coloco dentro de un setInterval() , borra el lienzo antes de volver a dibujar.

código que dibuja los rectángulos uno encima del otro:

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

código que borra el lienzo cada vez que se dibuja un nuevo rectángulo:

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

Aquí hay un violín completo que contiene el código anterior.

Estoy haciendo un juego que implica la manipulación en tiempo real de una imagen grande (usando la biblioteca phaser.js para el bucle del juego si eso hace la diferencia). Me gustaría poder volver a dibujar solo las partes necesarias de la imagen en lugar de volver a dibujar la imagen completa en cada ciclo de animación.

¿Por qué el lienzo webgl se aclara así? ¿Puedo evitar que se aclare?

Answer 1

Cambie la línea 51 a var gl = getWebGLContext(document.getElementById("canvas"), {preserveDrawingBuffer: true}); violín

Advertencia: la última vez que verifiqué encender Firefox esto disminuirá considerablemente.