Merge pull request #18 from mml-io/feature/exporter-improvements

GLTF Avatar Exporter improvements
mml-io · Dec 1, 2023 · 6ec6648 · 6ec6648
2 parents 7afbc30 + e09a894
commit 6ec6648
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/tools/gltf-avatar-exporter/public/index.html b/tools/gltf-avatar-exporter/public/index.html
@@ -19,6 +19,7 @@
       <div id="seQuadrant" class="quadrant">
         <div style="position: absolute; top: 0; right:0;">
           <button class="button" id="sample-animation-button">Use Sample Animation</button>
+          <button class="button" id="toggle-slowmotion-button">Toggle Slow Motion</button>
           <button class="button" id="clear-animation-button">Clear Animation</button>
         </div>
       </div>

diff --git a/tools/gltf-avatar-exporter/src/index.ts b/tools/gltf-avatar-exporter/src/index.ts
@@ -42,9 +42,13 @@ class App {
       },
     );
     this.exportView = new ExportView(this.logger, this.modelLoader, this.timeManager);
-    this.animationView = new AnimationView(this.modelLoader, (clip) => {
-      this.exportView.setAnimationClip(clip);
-    });
+    this.animationView = new AnimationView(
+      this.modelLoader,
+      (clip) => {
+        this.exportView.setAnimationClip(clip);
+      },
+      this.timeManager,
+    );
     this.disableDragAndDropElsewhere();
   }
 
@@ -62,7 +66,7 @@ class App {
   public update(): void {
     this.timeManager.update();
     this.importView.update();
-    this.exportView.update();
+    this.exportView.update(this.animationView.slowMotion);
     this.animationView.update();
     requestAnimationFrame(() => {
       this.update();

diff --git a/tools/gltf-avatar-exporter/src/scene/AnimationView.ts b/tools/gltf-avatar-exporter/src/scene/AnimationView.ts
@@ -1,3 +1,4 @@
+import { TimeManager } from "@mml-io/3d-web-client-core";
 import { AnimationClip, AnimationMixer, Bone, SkeletonHelper, Vector3 } from "three";
 
 // Jump animation for UE5 Manny exported as GLB from UE5
@@ -19,11 +20,15 @@ export class AnimationView extends QuadrantScene {
     animationMixer: AnimationMixer;
   } | null = null;
   private clearAnimationButton: HTMLButtonElement;
+  private toggleSlowMotionButton: HTMLButtonElement;
   private useSampleAnimationButton: HTMLButtonElement;
 
+  public slowMotion: boolean = false;
+
   constructor(
     private modelLoader: ModelLoader,
     private onAnimationClipLoaded: (clip: AnimationClip | null) => void,
+    private timeManager: TimeManager,
   ) {
     super("seQuadrant");
     this.lights = new Lights(this.camOffset);
@@ -40,6 +45,13 @@ export class AnimationView extends QuadrantScene {
       this.reset();
     });
 
+    this.toggleSlowMotionButton = document.getElementById(
+      "toggle-slowmotion-button",
+    )! as HTMLButtonElement;
+    this.toggleSlowMotionButton.addEventListener("click", () => {
+      this.slowMotion = !this.slowMotion;
+    });
+
     this.useSampleAnimationButton = document.getElementById(
       "sample-animation-button",
     )! as HTMLButtonElement;
@@ -71,7 +83,8 @@ export class AnimationView extends QuadrantScene {
 
   public update() {
     if (this.loadedState) {
-      this.loadedState.animationMixer.setTime(Date.now() / 1000);
+      const dt = this.slowMotion ? this.timeManager.deltaTime * 0.25 : this.timeManager.deltaTime;
+      this.loadedState.animationMixer.update(dt);
     }
     super.update();
   }

diff --git a/tools/gltf-avatar-exporter/src/scene/ExportView.ts b/tools/gltf-avatar-exporter/src/scene/ExportView.ts
@@ -136,9 +136,10 @@ export class ExportView extends QuadrantScene {
     this.debugGroup.visible = this.debugCheckbox.checked;
   }
 
-  public update() {
+  public update(slowMotion: boolean) {
     if (this.loadedAnimationState !== null) {
-      this.loadedAnimationState.animationMixer.update(this.timeManager.deltaTime);
+      const dt = slowMotion ? this.timeManager.deltaTime * 0.25 : this.timeManager.deltaTime;
+      this.loadedAnimationState.animationMixer.update(dt);
     }
     super.update();
   }

diff --git a/tools/gltf-avatar-exporter/src/scene/QuadrantScene.ts b/tools/gltf-avatar-exporter/src/scene/QuadrantScene.ts
@@ -125,7 +125,7 @@ export class QuadrantScene {
     this.orbitControls.update();
   }
 
-  public update(): void {
+  public update(_slowMotion: boolean = false): void {
     this.renderer.render(this.scene, this.camera);
     this.orbitControls.update();
   }

diff --git a/tools/gltf-avatar-exporter/src/scene/correction-steps/fixBonesScale.ts b/tools/gltf-avatar-exporter/src/scene/correction-steps/fixBonesScale.ts
@@ -5,6 +5,7 @@ import { getBonesBoundingBox } from "./getBonesBoundingBox";
 import { LogMessage, Step } from "./types";
 
 const scaleCorrection = new THREE.Matrix4().makeScale(0.01, 0.01, 0.01);
+const scaleKCorrection = new THREE.Matrix4().makeScale(0.001, 0.001, 0.001);
 
 export const fixBonesScaleCorrectionStep: Step = {
   name: "fixBonesScale",
@@ -18,6 +19,8 @@ export const fixBonesScaleCorrectionStep: Step = {
       message: `Bones size: x: ${xBonesSize}, y: ${yBonesSize}, z: ${zBonesSize}`,
     };
     const bonesAre100TimesTooLarge = zBonesSize > 10 || yBonesSize > 10;
+    const bonesAre1000TimesTooLarge = zBonesSize > 100 || yBonesSize > 100;
+
     if (!bonesAre100TimesTooLarge) {
       return {
         didApply: false,
@@ -32,7 +35,11 @@ export const fixBonesScaleCorrectionStep: Step = {
     group.traverse((child) => {
       const asBone = child as THREE.Bone;
       if (asBone.isBone) {
-        asBone.position.applyMatrix4(scaleCorrection);
+        if (bonesAre1000TimesTooLarge) {
+          asBone.position.applyMatrix4(scaleKCorrection);
+        } else {
+          asBone.position.applyMatrix4(scaleCorrection);
+        }
         asBone.updateMatrixWorld(true);
       }
     });
@@ -41,7 +48,9 @@ export const fixBonesScaleCorrectionStep: Step = {
       didApply: true,
       topLevelMessage: {
         level: "info",
-        message: "Detected bones were > 10 in y/z. Scaled down to 10% of initial.",
+        message: `Detected bones were > ${
+          bonesAre1000TimesTooLarge ? "100" : "10"
+        } in y/z. Scaled down to ${bonesAre1000TimesTooLarge ? "1%" : "10%"} initial.`,
       },
       logs: [bonesSizeLog],
     };

diff --git a/tools/gltf-avatar-exporter/src/scene/correction-steps/fixMeshScale.ts b/tools/gltf-avatar-exporter/src/scene/correction-steps/fixMeshScale.ts
@@ -5,6 +5,7 @@ import { getBonesBoundingBox } from "./getBonesBoundingBox";
 import { LogMessage, Step } from "./types";
 
 const scaleCorrection = new THREE.Matrix4().makeScale(0.01, 0.01, 0.01);
+const scaleKCorrection = new THREE.Matrix4().makeScale(0.001, 0.001, 0.001);
 
 export const fixMeshScaleCorrectionStep: Step = {
   name: "fixMeshScale",
@@ -21,6 +22,8 @@ export const fixMeshScaleCorrectionStep: Step = {
       message: `Bones size: x: ${xBonesSize}, y: ${yBonesSize}, z: ${zBonesSize}`,
     };
     const bonesAre100TimesTooLarge = zBonesSize > 10 || yBonesSize > 10;
+    const bonesAre1000TimesTooLarge = zBonesSize > 100 || yBonesSize > 100;
+
     if (!bonesAre100TimesTooLarge) {
       return {
         didApply: false,
@@ -35,15 +38,21 @@ export const fixMeshScaleCorrectionStep: Step = {
     group.traverse((child) => {
       const asSkinnedMesh = child as THREE.SkinnedMesh;
       if (asSkinnedMesh.isSkinnedMesh) {
-        asSkinnedMesh.geometry.applyMatrix4(scaleCorrection);
+        if (bonesAre1000TimesTooLarge) {
+          asSkinnedMesh.geometry.applyMatrix4(scaleKCorrection);
+        } else {
+          asSkinnedMesh.geometry.applyMatrix4(scaleCorrection);
+        }
       }
     });
 
     return {
       didApply: true,
       topLevelMessage: {
         level: "info",
-        message: "Detected mesh size was > 10 in y/z. Scaled down to 10% of initial.",
+        message: `Detected mesh size was > ${
+          bonesAre1000TimesTooLarge ? "100" : "10"
+        } in y/z. Scaled down to ${bonesAre1000TimesTooLarge ? "1%" : "10%"} of initial.`,
       },
       logs: [bonesSizeLog],
     };