@sangwonl/pocato-core 0.4.10 → 0.4.12

package/dist/index.js

@@ -368,6 +368,7 @@ function bootstrapShaders() {
 import * as THREE2 from "three";
 var VIDEO_EXTENSIONS = /\.(mp4|webm|mov|ogg)(\?|$)/i;
 var VIDEO_LOAD_TIMEOUT_MS = 15e3;
+var VIDEO_FRAME_CAPTURE_TIMEOUT_MS = 750;
 function isVideoSource(layer) {
   if (layer.type) return layer.type === "video";
   return VIDEO_EXTENSIONS.test(layer.src);
@@ -438,7 +439,15 @@ function loadImageTexture(src, onError) {
     });
     inflight.set(src, pending);
   }
-  return pending.then((texture) => ({ texture }));
+  return pending.then((texture) => ({
+    texture: cloneDisposableTexture(texture)
+  }));
+}
+function cloneDisposableTexture(texture) {
+  if (texture === getTransparentTexture()) return texture;
+  const clone = texture.clone();
+  clone.needsUpdate = true;
+  return clone;
 }
 function loadVideoTexture(layer, options) {
   return new Promise((resolve) => {
@@ -526,12 +535,37 @@ function loadVideoTexture(layer, options) {
       });
     };
     video.addEventListener("loadeddata", () => {
-      resolveWithFrame();
+      waitForDecodedVideoFrame(video, signal).then(() => {
+        resolveWithFrame();
+      });
     }, { once: true });
     video.src = layer.src;
     video.load();
   });
 }
+function waitForDecodedVideoFrame(video, signal) {
+  return new Promise((resolve) => {
+    if (signal?.aborted || !("requestVideoFrameCallback" in video)) {
+      resolve();
+      return;
+    }
+    let settled = false;
+    let frameId = null;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      globalThis.clearTimeout(timeoutId);
+      if (frameId != null && "cancelVideoFrameCallback" in video) {
+        video.cancelVideoFrameCallback(frameId);
+      }
+      signal?.removeEventListener("abort", finish);
+      resolve();
+    };
+    const timeoutId = globalThis.setTimeout(finish, VIDEO_FRAME_CAPTURE_TIMEOUT_MS);
+    signal?.addEventListener("abort", finish, { once: true });
+    frameId = video.requestVideoFrameCallback(finish);
+  });
+}
 function loadFrozenVideoTexture(layer, freezeTime, options) {
   return new Promise((resolve) => {
     const { onError, signal } = options;
@@ -2028,6 +2062,9 @@ var FaceRenderer = class {
     this.loadedLayers = [];
     this.layerLoadVersion = 0;
     this.layerLoadAbort = null;
+    this.videoActivationVersion = 0;
+    this.videoActivationAbort = null;
+    this.destroyed = false;
     bootstrapShaders();
     this.scene = new THREE3.Scene();
     this.camera = new THREE3.Camera();
@@ -2078,6 +2115,9 @@ var FaceRenderer = class {
   }
   async loadLayers(layers, onError) {
     const version = ++this.layerLoadVersion;
+    this.videoActivationVersion++;
+    this.videoActivationAbort?.abort();
+    this.videoActivationAbort = null;
     this.layerLoadAbort?.abort();
     const abort = new AbortController();
     this.layerLoadAbort = abort;
@@ -2117,16 +2157,25 @@ var FaceRenderer = class {
     this.material.uniforms.uResolution.value.set(width, height);
   }
   async playLoadedVideos() {
+    const activationVersion = ++this.videoActivationVersion;
+    this.videoActivationAbort?.abort();
+    const activationAbort = new AbortController();
+    this.videoActivationAbort = activationAbort;
     await Promise.all(this.loadedLayers.map(async (loaded, i) => {
+      if (this.destroyed || activationAbort.signal.aborted || activationVersion !== this.videoActivationVersion) return;
       if (!loaded.liveTexture) {
         loaded.play?.();
         return;
       }
       loaded.play?.();
-      if (await waitForVideoFrame(loaded.videoEl)) {
+      const hasFrame = await waitForVideoFrame(loaded.videoEl, activationAbort.signal);
+      if (hasFrame && !this.destroyed && !activationAbort.signal.aborted && activationVersion === this.videoActivationVersion) {
         this.material.uniforms[`uLayer${i}`].value = loaded.liveTexture;
       }
     }));
+    if (this.videoActivationAbort === activationAbort) {
+      this.videoActivationAbort = null;
+    }
   }
   updateShader(fragmentShader) {
     this.material.fragmentShader = resolveIncludes(fragmentShader);
@@ -2144,7 +2193,11 @@ var FaceRenderer = class {
     this.material.uniforms.uLayerCount.value = 0;
   }
   destroy() {
+    this.destroyed = true;
     this.layerLoadVersion++;
+    this.videoActivationVersion++;
+    this.videoActivationAbort?.abort();
+    this.videoActivationAbort = null;
     this.layerLoadAbort?.abort();
     this.layerLoadAbort = null;
     this.disposeLayers();
@@ -2152,17 +2205,37 @@ var FaceRenderer = class {
     this.material.dispose();
   }
 };
-function waitForVideoFrame(video) {
+function waitForVideoFrame(video, signal) {
   return new Promise((resolve) => {
+    if (signal?.aborted) {
+      resolve(false);
+      return;
+    }
+    let settled = false;
+    let timeoutId = null;
+    let videoFrameId = null;
+    const finish = (hasFrame) => {
+      if (settled) return;
+      settled = true;
+      if (timeoutId != null) globalThis.clearTimeout(timeoutId);
+      if (video && videoFrameId != null && "cancelVideoFrameCallback" in video) {
+        video.cancelVideoFrameCallback(videoFrameId);
+      }
+      signal?.removeEventListener("abort", abort);
+      resolve(hasFrame);
+    };
+    const abort = () => finish(false);
     if (video && "requestVideoFrameCallback" in video) {
-      const timeoutId = globalThis.setTimeout(() => resolve(false), VIDEO_FRAME_WAIT_TIMEOUT_MS);
-      video.requestVideoFrameCallback(() => {
-        globalThis.clearTimeout(timeoutId);
-        resolve(true);
-      });
+      timeoutId = globalThis.setTimeout(() => finish(false), VIDEO_FRAME_WAIT_TIMEOUT_MS);
+      signal?.addEventListener("abort", abort, { once: true });
+      videoFrameId = video.requestVideoFrameCallback(() => finish(true));
       return;
     }
-    requestAnimationFrame(() => resolve(true));
+    const rafId2 = requestAnimationFrame(() => finish(true));
+    signal?.addEventListener("abort", () => {
+      cancelAnimationFrame(rafId2);
+      finish(false);
+    }, { once: true });
   });
 }
 function toThreeUniformValue(value) {