three-mediapipe-rig 0.0.4 → 0.1.1

package/dist/three-mediapipe-rig.js

@@ -1,43 +1,44 @@
-var he = Object.defineProperty;
-var ce = (h, s, e) => s in h ? he(h, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[s] = e;
-var k = (h, s, e) => ce(h, typeof s != "symbol" ? s + "" : s, e);
-import { PoseLandmarker as se, HandLandmarker as D, FaceLandmarker as C, FilesetResolver as le, DrawingUtils as pe } from "@mediapipe/tasks-vision";
-import * as l from "three/webgpu";
-import { Vector3 as P, Quaternion as ie } from "three/webgpu";
-import * as S from "three";
-import { Bone as me } from "three";
-import { GLTFExporter as ue } from "three/examples/jsm/Addons.js";
-const V = new P(), z = new P(), fe = new P(1, 0, 0), ye = new P(-1, 0, 0), we = new P(0, 1, 0), Le = new P(0, -1, 0), B = new P(0, 0, 1);
-new P(0, 0, -1);
-const I = new P(), ke = new P(), be = new P(), U = new ie(), O = new ie();
-function A(h, s, e, t = "+x") {
-  h.lookAt(s);
-  const o = t == "+x" ? fe : t == "-x" ? ye : t == "+y" ? we : Le;
-  h.getWorldPosition(z), h.getWorldQuaternion(O), V.subVectors(e, z).normalize(), I.copy(o).applyQuaternion(O);
-  const i = I, r = ke.copy(B).applyQuaternion(O), n = V.clone().addScaledVector(r, -V.dot(r)).normalize(), a = be.crossVectors(i, n), c = Math.atan2(a.dot(r), i.dot(n));
-  U.setFromAxisAngle(B, c), h.quaternion.multiply(U);
+var Re = Object.defineProperty;
+var Pe = (c, s, e) => s in c ? Re(c, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[s] = e;
+var P = (c, s, e) => Pe(c, typeof s != "symbol" ? s + "" : s, e);
+import { PoseLandmarker as fe, HandLandmarker as U, FaceLandmarker as G, FilesetResolver as ve, DrawingUtils as ge } from "@mediapipe/tasks-vision";
+import * as u from "three/webgpu";
+import { Vector3 as b, Quaternion as we, BufferAttribute as Ee, VideoTexture as We, SRGBColorSpace as Fe, MeshPhysicalNodeMaterial as Ae } from "three/webgpu";
+import * as T from "three";
+import { Bone as Se } from "three";
+import { uniform as _, attribute as Me, instancedArray as Ve, varying as Ne, vec3 as Oe, texture as Te, vec2 as _e } from "three/tsl";
+import { GLTFExporter as Ce } from "three/examples/jsm/Addons.js";
+const z = new b(), Y = new b(), De = new b(1, 0, 0), ze = new b(-1, 0, 0), Be = new b(0, 1, 0), Ie = new b(0, -1, 0), Z = new b(0, 0, 1);
+new b(0, 0, -1);
+const J = new b(), Ue = new b(), Ge = new b(), ee = new we(), B = new we();
+function M(c, s, e, t = "+x") {
+  c.lookAt(s);
+  const o = t == "+x" ? De : t == "-x" ? ze : t == "+y" ? Be : Ie;
+  c.getWorldPosition(Y), c.getWorldQuaternion(B), z.subVectors(e, Y).normalize(), J.copy(o).applyQuaternion(B);
+  const n = J, a = Ue.copy(Z).applyQuaternion(B), i = z.clone().addScaledVector(a, -z.dot(a)).normalize(), r = Ge.crossVectors(n, i), l = Math.atan2(r.dot(a), n.dot(i));
+  ee.setFromAxisAngle(Z, l), c.quaternion.multiply(ee);
 }
-const N = new l.Vector3(), M = new l.Vector3(), T = new l.Vector3();
-new l.Vector3();
-class _ {
+const C = new u.Vector3(), V = new u.Vector3(), I = new u.Vector3();
+new u.Vector3();
+class H {
   constructor(s, e) {
-    k(this, "objectGhost");
-    k(this, "root");
+    P(this, "objectGhost");
+    P(this, "root");
     /**
      * per landmark index, it points to it's object3D equivalent.
      */
-    k(this, "marks", {});
-    this.points = s, this.debugConnections = e, this.root = new l.Object3D(), this.objectGhost = /* @__PURE__ */ new Map();
+    P(this, "marks", {});
+    this.points = s, this.debugConnections = e, this.root = new u.Object3D(), this.objectGhost = /* @__PURE__ */ new Map();
     for (let t in this.points)
-      this.marks[t] = new xe(), this.root.add(this.marks[t]);
+      this.marks[t] = new He(), this.root.add(this.marks[t]);
   }
   updateLandmarks(s, e, t) {
     for (let o in this.points) {
-      const i = this.points[o], r = this.marks[o];
-      r && (i instanceof Array ? (N.copy(s[i[0]]), r.position.copy(s[i[1]]).sub(N).divideScalar(2).add(s[i[0]]), i.length == 4 && (N.subVectors(
-        s[i[3]],
-        s[i[2]]
-      ).divideScalar(2).add(s[i[2]]).sub(r.position).divideScalar(2), r.position.add(N))) : r.position.copy(s[i]));
+      const n = this.points[o], a = this.marks[o];
+      a && (n instanceof Array ? (C.copy(s[n[0]]), a.position.copy(s[n[1]]).sub(C).divideScalar(2).add(s[n[0]]), n.length == 4 && (C.subVectors(
+        s[n[3]],
+        s[n[2]]
+      ).divideScalar(2).add(s[n[2]]).sub(a.position).divideScalar(2), a.position.add(C))) : a.position.copy(s[n]));
     }
     t && e && t.drawConnectors(
       e,
@@ -50,7 +51,7 @@ class _ {
   getGhost(s) {
     var e;
     if (!this.objectGhost.has(s)) {
-      const t = new Re();
+      const t = new $e();
       t.position.copy(s.position), t.quaternion.copy(s.quaternion), (e = s.parent) == null || e.add(t), this.objectGhost.set(s, t);
     }
     return this.objectGhost.get(s);
@@ -65,47 +66,47 @@ class _ {
     this.marks[s].position.set(1, 2, 3);
   }
   syncObjects(s, e, t) {
-    for (const [o, i, r, n] of s) {
-      this.marks[r].getWorldPosition(T), this.marks[i].getWorldPosition(M);
-      const a = T.sub(M);
-      o.getWorldPosition(M), M.add(a);
-      const c = M, p = o.getWorldPosition(T).sub(t), f = this.getGhost(o);
-      A(f, c, p, n), f.rotateX(Math.PI / 2), o.position.lerp(f.position, e * 4), o.quaternion.slerp(f.quaternion, e * 4);
+    for (const [o, n, a, i] of s) {
+      this.marks[a].getWorldPosition(I), this.marks[n].getWorldPosition(V);
+      const r = I.sub(V);
+      o.getWorldPosition(V), V.add(r);
+      const l = V, h = o.getWorldPosition(I).sub(t), f = this.getGhost(o);
+      M(f, l, h, i), f.rotateX(Math.PI / 2), o.position.lerp(f.position, e * 4), o.quaternion.slerp(f.quaternion, e * 4);
     }
   }
   getBone(s, e) {
     return s.getObjectByName(e.replace(/[\.\:]/g, ""));
   }
 }
-class xe extends l.Mesh {
+class He extends u.Mesh {
   constructor() {
-    super(new l.SphereGeometry(0.01, 3, 3), new l.MeshStandardMaterial({ color: 16711680, wireframe: !0 }));
-    k(this, "_worldPosition", new l.Vector3());
-    this.add(new l.AxesHelper(1e-3));
+    super(new u.SphereGeometry(0.01, 3, 3), new u.MeshStandardMaterial({ color: 16711680, wireframe: !0 }));
+    P(this, "_worldPosition", new u.Vector3());
+    this.add(new u.AxesHelper(1e-3));
   }
   get worldPosition() {
     return this.getWorldPosition(this._worldPosition), this._worldPosition;
   }
 }
-class Re extends l.Object3D {
+class $e extends u.Object3D {
   lerp(s, e, t = 8) {
     s.position.lerp(this.position, e * t), s.quaternion.slerp(this.quaternion, e * t);
   }
 }
-function F(h, s, e) {
-  return e.worldToLocal(s.getWorldPosition(h)), h;
+function S(c, s, e) {
+  return e.worldToLocal(s.getWorldPosition(c)), c;
 }
-function Pe(h) {
-  return h.replace(/[\.\:]/g, "");
+function qe(c) {
+  return c.replace(/[\.\:]/g, "");
 }
-function x(h, s) {
+function g(c, s) {
   let e;
-  return s = Pe(s), h.traverse((t) => {
-    t.name.indexOf(s) === 0 && t instanceof me && (e = t);
-  }), e || console.log("Bone not found: ", s, h.name), e;
+  return s = qe(s), c.traverse((t) => {
+    t.name.indexOf(s) === 0 && t instanceof Se && (e = t);
+  }), e || console.log("Bone not found: ", s, c.name), e;
 }
-async function We(h, s) {
-  const e = await se.createFromOptions(h, {
+async function je(c, s) {
+  const e = await fe.createFromOptions(c, {
     baseOptions: {
       modelAssetPath: (s == null ? void 0 : s.modelPath) ?? "pose_landmarker_lite.task",
       //modelAssetPath: `https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task`,
@@ -115,9 +116,9 @@ async function We(h, s) {
     runningMode: "VIDEO",
     numPoses: 1
   });
-  return new ge(e, s);
+  return new Je(e, s);
 }
-const Ee = {
+const Ke = {
   hips: [24, 23],
   neck: [12, 11],
   leftLeg: 23,
@@ -139,12 +140,12 @@ const Ee = {
   torso: [24, 23, 12, 11],
   leftEar: 7,
   rightEar: 8
-}, Fe = new l.Vector3(), G = new l.Vector3(), Ae = new l.Vector3(), Me = new l.Vector3(), ve = new l.Vector3(), H = new l.Vector3(), $ = new l.Vector3();
-class ge extends _ {
+}, Xe = new u.Vector3(), te = new u.Vector3(), Qe = new u.Vector3(), Ye = new u.Vector3(), Ze = new u.Vector3(), oe = new u.Vector3(), se = new u.Vector3();
+class Je extends H {
   constructor(e, t) {
-    super(Ee, se.POSE_CONNECTIONS);
-    k(this, "_leftWristNormalizedPosition");
-    k(this, "_rightWristNormalizedPosition");
+    super(Ke, fe.POSE_CONNECTIONS);
+    P(this, "_leftWristNormalizedPosition");
+    P(this, "_rightWristNormalizedPosition");
     this.poseLandmarker = e, this.config = t, this.root.scale.y *= -2, this.root.scale.z *= -2, this.root.scale.x *= 2;
   }
   /**
@@ -161,7 +162,8 @@ class ge extends _ {
   }
   predict(e, t) {
     this.poseLandmarker.detectForVideo(e, performance.now(), (o) => {
-      o.landmarks.length != 0 && (this.updateLandmarks(o.worldLandmarks[0], o.landmarks[0], t), this._leftWristNormalizedPosition = o.landmarks[0][this.points.leftWrist], this._rightWristNormalizedPosition = o.landmarks[0][this.points.rightWrist]);
+      var n;
+      o.landmarks.length != 0 && (this.updateLandmarks(o.worldLandmarks[0], ((n = this.config) == null ? void 0 : n.drawLandmarks) === !1 ? void 0 : o.landmarks[0], t), this._leftWristNormalizedPosition = o.landmarks[0][this.points.leftWrist], this._rightWristNormalizedPosition = o.landmarks[0][this.points.rightWrist]);
     });
   }
   // override sync ( delta:number, objects: BoneBinding[] ) {
@@ -172,44 +174,44 @@ class ge extends _ {
   // 	this.syncObjects(objects, delta, torsoNormal); 
   // }
   bind(e, t) {
-    var a;
+    var r;
     const o = {
-      hips: x(e, t.hips),
-      neck: x(e, t.neck),
-      leftArm: x(e, t.armL),
-      leftElbow: x(e, t.forearmL),
-      leftWrist: x(e, t.handL),
-      rightArm: x(e, t.armR),
-      rightElbow: x(e, t.forearmR),
-      rightWrist: x(e, t.handR),
-      head: x(e, t.head),
-      torso: x(e, t.torso),
-      leftLeg: x(e, t.thighL),
-      leftKnee: x(e, t.shinL),
-      leftFoot: x(e, t.footL),
-      rightLeg: x(e, t.thighR),
-      rightKnee: x(e, t.shinR),
-      rightFoot: x(e, t.footR)
+      hips: g(e, t.hips),
+      neck: g(e, t.neck),
+      leftArm: g(e, t.armL),
+      leftElbow: g(e, t.forearmL),
+      leftWrist: g(e, t.handL),
+      rightArm: g(e, t.armR),
+      rightElbow: g(e, t.forearmR),
+      rightWrist: g(e, t.handR),
+      head: g(e, t.head),
+      torso: g(e, t.torso),
+      leftLeg: g(e, t.thighL),
+      leftKnee: g(e, t.shinL),
+      leftFoot: g(e, t.footL),
+      rightLeg: g(e, t.thighR),
+      rightKnee: g(e, t.shinR),
+      rightFoot: g(e, t.footR)
     };
-    (a = this.config) != null && a.ignoreLegs && (delete o.leftLeg, delete o.leftKnee, delete o.leftFoot, delete o.leftToes, delete o.rightLeg, delete o.rightKnee, delete o.rightFoot, delete o.rightToes);
-    const i = new l.Vector3(), r = new l.Vector3(), n = (c, p, f, R, d, m) => {
-      if (!p) return;
-      const L = this.marks[R].getWorldPosition(i).sub(this.marks[f].getWorldPosition(r)).normalize();
-      F(H, p, e).add(L).applyMatrix4(e.matrixWorld), F($, p, e).add(d).applyMatrix4(e.matrixWorld);
-      const u = this.getGhost(p);
-      A(u, H, $, m), u.rotateX(Math.PI / 2), u.lerp(p, c);
+    (r = this.config) != null && r.ignoreLegs && (delete o.leftLeg, delete o.leftKnee, delete o.leftFoot, delete o.leftToes, delete o.rightLeg, delete o.rightKnee, delete o.rightFoot, delete o.rightToes);
+    const n = new u.Vector3(), a = new u.Vector3(), i = (l, h, f, x, d, m) => {
+      if (!h) return;
+      const y = this.marks[x].getWorldPosition(n).sub(this.marks[f].getWorldPosition(a)).normalize();
+      S(oe, h, e).add(y).applyMatrix4(e.matrixWorld), S(se, h, e).add(d).applyMatrix4(e.matrixWorld);
+      const p = this.getGhost(h);
+      M(p, oe, se, m), p.rotateX(Math.PI / 2), p.lerp(h, l);
     };
     return {
-      update: (c) => {
-        const p = this.marks.leftLeg.getWorldPosition(Fe).sub(this.marks.rightLeg.getWorldPosition(G)).normalize(), f = this.marks.leftArm.getWorldPosition(G).sub(this.marks.rightArm.getWorldPosition(Ae)).normalize(), R = this.marks.leftEar.getWorldPosition(Me).sub(this.marks.rightEar.getWorldPosition(ve)).normalize();
-        n(c, o.hips, "hips", "torso", p, "+x"), n(c, o.torso, "torso", "neck", f, "+x"), n(c, o.neck, "neck", "head", R, "+x"), n(c, o.head, "neck", "head", R, "+x"), n(c, o.leftArm, "leftArm", "leftElbow", f, "-x"), n(c, o.leftElbow, "leftElbow", "leftWrist", f, "-x"), n(c, o.leftLeg, "leftLeg", "leftKnee", p, "+x"), n(c, o.leftKnee, "leftKnee", "leftFoot", p, "+x"), n(c, o.leftFoot, "leftFoot", "leftToes", p, "+x"), n(c, o.rightArm, "rightArm", "rightElbow", f, "-x"), n(c, o.rightElbow, "rightElbow", "rightWrist", f, "-x"), n(c, o.rightLeg, "rightLeg", "rightKnee", p, "+x"), n(c, o.rightKnee, "rightKnee", "rightFoot", p, "+x"), n(c, o.rightFoot, "rightFoot", "rightToes", p, "+x");
+      update: (l) => {
+        const h = this.marks.leftLeg.getWorldPosition(Xe).sub(this.marks.rightLeg.getWorldPosition(te)).normalize(), f = this.marks.leftArm.getWorldPosition(te).sub(this.marks.rightArm.getWorldPosition(Qe)).normalize(), x = this.marks.leftEar.getWorldPosition(Ye).sub(this.marks.rightEar.getWorldPosition(Ze)).normalize();
+        i(l, o.hips, "hips", "torso", h, "+x"), i(l, o.torso, "torso", "neck", f, "+x"), i(l, o.neck, "neck", "head", x, "+x"), i(l, o.head, "neck", "head", x, "+x"), i(l, o.leftArm, "leftArm", "leftElbow", f, "-x"), i(l, o.leftElbow, "leftElbow", "leftWrist", f, "-x"), i(l, o.leftLeg, "leftLeg", "leftKnee", h, "+x"), i(l, o.leftKnee, "leftKnee", "leftFoot", h, "+x"), i(l, o.leftFoot, "leftFoot", "leftToes", h, "+x"), i(l, o.rightArm, "rightArm", "rightElbow", f, "-x"), i(l, o.rightElbow, "rightElbow", "rightWrist", f, "-x"), i(l, o.rightLeg, "rightLeg", "rightKnee", h, "+x"), i(l, o.rightKnee, "rightKnee", "rightFoot", h, "+x"), i(l, o.rightFoot, "rightFoot", "rightToes", h, "+x");
       }
     };
   }
 }
-const j = new l.Vector2(), q = new l.Vector2();
-async function Se(h, s) {
-  const e = await D.createFromOptions(h, {
+const ne = new u.Vector2(), ie = new u.Vector2();
+async function et(c, s) {
+  const e = await U.createFromOptions(c, {
     baseOptions: {
       modelAssetPath: s.modelPath ?? "hand_landmarker.task",
       //modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`,
@@ -217,20 +219,20 @@ async function Se(h, s) {
     },
     runningMode: "VIDEO",
     numHands: 2
-  }), t = (o, i, r) => {
+  }), t = (o, n, a) => {
     try {
-      j.copy(o()), q.copy(i());
-    } catch (n) {
-      return console.warn("No pose data... will just be optimitic and say yes to everything.", n), !0;
+      ne.copy(o()), ie.copy(n());
+    } catch (i) {
+      return console.warn("No pose data... will just be optimitic and say yes to everything.", i), !0;
     }
-    return j.distanceTo(r) < q.distanceTo(r);
+    return ne.distanceTo(a) < ie.distanceTo(a);
   };
   return {
-    left: new te(e, "Left", t.bind(null, s.leftWrist, s.rightWrist)),
-    right: new te(e, "Right", t.bind(null, s.rightWrist, s.leftWrist))
+    left: new me(e, "Left", t.bind(null, s.leftWrist, s.rightWrist), s.drawLandmarks),
+    right: new me(e, "Right", t.bind(null, s.rightWrist, s.leftWrist), s.drawLandmarks)
   };
 }
-const Ne = {
+const tt = {
   wrist: 0,
   palm: [9, 13],
   thumb1: 1,
@@ -253,38 +255,38 @@ const Ne = {
   pinky2: 18,
   pinky3: 19,
   pinky4: 20
-}, v = {
+}, N = {
   thumb: ["thumb1", "thumb2", "thumb3", "thumb4"],
   index: ["index1", "index2", "index3", "index4"],
   middle: ["middle1", "middle2", "middle3", "middle4"],
   ring: ["ring1", "ring2", "ring3", "ring4"],
   pinky: ["pinky1", "pinky2", "pinky3", "pinky4"]
-}, Ve = new l.Vector3(), K = new l.Vector3(), X = new l.Vector3(), Q = new l.Vector3(), Y = new l.Vector3(), Z = new l.Vector3();
-new l.Vector3();
-new l.Vector3();
-new l.Vector3();
-const J = new l.Vector3(), ee = Math.PI / 2, Oe = new l.Vector3(0, -1, 0);
-class te extends _ {
-  constructor(e, t, o) {
-    super(Ne, D.HAND_CONNECTIONS);
-    k(this, "sign");
-    k(this, "isLeft");
+}, ot = new u.Vector3(), re = new u.Vector3(), ae = new u.Vector3(), de = new u.Vector3(), ce = new u.Vector3(), le = new u.Vector3();
+new u.Vector3();
+new u.Vector3();
+new u.Vector3();
+const he = new u.Vector3(), pe = Math.PI / 2, st = new u.Vector3(0, -1, 0);
+class me extends H {
+  constructor(e, t, o, n = !0) {
+    super(tt, U.HAND_CONNECTIONS);
+    P(this, "sign");
+    P(this, "isLeft");
     /**
      * the axis used to look at the pole
      */
-    k(this, "lookAtPoleAxis");
-    this.handLandmarker = e, this.side = t, this.isMyWrist = o, this.sign = this.side == "Left" ? -1 : 1, this.isLeft = this.side == "Left", this.lookAtPoleAxis = this.sign < 0 ? "+x" : "-x", this.root.scale.setScalar(7), this.root.scale.y *= -1, this.root.scale.z *= -1;
+    P(this, "lookAtPoleAxis");
+    this.handLandmarker = e, this.side = t, this.isMyWrist = o, this.drawLandmarks = n, this.sign = this.side == "Left" ? -1 : 1, this.isLeft = this.side == "Left", this.lookAtPoleAxis = this.sign < 0 ? "+x" : "-x", this.root.scale.setScalar(7), this.root.scale.y *= -1, this.root.scale.z *= -1;
   }
   predict(e, t) {
     const o = this.handLandmarker.detectForVideo(e, performance.now());
     if (o.landmarks.length)
-      for (let i = 0; i < o.landmarks.length; i++) {
-        const r = o.landmarks[i], n = r[this.points.wrist];
-        if (this.isMyWrist(n)) {
-          this.updateLandmarks(o.worldLandmarks[i]), t.drawConnectors(r, D.HAND_CONNECTIONS, {
+      for (let n = 0; n < o.landmarks.length; n++) {
+        const a = o.landmarks[n], i = a[this.points.wrist];
+        if (this.isMyWrist(i)) {
+          this.updateLandmarks(o.worldLandmarks[n]), this.drawLandmarks && (t.drawConnectors(a, U.HAND_CONNECTIONS, {
             color: this.side == "Left" ? "#00FF00" : "#0000FF",
             lineWidth: 4
-          }), t.drawLandmarks(r, { color: this.side == "Left" ? "#00FF00" : "#0000FF", lineWidth: 3, radius: 1 });
+          }), t.drawLandmarks(a, { color: this.side == "Left" ? "#00FF00" : "#0000FF", lineWidth: 3, radius: 1 }));
           break;
         }
       }
@@ -299,56 +301,56 @@ class te extends _ {
    * @see https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker
    */
   syncHandBones(e, t, o) {
-    const i = Ve.crossVectors(
-      K.copy(this.marks.index1.worldPosition).sub(this.marks.wrist.worldPosition),
-      X.copy(this.marks.pinky1.worldPosition).sub(this.marks.wrist.worldPosition)
-    ).normalize(), r = K.copy(this.marks.palm.worldPosition).sub(this.marks.wrist.worldPosition).normalize(), n = X.copy(this.marks.pinky1.worldPosition).sub(this.marks.index1.worldPosition).normalize();
-    if (!(r.dot(Oe) > 0.8)) {
+    const n = ot.crossVectors(
+      re.copy(this.marks.index1.worldPosition).sub(this.marks.wrist.worldPosition),
+      ae.copy(this.marks.pinky1.worldPosition).sub(this.marks.wrist.worldPosition)
+    ).normalize(), a = re.copy(this.marks.palm.worldPosition).sub(this.marks.wrist.worldPosition).normalize(), i = ae.copy(this.marks.pinky1.worldPosition).sub(this.marks.index1.worldPosition).normalize();
+    if (!(a.dot(st) > 0.8)) {
       if (t.wrist) {
-        const a = F(Q, t.wrist, o).add(r).applyMatrix4(o.matrixWorld), c = F(Y, t.wrist, o).sub(n).applyMatrix4(o.matrixWorld), p = this.getGhost(t.wrist);
-        A(p, a, c, "-y"), p.rotateX(ee), p.lerp(t.wrist, e);
+        const r = S(de, t.wrist, o).add(a).applyMatrix4(o.matrixWorld), l = S(ce, t.wrist, o).sub(i).applyMatrix4(o.matrixWorld), h = this.getGhost(t.wrist);
+        M(h, r, l, "-y"), h.rotateX(pe), h.lerp(t.wrist, e);
       }
-      this.syncFinger(e, o, i, r, n, t, v.index, "middle1"), this.syncFinger(e, o, i, r, n, t, v.middle, "ring1"), this.syncFinger(e, o, i, r, n, t, v.ring, "pinky1"), this.syncFinger(e, o, i, r, n, t, v.pinky, "ring1", !0), this.syncFinger(e, o, i, r, n, t, v.thumb, "index1");
+      this.syncFinger(e, o, n, a, i, t, N.index, "middle1"), this.syncFinger(e, o, n, a, i, t, N.middle, "ring1"), this.syncFinger(e, o, n, a, i, t, N.ring, "pinky1"), this.syncFinger(e, o, n, a, i, t, N.pinky, "ring1", !0), this.syncFinger(e, o, n, a, i, t, N.thumb, "index1");
     }
   }
-  syncFinger(e, t, o, i, r, n, a, c, p = !1) {
-    for (let f = 0; f < a.length - 1; f++) {
-      const R = n[a[f]];
-      if (!R) continue;
-      const d = this.getGhost(R), m = Q.copy(this.marks[a[f + 1]].worldPosition).sub(this.marks[a[f]].worldPosition).normalize(), L = F(Y, R, t);
+  syncFinger(e, t, o, n, a, i, r, l, h = !1) {
+    for (let f = 0; f < r.length - 1; f++) {
+      const x = i[r[f]];
+      if (!x) continue;
+      const d = this.getGhost(x), m = de.copy(this.marks[r[f + 1]].worldPosition).sub(this.marks[r[f]].worldPosition).normalize(), y = S(ce, x, t);
       if (f == 0) {
-        const u = Z.copy(this.marks[c].worldPosition).sub(this.marks[a[0]].worldPosition).normalize();
-        p && u.negate(), J.copy(u), A(
+        const p = le.copy(this.marks[l].worldPosition).sub(this.marks[r[0]].worldPosition).normalize();
+        h && p.negate(), he.copy(p), M(
           d,
-          m.add(L).applyMatrix4(t.matrixWorld),
-          u.add(L).applyMatrix4(t.matrixWorld),
+          m.add(y).applyMatrix4(t.matrixWorld),
+          p.add(y).applyMatrix4(t.matrixWorld),
           this.lookAtPoleAxis
         );
       } else
-        A(
+        M(
           d,
-          m.add(L).applyMatrix4(t.matrixWorld),
-          Z.copy(J).add(L).applyMatrix4(t.matrixWorld),
+          m.add(y).applyMatrix4(t.matrixWorld),
+          le.copy(he).add(y).applyMatrix4(t.matrixWorld),
           this.lookAtPoleAxis
         );
-      d.rotateX(ee), d.lerp(R, e);
+      d.rotateX(pe), d.lerp(x, e);
     }
   }
   bind(e, t) {
-    const o = {}, i = (r, n) => {
-      const a = x(e, r);
-      if (a)
-        return o[n] = a, n;
+    const o = {}, n = (a, i) => {
+      const r = g(e, a);
+      if (r)
+        return o[i] = r, i;
     };
-    return i(this.isLeft ? t.handL : t.handR, "wrist"), i(this.isLeft ? t.index1L : t.index1R, "index1"), i(this.isLeft ? t.index2L : t.index2R, "index2"), i(this.isLeft ? t.index3L : t.index3R, "index3"), i(this.isLeft ? t.middle1L : t.middle1R, "middle1"), i(this.isLeft ? t.middle2L : t.middle2R, "middle2"), i(this.isLeft ? t.middle3L : t.middle3R, "middle3"), i(this.isLeft ? t.ring1L : t.ring1R, "ring1"), i(this.isLeft ? t.ring2L : t.ring2R, "ring2"), i(this.isLeft ? t.ring3L : t.ring3R, "ring3"), i(this.isLeft ? t.pinky1L : t.pinky1R, "pinky1"), i(this.isLeft ? t.pinky2L : t.pinky2R, "pinky2"), i(this.isLeft ? t.pinky3L : t.pinky3R, "pinky3"), i(this.isLeft ? t.thumb1L : t.thumb1R, "thumb1"), i(this.isLeft ? t.thumb2L : t.thumb2R, "thumb2"), i(this.isLeft ? t.thumb3L : t.thumb3R, "thumb3"), {
-      update: (r) => {
-        this.syncHandBones(r, o, e);
+    return n(this.isLeft ? t.handL : t.handR, "wrist"), n(this.isLeft ? t.index1L : t.index1R, "index1"), n(this.isLeft ? t.index2L : t.index2R, "index2"), n(this.isLeft ? t.index3L : t.index3R, "index3"), n(this.isLeft ? t.middle1L : t.middle1R, "middle1"), n(this.isLeft ? t.middle2L : t.middle2R, "middle2"), n(this.isLeft ? t.middle3L : t.middle3R, "middle3"), n(this.isLeft ? t.ring1L : t.ring1R, "ring1"), n(this.isLeft ? t.ring2L : t.ring2R, "ring2"), n(this.isLeft ? t.ring3L : t.ring3R, "ring3"), n(this.isLeft ? t.pinky1L : t.pinky1R, "pinky1"), n(this.isLeft ? t.pinky2L : t.pinky2R, "pinky2"), n(this.isLeft ? t.pinky3L : t.pinky3R, "pinky3"), n(this.isLeft ? t.thumb1L : t.thumb1R, "thumb1"), n(this.isLeft ? t.thumb2L : t.thumb2R, "thumb2"), n(this.isLeft ? t.thumb3L : t.thumb3R, "thumb3"), {
+      update: (a) => {
+        this.syncHandBones(a, o, e);
       }
     };
   }
 }
-async function Te(h, s) {
-  const e = await C.createFromOptions(h, {
+async function nt(c, s) {
+  const e = await G.createFromOptions(c, {
     baseOptions: {
       modelAssetPath: (s == null ? void 0 : s.modelPath) ?? "face_landmarker.task",
       delegate: "GPU"
@@ -357,9 +359,9 @@ async function Te(h, s) {
     runningMode: "VIDEO",
     numFaces: 1
   });
-  return new Ie(e);
+  return new lt(e, { ...s });
 }
-const De = {
+const it = {
   eyeL: 473,
   eyeR: 468,
   eyeStartL: 463,
@@ -372,71 +374,125 @@ const De = {
   noseBone: 6,
   chin: 152,
   forehead: 10
-}, Ce = new P(), _e = new P(), ne = new P(), ze = new P(), Be = new P();
-new P();
-class Ie extends _ {
-  // lower = smoother but more lag, higher = more responsive
-  constructor(e) {
-    super(De, C.FACE_LANDMARKS_TESSELATION);
-    k(this, "blendshapeCategories");
-    k(this, "blendshapeMap", /* @__PURE__ */ new Map());
-    k(this, "smoothed", {});
-    k(this, "smoothing", 3e-4);
-    this.faceLandmarker = e, this.root.scale.y *= -1, this.root.scale.z *= -1, this.root.scale.multiplyScalar(3);
+}, rt = new b(), at = new b(), ye = new b(), dt = new b(), ct = new b();
+new b();
+class lt extends H {
+  constructor(e, t) {
+    super(it, G.FACE_LANDMARKS_TESSELATION);
+    P(this, "blendshapeCategories");
+    P(this, "blendshapeMap", /* @__PURE__ */ new Map());
+    P(this, "smoothed", {});
+    P(this, "smoothing", 3e-4);
+    // lower = smoother but more lag, higher = more responsive
+    P(this, "_faceLandmarks", []);
+    this.faceLandmarker = e, this.cfg = t, this.root.scale.y *= -1, this.root.scale.z *= -1, this.root.scale.multiplyScalar(3);
   }
   predict(e, t) {
-    var i, r, n;
+    var n, a, i;
     const o = this.faceLandmarker.detectForVideo(e, performance.now());
-    o.faceLandmarks[0] && (t.drawConnectors(o.faceLandmarks[0], C.FACE_LANDMARKS_TESSELATION, { color: "#00fff2ff", lineWidth: 0.1 }), t.drawLandmarks(o.faceLandmarks[0], { color: "#00ff00", lineWidth: 0.1, radius: 0.4 }), this.updateLandmarks(o.faceLandmarks[0], o.faceLandmarks[0])), this.blendshapeCategories = (r = (i = o.faceBlendshapes) == null ? void 0 : i[0]) == null ? void 0 : r.categories, (n = this.blendshapeCategories) == null || n.forEach((a) => {
-      this.blendshapeMap.set(a.categoryName, a.score);
+    o.faceLandmarks[0] && (this.cfg.drawLandmarks && (t.drawConnectors(o.faceLandmarks[0], G.FACE_LANDMARKS_TESSELATION, { color: "#00fff2ff", lineWidth: 0.1 }), t.drawLandmarks(o.faceLandmarks[0], { color: "#00ff00", lineWidth: 0.1, radius: 0.4 })), this.updateLandmarks(o.faceLandmarks[0], o.faceLandmarks[0])), this._faceLandmarks = o.faceLandmarks[0], this.blendshapeCategories = (a = (n = o.faceBlendshapes) == null ? void 0 : n[0]) == null ? void 0 : a.categories, (i = this.blendshapeCategories) == null || i.forEach((r) => {
+      this.blendshapeMap.set(r.categoryName, r.score);
     });
   }
+  get lastKnownLandmarks() {
+    return this._faceLandmarks;
+  }
   bindShapeKeys(e) {
     const t = e.morphTargetDictionary;
     return {
       update: (o) => {
-        var i;
-        (i = this.blendshapeCategories) == null || i.forEach((r) => {
-          const { categoryName: n, score: a } = r;
-          if (!(t != null && t.hasOwnProperty(n))) return;
-          this.smoothed[n] === void 0 && (this.smoothed[n] = a);
-          const c = 1 - Math.pow(this.smoothing, o);
-          this.smoothed[n] += (a - this.smoothed[n]) * c, e.morphTargetInfluences[t[n]] = this.smoothed[n];
+        var n;
+        (n = this.blendshapeCategories) == null || n.forEach((a) => {
+          const { categoryName: i, score: r } = a;
+          if (!(t != null && t.hasOwnProperty(i))) return;
+          this.smoothed[i] === void 0 && (this.smoothed[i] = r);
+          const l = 1 - Math.pow(this.smoothing, o);
+          this.smoothed[i] += (r - this.smoothed[i]) * l, e.morphTargetInfluences[t[i]] = this.smoothed[i];
         });
       }
     };
   }
   bind(e) {
-    const t = new oe(e, "L"), o = new oe(e, "R"), i = x(e, "head");
+    const t = new ue(e, "L"), o = new ue(e, "R"), n = g(e, "head");
+    return {
+      update: (a) => {
+        if (t.update(a, this.blendshapeMap), o.update(a, this.blendshapeMap), !n) return;
+        const i = rt.copy(this.marks.earL.worldPosition), r = at.copy(this.marks.earR.worldPosition), l = ye.subVectors(i, r).multiplyScalar(0.5).add(r), h = dt.subVectors(this.marks.noseTip.worldPosition, l), f = i.sub(r), x = S(ct, n, e), d = f.add(x).applyMatrix4(e.matrixWorld), m = h.add(x).applyMatrix4(e.matrixWorld);
+        M(n, m, d, "+x");
+      }
+    };
+  }
+  /**
+   * The mesh is assumed to be a canonical_face_model because we will be manipulating it's vertices.
+   * 
+   * @see https://github.com/google-ai-edge/mediapipe/tree/master/mediapipe/modules/face_geometry
+   * @param mesh basically either the original or a clone of the canonical_face_model
+   */
+  bindGeometry(e, t) {
+    const o = new b(), n = new b(), a = new b();
+    new b();
+    const i = e.geometry, r = i.attributes.position, l = [], h = /* @__PURE__ */ new Map(), f = [];
+    for (let F = 0; F < r.count; F++) {
+      const v = `${r.getX(F).toFixed(6)},${r.getY(F).toFixed(6)},${r.getZ(F).toFixed(6)}`;
+      h.has(v) || (h.set(v, l.length), l.push(F)), f.push(h.get(v));
+    }
+    const x = _(new b(0.5, 0.5, 0.5));
+    i.setAttribute("landmarkIndex", new Ee(new Uint16Array(f), 1));
+    const d = Me("landmarkIndex", "uint"), m = Ve(468, "vec3"), y = Ne(m.element(d)).xy;
+    let p;
+    const R = 116, k = 346, E = a.subVectors(
+      new b(r.getX(R), r.getY(R), r.getZ(R)),
+      new b(r.getX(k), r.getY(k), r.getZ(k))
+    ).lengthSq(), L = _(E), w = _(1), A = _(1);
     return {
-      update: (r) => {
-        if (t.update(r, this.blendshapeMap), o.update(r, this.blendshapeMap), !i) return;
-        const n = Ce.copy(this.marks.earL.worldPosition), a = _e.copy(this.marks.earR.worldPosition), c = ne.subVectors(n, a).multiplyScalar(0.5).add(a), p = ze.subVectors(this.marks.noseTip.worldPosition, c), f = n.sub(a), R = F(Be, i, e), d = f.add(R).applyMatrix4(e.matrixWorld), m = p.add(R).applyMatrix4(e.matrixWorld);
-        A(i, m, d, "+x");
+      update: (F) => {
+        var O, j;
+        if (!p) {
+          const W = (j = (O = this.cfg) == null ? void 0 : O.videoElementRef) == null ? void 0 : j.call(O);
+          if (!W || !W.videoWidth || !W.videoHeight) return;
+          p = W;
+          const K = new We(p);
+          K.colorSpace = Fe;
+          const xe = p.videoWidth / p.videoHeight, X = m.element(d).sub(x).xzy.mul(Oe(1, -1, 1 / xe)).mul(A), Q = Te(K, _e(y.x, y.y.oneMinus()));
+          t ? t(X, Q) : e.material = new Ae({
+            positionNode: X,
+            colorNode: Q,
+            roughness: 0.93
+          });
+        }
+        const v = this.lastKnownLandmarks;
+        if (!(v != null && v.length)) return;
+        w.value = a.subVectors(v[k], v[R]).lengthSq(), w.needsUpdate = !0;
+        const D = m.value.array;
+        for (let W = 0; W < v.length; W++)
+          D[W * 3] = v[W].x, D[W * 3 + 1] = v[W].y, D[W * 3 + 2] = v[W].z;
+        m.value.needsUpdate = !0;
+        const ke = v[234], $ = v[93], be = v[454], q = v[323];
+        o.copy(ke).sub($).divideScalar(2).add($), n.copy(be).sub(q).divideScalar(2).add(q), x.value.subVectors(n, o).divideScalar(2).add(o), x.needsUpdate = !0, A.value = Math.sqrt(L.value / w.value), A.needsUpdate = !0;
       }
     };
   }
 }
-class oe {
+class ue {
   constructor(s, e) {
-    k(this, "eyeBone");
-    k(this, "eyeLookOut");
-    k(this, "eyeLookIn");
-    k(this, "eyeLookUp");
-    k(this, "eyeLookDown");
-    k(this, "sign", 1);
+    P(this, "eyeBone");
+    P(this, "eyeLookOut");
+    P(this, "eyeLookIn");
+    P(this, "eyeLookUp");
+    P(this, "eyeLookDown");
+    P(this, "sign", 1);
     this.rig = s, this.side = e, this.eyeBone = s.getObjectByName(`eye${e}`);
     const t = e == "L" ? "Left" : "Right";
     this.eyeLookOut = `eyeLookOut${t}`, this.eyeLookIn = `eyeLookIn${t}`, this.eyeLookUp = `eyeLookUp${t}`, this.eyeLookDown = `eyeLookDown${t}`, this.sign = e == "L" ? -1 : 1;
   }
   update(s, e) {
     if (!this.eyeBone) return;
-    F(ne, this.eyeBone, this.rig);
-    const t = e.get(this.eyeLookOut) ?? 0, o = e.get(this.eyeLookIn) ?? 0, i = e.get(this.eyeLookUp) ?? 0, r = e.get(this.eyeLookDown) ?? 0, n = o - t, a = r - i;
-    this.eyeBone.rotation.y = n * this.sign / 2, this.eyeBone.rotation.x = a / 2;
+    S(ye, this.eyeBone, this.rig);
+    const t = e.get(this.eyeLookOut) ?? 0, o = e.get(this.eyeLookIn) ?? 0, n = e.get(this.eyeLookUp) ?? 0, a = e.get(this.eyeLookDown) ?? 0, i = o - t, r = a - n;
+    this.eyeBone.rotation.y = i * this.sign / 2, this.eyeBone.rotation.x = r / 2;
   }
 }
-const re = {
+const Le = {
   faceMesh: "face",
   head: "head",
   hips: "hips",
@@ -484,7 +540,7 @@ const re = {
   thumb1R: "thumb1R",
   thumb2R: "thumb2R",
   thumb3R: "thumb3R"
-}, Ue = [
+}, ht = [
   "eyeBlinkLeft",
   "eyeBlinkRight",
   "eyeLookDownLeft",
@@ -538,206 +594,211 @@ const re = {
   "mouthUpperUpRight",
   "tongueOut"
 ];
-function Ge(h, s, e = 30) {
-  const t = [], o = h.getObjectByName(
+function pt(c, s, e = 30) {
+  const t = [], o = c.getObjectByName(
     s.faceMesh
-  ), i = /* @__PURE__ */ new Set();
+  ), n = /* @__PURE__ */ new Set();
   if (o != null && o.morphTargetDictionary)
-    for (const L in o.morphTargetDictionary)
-      Ue.includes(L) && i.add(L);
-  const r = Object.keys(s);
-  h.traverse((L) => {
-    if (L instanceof S.Bone) {
-      const u = r.find((W) => L.name.indexOf(s[W]) === 0);
-      u && t.push({
-        ref: L,
-        name: L.name,
-        normalizedName: u
+    for (const y in o.morphTargetDictionary)
+      ht.includes(y) && n.add(y);
+  const a = Object.keys(s);
+  c.traverse((y) => {
+    if (y instanceof T.Bone) {
+      const p = a.find((R) => y.name.indexOf(s[R]) === 0);
+      p && t.push({
+        ref: y,
+        name: y.name,
+        normalizedName: p
       });
     }
   });
-  const n = [], a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
-  let p = !1, f = 0;
-  function R() {
-    a.clear(), c.clear(), n.length = 0, f = performance.now() / 1e3, p = !0;
+  const i = [], r = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+  let h = !1, f = 0;
+  function x() {
+    r.clear(), l.clear(), i.length = 0, f = performance.now() / 1e3, h = !0;
   }
   function d() {
-    if (!p) return;
-    const L = performance.now() / 1e3 - f;
-    n.push(L);
-    for (const u of t) {
-      a.has(u.name) || a.set(u.name, []);
-      const W = a.get(u.name), b = u.ref.quaternion;
-      W.push(b.x, b.y, b.z, b.w);
+    if (!h) return;
+    const y = performance.now() / 1e3 - f;
+    i.push(y);
+    for (const p of t) {
+      r.has(p.name) || r.set(p.name, []);
+      const R = r.get(p.name), k = p.ref.quaternion;
+      R.push(k.x, k.y, k.z, k.w);
     }
-    for (const u of i) {
-      c.has(u) || c.set(u, []);
-      const W = c.get(u), b = o.morphTargetDictionary[u], E = o.morphTargetInfluences[b];
-      W.push(E);
+    for (const p of n) {
+      l.has(p) || l.set(p, []);
+      const R = l.get(p), k = o.morphTargetDictionary[p], E = o.morphTargetInfluences[k];
+      R.push(E);
     }
   }
-  function m(L = "RecordedClip") {
-    p = !1;
-    const u = [];
-    for (const [b, E] of a)
-      u.push(
-        new S.QuaternionKeyframeTrack(
-          `${b}.quaternion`,
-          n,
+  function m(y = "RecordedClip") {
+    h = !1;
+    const p = [];
+    for (const [k, E] of r)
+      p.push(
+        new T.QuaternionKeyframeTrack(
+          `${k}.quaternion`,
+          i,
           E
         )
       );
-    for (const [b, E] of c)
-      u.push(
-        new S.NumberKeyframeTrack(
-          `${re.faceMesh}.morphTargetInfluences[${b}]`,
-          n,
+    for (const [k, E] of l)
+      p.push(
+        new T.NumberKeyframeTrack(
+          `${Le.faceMesh}.morphTargetInfluences[${k}]`,
+          i,
           E
         )
       );
-    const W = new S.AnimationClip(L, -1, u);
+    const R = new T.AnimationClip(y, -1, p);
     return {
-      clip: W,
+      clip: R,
       saveToFile: () => {
-        new ue().parse(
-          h,
+        new Ce().parse(
+          c,
           (E) => {
-            const w = new Blob([E], {
+            const L = new Blob([E], {
               type: "model/gltf-binary"
-            }), y = URL.createObjectURL(w), g = document.createElement("a");
-            g.href = y, g.download = L + ".glb", g.click();
+            }), w = URL.createObjectURL(L), A = document.createElement("a");
+            A.href = w, A.download = y + ".glb", A.click();
           },
           (E) => {
             console.error(E);
           },
           {
             binary: !0,
-            animations: [W]
+            animations: [R]
           }
         );
       }
     };
   }
-  return { start: R, captureFrame: d, stop: m, isRecording: () => p };
+  return { start: x, captureFrame: d, stop: m, isRecording: () => h };
 }
-const He = () => {
-  var h;
-  return !!((h = navigator.mediaDevices) != null && h.getUserMedia);
+const mt = () => {
+  var c;
+  return !!((c = navigator.mediaDevices) != null && c.getUserMedia);
 };
-async function Qe(h) {
+async function bt(c) {
   const s = {
     debugFrame: void 0,
     displayScale: 1,
     ignoreLegs: !1,
     debugVideo: void 0,
     ignoreFace: !1,
+    onlyFace: !1,
+    drawLandmarksOverlay: !0,
     modelPaths: {
       vision: "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm",
       pose: "https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task",
       hand: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task",
       face: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task"
     },
-    ...h
+    ...c
   };
   let e;
-  const t = await le.forVisionTasks(s.modelPaths.vision ?? "/wasm"), o = await We(t, {
+  const t = await ve.forVisionTasks(s.modelPaths.vision ?? "/wasm"), o = s.onlyFace ? void 0 : await je(t, {
     ignoreLegs: s.ignoreLegs,
-    modelPath: s.modelPaths.pose
-  }), i = await Se(t, {
+    modelPath: s.modelPaths.pose,
+    drawLandmarks: s.drawLandmarksOverlay
+  }), n = s.onlyFace ? void 0 : await et(t, {
     leftWrist: () => o.leftWristNormalizedPosition,
     rightWrist: () => o.rightWristNormalizedPosition,
     modelPath: s.modelPaths.hand,
-    ...h == null ? void 0 : h.handsTrackerOptions
-  }), r = s.ignoreFace ? void 0 : await Te(t, { modelPath: s.modelPaths.face }), n = document.createElement("div");
-  n.style.position = "absolute", n.style.top = "0px", n.style.left = "0px", n.style.zIndex = "21", n.classList.add("three-mediapipe-rig"), document.body.appendChild(n);
-  const a = document.createElement("canvas"), c = a.getContext("2d"), p = new pe(c);
-  a.style.zIndex = "22", a.style.position = "absolute", a.style.top = "0px", a.style.left = "0px", a.style.pointerEvents = "none", n.appendChild(a);
+    drawLandmarks: s.drawLandmarksOverlay,
+    ...c == null ? void 0 : c.handsTrackerOptions
+  }), a = s.ignoreFace ? void 0 : await nt(t, { modelPath: s.modelPaths.face, videoElementRef: () => e, drawLandmarks: s.drawLandmarksOverlay }), i = document.createElement("div");
+  i.style.position = "absolute", i.style.top = "0px", i.style.left = "0px", i.style.zIndex = "21", i.classList.add("three-mediapipe-rig"), document.body.appendChild(i);
+  const r = document.createElement("canvas"), l = r.getContext("2d"), h = new ge(l);
+  r.style.zIndex = "22", r.style.position = "absolute", r.style.top = "0px", r.style.left = "0px", r.style.pointerEvents = "none", i.appendChild(r);
   function f(d) {
-    c.save(), c.clearRect(0, 0, a.width, a.height), o == null || o.predict(d, p), i == null || i.left.predict(d, p), i == null || i.right.predict(d, p), r == null || r.predict(d, p), c.restore();
+    l.save(), l.clearRect(0, 0, r.width, r.height), o == null || o.predict(d, h), n == null || n.left.predict(d, h), n == null || n.right.predict(d, h), a == null || a.predict(d, h), l.restore();
   }
-  function R() {
-    e = document.createElement("video"), n.appendChild(e);
+  function x() {
+    e = document.createElement("video"), i.appendChild(e);
     let d = -1;
     e.style.zIndex = "21", e.style.position = "absolute", e.style.top = "0px", e.style.left = "0px", s.debugVideo && (e.src = s.debugVideo, e.controls = !0, e.loop = !0, e.muted = !0, e.controls = !0, e.play());
     function m() {
       d !== e.currentTime && (f(e), d = e.currentTime), window.requestAnimationFrame(m);
     }
     e.addEventListener("loadeddata", () => {
-      e.width = e.videoWidth * s.displayScale, e.height = e.videoHeight * s.displayScale, a.width = e.videoWidth, a.height = e.videoHeight, a.style.height = e.height + "px", a.style.width = e.width + "px", window.requestAnimationFrame(m);
+      e.width = e.videoWidth * s.displayScale, e.height = e.videoHeight * s.displayScale, r.width = e.videoWidth, r.height = e.videoHeight, r.style.height = e.height + "px", r.style.width = e.width + "px", window.requestAnimationFrame(m);
     });
   }
   if (s.debugFrame) {
     const d = document.createElement("img");
-    d.src = s.debugFrame, d.style.zIndex = "21", d.style.position = "absolute", d.style.top = "0px", d.style.left = "0px", n.appendChild(d), d.addEventListener("load", () => {
-      d.width = d.naturalWidth * s.displayScale, d.height = d.naturalHeight * s.displayScale, a.width = d.naturalWidth, a.height = d.naturalWidth, a.style.width = d.width + "px", a.style.height = d.height + "px";
+    d.src = s.debugFrame, d.style.zIndex = "21", d.style.position = "absolute", d.style.top = "0px", d.style.left = "0px", i.appendChild(d), d.addEventListener("load", () => {
+      d.width = d.naturalWidth * s.displayScale, d.height = d.naturalHeight * s.displayScale, r.width = d.naturalWidth, r.height = d.naturalWidth, r.style.width = d.width + "px", r.style.height = d.height + "px";
       function m() {
         f(d);
       }
       window.requestAnimationFrame(m);
     });
-  } else s.debugVideo && R();
+  } else s.debugVideo && x();
   return {
     poseTracker: o,
-    handsTracker: i,
-    faceTracker: r,
+    handsTracker: n,
+    faceTracker: a,
     video: e,
+    canvas: r,
     /**
      * A div that contains the video and canvas used to display the landmarks stacked on top of each other.
      */
-    domElement: n,
+    domElement: i,
     /**
      * Start the webcam feed. This must be initiated by a user triggered event ( a click on a button ) due to security reasons. 
      */
     start: async () => {
       let d = !1;
-      if (!He())
+      if (!mt())
         throw new Error("Webcam not supported");
-      e || R();
+      e || x();
       let m;
-      function L(w) {
-        console.warn("Camera track ended, attempting recovery..."), u(w), W(w);
+      function y(L) {
+        console.warn("Camera track ended, attempting recovery..."), p(L), R(L);
       }
-      function u(w) {
-        m == null || m.getTracks().forEach((y) => y.stop()), m = void 0, w.srcObject = null;
+      function p(L) {
+        m == null || m.getTracks().forEach((w) => w.stop()), m = void 0, L.srcObject = null;
       }
-      async function W(w, y = 0) {
-        const ae = Math.min(1e3 * 2 ** y, 16e3);
-        if (y >= 5)
+      async function R(L, w = 0) {
+        const F = Math.min(1e3 * 2 ** w, 16e3);
+        if (w >= 5)
           throw new Error("Camera recovery failed after max attempts");
-        if (await new Promise((de) => setTimeout(de, ae)), !d)
+        if (await new Promise((v) => setTimeout(v, F)), !d)
           try {
-            await b(w), console.log("Camera recovered successfully");
+            await k(L), console.log("Camera recovered successfully");
           } catch {
-            W(w, y + 1);
+            R(L, w + 1);
           }
       }
-      async function b(w) {
+      async function k(L) {
         try {
-          m = await navigator.mediaDevices.getUserMedia({ video: !0 }), w.srcObject = m, await w.play(), m.getVideoTracks().forEach((y) => {
-            y.addEventListener("ended", () => L(w));
+          m = await navigator.mediaDevices.getUserMedia({ video: !0 }), L.srcObject = m, await L.play(), m.getVideoTracks().forEach((w) => {
+            w.addEventListener("ended", () => y(L));
           });
-        } catch (y) {
-          E(y, w);
+        } catch (w) {
+          E(w, L);
         }
       }
-      function E(w, y) {
-        if (w instanceof DOMException)
-          switch (w.name) {
+      function E(L, w) {
+        if (L instanceof DOMException)
+          switch (L.name) {
             case "NotAllowedError":
               throw new Error("Permission denied — prompt user to allow camera");
             case "NotFoundError":
-              console.error("No camera found — retry when device is connected"), W(y);
+              console.error("No camera found — retry when device is connected"), R(w);
               break;
             case "NotReadableError":
-              console.error("Camera in use by another app"), W(y);
+              console.error("Camera in use by another app"), R(w);
               break;
             default:
-              console.error("Camera error:", w.message), W(y);
+              console.error("Camera error:", L.message), R(w);
           }
       }
-      return await b(e), {
+      return await k(e), {
         stop: () => {
-          d = !0, u(e);
+          d = !0, p(e);
         }
       };
     },
@@ -747,30 +808,32 @@ async function Qe(h) {
     * @param magging The bone mapping to use for the rig.
           */
     bind: (d, m) => {
-      m = m || re;
-      const L = o.bind(d, m), u = i.left.bind(d, m), W = i.right.bind(d, m);
-      let b;
-      const E = r == null ? void 0 : r.bind(d);
-      d.traverse((y) => {
-        y instanceof l.Mesh && y.name.indexOf(m.faceMesh) === 0 && (y.frustumCulled = !1, b = r == null ? void 0 : r.bindShapeKeys(y));
+      if (m = m || Le, !o) throw new Error("Pose tracker not initialized");
+      if (!n) throw new Error("Hands tracker not initialized");
+      if (!a) throw new Error("Face tracker not initialized");
+      const y = o.bind(d, m), p = n.left.bind(d, m), R = n.right.bind(d, m);
+      let k;
+      const E = a == null ? void 0 : a.bind(d);
+      d.traverse((w) => {
+        w instanceof u.Mesh && w.name.indexOf(m.faceMesh) === 0 && (w.frustumCulled = !1, k = a == null ? void 0 : a.bindShapeKeys(w));
       });
-      const w = Ge(d, m);
+      const L = pt(d, m);
       return {
         /**
          * Will save the tracked movement of the rig to an animation clip.
          * Only the bones moved by the bone mapping will be recorded.
          */
-        startRecording: w.start,
-        stopRecording: w.stop,
-        isRecording: () => w.isRecording(),
-        update: (y) => {
-          L.update(y), u.update(y), W.update(y), b == null || b.update(y), E == null || E.update(y), w.isRecording() && w.captureFrame();
+        startRecording: L.start,
+        stopRecording: L.stop,
+        isRecording: () => L.isRecording(),
+        update: (w) => {
+          y.update(w), p.update(w), R.update(w), k == null || k.update(w), E == null || E.update(w), L.isRecording() && L.captureFrame();
         }
       };
     }
   };
 }
 export {
-  Qe as setupTracker
+  bt as setupTracker
 };
 //# sourceMappingURL=three-mediapipe-rig.js.map