three-mediapipe-rig 0.1.0 → 0.1.2

package/README.md

@@ -10,13 +10,15 @@ The motion from the webcam will be applied to a skeleton. Angle based so it work
 This will run 3 models: face, body, hands. So expect a FPS drop.
 
 Expolore the demos:
+- New! [**MeshCap Editor**](https://github.com/bandinopla/three-mediapipe-rig/blob/main/MESHCAP.md)
 - [Characters](https://bandinopla.github.io/three-mediapipe-rig) 
 - [Hands Demo](https://bandinopla.github.io/three-mediapipe-rig/?demo=hands)
-- [Video to Face Geometry](https://bandinopla.github.io/three-mediapipe-rig/?demo=face-uv-demo)
+- [**Video to Face Geometry** !!](https://bandinopla.github.io/three-mediapipe-rig/?demo=face-uv)
+
 ---
 
 ## Table of Contents
-
+- New! [**MeshCap Editor**](https://github.com/bandinopla/three-mediapipe-rig/blob/main/MESHCAP.md)
 - [Features](#features)
 - [Installation](#installation)
 - [Quick Start](#quick-start)
@@ -237,6 +239,9 @@ const face = tracker.faceTracker.bindGeometry( faceMesh );
 face.update(delta)
 ``` 
 
+### How does this work?
+You use the canonical face model provided by media pipe ( this is important because it has the same number of vertices as the facial mesh ), this code will create a positionNode ( needs a NodeMaterial ) that will adjust the position of the vertices to match the facial mesh and also it will use the video feed as a texture for the mesh, so it will look like the face is deforming and moving with the webcam feed.
+
 ## Multiple Characters
 
 You can bind **multiple rigs** to the same tracker. All of them will mirror the tracked motion:

package/dist/face-tracker-utils-xt9__vBF.js

@@ -0,0 +1,16 @@
+import { BufferAttribute as c } from "three";
+const d = 478, g = (r) => {
+  if (r.geometry.hasAttribute("landmarkIndex")) return;
+  const s = r.geometry, e = s.attributes.position, a = [], n = /* @__PURE__ */ new Map(), i = [];
+  for (let t = 0; t < e.count; t++) {
+    const o = Math.round(e.getX(t) * 1e6) + "," + Math.round(e.getY(t) * 1e6) + "," + Math.round(e.getZ(t) * 1e6);
+    n.has(o) || (n.set(o, a.length), a.push(t));
+    const u = n.get(o);
+    i.push(u < d ? u : 65535);
+  }
+  s.setAttribute("landmarkIndex", new c(new Uint16Array(i), 1));
+};
+export {
+  d as F,
+  g as c
+};

package/dist/meshcap/atlas-builder.d.ts

@@ -0,0 +1,10 @@
+import { MeshCapAtlas, RecordedClip } from './types';
+/**
+ * Builds a texture atlas from a list of recorded clips.
+ * @param clips The clips to build the atlas from
+ * @param atlasSize Max size of the atlas (width or height)
+ * @param padding The padding to add between frames
+ * @returns The atlas
+ */
+export declare function buildMeshCapAtlas(clips: RecordedClip[], atlasSize: number, padding?: number): MeshCapAtlas;
+//# sourceMappingURL=atlas-builder.d.ts.map

package/dist/meshcap/atlas-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atlas-builder.d.ts","sourceRoot":"","sources":["../../src/meshcap/atlas-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAY,YAAY,EAAW,MAAM,SAAS,CAAC;AA0DxE;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAE,KAAK,EAAC,YAAY,EAAE,EAAE,SAAS,EAAC,MAAM,EAAE,OAAO,GAAC,MAAQ,GAAG,YAAY,CAsGzG"}

package/dist/meshcap/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MCAP_MAGIC = 1296253264;
+export declare const MCAP_FILE_VERSION = 1;
+//# sourceMappingURL=constants.d.ts.map

package/dist/meshcap/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/meshcap/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,iBAAiB,IAAI,CAAC"}

package/dist/meshcap/material.d.ts

@@ -0,0 +1,53 @@
+import { Mesh, Texture } from 'three';
+import { MCapClip } from './types';
+import { NodeMaterial } from 'three/webgpu';
+export type MeshCapMaterialHandler = {
+    /**
+     * Moves to a particular clip
+     * @param clipIndex The index of the clip to move to
+     */
+    goto: (clipIndex: number | string, _loop?: boolean) => void;
+    /**
+     * Play a clip and when it reaches the end, it will loop back
+     * @param clipName Name of the clip
+     * @returns
+     */
+    gotoAndLoop: (clipIndex: number | string) => void;
+    /**
+     * Play a clip and when it reaches the end, it will not loop back
+     * @param clipName Name of the clip
+     * @returns
+     */
+    gotoAndPlay: (clipIndex: number | string) => void;
+    /**
+     * Updates the material with the given delta time
+     * @param delta The time to add to the current time
+     */
+    update: (delta: number) => void;
+    /**
+     * The clips available to play
+     */
+    clips: MCapClip[];
+    /**
+     * The texture atlas that contains the frames used by the clips
+     */
+    atlasTexture: Texture;
+    /**
+     * Disposes the material and the texture atlas
+     */
+    dispose: VoidFunction;
+    /**
+     * The material used
+     */
+    material: NodeMaterial;
+};
+/**
+ * Creates or setups a MeshCap material handler (not the material itself) for a given mesh.
+ * @param atlasTexture The texture atlas that contains the frames used by the clips
+ * @param clips The clips previously obtained by loading an .mcap file
+ * @param targetMesh The mesh to apply the material to. (It will be updated with a landmarkIndex attribute if it doesn't have one)
+ * @param host Optional: The material to use as a base. Defaults to a MeshPhysicalNodeMaterial.
+ * @returns A handler that allows you to control the material.
+ */
+export declare function createMeshCapMaterial(atlasTexture: Texture, clips: MCapClip[], targetMesh: Mesh, host?: NodeMaterial): MeshCapMaterialHandler;
+//# sourceMappingURL=material.d.ts.map

package/dist/meshcap/material.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../src/meshcap/material.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAA4B,YAAY,EAAW,MAAM,cAAc,CAAC;AAM/E,MAAM,MAAM,sBAAsB,GAAG;IAEpC;;;OAGG;IACH,IAAI,EAAC,CAAE,SAAS,EAAC,MAAM,GAAC,MAAM,EAAE,KAAK,CAAC,EAAC,OAAO,KAAI,IAAI,CAAA;IAEtD;;;;OAIG;IACH,WAAW,EAAC,CAAE,SAAS,EAAC,MAAM,GAAC,MAAM,KAAI,IAAI,CAAA;IAE7C;;;;OAIG;IACH,WAAW,EAAC,CAAE,SAAS,EAAC,MAAM,GAAC,MAAM,KAAI,IAAI,CAAA;IAE7C;;;OAGG;IACH,MAAM,EAAC,CAAE,KAAK,EAAC,MAAM,KAAI,IAAI,CAAA;IAE7B;;OAEG;IACH,KAAK,EAAC,QAAQ,EAAE,CAAA;IAEhB;;OAEG;IACH,YAAY,EAAC,OAAO,CAAA;IAEpB;;OAEG;IACH,OAAO,EAAC,YAAY,CAAA;IAEpB;;OAEG;IACH,QAAQ,EAAC,YAAY,CAAA;CACrB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAE,YAAY,EAAC,OAAO,EAAE,KAAK,EAAC,QAAQ,EAAE,EAAE,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,EAAC,YAAY,GAAG,sBAAsB,CAkN1I"}

package/dist/meshcap/meshcap.d.ts

@@ -0,0 +1,5 @@
+export type * from './types';
+export * from './parse-mcap-file';
+export * from './atlas-builder';
+export * from './material';
+//# sourceMappingURL=meshcap.d.ts.map

package/dist/meshcap/meshcap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meshcap.d.ts","sourceRoot":"","sources":["../../src/meshcap/meshcap.ts"],"names":[],"mappings":"AAAA,mBAAmB,SAAS,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA"}

package/dist/meshcap/parse-mcap-file.d.ts

@@ -0,0 +1,8 @@
+import { MCapFile } from './types';
+/**
+ * Loads a MeshCap (.mcap) file from a URL or File object. This is the file that contains the metadata for the clips.
+ * @param mcapFileSource URL or File object
+ * @returns
+ */
+export declare function loadMeshCapFile(mcapFileSource: string | File): Promise<MCapFile>;
+//# sourceMappingURL=parse-mcap-file.d.ts.map

package/dist/meshcap/parse-mcap-file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-mcap-file.d.ts","sourceRoot":"","sources":["../../src/meshcap/parse-mcap-file.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,QAAQ,EAAyB,MAAM,SAAS,CAAC;AAOpE;;;;GAIG;AACH,wBAAsB,eAAe,CAAE,cAAc,EAAC,MAAM,GAAC,IAAI,GAAK,OAAO,CAAC,QAAQ,CAAC,CAmBtF"}

package/dist/meshcap/types.d.ts

@@ -0,0 +1,53 @@
+import { Vector3Like } from 'three';
+export interface UVCoord {
+    u: number;
+    v: number;
+    w: number;
+    h: number;
+}
+export interface Clip {
+    fps: number;
+    name: string;
+    landmarks: Vector3Like[][];
+    scale: number;
+    aspectRatio: number;
+}
+export interface RecordedClip extends Clip {
+    frames: {
+        canvas: HTMLCanvasElement;
+        cropUV: UVCoord;
+    }[];
+}
+export interface MCapClip extends Clip {
+    frames: {
+        cropUV: UVCoord;
+        frameUV: UVCoord;
+    }[];
+}
+export interface MCapFile {
+    clips: MCapClip[];
+    version: number;
+    atlasSize: number;
+    atlasPadding: number;
+    /**
+     * Extract the clips from the atlas image using the metadata as a guide to know where the clips are.
+     * @param atlas
+     */
+    unpackClips: (atlas: File | string | HTMLImageElement | HTMLCanvasElement) => Promise<RecordedClip[]>;
+}
+export interface MeshCapAtlas {
+    canvas: HTMLCanvasElement;
+    /**
+     * the index of each will correspond to the provided recorded clip's frames array at the time of creation
+     */
+    clips: MCapClip[];
+    /**
+     * padding used in the creation of the atlas
+     */
+    padding: number;
+    /**
+     *
+     */
+    save(downloadFile: boolean): Promise<Blob>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/meshcap/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/meshcap/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAInC,MAAM,WAAW,OAAO;IAAE,CAAC,EAAC,MAAM,CAAC;IAAA,CAAC,EAAC,MAAM,CAAC;IAAA,CAAC,EAAC,MAAM,CAAC;IAAA,CAAC,EAAC,MAAM,CAAA;CAAC;AAE9D,MAAM,WAAW,IAAI;IACpB,GAAG,EAAC,MAAM,CAAC;IACX,IAAI,EAAC,MAAM,CAAC;IACZ,SAAS,EAAC,WAAW,EAAE,EAAE,CAAC;IAC1B,KAAK,EAAC,MAAM,CAAA;IACZ,WAAW,EAAC,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,YAAa,SAAQ,IAAI;IACzC,MAAM,EAAC;QAAE,MAAM,EAAC,iBAAiB,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CACvD;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI;IACrC,MAAM,EAAE;QAAE,MAAM,EAAC,OAAO,CAAC;QAAC,OAAO,EAAC,OAAO,CAAA;KAAE,EAAE,CAAA;CAC7C;AAED,MAAM,WAAW,QAAQ;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAC,MAAM,CAAC;IACjB,YAAY,EAAC,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,EAAE,CAAC,KAAK,EAAC,IAAI,GAAC,MAAM,GAAC,gBAAgB,GAAC,iBAAiB,KAAG,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;CAC7F;AAED,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAE7B;;OAEG;IACA,KAAK,EAAE,QAAQ,EAAE,CAAC;IAErB;;OAEG;IACH,OAAO,EAAC,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAE,YAAY,EAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1C"}

package/dist/meshcap/write-mcap-file.d.ts

@@ -0,0 +1,3 @@
+import { MeshCapAtlas } from './types';
+export declare function atlasToMCap(atlas: MeshCapAtlas, useRelativeLandmarks?: boolean): Promise<Blob>;
+//# sourceMappingURL=write-mcap-file.d.ts.map

package/dist/meshcap/write-mcap-file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"write-mcap-file.d.ts","sourceRoot":"","sources":["../../src/meshcap/write-mcap-file.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,wBAAsB,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE,oBAAoB,GAAC,OAAc,iBA2JzF"}

package/dist/meshcap.d.ts

@@ -0,0 +1,2 @@
+export * from './meshcap/meshcap'
+export {}

package/dist/meshcap.js

@@ -0,0 +1,316 @@
+import { inflate as ht, deflate as ft } from "fflate";
+import { F as N, c as mt } from "./face-tracker-utils-xt9__vBF.js";
+import { MeshPhysicalNodeMaterial as pt, Vector3 as W } from "three/webgpu";
+import { instancedArray as B, texture as G, uniform as O, select as ut, attribute as gt, varying as Ut, vec3 as wt, float as yt } from "three/tsl";
+const J = 1296253264, _ = 1;
+async function Rt(m) {
+  if (typeof m == "string") {
+    const o = await (await fetch(m)).arrayBuffer();
+    return K(o);
+  } else
+    return new Promise((u, o) => {
+      const e = new FileReader();
+      e.onload = (v) => {
+        const x = v.target.result;
+        u(K(x));
+      }, e.onerror = (v) => {
+        o(v);
+      }, e.readAsArrayBuffer(m);
+    });
+}
+async function K(m) {
+  const u = await new Promise((a, r) => {
+    ht(new Uint8Array(m), (p, y) => {
+      p ? r(p) : a(y);
+    });
+  }), o = new DataView(u.buffer);
+  let e = 0;
+  const v = o.getUint32(e);
+  if (e += 4, v !== J) throw new Error("Invalid file: not a MCAP file");
+  const x = o.getUint8(e);
+  if (e += 1, x !== _) throw new Error(`Unsupported version: ${x} != ${_}`);
+  const h = o.getUint8(e);
+  e += 1;
+  const s = o.getUint16(e);
+  e += 2;
+  const t = o.getUint8(e);
+  e += 1;
+  const f = [];
+  for (let a = 0; a < h; a++) {
+    const r = o.getUint8(e);
+    e += 1;
+    const p = new Uint8Array(u.buffer, e, r), y = new TextDecoder().decode(p);
+    e += r;
+    const i = o.getUint8(e);
+    e += 1;
+    const U = o.getUint8(e);
+    e += 1;
+    const n = o.getUint8(e) / 100;
+    e += 1;
+    const c = o.getUint8(e) / 100;
+    e += 1;
+    const l = [], g = [], b = [];
+    for (let M = 0; M < i; M++) {
+      const k = o.getUint16(e) / 1e3;
+      e += 2;
+      const A = o.getUint16(e) / 1e3;
+      e += 2;
+      const R = o.getUint16(e) / 1e3;
+      e += 2;
+      const L = o.getUint16(e) / 1e3;
+      e += 2, l.push({ u: k, v: A, w: R, h: L });
+      const Y = o.getUint16(e) / 1e3;
+      e += 2;
+      const P = o.getUint16(e) / 1e3;
+      e += 2;
+      const q = o.getUint16(e) / 1e3;
+      e += 2;
+      const T = o.getUint16(e) / 1e3;
+      e += 2, b.push({ u: Y, v: P, w: q, h: T });
+      const C = [], z = M > 0 ? g[M - 1] : null;
+      for (let V = 0; V < N; V++)
+        if (z === null) {
+          const F = o.getUint16(e) / 1e3;
+          e += 2;
+          const E = o.getUint16(e) / 1e3;
+          e += 2;
+          const X = o.getInt16(e) / 1e3;
+          e += 2, C.push({ x: F, y: E, z: X });
+        } else {
+          const F = o.getInt8(e) / 1e3;
+          e += 1;
+          const E = o.getInt8(e) / 1e3;
+          e += 1;
+          const X = o.getInt8(e) / 1e3;
+          e += 1, C.push({
+            x: z[V].x + F,
+            y: z[V].y + E,
+            z: z[V].z + X
+          });
+        }
+      g.push(C);
+    }
+    f.push({
+      name: y,
+      fps: U,
+      scale: n,
+      aspectRatio: c,
+      frames: b.map((M, k) => ({
+        cropUV: M,
+        frameUV: l[k]
+      })),
+      landmarks: g
+    });
+  }
+  return {
+    clips: f,
+    version: x,
+    atlasSize: s,
+    atlasPadding: t,
+    unpackClips: async (a) => {
+      let r, p = !0;
+      if (a instanceof HTMLCanvasElement)
+        p = !1, r = a;
+      else {
+        let i = new Image();
+        if (typeof a == "string")
+          i.src = a;
+        else if (a instanceof File || a instanceof Blob) {
+          const n = URL.createObjectURL(a);
+          i.src = n, await new Promise((c, l) => {
+            i.onload = () => {
+              URL.revokeObjectURL(n), c();
+            }, i.onerror = l;
+          });
+        } else a instanceof HTMLImageElement && (i = a);
+        (!i.complete || !i.naturalWidth) && await new Promise((n, c) => {
+          i.onload = () => n(), i.onerror = c;
+        }), r = document.createElement("canvas"), r.width = i.width, r.height = i.height, r.getContext("2d").drawImage(i, 0, 0);
+      }
+      const y = f.map((i) => ({
+        ...i,
+        frames: i.frames.map((U) => {
+          const n = document.createElement("canvas");
+          return n.width = U.frameUV.w * r.width, n.height = U.frameUV.h * r.height, n.getContext("2d").drawImage(
+            r,
+            U.frameUV.u * r.width,
+            U.frameUV.v * r.height,
+            U.frameUV.w * r.width,
+            U.frameUV.h * r.height,
+            0,
+            0,
+            n.width,
+            n.height
+          ), {
+            canvas: n,
+            cropUV: U.cropUV
+          };
+        })
+      }));
+      return p && r.remove(), y;
+    }
+  };
+}
+async function vt(m, u = !0) {
+  const o = new TextEncoder(), e = m.clips.map((f) => o.encode(f.name)), v = 9, x = e.reduce((f, a, r) => {
+    const p = m.clips[r].frames.length, y = 1 + a.byteLength, i = 1, U = 1, n = 1, c = 1, l = 16;
+    let g = N * 6;
+    return f + y + i + U + n + c + (u ? l + g + (l + N * 3) * (p - 1) : (l + g) * p);
+  }, 0), h = new ArrayBuffer(v + x), s = new DataView(h);
+  let t = 0;
+  s.setUint32(t, J), t += 4, s.setUint8(t, _), t += 1, s.setUint8(t, m.clips.length), t += 1, s.setUint16(t, m.canvas.width), t += 2, s.setUint8(t, m.padding), t += 1;
+  for (let f = 0; f < m.clips.length; f++) {
+    s.setUint8(t, e[f].byteLength), t += 1, new Uint8Array(h, t, e[f].byteLength).set(e[f]), t += e[f].byteLength, s.setUint8(t, m.clips[f].frames.length), t += 1, s.setUint8(t, m.clips[f].fps), t += 1, s.setUint8(t, Math.round(m.clips[f].scale * 100)), t += 1, s.setUint8(t, Math.round(m.clips[f].aspectRatio * 100)), t += 1;
+    const a = m.clips[f];
+    for (let r = 0; r < a.frames.length; r++) {
+      const p = a.frames[r].cropUV, y = a.frames[r].frameUV;
+      s.setUint16(t, Math.round(y.u * 1e3)), t += 2, s.setUint16(t, Math.round(y.v * 1e3)), t += 2, s.setUint16(t, Math.round(y.w * 1e3)), t += 2, s.setUint16(t, Math.round(y.h * 1e3)), t += 2, s.setUint16(t, Math.round(p.u * 1e3)), t += 2, s.setUint16(t, Math.round(p.v * 1e3)), t += 2, s.setUint16(t, Math.round(p.w * 1e3)), t += 2, s.setUint16(t, Math.round(p.h * 1e3)), t += 2;
+      const i = a.landmarks[r], U = r > 0 ? a.landmarks[r - 1] : null;
+      i.reduce((n, c) => Math.max(n, Math.abs(c.z)), 0);
+      for (let n = 0; n < N; n++) {
+        const c = Math.round(i[n].x * 1e3), l = Math.round(i[n].y * 1e3), g = Math.round(i[n].z * 1e3);
+        if (u)
+          if (U === null)
+            s.setUint16(t, c), t += 2, s.setUint16(t, l), t += 2, s.setInt16(t, g), t += 2;
+          else {
+            const b = Math.round(U[n].x * 1e3), M = Math.round(U[n].y * 1e3), k = Math.round(U[n].z * 1e3), A = c - b, R = l - M, L = g - k;
+            console.log("Deltas: ", A), s.setInt8(t, A), t += 1, s.setInt8(t, R), t += 1, s.setInt8(t, L), t += 1;
+          }
+        else
+          s.setUint16(t, c), t += 2, s.setUint16(t, l), t += 2, s.setInt16(t, g), t += 2;
+      }
+    }
+  }
+  return new Promise((f, a) => {
+    ft(new Uint8Array(h), { level: 9 }, (r, p) => {
+      if (r) return a(r);
+      const y = new Blob([p], { type: "application/octet-stream" });
+      f(y);
+    });
+  });
+}
+function xt(m, u) {
+  const o = [], e = [];
+  let v = 0;
+  const x = [...m].sort((h, s) => s.height - h.height);
+  for (const h of x) {
+    let s = !1;
+    for (const t of o)
+      if (h.width <= u - t.currentX && h.height <= t.height) {
+        e.push({ id: h.id, x: t.currentX, y: t.y, width: h.width, height: h.height }), t.currentX += h.width, s = !0;
+        break;
+      }
+    if (!s) {
+      const t = {
+        y: v,
+        height: h.height,
+        currentX: h.width
+      };
+      o.push(t), e.push({ id: h.id, x: 0, y: v, width: h.width, height: h.height }), v += h.height;
+    }
+  }
+  return e;
+}
+const Mt = 20;
+function Lt(m, u, o = 0) {
+  const e = m.flatMap((n) => n.frames.map((c) => c.canvas)), v = Array.from(e.entries()).map(([n, c]) => ({
+    id: n,
+    // index of the frame after all the frames from all the clips have been flattened
+    width: c.width + o * 2,
+    height: c.height + o * 2
+  })), x = xt(v, u), h = Math.max(...x.map((n) => n.y + n.height)) + Mt, s = u, t = Math.min(1, u / s, u / h), f = Math.floor(s * t), a = Math.floor(h * t), r = document.createElement("canvas");
+  r.width = f, r.height = a;
+  const p = r.getContext("2d");
+  p.fillStyle = "#000000", p.fillRect(0, 0, r.width, r.height);
+  const y = [];
+  for (const n of x) {
+    const c = e[n.id], l = n.x + o, g = n.y + o, b = c.width, M = c.height;
+    p.drawImage(c, l * t, g * t, b * t, M * t), y[n.id] = {
+      u: l * t / f,
+      v: g * t / a,
+      w: b * t / f,
+      h: M * t / a
+    };
+  }
+  const i = [];
+  let U = 0;
+  for (const n of m) {
+    const c = {
+      ...n,
+      frames: []
+    };
+    for (const l of n.frames)
+      c.frames.push({
+        frameUV: y[U++],
+        cropUV: l.cropUV
+      });
+    i.push(c);
+  }
+  return p.font = `${Math.max(6, Math.floor(12 * t))}px monospace`, p.fillStyle = "#ff0000", p.fillText("Created with MeshCap : https://bandinopla.github.io/three-mediapipe-rig/?app=meshcap", 0, a - Math.max(2, 4 * t)), {
+    canvas: r,
+    clips: i,
+    padding: o,
+    async save(n) {
+      const c = await vt(this);
+      if (n) {
+        const l = URL.createObjectURL(c), g = document.createElement("a");
+        g.href = l, g.download = "atlas.mcap", g.click(), URL.revokeObjectURL(l), g.remove();
+      }
+      return c;
+    }
+  };
+}
+function zt(m, u, o, e) {
+  e ?? (e = new pt()), o.geometry.hasAttribute("landmarkIndex") || mt(o);
+  const v = [], x = [], h = [];
+  let s = 0, t = 0;
+  for (let d = 0; d < u.length; d++) {
+    const w = u[d];
+    v.push(s, t, w.frames.length, w.fps), s += w.frames.length, t += w.frames.length * N, x.push(w.aspectRatio), h.push(d == 0 ? 0 : h[d - 1] + u[d - 1].frames.length);
+  }
+  const f = B(new Float32Array(x), "float"), a = B(new Uint32Array(v), "uvec4"), r = new Float32Array(u.flatMap((d) => d.frames).reduce((d, w) => (d.push(w.frameUV.u, w.frameUV.v, w.frameUV.w, w.frameUV.h), d), [])), p = B(r, "vec4"), y = new Float32Array(u.flatMap((d) => d.frames.flatMap((w) => [w.cropUV.u, w.cropUV.v, w.cropUV.w, w.cropUV.h]))), i = B(y, "vec4"), U = new Float32Array(u.flatMap((d) => d.landmarks.flatMap((w) => w.flatMap((I) => [I.x, I.y, I.z]))));
+  u.reduce((d, w) => d + w.frames.length, 0);
+  const n = B(U, "vec3"), c = G(m), l = O(0), g = O(0), b = O(!0), M = f.element(l), k = a.element(l).w, A = a.element(l).z, R = g.mul(k).floor().toUint(), L = ut(
+    b.not().and(R.greaterThanEqual(A)),
+    // no loop + past end
+    A.sub(1),
+    // → clamp to last frame
+    R.mod(A)
+    // → wrap around
+  ), Y = B(new Uint32Array(h), "uint"), P = L, q = Y.element(l).add(L), T = p.element(a.element(l).x.add(P)), C = a.element(l).y.add(P.mul(N)), z = gt("landmarkIndex", "uint").toUint(), V = C.add(z), F = n.element(V), E = i.element(q), Q = F.xy.sub(E.xy).div(E.zw), tt = Ut(T.xy.add(Q.mul(T.zw))), et = G(c, tt);
+  e.colorNode = et;
+  const nt = n.element(C.add(234)).xy, $ = n.element(C.add(93)).xy, ot = n.element(C.add(454)).xy, Z = n.element(C.add(323)).xy, D = nt.sub($).div(2).add($), st = ot.sub(Z).div(2).add(Z).sub(D).div(2).add(D), S = o.geometry.attributes.position, j = 116, H = 346, rt = new W().subVectors(
+    new W(S.getX(j), S.getY(j), S.getZ(j)),
+    new W(S.getX(H), S.getY(H), S.getZ(H))
+  ).lengthSq(), at = O(rt), ct = n.element(C.add(H)).sub(n.element(C.add(j))).lengthSq(), it = at.div(ct).sqrt().mul(2), lt = F.sub(st).xzy.mul(wt(1, -1, yt(1).div(M))).mul(it);
+  return e.positionNode = lt, {
+    clips: u,
+    atlasTexture: m,
+    material: e,
+    goto(d, w = !0) {
+      let I = -1;
+      if (typeof d == "number")
+        I = d;
+      else if (I = u.findIndex((dt) => dt.name === d), I === -1)
+        throw new Error(`Clip ${d.toString()} not found`);
+      b.value = w, g.value = 0, l.value = I;
+    },
+    update(d) {
+      g.value += d;
+    },
+    dispose() {
+      m.dispose(), e.dispose();
+    },
+    gotoAndLoop(d) {
+      this.goto(d, !0);
+    },
+    gotoAndPlay(d) {
+      this.goto(d, !1);
+    }
+  };
+}
+export {
+  Lt as buildMeshCapAtlas,
+  zt as createMeshCapMaterial,
+  Rt as loadMeshCapFile
+};

package/dist/module.d.ts

@@ -1,2 +1,3 @@
 export * from './tracking/TrackerManager';
+export * from './tracking/util/face-tracker-utils';
 //# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA;AACzC,cAAc,oCAAoC,CAAA"}

package/dist/rigger.d.ts

@@ -0,0 +1,2 @@
+export * from './module'
+export {}