Prerender pada kanvas 2D

Dalam upaya untuk mengoptimalkan animasi 2D yang dibuat dalam kanvas, satu opsi menarik ditemukan.

Visualisasi awal - prerender.

"Dan bagaimana jika kamu merekam semua frame terlebih dahulu dan menunjukkannya setelah animasi berakhir?" - Kami berpikir dengan seorang teman dan itulah yang terjadi pada hari berikutnya.

Demo langsung

amedomary.ru/prerender-canvas

Kode v1.0

Halaman itu sendiri ada di Github .

Logikanya sangat sederhana dan diimplementasikan dalam 2 langkah:

Langkah 1 - Simpan setiap bingkai animasi kami ke berbagai gambar

  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

Seperti yang dapat dilihat dari tangkapan layar di bawah ini - prosesor kami hanya mengalami tahap prerender. Menggambar gambar yang sudah jadi tidak sulit.

Penyimpanan

Untuk animasi kecil seperti milik kami, semua ini membutuhkan:
~ 432/2 = 200 frame
~ 25 mb

Kesimpulan

Jika Anda memiliki kesempatan untuk menunggu sebelum menampilkan animasi kepada pengguna dan itu tidak akan memakan memori hingga Gigabytes - coba lakukan sesuatu seperti itu.

PS

Jika Anda memiliki ide untuk meningkatkan kinerja pendekatan ini - tulis :)