@xmov/avatar 2.0.0-alpha.38

package/src/modules/Composition.ts

@@ -0,0 +1,79 @@
+import AvatarRender from "../baseRender/AvatarRenderer";
+import UIRenderer from "../baseRender/UIRenderer";
+import AudioRenderer from "../baseRender/AudioRenderer";
+import { FPSTracker, FPSStats } from "../utils/fpsTracker";
+type TRenderer = UIRenderer;
+export default class Composition {
+  TAG = "[Composition]";
+  container: Element;
+  avatarRenderer: AvatarRender;
+  audioRenderer: AudioRenderer;
+  restRenderers: TRenderer[];
+  private fpsTracker: FPSTracker;
+  private onFPSUpdate?: (stats: FPSStats) => void;
+  audioOnlyMode: boolean;
+
+  constructor(options: {
+    container: Element;
+    avatarRenderer: AvatarRender;
+    restRenderers: TRenderer[];
+    audioRenderer: AudioRenderer;
+    audioOnlyMode?: boolean;
+    onFPSUpdate?: (stats: FPSStats) => void;
+  }) {
+    this.container = options.container;
+    this.avatarRenderer = options.avatarRenderer;
+    this.restRenderers = options.restRenderers;
+    this.audioRenderer = options.audioRenderer;
+    this.onFPSUpdate = options.onFPSUpdate;
+    this.audioOnlyMode = options.audioOnlyMode || false;
+    this.fpsTracker = new FPSTracker();
+    if (!this.audioOnlyMode) {
+      this.container.appendChild(options.avatarRenderer.canvas);
+    }
+  }
+
+  compose(frameIndex: number) {
+    if (!this.audioOnlyMode) {
+      const avatarResult = this.avatarRenderer.render(frameIndex);
+      const rendered = avatarResult.rendered;
+
+      this.fpsTracker.tick(rendered);
+
+      const stats = this.fpsTracker.getStats();
+      if (this.onFPSUpdate && stats.current > 0) {
+        this.onFPSUpdate(stats);
+      }
+    }
+
+    // Audio rendering always executes
+    this.audioRenderer.render(frameIndex);
+    // UI event rendering always executes
+    for (const r of this.restRenderers) {
+      const layer = r.render(frameIndex);
+      r.clearTrackerRenderer();
+      if (layer) {
+        for (const l of layer) {
+          const ele = l?.render();
+          if (ele) {
+            this.container.appendChild(ele as Node);
+          }
+        }
+      }
+    }
+  }
+
+  getFPSStats(): FPSStats {
+    return this.fpsTracker.getStats();
+  }
+
+  stop() {
+    this.audioRenderer.stop(-1);
+  }
+
+  destroy() {
+    this.avatarRenderer.destroy();
+    this.audioRenderer.destroy();
+    this.restRenderers.forEach((r) => r.destroy());
+  }
+}