poc for adding "flush"

poc for adding flush.

I think we just need to add `flushCanvasRenderers` as `flush` (also add this for the flushSkiaRenderer) and that should address #336.

obviously needs clean up, but just wanna make sure its worth sticking this in.

is there a good way to get back to the "issue" request to enquire if this will sort the problem? or do we just update the api and check in?

Diffs=
ebff4893c poc for adding "flush" (#6237)

Co-authored-by: Maxwell Talbot <[email protected]>
Co-authored-by: Zachary Plata <[email protected]>

.rive_head

@@ -1 +1 @@
-b098ad23a15cc7b11f144e407374c83d5db0fee0
+ebff4893cb0698855530d530a6f952880dceb229

js/examples/_frameworks/parcel_example_canvas/index.js

@@ -1,6 +1,6 @@
 import "regenerator-runtime";
-// import { Rive, Fit, Alignment, Layout, EventType } from "@rive-app/canvas";
-import { Rive, Fit, Alignment, Layout, EventType } from "@rive-app/canvas-lite";
+import { Rive, Fit, Alignment, Layout, EventType } from "@rive-app/canvas";
+// import { Rive, Fit, Alignment, Layout, EventType } from "@rive-app/canvas-lite";
 //import { Rive, Fit, Alignment, Layout } from "@rive-app/webgl";
 import AvatarAnimation from "./look.riv";
 import TapeMeshAnimation from "./tape.riv";

js/src/rive_advanced.mjs.d.ts

@@ -90,6 +90,15 @@ export interface RiveCanvas {
    * @param requestID - ID of the requestAnimationFrame request to cancel
    */
   cancelAnimationFrame(requestID: number): void;
+  /**
+   * A Rive-specific function to "flush" queued up draw calls from using the renderer.
+   * 
+   * This should only be invoked once at the end of a loop in a regular JS
+   * requestAnimationFrame loop, and should not be used with the Rive-wrapped
+   * requestAnimationFrame (aka, the requestAnimationFrame() API on this object) as that
+   * API will handle flushing the draw calls implicitly.
+   */
+  resolveAnimationFrame(): void;
   /**
    * Debugging tool to showcase the FPS in the corner of the screen in a new div. If a callback
    * function is provided, this function passes the FPS count to the callback instead of creating a

wasm/examples/out_of_band_example/index.ts

@@ -65,22 +65,22 @@ async function main() {
   const cachedImageAsset = (asset) => {
     let image = imageCache[imageCacheIndex++ % imageCache.length];
     asset.setRenderImage(image);
-    rive.requestAnimationFrame(draw);
+    requestAnimationFrame(draw);
     // IMPORTANT: to clear the cache, be sure to also call .unref() on each asset.
   };
 
   const cachedFontAsset = (asset) => {
     let font = fontCache[fontCacheIndex++ % fontCache.length];
     asset.setFont(font);
-    rive.requestAnimationFrame(draw);
+    requestAnimationFrame(draw);
     // IMPORTANT: to clear the cache, be sure to also call .unref() on each asset.
   };
 
   const randomImageAsset = (asset) => {
     fetch("https://picsum.photos/1000/1500").then(async  (res) => {
       rive.decodeImage(new Uint8Array(await res.arrayBuffer()), (image) => {
         asset.setRenderImage(image);
-        rive.requestAnimationFrame(draw);
+        requestAnimationFrame(draw);
         // IMPORTANT: call unref, so that we do not keep the asset alive with 
         // a reference from javascript.
         image.unref();
@@ -102,7 +102,7 @@ async function main() {
       rive.decodeFont(new Uint8Array(await res.arrayBuffer()), (font) => { 
         asset.setFont(font);
 
-        rive.requestAnimationFrame(draw);
+        requestAnimationFrame(draw);
         // IMPORTANT: call unref, so that we do not keep the asset alive with 
         // a reference from javascript.
         font.unref();
@@ -221,9 +221,10 @@ async function main() {
     renderer.flush();
 
     // Draw more if we want to.
-    rive.requestAnimationFrame(draw);
+    requestAnimationFrame(draw);
+    rive.resolveAnimationFrame();
   }
-  rive.requestAnimationFrame(draw);
+  requestAnimationFrame(draw);
 }
 
 main();

wasm/examples/out_of_band_example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rive_centaur_game",
+  "name": "out_of_band_example",
   "private": true,
   "version": "1.0.0",
   "description": "",

wasm/examples/parcel_example/checkForLeaks.js

@@ -0,0 +1,78 @@
+export async function checkForLeaks(rive) {
+  const riveEx = RIVE_EXAMPLES[0];
+  const { hasStateMachine } = riveEx;
+  var stateMachine, animation;
+  const bytes = await (await fetch(new Request(riveEx.riveFile))).arrayBuffer();
+  const file = await rive.load(new Uint8Array(bytes));
+  const artboard = file.defaultArtboard();
+  artboard.advance(0);
+  if (hasStateMachine) {
+    stateMachine = new rive.StateMachineInstance(
+      artboard.stateMachineByIndex(0),
+      artboard
+    );
+  } else {
+    animation = new rive.LinearAnimationInstance(
+      artboard.animationByName(riveEx.animation),
+      artboard
+    );
+  }
+  const num = 0;
+  let canvas = document.getElementById(`canvas${num}`);
+  if (!canvas) {
+    const body = document.querySelector("body");
+    canvas = document.createElement("canvas");
+    canvas.id = `canvas${num}`;
+    body.appendChild(canvas);
+  }
+  canvas.width = "400";
+  canvas.height = "400";
+  // Don't use the offscreen renderer for FF as it should have a context limit of 300
+  const renderer = rive.makeRenderer(canvas, true);
+  var elapsedSeconds = 0.0167;
+  // Render 20 frames.
+  for (var i = 0; i < 1000; i++) {
+    renderer.clear();
+    if (artboard) {
+      if (stateMachine) {
+        stateMachine.advance(elapsedSeconds);
+      }
+      if (animation) {
+        animation.advance(elapsedSeconds);
+        animation.apply(1);
+      }
+      artboard.advance(elapsedSeconds);
+      renderer.save();
+      renderer.align(
+        rive.Fit.contain,
+        rive.Alignment.center,
+        {
+          minX: 0,
+          minY: 0,
+          maxX: canvas.width,
+          maxY: canvas.height,
+        },
+        artboard.bounds
+      );
+      artboard.draw(renderer);
+      renderer.restore();
+    }
+    renderer.flush();
+  }
+
+  renderer.delete();
+  if (stateMachine) {
+    stateMachine.delete();
+  }
+  if (animation) {
+    animation.delete();
+  }
+  if (artboard) {
+    artboard.delete();
+  }
+  file.delete();
+  rive.cleanup();
+  // Report any leaks.
+  rive.doLeakCheck();
+  console.log("END");
+}

wasm/examples/parcel_example/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <canvas id="canvas0"></canvas>
+    <canvas id="rive-canvas"></canvas>
     <script src="./index.js"></script>
   </body>
 </html>