Pré-renderizador em tela 2D

Na tentativa de otimizar a animação 2D criada na tela, uma opção interessante foi encontrada.

Visualização preliminar - pré-renderização.

"E se você gravar todos os quadros com antecedência e mostrá-los após o final da animação?" - Nós pensamos com um amigo e foi o que aconteceu no dia seguinte.

Demonstração ao vivo

amedomary.ru/prerender-canvas

Código v1.0

A página em si está no Github .

A lógica é muito simples e é implementada em 2 etapas:

Etapa 1 - Salve cada quadro de nossa animação em uma variedade de imagens

  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 pode ser visto na captura de tela abaixo - nosso processador sofre apenas no estágio de pré-renderização. Desenhar imagens prontas não é difícil.

Memória

Para uma animação pequena como a nossa, é necessário:
~ 432/2 = 200 quadros
~ 25 mb

Conclusão

Se você tiver a oportunidade de esperar antes de mostrar a animação para o usuário e ela não consumir Gigabytes de memória - tente fazer algo assim.

PS

Se você tem idéias para melhorar o desempenho dessa abordagem - escreva :)