From dbc7d40518033024a27321a9b0ed802f5802ddf9 Mon Sep 17 00:00:00 2001
From: fand <mail@amagi.dev>
Date: Thu, 4 Jul 2024 11:38:05 -0700
Subject: [PATCH 1/3] tmp: add FPS logging

---
 packages/vfx-js/src/vfx-player.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/vfx-js/src/vfx-player.ts b/packages/vfx-js/src/vfx-player.ts
index 6020866..0e3e1bb 100644
--- a/packages/vfx-js/src/vfx-player.ts
+++ b/packages/vfx-js/src/vfx-player.ts
@@ -309,9 +309,16 @@ export class VFXPlayer {
         this.#isPlaying = false;
     }
 
+    #lastNow = 0;
+
     #playLoop = (): void => {
         const now = Date.now() / 1000;
 
+        // TMP: log estimated FPS
+        const fps = 1 / (now - this.#lastNow);
+        console.log(">> FPS:", fps.toFixed(5));
+        this.#lastNow = now;
+
         this.#renderer.clear();
 
         // This must done every frame because iOS Safari doesn't fire

From 93bcbac8a80c31ed954e2103c4fd0d3824fb6136 Mon Sep 17 00:00:00 2001
From: fand <mail@amagi.dev>
Date: Thu, 4 Jul 2024 11:51:09 -0700
Subject: [PATCH 2/3] fix: prevent requestAnimationFrame from running more than
 once

---
 packages/vfx-js/src/vfx-player.ts | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/vfx-js/src/vfx-player.ts b/packages/vfx-js/src/vfx-player.ts
index 0e3e1bb..5a1c13a 100644
--- a/packages/vfx-js/src/vfx-player.ts
+++ b/packages/vfx-js/src/vfx-player.ts
@@ -32,7 +32,7 @@ export class VFXPlayer {
     #canvas: HTMLCanvasElement;
     #renderer: THREE.WebGLRenderer;
     #camera: THREE.Camera;
-    #isPlaying = false;
+    #playRequest: number | undefined = undefined;
     #pixelRatio = 2;
     #elements: VFXElement[] = [];
 
@@ -300,13 +300,21 @@ export class VFXPlayer {
         return Promise.resolve();
     }
 
+    isPlaying(): boolean {
+        return this.#playRequest !== undefined;
+    }
+
     play(): void {
-        this.#isPlaying = true;
-        this.#playLoop();
+        if (!this.isPlaying()) {
+            this.#playRequest = requestAnimationFrame(this.#playLoop);
+        }
     }
 
     stop(): void {
-        this.#isPlaying = false;
+        if (this.#playRequest !== undefined) {
+            cancelAnimationFrame(this.#playRequest);
+            this.#playRequest = undefined;
+        }
     }
 
     #lastNow = 0;
@@ -405,8 +413,8 @@ export class VFXPlayer {
             }
         }
 
-        if (this.#isPlaying) {
-            requestAnimationFrame(this.#playLoop);
+        if (this.isPlaying()) {
+            this.#playRequest = requestAnimationFrame(this.#playLoop);
         }
     };
 

From 6bb7aa46a5d2438d775f04c5f9fb9b6cca72cad1 Mon Sep 17 00:00:00 2001
From: fand <mail@amagi.dev>
Date: Thu, 4 Jul 2024 11:51:52 -0700
Subject: [PATCH 3/3] Revert "tmp: add FPS logging"

This reverts commit dbc7d40518033024a27321a9b0ed802f5802ddf9.
---
 packages/vfx-js/src/vfx-player.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/vfx-js/src/vfx-player.ts b/packages/vfx-js/src/vfx-player.ts
index 5a1c13a..7b4f4c5 100644
--- a/packages/vfx-js/src/vfx-player.ts
+++ b/packages/vfx-js/src/vfx-player.ts
@@ -317,16 +317,9 @@ export class VFXPlayer {
         }
     }
 
-    #lastNow = 0;
-
     #playLoop = (): void => {
         const now = Date.now() / 1000;
 
-        // TMP: log estimated FPS
-        const fps = 1 / (now - this.#lastNow);
-        console.log(">> FPS:", fps.toFixed(5));
-        this.#lastNow = now;
-
         this.#renderer.clear();
 
         // This must done every frame because iOS Safari doesn't fire