Improved removeUnnecessaryJoints

examples/animations.html

@@ -59,6 +59,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/basic.html

@@ -59,6 +59,9 @@
 				// called when the resource is loaded
 				( gltf ) => {
 
+					// calling this function greatly improves the performance
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					// generate VRM instance from gltf
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 

examples/blendshapes.html

@@ -58,6 +58,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/bones.html

@@ -58,6 +58,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/dnd.html

@@ -61,6 +61,8 @@
 
 					( gltf ) => {
 
+						THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 						THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 							if ( currentVrm ) {

examples/envmap.html

@@ -89,6 +89,8 @@
 				// called when the resource is loaded
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					// generate VRM instance from gltf
 					THREE.VRM.from(
 						gltf,

examples/firstperson.html

@@ -58,6 +58,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/lookat-advanced.html

@@ -129,6 +129,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					const lookAtImporter = new VRMSmoothLookAtImporter();
 					THREE.VRM.from( gltf, { lookAtImporter } ).then( ( vrm ) => {
 

examples/lookat.html

@@ -62,6 +62,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/materials-debug.html

@@ -58,6 +58,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

examples/meta.html

@@ -64,6 +64,8 @@
 				// called when the resource is loaded
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					// generate VRM instance from gltf
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 

examples/mouse.html

@@ -54,6 +54,8 @@
 
 				( gltf ) => {
 
+					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+
 					THREE.VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );

src/vrm/VRMUtils/index.ts

@@ -0,0 +1,9 @@
+import { removeUnnecessaryJoints } from './removeUnnecessaryJoints';
+
+export class VRMUtils {
+  private constructor() {
+    // this class is not meant to be instantiated
+  }
+
+  public static removeUnnecessaryJoints = removeUnnecessaryJoints;
+}

src/vrm/VRMUtils/removeUnnecessaryJoints.ts

@@ -0,0 +1,61 @@
+import * as THREE from 'three';
+
+/**
+ * Traverse given object and remove unnecessarily bound joints from every `THREE.SkinnedMesh`.
+ * Some environments like mobile devices have a lower limit of bones and might be unable to perform mesh skinning, this function might resolve such an issue.
+ * Also this function might greatly improve the performance of mesh skinning.
+ *
+ * @param root Root object that will be traversed
+ */
+export function removeUnnecessaryJoints(root: THREE.Object3D): void {
+  // some meshes might share a same skinIndex attribute and this map prevents to convert the attribute twice
+  const skeletonList: Map<THREE.BufferAttribute, THREE.Skeleton> = new Map();
+
+  // Traverse an entire tree
+  root.traverse((obj) => {
+    if (obj.type !== 'SkinnedMesh') {
+      return;
+    }
+
+    const mesh = obj as THREE.SkinnedMesh;
+    const geometry = mesh.geometry as THREE.BufferGeometry;
+    const attribute = geometry.getAttribute('skinIndex') as THREE.BufferAttribute;
+
+    // look for existing skeleton
+    let skeleton = skeletonList.get(attribute);
+
+    if (!skeleton) {
+      // generate reduced bone list
+      const bones: THREE.Bone[] = []; // new list of bone
+      const boneInverses: THREE.Matrix4[] = []; // new list of boneInverse
+      const boneIndexMap: { [index: number]: number } = {}; // map of old bone index vs. new bone index
+
+      // create a new bone map
+      const array = attribute.array as number[];
+      for (let i = 0; i < array.length; i++) {
+        const index = array[i];
+
+        // new skinIndex buffer
+        if (boneIndexMap[index] === undefined) {
+          boneIndexMap[index] = bones.length;
+          bones.push(mesh.skeleton.bones[index]);
+          boneInverses.push(mesh.skeleton.boneInverses[index]);
+        }
+
+        array[i] = boneIndexMap[index];
+      }
+
+      // replace with new indices
+      attribute.copyArray(array);
+      attribute.needsUpdate = true;
+
+      // replace with new indices
+      skeleton = new THREE.Skeleton(bones, boneInverses);
+      skeletonList.set(attribute, skeleton);
+    }
+
+    mesh.bind(skeleton, new THREE.Matrix4());
+    //                  ^^^^^^^^^^^^^^^^^^^ transform of meshes should be ignored
+    // See: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins
+  });
+}

src/vrm/index.ts

@@ -1,6 +1,6 @@
 export * from './VRM';
 export * from './VRMImporter';
-export * from './removeUnnecessaryJoints';
+export * from './VRMUtils';
 export * from './blendshape';
 export * from './debug';
 export * from './firstperson';