Prerender sobre lienzo 2D

En los intentos de optimizar la animación 2D creada en el lienzo, se encontró una opción interesante.

Visualización preliminar - prerender.

"¿Y si grabas todos los fotogramas por adelantado y los muestras después del final de la animación?" - Pensamos con un amigo y eso fue lo que sucedió al día siguiente.

Demo en vivo

amedomary.ru/prerender-canvas

Código v1.0

La página en sí está en Github .

La lógica es muy simple y se implementa en 2 pasos:

Paso 1: guarde cada fotograma de nuestra animación en una variedad de imágenes

  function renderLoop() {
    draw();

    // create prerender images
    canvasPrerender.toBlob(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      reader.onload = function() {
        const image = document.createElement("img");
        image.src = reader.result;
        prerenderArr.push(image);
      };
    });

    if (prerenderIsCompleted) {
      requestAnimationFrame(renderLoop);
    } else {
      requestAnimationFrame(drawPreImg);
    }
  }

2 — —

  function drawPreImg() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(prerenderArr[i], 0, 0);

    requestAnimationFrame(drawPreImg);
  }

Analytic

. macbook 13 2019 .

.

FPS

Fps "" .

Fps "" (prerender): 14-22
Fps "" ( ): 58-60

, live demo.

Prerender — 9
— 3
— 12 ( live demo)

CPU / Performance

Como se puede ver en la captura de pantalla a continuación: nuestro procesador solo sufre en la etapa de prerrevisión. Dibujar imágenes ya hechas no es difícil.

Memoria

Para una pequeña animación como la nuestra, todo esto toma:
~ 432/2 = 200 cuadros
~ 25 mb

Conclusión

Si tiene la oportunidad de esperar antes de mostrar la animación al usuario y no va a consumir Gigabytes de memoria, intente hacer algo así.

PD

Si tiene ideas para mejorar el rendimiento de este enfoque, escriba :)