@myned-ai/gsplat-flame-avatar-renderer 1.0.5 → 1.0.6

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@myned-ai/gsplat-flame-avatar-renderer",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "FLAME-enabled Gaussian Splatting library for animated avatars with ARKit blendshape support",
-  "main": "dist/gsplat-flame-avatar-renderer.cjs.js",
-  "module": "dist/gsplat-flame-avatar-renderer.esm.js",
+  "main": "dist/gsplat-flame-avatar-renderer.cjs.min.js",
+  "module": "dist/gsplat-flame-avatar-renderer.esm.min.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/gsplat-flame-avatar-renderer.esm.js",
-      "require": "./dist/gsplat-flame-avatar-renderer.cjs.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/gsplat-flame-avatar-renderer.esm.min.js",
+      "require": "./dist/gsplat-flame-avatar-renderer.cjs.min.js",
+      "types": "./dist/index.d.ts",
+      "development": {
+        "import": "./dist/gsplat-flame-avatar-renderer.esm.js",
+        "require": "./dist/gsplat-flame-avatar-renderer.cjs.js"
+      }
     }
   },
   "scripts": {

package/src/core/SplatMesh.js

@@ -22,6 +22,9 @@ import { SplatTree } from './SplatTree.js';
 import { SplatMaterial3D } from '../materials/SplatMaterial3D.js';
 import { SplatMaterial2D } from '../materials/SplatMaterial2D.js';
 import { getSphericalHarmonicsComponentCountForDegree, uintEncodedFloat, rgbaArrayToInteger, clamp } from '../utils/Util.js';
+import { getLogger } from '../utils/Logger.js';
+
+const logger = getLogger('SplatMesh');
 
 // Dummy geometry and material for initial Mesh construction
 const dummyGeometry = new BufferGeometry();
@@ -91,7 +94,7 @@ function WebGLExtensions$1(gl) {
         get: function(name) {
             const extension = getExtension(name);
             if (extension === null) {
-                console.warn('THREE.WebGLRenderer: ' + name + ' extension not supported.');
+                logger.warn('THREE.WebGLRenderer: ' + name + ' extension not supported.');
             }
             return extension;
         }
@@ -138,7 +141,7 @@ function WebGLCapabilities$1(gl, extensions, parameters) {
     const maxPrecision = getMaxPrecision(precision);
 
     if (maxPrecision !== precision) {
-        console.warn('THREE.WebGLRenderer:', precision, 'not supported, using', maxPrecision, 'instead.');
+        logger.warn('THREE.WebGLRenderer:', precision, 'not supported, using', maxPrecision, 'instead.');
         precision = maxPrecision;
     }
 
@@ -396,7 +399,6 @@ export class SplatMesh extends Mesh {
         this.bonesNum = null;
         this.bonesWeight = null;
         this.gaussianSplatCount = null;
-        this.useFlameModel = true;
 
         this.morphTargetDictionary = null;
         this.distancesTransformFeedback = {
@@ -416,6 +418,9 @@ export class SplatMesh extends Mesh {
         this.globalSplatIndexToLocalSplatIndexMap = [];
         this.globalSplatIndexToSceneIndexMap = [];
 
+        // Optional iris occlusion configuration from avatar ZIP
+        this.irisOcclusionConfig = null;
+
         this.lastBuildSplatCount = 0;
         this.lastBuildScenes = [];
         this.lastBuildMaxSplatCount = 0;
@@ -531,7 +536,7 @@ export class SplatMesh extends Mesh {
             }, onSplatTreeIndexesUpload, onSplatTreeConstruction)
             .then(() => {
                 const buildTime = performance.now() - buildStartTime;
-                if (this.logLevel >= LogLevel.Info) console.log('SplatTree build: ' + buildTime + ' ms');
+                if (this.logLevel >= LogLevel.Info) logger.info('SplatTree build: ' + buildTime + ' ms');
                 if (this.disposed) {
                     resolve();
                 } else {
@@ -554,11 +559,11 @@ export class SplatMesh extends Mesh {
                         }
                     });
                     if (this.logLevel >= LogLevel.Info) {
-                        console.log(`SplatTree leaves: ${this.splatTree.countLeaves()}`);
-                        console.log(`SplatTree leaves with splats:${leavesWithVertices}`);
+                        logger.info(`SplatTree leaves: ${this.splatTree.countLeaves()}`);
+                        logger.info(`SplatTree leaves with splats:${leavesWithVertices}`);
                         avgSplatCount = avgSplatCount / nodeCount;
-                        console.log(`Avg splat count per node: ${avgSplatCount}`);
-                        console.log(`Total splat count: ${this.getSplatCount()}`);
+                        logger.info(`Avg splat count per node: ${avgSplatCount}`);
+                        logger.info(`Total splat count: ${this.getSplatCount()}`);
                     }
                     resolve();
                 }
@@ -655,7 +660,7 @@ export class SplatMesh extends Mesh {
             if (this.splatRenderMode === SplatRenderMode.ThreeD) {
                 this.material = SplatMaterial3D.build(this.dynamicMode, this.enableOptionalEffects, this.antialiased,
                                                       this.maxScreenSpaceSplatSize, this.splatScale, this.pointCloudModeEnabled,
-                                                      this.minSphericalHarmonicsDegree, this.kernel2DSize, this.useFlameModel);
+                                                      this.minSphericalHarmonicsDegree, this.kernel2DSize, this.irisOcclusionConfig);
             } else {
                 this.material = SplatMaterial2D.build(this.dynamicMode, this.enableOptionalEffects,
                                                       this.splatScale, this.pointCloudModeEnabled, this.minSphericalHarmonicsDegree);
@@ -1188,17 +1193,18 @@ export class SplatMesh extends Mesh {
         };
         this.material.uniforms.sceneCount.value = this.scenes.length;
 
-        this.expressionBSNum = this.flameModel.geometry.morphAttributes.position.length;
-        this.material.uniforms.bsCount.value = this.expressionBSNum;
+        // FLAME-specific setup (only if flameModel has required data)
+        if (this.flameModel && this.flameModel.geometry && this.flameModel.geometry.morphAttributes && this.flameModel.skeleton) {
+            this.expressionBSNum = this.flameModel.geometry.morphAttributes.position.length;
+            this.material.uniforms.bsCount.value = this.expressionBSNum;
 
-        this.flameModel.skeleton.bones.forEach((bone, index) => {
-            if (bone.name == 'head')
-                this.material.uniforms.headBoneIndex.value = index;
-          });
+            this.flameModel.skeleton.bones.forEach((bone, index) => {
+                if (bone.name == 'head')
+                    this.material.uniforms.headBoneIndex.value = index;
+            });
 
-        this.buildModelTexture(this.flameModel);
-        this.buildBoneMatrixTexture();
-        if(this.useFlameModel) {
+            this.buildModelTexture(this.flameModel);
+            this.buildBoneMatrixTexture();
             this.buildBoneWeightTexture(this.flameModel);
         }
     }
@@ -1206,21 +1212,25 @@ export class SplatMesh extends Mesh {
     buildBoneMatrixTexture() {
         if (!this.bsWeight)
             return
+
+        // Guard: Requires FLAME model with morphTargetDictionary
+        if (!this.flameModel || !this.flameModel.morphTargetDictionary) {
+            return;
+        }
+
         //this.bonesNum + this.expressionBSNum / 4 = 30, so 32
         const boneTextureSize = new Vector2(4, 32);
         let boneMatrixTextureData = new Float32Array(this.bonesMatrix);
         let boneMatrixTextureDataInt = new Uint32Array(boneTextureSize.x * boneTextureSize.y * 4);
         this.morphTargetDictionary = this.flameModel.morphTargetDictionary;
 
-        if(this.useFlameModel) {
-            for (let c = 0; c < this.bonesNum * 16; c++) {
-                boneMatrixTextureDataInt[c] = uintEncodedFloat(boneMatrixTextureData[c]);
-            }
-            if (this.flameModel && this.flameModel.skeleton) {
-                this.material.uniforms.boneTexture0.value = this.flameModel.skeleton.boneTexture;
-                this.material.uniforms.bindMatrix.value = this.flameModel.bindMatrix;
-                this.material.uniforms.bindMatrixInverse.value = this.flameModel.bindMatrixInverse;
-            }
+        for (let c = 0; c < this.bonesNum * 16; c++) {
+            boneMatrixTextureDataInt[c] = uintEncodedFloat(boneMatrixTextureData[c]);
+        }
+        if (this.flameModel && this.flameModel.skeleton) {
+            this.material.uniforms.boneTexture0.value = this.flameModel.skeleton.boneTexture;
+            this.material.uniforms.bindMatrix.value = this.flameModel.bindMatrix;
+            this.material.uniforms.bindMatrixInverse.value = this.flameModel.bindMatrixInverse;
         }
         for (const key in this.bsWeight) {
             if (Object.hasOwn(this.bsWeight, key)) {
@@ -1252,17 +1262,10 @@ export class SplatMesh extends Mesh {
         this.splatDataTextures.baseData['boneMatrix'] = boneMatrixTextureDataInt;
     }
 
-    updateBoneMatrixTexture(updateFlameBoneMatrix = false) {
+    updateBoneMatrixTexture() {
         if (!this.bsWeight || !this.morphTargetDictionary)
             return
 
-        if(updateFlameBoneMatrix == true) {
-            let boneMatrixTextureData = new Float32Array(this.bonesMatrix);
-            for (let c = 0; c < this.bonesNum * 16; c++) {
-                this.splatDataTextures.baseData['boneMatrix'][c] = uintEncodedFloat(boneMatrixTextureData[c]);
-            }
-        }
-
         for (const key in this.bsWeight) {
             if (Object.hasOwn(this.bsWeight, key)) {
                 const value = this.bsWeight[key];
@@ -1289,6 +1292,11 @@ export class SplatMesh extends Mesh {
     }
 
     buildBoneWeightTexture(flameModel) {
+        // Guard: bonesWeight is required for FLAME bone weight texture building
+        if (!this.bonesWeight) {
+            return;
+        }
+
         let shapedMesh = flameModel.geometry.attributes.position.array;
 
         let pointNum = shapedMesh.length / 3;
@@ -1328,6 +1336,11 @@ export class SplatMesh extends Mesh {
 
 
     buildModelTexture(flameModel) {
+        // Guard: Requires FLAME model with morph attributes
+        if (!flameModel || !flameModel.geometry || !flameModel.geometry.morphAttributes || !flameModel.morphTargetDictionary) {
+            return;
+        }
+
         const flameModelTexSize = new Vector2(4096, 2048);
 
         var shapedMesh = flameModel.geometry.attributes.position.array;
@@ -1337,9 +1350,6 @@ export class SplatMesh extends Mesh {
         let bsLength = flameModel.geometry.morphAttributes.position.length;
 
         const morphTargetNames = Object.keys(flameModel.morphTargetDictionary);
-        // if (this.useFlameModel == false) {
-        //     morphTargetNames.sort(); 
-        // }
         morphTargetNames.forEach((name, newIndex) => {
             const originalIndex = flameModel.morphTargetDictionary[name];
             var bsMesh = flameModel.geometry.morphAttributes.position[originalIndex];
@@ -1377,7 +1387,7 @@ export class SplatMesh extends Mesh {
         this.splatDataTextures.baseData['flameModelPos'] = flameModelData;
     }
 
-    updateTetureAfterBSAndSkeleton(fromSplat, toSplat, useFlameModel = true) {
+    updateTetureAfterBSAndSkeleton(fromSplat, toSplat) {
         const sceneTransform = new Matrix4();
 
         this.getSceneTransform(0, sceneTransform);
@@ -1398,7 +1408,7 @@ export class SplatMesh extends Mesh {
                                     fromSplat, toSplat);
         }
 
-        this.updateBoneMatrixTexture(useFlameModel);
+        this.updateBoneMatrixTexture();
     }
 
     updateBaseDataFromSplatBuffers(fromSplat, toSplat) {
@@ -1946,7 +1956,7 @@ export class SplatMesh extends Mesh {
             const createShader = (gl, type, source) => {
                 const shader = gl.createShader(type);
                 if (!shader) {
-                    console.error('Fatal error: gl could not create a shader object.');
+                    logger.error('Fatal error: gl could not create a shader object.');
                     return null;
                 }
 
@@ -1959,7 +1969,7 @@ export class SplatMesh extends Mesh {
                     if (type === gl.VERTEX_SHADER) typeName = 'vertex shader';
                     else if (type === gl.FRAGMENT_SHADER) typeName = 'fragement shader';
                     const errors = gl.getShaderInfoLog(shader);
-                    console.error('Failed to compile ' + typeName + ' with these errors:' + errors);
+                    logger.error('Failed to compile ' + typeName + ' with these errors:' + errors);
                     gl.deleteShader(shader);
                     return null;
                 }
@@ -2046,7 +2056,7 @@ export class SplatMesh extends Mesh {
                 const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
                 if (!linked) {
                     const error = gl.getProgramInfoLog(program);
-                    console.error('Fatal error: Failed to link program: ' + error);
+                    logger.error('Fatal error: Failed to link program: ' + error);
                     gl.deleteProgram(program);
                     gl.deleteShader(fragmentShader);
                     gl.deleteShader(vertexShader);
@@ -2225,7 +2235,6 @@ export class SplatMesh extends Mesh {
         return (modelViewProjMatrix, outComputedDistances) => {
             if (!this.renderer) return;
 
-            // console.time("gpu_compute_distances");
             const gl = this.renderer.getContext();
 
             const currentVao = gl.getParameter(gl.VERTEX_ARRAY_BINDING);
@@ -2316,8 +2325,6 @@ export class SplatMesh extends Mesh {
 
                                 if (currentVao) gl.bindVertexArray(currentVao);
 
-                                // console.timeEnd("gpu_compute_distances");
-
                                 resolve();
                             }
                         }

package/src/core/Viewer.js

@@ -12,12 +12,12 @@
  */
 
 import { Bone, DynamicDrawUsage, InstancedBufferAttribute, MathUtils, Matrix4, OrthographicCamera, PerspectiveCamera, Quaternion, Scene, Skeleton, Vector2, Vector3, WebGLRenderer } from 'three';
-import { 
-    getCurrentTime, 
-    clamp, 
-    delayedExecute, 
-    isIOS, 
-    getIOSSemever, 
+import {
+    getCurrentTime,
+    clamp,
+    delayedExecute,
+    isIOS,
+    getIOSSemever,
     Semver,
     fetchWithProgress,
     nativePromiseWithExtractedComponents,
@@ -25,6 +25,9 @@ import {
     disposeAllMeshes,
     AbortedPromiseError
 } from '../utils/Util.js';
+import { getLogger } from '../utils/Logger.js';
+
+const logger = getLogger('Viewer');
 import { RenderMode } from '../enums/RenderMode.js';
 import { LogLevel } from '../enums/LogLevel.js';
 import { SplatRenderMode } from '../enums/SplatRenderMode.js';
@@ -415,15 +418,8 @@ export class Viewer {
 
     this.lastTime = 0;
     this.gaussianSplatCount = 0;
-    this.totalFrames = 0; 
-    this.flame_params = null;
-    this.bone_tree = null;
-    this.lbs_weight_80k = null;
+    this.totalFrames = 0;
     this.frame = 0;
-  
-    this.useFlame = true;
-    this.bones = null;
-    this.skeleton = null;
     this. avatarMesh = null;
     this.skinModel = null;
     this.boneRoot = null;
@@ -449,6 +445,9 @@ export class Viewer {
       this.sceneFadeInRateMultiplier,
       this.kernel2DSize
     );
+
+    // Pass iris occlusion config if loaded
+    this.splatMesh.irisOcclusionConfig = this.irisOcclusionConfig;
     this.splatMesh.frustumCulled = false;
     if (this.onSplatMeshChangedCallback) this.onSplatMeshChangedCallback();
   }
@@ -613,8 +612,6 @@ export class Viewer {
         false
       );
       this.keyDownListener = this.onKeyDown.bind(this);
-      // 暂时去掉键盘事件的监听
-      // window.addEventListener('keydown', this.keyDownListener, false)
     }
   }
 
@@ -979,7 +976,7 @@ export class Viewer {
       this.splatMesh.scenes &&
       this.splatMesh.scenes.length > 0
     ) {
-      console.log(
+      logger.warn(
         'addSplatScene(): "progressiveLoad" option ignore because there are multiple splat scenes'
       );
       options.progressiveLoad = false;
@@ -1035,7 +1032,7 @@ export class Viewer {
             }
           }
         } else if (loaderStatus === LoaderStatus.Processing) {
-          console.log('loaderStatus === LoaderStatus.Processing');
+          logger.debug('loaderStatus === LoaderStatus.Processing');
           this.loadingSpinner.setMessageForTask(
             loadingUITaskId,
             'Processing splats...'
@@ -1280,7 +1277,7 @@ export class Viewer {
         this.removeSplatSceneDownloadPromise(splatSceneDownloadPromise);
       })
       .catch((e) => {
-        console.error('Viewer::addSplatScene actual error:', e);
+        logger.error('Viewer::addSplatScene actual error:', e);
         this.clearSplatSceneDownloadAndBuildPromise();
         this.removeSplatSceneDownloadPromise(splatSceneDownloadPromise);
         const error =
@@ -1691,7 +1688,6 @@ export class Viewer {
               0,
               e.data.splatRenderCount
             );
-            // console.log(sortedIndexes);
             this.splatMesh.updateRenderIndexes(
               sortedIndexes,
               e.data.splatRenderCount
@@ -1714,7 +1710,7 @@ export class Viewer {
           this.sortRunning = false;
         } else if (e.data.sortSetupPhase1Complete) {
           if (this.logLevel >= LogLevel.Info)
-            console.log('Sorting web worker WASM setup complete.');
+            logger.info('Sorting web worker WASM setup complete.');
           if (this.sharedMemoryForWorkers) {
             this.sortWorkerSortedIndexes = new Uint32Array(
               e.data.sortedIndexesBuffer,
@@ -1750,17 +1746,17 @@ export class Viewer {
           this.sortWorker.maxSplatCount = maxSplatCount;
 
           if (this.logLevel >= LogLevel.Info) {
-            console.log('Sorting web worker ready.');
+            logger.info('Sorting web worker ready.');
             const splatDataTextures = this.splatMesh.getSplatDataTextures();
             const covariancesTextureSize = splatDataTextures.covariances.size;
             const centersColorsTextureSize = splatDataTextures.centerColors.size;
-            console.log(
+            logger.info(
               'Covariances texture size: ' +
                 covariancesTextureSize.x +
                 ' x ' +
                 covariancesTextureSize.y
             );
-            console.log(
+            logger.info(
               'Centers/colors texture size: ' +
                 centersColorsTextureSize.x +
                 ' x ' +
@@ -2695,113 +2691,14 @@ export class Viewer {
     return navigator.userAgent.includes('Mobi')
   }
 
-  createBonesFromJson(bonesJson) {
-    const bones = [];
-
-    function createBoneRecursive(jsonBone, parent = null) {
-      const bone = new Bone();
-      bone.name = jsonBone.name;
-      if (parent) {
-        parent.add(bone);
-      }
-      bone.position.set(...jsonBone.position);
-      bones.push(bone);
-
-      if (jsonBone.children) {
-        jsonBone.children.forEach((childJsonBone) =>
-          createBoneRecursive(childJsonBone, bone)
-        );
-      }
-      return bone
-    }
-
-    bonesJson.forEach((boneJson) => createBoneRecursive(boneJson));
-
-    return bones
-  }
-
   updateMorphTarget(inputMesh) {
     this.avatarMesh = inputMesh;
     this.splatMesh.flameModel = inputMesh;
-    this.splatMesh.useFlameModel = this.useFlame;
-    if(this.useFlame == true) {
-        // const skinData = {
-        //     bones: [
-        //         {
-        //         "name": "root",
-        //         "position": [-1.7149e-04, -1.4252e-01, -8.2541e-02],
-        //         "children": [
-        //             {
-        //             "name": "neck",
-        //             "position": [-5.6988e-05, -1.6069e-02, -5.7859e-02],
-                    
-        //             "children": [
-        //                 {
-        //                 "name": "jaw",
-        //                     "position": [7.4429e-04, -8.7249e-03, -5.3760e-02]
-
-        //                 },
-        //                 {
-        //                 "name": "leftEye",
-        //                 "position": [  3.0240e-02,  2.3092e-02,  2.2900e-02]
-        //                 },
-        //                 {
-        //                 "name": "rightEye",
-        //                 "position": [-3.0296e-02,  2.3675e-02,  2.1837e-02]
-        //                 }
-        //             ]
-        //             }
-        //         ]
-        //         }
-        //     ] 
-        // };
-
-        // this.bones = this.createBonesFromJson(skinData.bones);
-        this.bones = this.createBonesFromJson(this.bone_tree["bones"]);
-
-        const bonesPosReserve = [new Vector3(this.bones[0].position.x, this.bones[0].position.y, this.bones[0].position.z),
-        new Vector3(this.bones[1].position.x, this.bones[1].position.y, this.bones[1].position.z),
-        new Vector3(this.bones[2].position.x, this.bones[2].position.y, this.bones[2].position.z),
-        new Vector3(this.bones[3].position.x, this.bones[3].position.y, this.bones[3].position.z),
-        new Vector3(this.bones[4].position.x, this.bones[4].position.y, this.bones[4].position.z)
-        ];
-        this.bones[1].position.copy(new Vector3(bonesPosReserve[1].x - bonesPosReserve[0].x, bonesPosReserve[1].y - bonesPosReserve[0].y, bonesPosReserve[1].z - bonesPosReserve[0].z));
-        this.bones[2].position.copy(new Vector3(bonesPosReserve[2].x - bonesPosReserve[1].x, bonesPosReserve[2].y - bonesPosReserve[1].y, bonesPosReserve[2].z - bonesPosReserve[1].z));
-        this.bones[3].position.copy(new Vector3(bonesPosReserve[3].x - bonesPosReserve[1].x, bonesPosReserve[3].y - bonesPosReserve[1].y, bonesPosReserve[3].z - bonesPosReserve[1].z));
-        this.bones[4].position.copy(new Vector3(bonesPosReserve[4].x - bonesPosReserve[1].x, bonesPosReserve[4].y - bonesPosReserve[1].y, bonesPosReserve[4].z - bonesPosReserve[1].z));
-        
-        this.bones[0].updateMatrixWorld(true);
-        const boneInverses = [this.bones[0].matrixWorld.clone().invert(),
-                                this.bones[1].matrixWorld.clone().invert(),
-                                this.bones[2].matrixWorld.clone().invert(),
-                                this.bones[3].matrixWorld.clone().invert(),
-                                this.bones[4].matrixWorld.clone().invert()];
-
-        this.skeleton = new Skeleton(this.bones, boneInverses);
-    }
 
     this.runMorphUpdate();
     this.splatMesh.gaussianSplatCount = this.gaussianSplatCount;
   }
 
-  updatedBoneMatrices(boneNum){
-    let updatedBoneMatrices = [];
-    for (let j = 0; j < boneNum; j++) { 
-        let boneMatrix;
-        boneMatrix =  this.skeleton.bones[j].matrixWorld.clone().multiply(this.skeleton.boneInverses[j].clone());
-
-        function addMatrixToArray(matrix, array) {
-            let elements = matrix.elements; 
-            for (let i = 0; i < elements.length; i++) {
-                array.push(elements[i]);
-            }
-        }
-        
-        addMatrixToArray(boneMatrix, updatedBoneMatrices);
-    }
-    let bonesMatrix = new Float32Array(updatedBoneMatrices);
-    return bonesMatrix;
-}
   runMorphUpdate() {
     this.gaussianSplatCount = this.avatarMesh.geometry.attributes.position.count;
     var morphedMesh = new Float32Array(
@@ -2809,87 +2706,41 @@ export class Viewer {
     );
     const numBones = 5;
     this.splatMesh.bonesNum = numBones;
-    if (this.useFlame == false) 
-    {
-        this.skinModel.skeleton.update();
-        this.boneRoot.updateMatrixWorld(true);
-        if (this.splatMesh.geometry.getAttribute('splatIndex') && this.setSkinAttibutes === false) {
 
-          this.setSkinAttibutes = true;
-          const geometry = this.splatMesh.geometry;
+    this.skinModel.skeleton.update();
+    this.boneRoot.updateMatrixWorld(true);
+    if (this.splatMesh.geometry.getAttribute('splatIndex') && this.setSkinAttibutes === false) {
 
-          const skinIndexSource = this.skinModel.geometry.attributes.skinIndex;
-          const skinWeightSource = this.skinModel.geometry.attributes.skinWeight;
+      this.setSkinAttibutes = true;
+      const geometry = this.splatMesh.geometry;
 
-          const newSkinIndex = new InstancedBufferAttribute(
-              new skinIndexSource.array.constructor(skinIndexSource.array), 
-              4,
-              skinIndexSource.normalized,
-              1
-          );
-          
-          const newSkinWeight = new InstancedBufferAttribute(
-              new skinWeightSource.array.constructor(skinWeightSource.array), 
-              4,
-              skinWeightSource.normalized,
-              1
-          );
-          newSkinIndex.setUsage(DynamicDrawUsage);
-          newSkinWeight.setUsage(DynamicDrawUsage);
-          geometry.setAttribute('skinIndex', newSkinIndex);
-          geometry.setAttribute('skinWeight', newSkinWeight);
-      }
-    } else {
-        this.updateFlameBones();
+      const skinIndexSource = this.skinModel.geometry.attributes.skinIndex;
+      const skinWeightSource = this.skinModel.geometry.attributes.skinWeight;
+
+      const newSkinIndex = new InstancedBufferAttribute(
+          new skinIndexSource.array.constructor(skinIndexSource.array),
+          4,
+          skinIndexSource.normalized,
+          1
+      );
+
+      const newSkinWeight = new InstancedBufferAttribute(
+          new skinWeightSource.array.constructor(skinWeightSource.array),
+          4,
+          skinWeightSource.normalized,
+          1
+      );
+      newSkinIndex.setUsage(DynamicDrawUsage);
+      newSkinWeight.setUsage(DynamicDrawUsage);
+      geometry.setAttribute('skinIndex', newSkinIndex);
+      geometry.setAttribute('skinWeight', newSkinWeight);
     }
-    
+
     this.splatMesh.morphedMesh = morphedMesh;
 
     let splatNum = this.splatMesh.morphedMesh.length / 3;
     if (this.splatMesh.splatDataTextures['flameModel'] != undefined) {
-      this.splatMesh.updateTetureAfterBSAndSkeleton(0, splatNum - 1, this.useFlame);
+      this.splatMesh.updateTetureAfterBSAndSkeleton(0, splatNum - 1, false);
     }
   }
-
-  updateFlameBones(){
-    this.splatMesh.bsWeight = this.flame_params['expr'][this.frame];
-
-    function setBoneRotationAndMatrix(bone, angles, isQuat = false) {
-        let quaternion;
-        if(isQuat == true) {
-            quaternion = new Quaternion(angles[0], angles[1], angles[2], angles[3]);
-        } else {
-            const value = new Vector3(angles[0], angles[1], angles[2]);
-            const angleInRadians = value.length();
-            const axis = value.normalize();
-            quaternion = new Quaternion().setFromAxisAngle(axis, angleInRadians);
-        }
-        bone.quaternion.copy(quaternion);
-        bone.updateMatrixWorld(true);
-    }
-
-    let angle = this.flame_params['rotation'][this.frame];
-
-    setBoneRotationAndMatrix(this.skeleton.bones[0], angle);
-
-    angle = this.flame_params['neck_pose'][this.frame];
-    setBoneRotationAndMatrix(this.skeleton.bones[1], angle);
-
-    angle = this.flame_params['jaw_pose'][this.frame];
-    setBoneRotationAndMatrix(this.skeleton.bones[2], angle);
-
-    angle = this.flame_params['eyes_pose'][this.frame];
-    setBoneRotationAndMatrix(this.skeleton.bones[3], angle);
-
-    setBoneRotationAndMatrix(this.skeleton.bones[4], [angle[3], angle[4], angle[5]]);
-
-    // update skeleton
-    this.skeleton.update();
-
-    const numBones = 5;
-    const bonesMatrix = this.updatedBoneMatrices(numBones);
-    this.splatMesh.bonesMatrix = bonesMatrix;
-    this.splatMesh.bonesNum = numBones;
-    this.splatMesh.bonesWeight = this.lbs_weight_80k;
-  }
 }