Feature/avatar animation cleanup (#113)

* removes rogue console.log

* implements method to cleanup undesired properties from animation tracks

* adds optional dev argument to test base model without merging parts

* updates web-avatar-client example to use idle animation from MML repo

* updates web-avatar-client example assets

* cleans up skinned mesh children to fix the avatar animation

* Removed dev argument

---------

Co-authored-by: Marcus Longmuir <marcus@mpl.dev>

example/web-avatar-client/src/AvatarEditor.tsx

@@ -16,7 +16,7 @@ import {
 import React, { useCallback, useEffect, useState } from "react";
 import { Group, Object3D } from "three";
 
-import idleAnimationURL from "../../assets/avatar/anims/AS_Andor_Stand_Idle.glb";
+import idleAnimationURL from "../../assets/avatar/anims/idle.glb";
 import hdrURL from "../../assets/hdr/puresky_2k.hdr";
 
 type BodyPartTypes = "fullBody" | "head" | "upperBody" | "lowerBody" | "feet";

example/web-avatar-client/src/collection.json

@@ -2,7 +2,7 @@
   "fullBody": [
     {
       "name": "Full Body 1",
-      "asset": "/assets/avatar/parts/SK_Outfit_Body_Male.glb",
+      "asset": "/assets/avatar/parts/FemaleBody.glb",
       "thumb": "/assets/avatar/thumbs/SK_Outfit_Body_Male.jpg"
     }
   ],
@@ -36,7 +36,7 @@
     },
     {
       "name": "Dude Upper Body 3",
-      "asset": "/assets/avatar/parts/SK_Outfit_Three_Flanel_Shirt_01.glb",
+      "asset": "/assets/avatar/parts/BaseballJersey_PlainBlack_01.glb",
       "thumb": "/assets/avatar/thumbs/SK_Outfit_Three_Flanel_Shirt_01.jpg"
     }
   ],

example/web-avatar-client/src/mmlCharacterDescription.ts

@@ -3,7 +3,7 @@
 //
 
 export const mmlCharacterDescription: string = `
-<m-character src="/assets/avatar/parts/SK_Outfit_Body_Male.glb">
+<m-character src="/assets/avatar/parts/FemaleBody.glb">
   <m-model src="/assets/avatar/parts/SK_Outfit_Hat_02.glb"></m-model>
   <m-model src="/assets/avatar/parts/SK_Outfit_Two_Long_Coat_with_Collared_Shirt_01.glb"></m-model>
   <m-model src="/assets/avatar/parts/SK_Outfit_Three_Tight_Jeans_with_Chain_01.glb"></m-model>

packages/3d-web-avatar/src/character/MMLCharacter.ts

@@ -5,7 +5,7 @@ import {
   Group,
   MathUtils,
   Matrix4,
-  Mesh,
+  MeshStandardMaterial,
   Object3D,
   Skeleton,
   SkinnedMesh,
@@ -72,7 +72,6 @@ export class MMLCharacter {
   ): Promise<Object3D> {
     const fullBodyAsset = await this.modelLoader.load(fullBodyURL);
     const fullBodyGLTF = this.skeletonHelpers.cloneGLTF(fullBodyAsset as GLTF, "fullBody");
-
     const assetPromises: Array<Promise<{ asset: GLTF; part: MMLCharacterDescriptionPart }>> =
       bodyParts.map((part) => {
         return new Promise((resolve) => {
@@ -154,6 +153,7 @@ export class MMLCharacter {
             skinnedMeshClone.castShadow = true;
             skinnedMeshClone.receiveShadow = true;
             skinnedMeshClone.bind(this.sharedSkeleton!, this.sharedMatrixWorld!);
+            skinnedMeshClone.children = [];
             this.skinnedMeshesParent?.add(skinnedMeshClone);
           }
         });

packages/3d-web-standalone-avatar-editor/src/AvatarRenderer.ts

@@ -1,7 +1,9 @@
 import { ModelLoader } from "@mml-io/3d-web-avatar";
 import { TimeManager, CameraManager, CollisionsManager } from "@mml-io/3d-web-client-core";
 import {
+  AnimationClip,
   AnimationMixer,
+  Bone,
   LinearSRGBColorSpace,
   LoadingManager,
   LoopRepeat,
@@ -20,8 +22,6 @@ import { Mirror } from "./scene/Mirror";
 
 export class AvatarRenderer {
   private readonly camOffset: Vector3 = new Vector3(0, 1.2, 0);
-  private readonly floorSize: number = 50;
-  private readonly fogDistance: number = this.floorSize - this.floorSize * 0.1;
 
   private width: number = 1;
   private height: number = 1;
@@ -44,6 +44,8 @@ export class AvatarRenderer {
   public cameraTargetOffset: { x?: number; y?: number; z?: number } = {};
   public cameraTargetDistance: number = 0;
 
+  private cleanupNonRotationAnimTracks: boolean = true;
+
   constructor(
     private hdrURL: string,
     private idleAnimationURL: string,
@@ -126,13 +128,33 @@ export class AvatarRenderer {
     );
   }
 
+  private cleanAnimationClips(skeletalMesh: Object3D, animationClip: AnimationClip): AnimationClip {
+    const availableBones = new Set<string>();
+    skeletalMesh.traverse((child) => {
+      const asBone = child as Bone;
+      if (asBone.isBone) {
+        availableBones.add(child.name);
+      }
+    });
+    animationClip.tracks = animationClip.tracks.filter((track) => {
+      const [trackName, trackProperty] = track.name.split(".");
+      const shouldAnimate =
+        availableBones.has(trackName) && trackProperty !== "position" && trackProperty !== "scale";
+      return shouldAnimate;
+    });
+    return animationClip;
+  }
+
   public async animateCharacter(model: Object3D) {
     this.mixer = new AnimationMixer(model);
     if (this.animationAsset === null) {
       this.animationAsset = await this.modelLoader.load(this.idleAnimationURL);
     }
     if (this.animationAsset && this.animationAsset.animations) {
-      const animationClip = this.animationAsset.animations[0];
+      const animationClip = this.cleanupNonRotationAnimTracks
+        ? this.cleanAnimationClips(this.animationAsset.scene, this.animationAsset.animations[0])
+        : this.animationAsset.animations[0];
+
       const animationAction = this.mixer.clipAction(animationClip);
       animationAction.setLoop(LoopRepeat, Infinity);
       animationAction.play();

packages/3d-web-standalone-avatar-editor/src/screenshot/ModelScreenshotter.ts

@@ -47,8 +47,6 @@ export class ModelScreenshotter {
     const size = new Vector3();
     boundingBox.getSize(size);
 
-    console.log("boundingBox", boundingBox);
-
     const camera = new PerspectiveCamera(50, width / height, 0.1, 1000);
     positionCameraToFitBoundingBox(camera, boundingBox, size, padding, [0, 15, 30]);