@galacean/effects-plugin-model 2.0.0-alpha.12 → 2.0.0-alpha.13

package/dist/index.mjs

@@ -3,10 +3,10 @@
  * Description: Galacean Effects player model plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 飂兮
- * Version: v2.0.0-alpha.12
+ * Version: v2.0.0-alpha.13
  */
 
-import { math, Transform, PLAYER_OPTIONS_ENV_EDITOR, spec, glContext, Texture, TextureSourceType, RenderPassAttachmentStorageType, Material, Mesh, Geometry, GLSLVersion, addItem, removeItem, effectsClass, RendererComponent, ItemBehaviour, TimelineComponent, HitTestType, RenderPass, TextureLoadAction, DestroyOptions, RenderPassDestroyAttachmentType, Player, Renderer, getDefaultTextureFactory, loadImage, generateGUID, VFXItem, AbstractPlugin, glType2VertexFormatType, Downloader, getStandardJSON, registerPlugin, logger } from '@galacean/effects';
+import { math, Transform, PLAYER_OPTIONS_ENV_EDITOR, spec, glContext, Texture, TextureSourceType, RenderPassAttachmentStorageType, Material, Mesh, Geometry, GLSLVersion, addItem, removeItem, effectsClass, RendererComponent, ItemBehaviour, HitTestType, AnimationClip, RenderPass, TextureLoadAction, DestroyOptions, RenderPassDestroyAttachmentType, Player, Renderer, getDefaultTextureFactory, loadImage, generateGUID, VFXItem, AbstractPlugin, glType2VertexFormatType, Downloader, getStandardJSON, registerPlugin, logger, version as version$1 } from '@galacean/effects';
 
 /**
  * Model 插件元素类型
@@ -790,6 +790,41 @@ var ctrlMap = {
     return new CTRL(binary[index], start, byteLength / CTRL.BYTES_PER_ELEMENT);
 }
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+
+function _create_for_of_iterator_helper_loose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+    // Fallback for engines without symbol support
+    if (Array.isArray(o) || (it = _unsupported_iterable_to_array(o)) || allowArrayLike && o && typeof o.length === "number") {
+        if (it) o = it;
+        var i = 0;
+        return function() {
+            if (i >= o.length) return {
+                done: true
+            };
+            return {
+                done: false,
+                value: o[i++]
+            };
+        };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var InterpolationSampler = /*#__PURE__*/ function() {
     function InterpolationSampler(time, data, componentCount) {
         this.time = time;
@@ -1086,7 +1121,7 @@ var TextureDataMode;
    */ _this.skeleton = 0;
         /**
    * 关节索引
-   */ _this.jointList = [];
+   */ _this.jointItem = [];
         /**
    * 逆绑定矩阵
    */ _this.inverseBindMatrices = [];
@@ -1101,27 +1136,26 @@ var TextureDataMode;
     var _proto = PSkin.prototype;
     /**
    * 创建蒙皮对象
-   * @param options - 蒙皮相关数据
+   * @param props - 蒙皮相关数据
    * @param engine - 引擎对象
-   * @param parentItem - 场景树父元素
-   */ _proto.create = function create(options, engine, parentItem) {
-        var _options_name;
-        this.name = this.genName((_options_name = options.name) != null ? _options_name : "Unnamed skin");
+   * @param rootBoneItem - 场景树父元素
+   */ _proto.create = function create(props, engine, rootBoneItem) {
+        var _props_rootBoneName;
+        this.name = (_props_rootBoneName = props.rootBoneName) != null ? _props_rootBoneName : "Unnamed skin";
         this.type = PObjectType.skin;
         //
-        this.parentItem = parentItem;
-        var _options_skeleton;
-        this.skeleton = (_options_skeleton = options.skeleton) != null ? _options_skeleton : -1;
-        this.jointList = options.joints;
+        this.rootBoneItem = rootBoneItem;
+        this.skeleton = -1;
+        this.jointItem = this.getJointItems(props, rootBoneItem);
         this.animationMatrices = [];
         //
         this.inverseBindMatrices = [];
         //
         this.textureDataMode = this.getTextureDataMode(this.getJointCount(), engine);
-        var matList = options.inverseBindMatrices;
+        var matList = props.inverseBindMatrices;
         if (matList !== undefined && matList.length > 0) {
-            if (matList.length % 16 !== 0 || matList.length !== this.jointList.length * 16) {
-                throw new Error("Invalid array length, invert bind matrices " + matList.length + ", joint array " + this.jointList.length);
+            if (matList.length % 16 !== 0 || matList.length !== this.jointItem.length * 16) {
+                throw new Error("Invalid array length, invert bind matrices " + matList.length + ", joint array " + this.jointItem.length);
             }
             var matrixCount = matList.length / 16;
             for(var i = 0; i < matrixCount; i++){
@@ -1134,26 +1168,17 @@ var TextureDataMode;
    * 更新蒙皮矩阵
    */ _proto.updateSkinMatrices = function updateSkinMatrices() {
         var _this = this;
-        var _this_parentItem;
         this.animationMatrices = [];
-        var parentTree = (_this_parentItem = this.parentItem) == null ? void 0 : _this_parentItem.getComponent(ModelTreeComponent);
-        if (parentTree !== undefined) {
-            for(var i = 0; i < this.jointList.length; i++){
-                var joint = this.jointList[i];
-                var node = parentTree.content.getNodeById(joint);
-                // let parent = node?.transform.parentTransform;
-                // while(parent !== undefined){
-                //   const pos = parent.position;
-                //   parent.setPosition(pos[0], pos[1], pos[2]);
-                //   parent = parent.parentTransform;
-                // }
-                if (node === undefined) {
-                    console.error("Can't find joint " + joint + " in node tree " + this.parentItem + ".");
-                    break;
-                }
-                var mat4 = node.transform.getWorldMatrix();
-                this.animationMatrices.push(mat4.clone());
-            }
+        for(var i = 0; i < this.jointItem.length; i++){
+            var node = this.jointItem[i];
+            // let parent = node?.transform.parentTransform;
+            // while(parent !== undefined){
+            //   const pos = parent.position;
+            //   parent.setPosition(pos[0], pos[1], pos[2]);
+            //   parent = parent.parentTransform;
+            // }
+            var mat4 = node.transform.getWorldMatrix();
+            this.animationMatrices.push(mat4.clone());
         }
         if (this.animationMatrices.length === this.inverseBindMatrices.length) {
             this.animationMatrices.forEach(function(mat, index) {
@@ -1188,13 +1213,13 @@ var TextureDataMode;
    * 更新父元素
    * @param parentItem - 场景树父元素
    */ _proto.updateParentItem = function updateParentItem(parentItem) {
-        this.parentItem = parentItem;
+        this.rootBoneItem = parentItem;
     };
     /**
    * 获取关节点数
    * @returns
    */ _proto.getJointCount = function getJointCount() {
-        return this.jointList.length;
+        return this.jointItem.length;
     };
     /**
    * 是否纹理数据模式
@@ -1205,8 +1230,8 @@ var TextureDataMode;
     /**
    * 销毁
    */ _proto.dispose = function dispose() {
-        this.parentItem = undefined;
-        this.jointList = [];
+        this.rootBoneItem = undefined;
+        this.jointItem = [];
         this.inverseBindMatrices = [];
         this.animationMatrices = [];
     };
@@ -1228,6 +1253,38 @@ var TextureDataMode;
             return 0;
         }
     };
+    _proto.getJointItems = function getJointItems(props, rootBoneItem) {
+        var _props_boneNames;
+        var name2Item = this.genNodeName(rootBoneItem);
+        var jointItems = [];
+        (_props_boneNames = props.boneNames) == null ? void 0 : _props_boneNames.forEach(function(boneName) {
+            var node = name2Item[boneName];
+            if (!node) {
+                throw new Error("Can't find node of bone name " + boneName);
+            }
+            jointItems.push(node);
+        });
+        return jointItems;
+    };
+    _proto.genNodeName = function genNodeName(node) {
+        var name2Item = {};
+        var nameList = [];
+        name2Item[""] = node;
+        for(var _iterator = _create_for_of_iterator_helper_loose(node.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            this.genNodeNameDFS(child, nameList, name2Item);
+        }
+        return name2Item;
+    };
+    _proto.genNodeNameDFS = function genNodeNameDFS(node, nameList, name2Item) {
+        nameList.push(node.name);
+        name2Item[nameList.join("/")] = node;
+        for(var _iterator = _create_for_of_iterator_helper_loose(node.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            this.genNodeNameDFS(child, nameList, name2Item);
+        }
+        nameList.pop();
+    };
     return PSkin;
 }(PObject);
 /**
@@ -1245,6 +1302,10 @@ var TextureDataMode;
    * 范围要在 `[0, 8]` 之间，否则会报错。
    */ _this.morphWeightsLength = 0;
         /**
+   * weights 数组的具体数据，来自动画控制器的每帧更新
+   * 数组的长度必须和 morphWeightsLength 相同，否则会出错。
+   */ _this.morphWeightsArray = [];
+        /**
    * 是否有 Position 相关的 Morph 动画，shader 中需要知道
    */ _this.hasPositionMorph = false;
         /**
@@ -1286,7 +1347,7 @@ var TextureDataMode;
         });
         if (this.morphWeightsLength > 0) {
             // 有Morph动画，申请weights数据，判断各个属性是否有相关动画
-            this.morphWeightsArray = new Float32Array(this.morphWeightsLength);
+            this.morphWeightsArray = Array(this.morphWeightsLength).fill(0);
             this.hasPositionMorph = positionCount == this.morphWeightsLength;
             this.hasNormalMorph = normalCount == this.morphWeightsLength;
             this.hasTangentMorph = tangentCount == this.morphWeightsLength;
@@ -1313,14 +1374,11 @@ var TextureDataMode;
         }
         return true;
     };
-    _proto.dispose = function dispose() {
-        this.morphWeightsArray = undefined;
-    };
     /**
    * 初始化 Morph target 的权重数组
    * @param weights - glTF Mesh 的权重数组，长度必须严格一致
    */ _proto.initWeights = function initWeights(weights) {
-        if (this.morphWeightsArray === undefined) {
+        if (this.morphWeightsArray.length === 0) {
             return;
         }
         var morphWeights = this.morphWeightsArray;
@@ -1330,6 +1388,16 @@ var TextureDataMode;
             }
         });
     };
+    _proto.updateWeights = function updateWeights(weights) {
+        var _this = this;
+        if (weights.length != this.morphWeightsArray.length) {
+            console.error("Length of morph weights mismatch: input " + weights.length + ", internel " + this.morphWeightsArray.length);
+            return;
+        }
+        weights.forEach(function(value, index) {
+            return _this.morphWeightsArray[index] = value;
+        });
+    };
     /**
    * 当前状态是否有 Morph 动画：
    * 需要判断 weights 数组长度，以及 Position、Normal 和 Tangent 是否有动画
@@ -2457,6 +2525,7 @@ function _assert_this_initialized(self) {
         _this.parentIndex = proxy.getParentIndex();
         _this.parentItem = proxy.parentItem;
         _this.parentItemId = parentId;
+        _this.rootBoneItem = meshData.rootBone;
         _this.skin = proxy.getSkinObj(engine);
         _this.morph = proxy.getMorphObj();
         _this.hide = proxy.isHide();
@@ -2499,6 +2568,9 @@ function _assert_this_initialized(self) {
    */ _proto.update = function update() {
         if (this.owner !== undefined) {
             this.transform.fromEffectsTransform(this.owner.transform);
+            if (this.morph && this.morph.hasMorph() && this.owner.morphWeights.length > 0) {
+                this.morph.updateWeights(this.owner.morphWeights);
+            }
         }
     };
     /**
@@ -3130,12 +3202,8 @@ function _assert_this_initialized(self) {
         // Morph 相关的数据更新，仅需要更新 weights 数组
         var morph = this.morph;
         if (morph !== undefined && morph.hasMorph()) {
-            var morphWeights = morph.morphWeightsArray;
-            var morphWeightNumbers = [];
-            morphWeights.forEach(function(val) {
-                return morphWeightNumbers.push(val);
-            });
-            material.setFloats("_morphWeights", morphWeightNumbers);
+            var morphWeights = morph.morphWeightsArray.slice();
+            material.setFloats("_morphWeights", morphWeights);
         }
     };
     _proto.updateUniformsByScene = function updateUniformsByScene(sceneStates) {
@@ -3386,7 +3454,18 @@ var EffectsMeshProxy = /*#__PURE__*/ function() {
         this.itemData = itemData;
         this.parentItem = parentItem;
         this.data = itemData;
-        this.morphObj = new PMorph();
+        this.geometry = itemData.geometry;
+        this.rootBoneItem = itemData.rootBone;
+        var morphObj = new PMorph();
+        if (morphObj.create(this.geometry)) {
+            var _itemData_morph;
+            // 设置初始权重数组
+            if ((_itemData_morph = itemData.morph) == null ? void 0 : _itemData_morph.weights) {
+                var _itemData_morph1;
+                morphObj.initWeights((_itemData_morph1 = itemData.morph) == null ? void 0 : _itemData_morph1.weights);
+            }
+            this.morphObj = morphObj;
+        }
     }
     var _proto = EffectsMeshProxy.prototype;
     _proto.hasMorphTarget = function hasMorphTarget() {
@@ -3428,20 +3507,17 @@ var EffectsMeshProxy = /*#__PURE__*/ function() {
         return this.data.materials.length;
     };
     _proto.hasSkin = function hasSkin() {
-        // FIXME: skin
-        //return this.options.skin !== undefined;
-        return false;
+        var skin = this.geometry.getSkinProps();
+        return !!(skin.rootBoneName && skin.boneNames && skin.inverseBindMatrices && this.rootBoneItem);
     };
     _proto.getSkinOpts = function getSkinOpts() {
-        // FIXME: skin
-        //return this.options.skin;
-        return;
+        return this.geometry.getSkinProps();
     };
     _proto.getSkinObj = function getSkinObj(engine) {
         var skin = this.getSkinOpts();
-        if (skin !== undefined) {
+        if (skin.rootBoneName && skin.boneNames && skin.inverseBindMatrices && this.rootBoneItem) {
             var skinObj = new PSkin();
-            skinObj.create(skin, engine, this.parentItem);
+            skinObj.create(skin, engine, this.rootBoneItem);
             return skinObj;
         }
         return undefined;
@@ -3839,7 +3915,7 @@ var shadowPassFrag = "#define FEATURES\n#include <shadowCommon.vert.glsl>\n#incl
 
 var skyboxVert = "precision highp float;\n#define FEATURES\n#include <webglCompatibility.glsl>\nvsIn vec3 aPos;vsOut vec3 v_CameraDir;uniform mat4 _InvViewProjectionMatrix;void main(){vec4 dir=_InvViewProjectionMatrix*vec4(aPos.xy,1,1);v_CameraDir=normalize(dir.xyz/dir.w);gl_Position=vec4(aPos.xy,0.99999,1);}";
 
-var skyboxFrag = "precision highp float;\n#define FEATURES\n#if !defined(WEBGL2) && defined(USE_TEX_LOD)\n#extension GL_EXT_shader_texture_lod : enable\n#endif\n#if !defined(WEBGL2)\n#extension GL_OES_standard_derivatives : enable\n#endif\n#include <webglCompatibility.glsl>\n#include <extensions.frag.glsl>\n#ifdef WEBGL2\nout vec4 outFragColor;\n#else\n#define outFragColor gl_FragColor\n#endif\nuniform sampler2D _brdfLUT;uniform vec2 _IblIntensity;uniform int _MipCount;uniform samplerCube _DiffuseEnvSampler;uniform samplerCube _SpecularEnvSampler;fsIn vec3 v_CameraDir;\n#ifdef IRRADIANCE_COEFFICIENTS\nstruct SHCoefficients{vec3 l00,l1m1,l10,l11,l2m2,l2m1,l20,l21,l22;};uniform SHCoefficients _shCoefficients;vec3 getIrradiance(vec3 norm,SHCoefficients c){float x=norm.x;float y=norm.y;float z=norm.z;float c1=0.429043;float c2=0.511664;float c3=0.743125;float c4=0.886227;float c5=0.247708;vec3 irradiance=c1*c.l22*(x*x-y*y)+c3*c.l20*(z*z)+c4*c.l00-c5*c.l20+2.0*c1*(c.l2m2*x*y+c.l21*x*z+c.l2m1*y*z)+2.0*c2*(c.l11*x+c.l1m1*y+c.l10*z);return irradiance;}\n#endif\nvec3 getIBLContribution(vec3 n,vec3 v){const float metallic=0.9;const float perceptualRoughness=0.1;const vec4 baseColor=vec4(1.0);const vec3 f0=vec3(0.04);const vec3 diffuseColor=baseColor.rgb*(vec3(1.0)-f0)*(1.0-metallic);const vec3 specularColor=mix(f0,baseColor.rgb,metallic);float NdotV=clamp(dot(n,v),0.0,1.0);float lod=clamp(perceptualRoughness*float(_MipCount),0.0,float(_MipCount));vec3 reflection=normalize(reflect(-v,n));vec2 brdfSamplePoint=clamp(vec2(NdotV,perceptualRoughness),vec2(0.0,0.0),vec2(1.0,1.0));vec2 brdf=texture2D(_brdfLUT,brdfSamplePoint).rg;vec4 diffuseSample=vec4(1.0,0.0,0.0,1.0);\n#ifdef IRRADIANCE_COEFFICIENTS\nvec3 irradiance=getIrradiance(n,_shCoefficients);diffuseSample=vec4(irradiance,1.0);\n#else\ndiffuseSample=textureCube(_DiffuseEnvSampler,n);\n#endif\n#ifdef USE_TEX_LOD\nvec4 specularSample=_textureCubeLodEXT(_SpecularEnvSampler,reflection,lod);\n#else\nvec4 specularSample=textureCube(_SpecularEnvSampler,reflection,lod);\n#endif\nvec3 diffuseLight=diffuseSample.rgb;vec3 specularLight=specularSample.rgb;vec3 diffuse=diffuseLight*diffuseColor;vec3 specular=specularLight*(specularColor*brdf.x+brdf.y);return diffuse*_IblIntensity[0]+specular*_IblIntensity[1];}void main(){vec3 dir=normalize(v_CameraDir);outFragColor=vec4(getIBLContribution(dir,dir),1.0);}";
+var skyboxFrag = "\n#define FEATURES\n#if !defined(WEBGL2) && defined(USE_TEX_LOD)\n#extension GL_EXT_shader_texture_lod : enable\n#endif\n#if !defined(WEBGL2)\n#extension GL_OES_standard_derivatives : enable\n#endif\nprecision highp float;\n#include <webglCompatibility.glsl>\n#include <extensions.frag.glsl>\n#ifdef WEBGL2\nout vec4 outFragColor;\n#else\n#define outFragColor gl_FragColor\n#endif\nuniform sampler2D _brdfLUT;uniform vec2 _IblIntensity;uniform int _MipCount;uniform samplerCube _DiffuseEnvSampler;uniform samplerCube _SpecularEnvSampler;fsIn vec3 v_CameraDir;\n#ifdef IRRADIANCE_COEFFICIENTS\nstruct SHCoefficients{vec3 l00,l1m1,l10,l11,l2m2,l2m1,l20,l21,l22;};uniform SHCoefficients _shCoefficients;vec3 getIrradiance(vec3 norm,SHCoefficients c){float x=norm.x;float y=norm.y;float z=norm.z;float c1=0.429043;float c2=0.511664;float c3=0.743125;float c4=0.886227;float c5=0.247708;vec3 irradiance=c1*c.l22*(x*x-y*y)+c3*c.l20*(z*z)+c4*c.l00-c5*c.l20+2.0*c1*(c.l2m2*x*y+c.l21*x*z+c.l2m1*y*z)+2.0*c2*(c.l11*x+c.l1m1*y+c.l10*z);return irradiance;}\n#endif\nvec3 getIBLContribution(vec3 n,vec3 v){const float metallic=0.9;const float perceptualRoughness=0.1;const vec4 baseColor=vec4(1.0);const vec3 f0=vec3(0.04);const vec3 diffuseColor=baseColor.rgb*(vec3(1.0)-f0)*(1.0-metallic);const vec3 specularColor=mix(f0,baseColor.rgb,metallic);float NdotV=clamp(dot(n,v),0.0,1.0);float lod=clamp(perceptualRoughness*float(_MipCount),0.0,float(_MipCount));vec3 reflection=normalize(reflect(-v,n));vec2 brdfSamplePoint=clamp(vec2(NdotV,perceptualRoughness),vec2(0.0,0.0),vec2(1.0,1.0));vec2 brdf=texture2D(_brdfLUT,brdfSamplePoint).rg;vec4 diffuseSample=vec4(1.0,0.0,0.0,1.0);\n#ifdef IRRADIANCE_COEFFICIENTS\nvec3 irradiance=getIrradiance(n,_shCoefficients);diffuseSample=vec4(irradiance,1.0);\n#else\ndiffuseSample=textureCube(_DiffuseEnvSampler,n);\n#endif\n#ifdef USE_TEX_LOD\nvec4 specularSample=_textureCubeLodEXT(_SpecularEnvSampler,reflection,lod);\n#else\nvec4 specularSample=textureCube(_SpecularEnvSampler,reflection,lod);\n#endif\nvec3 diffuseLight=diffuseSample.rgb;vec3 specularLight=specularSample.rgb;vec3 diffuse=diffuseLight*diffuseColor;vec3 specular=specularLight*(specularColor*brdf.x+brdf.y);return diffuse*_IblIntensity[0]+specular*_IblIntensity[1];}void main(){vec3 dir=normalize(v_CameraDir);outFragColor=vec4(getIBLContribution(dir,dir),1.0);}";
 
 var animationVertGLSL = "#ifdef HAS_TARGET_POSITION0\nvsIn vec3 aTargetPosition0;\n#endif\n#ifdef HAS_TARGET_POSITION1\nvsIn vec3 aTargetPosition1;\n#endif\n#ifdef HAS_TARGET_POSITION2\nvsIn vec3 aTargetPosition2;\n#endif\n#ifdef HAS_TARGET_POSITION3\nvsIn vec3 aTargetPosition3;\n#endif\n#ifdef HAS_TARGET_POSITION4\nvsIn vec3 aTargetPosition4;\n#endif\n#ifdef HAS_TARGET_POSITION5\nvsIn vec3 aTargetPosition5;\n#endif\n#ifdef HAS_TARGET_POSITION6\nvsIn vec3 aTargetPosition6;\n#endif\n#ifdef HAS_TARGET_POSITION7\nvsIn vec3 aTargetPosition7;\n#endif\n#ifdef HAS_TARGET_NORMAL0\nvsIn vec3 aTargetNormal0;\n#endif\n#ifdef HAS_TARGET_NORMAL1\nvsIn vec3 aTargetNormal1;\n#endif\n#ifdef HAS_TARGET_NORMAL2\nvsIn vec3 aTargetNormal2;\n#endif\n#ifdef HAS_TARGET_NORMAL3\nvsIn vec3 aTargetNormal3;\n#endif\n#ifdef HAS_TARGET_NORMAL4\nvsIn vec3 aTargetNormal4;\n#endif\n#ifdef HAS_TARGET_TANGENT0\nvsIn vec3 aTargetTangent0;\n#endif\n#ifdef HAS_TARGET_TANGENT1\nvsIn vec3 aTargetTangent1;\n#endif\n#ifdef HAS_TARGET_TANGENT2\nvsIn vec3 aTargetTangent2;\n#endif\n#ifdef HAS_TARGET_TANGENT3\nvsIn vec3 aTargetTangent3;\n#endif\n#ifdef HAS_TARGET_TANGENT4\nvsIn vec3 aTargetTangent4;\n#endif\n#ifdef USE_MORPHING\nuniform float _morphWeights[WEIGHT_COUNT];\n#endif\n#ifdef HAS_JOINT_SET1\nvsIn vec4 aJoints;\n#endif\n#ifdef HAS_JOINT_SET2\nvsIn vec4 aJoint2;\n#endif\n#ifdef HAS_WEIGHT_SET1\nvsIn vec4 aWeights;\n#endif\n#ifdef HAS_WEIGHT_SET2\nvsIn vec4 aWeight2;\n#endif\n#ifdef USE_SKINNING\n#ifdef USE_SKINNING_TEXTURE\nuniform sampler2D _jointMatrixSampler;uniform sampler2D _jointNormalMatrixSampler;\n#else\nuniform mat4 _jointMatrix[JOINT_COUNT];uniform mat4 _jointNormalMatrix[JOINT_COUNT];\n#endif\n#endif\n#define ROW0_U ((0.5 + 0.0) / 4.0)\n#define ROW1_U ((0.5 + 1.0) / 4.0)\n#define ROW2_U ((0.5 + 2.0) / 4.0)\n#define ROW3_U ((0.5 + 3.0) / 4.0)\n#ifdef USE_SKINNING\nmat4 getJointMatrix(float boneNdx){\n#ifdef USE_SKINNING_TEXTURE\nfloat v=(boneNdx+0.5)/float(JOINT_COUNT);return mat4(texture2D(_jointMatrixSampler,vec2(ROW0_U,v)),texture2D(_jointMatrixSampler,vec2(ROW1_U,v)),texture2D(_jointMatrixSampler,vec2(ROW2_U,v)),texture2D(_jointMatrixSampler,vec2(ROW3_U,v)));\n#else\nreturn _jointMatrix[int(boneNdx)];\n#endif\n}mat4 getJointNormalMatrix(float boneNdx){\n#ifdef USE_SKINNING_TEXTURE\nfloat v=(boneNdx+0.5)/float(JOINT_COUNT);return mat4(texture2D(_jointNormalMatrixSampler,vec2(ROW0_U,v)),texture2D(_jointNormalMatrixSampler,vec2(ROW1_U,v)),texture2D(_jointNormalMatrixSampler,vec2(ROW2_U,v)),texture2D(_jointNormalMatrixSampler,vec2(ROW3_U,v)));\n#else\nreturn _jointNormalMatrix[int(boneNdx)];\n#endif\n}mat4 getSkinningMatrix(){mat4 skin=mat4(0);\n#if defined(HAS_WEIGHT_SET1) && defined(HAS_JOINT_SET1)\nskin+=aWeights.x*getJointMatrix(aJoints.x)+aWeights.y*getJointMatrix(aJoints.y)+aWeights.z*getJointMatrix(aJoints.z)+aWeights.w*getJointMatrix(aJoints.w);\n#endif\nreturn skin;}mat4 getSkinningNormalMatrix(){mat4 skin=mat4(0);\n#if defined(HAS_WEIGHT_SET1) && defined(HAS_JOINT_SET1)\nskin+=aWeights.x*getJointNormalMatrix(aJoints.x)+aWeights.y*getJointNormalMatrix(aJoints.y)+aWeights.z*getJointNormalMatrix(aJoints.z)+aWeights.w*getJointNormalMatrix(aJoints.w);\n#endif\nreturn skin;}\n#endif\n#ifdef USE_MORPHING\nvec4 getTargetPosition(){vec4 pos=vec4(0);\n#ifdef HAS_TARGET_POSITION0\npos.xyz+=_morphWeights[0]*aTargetPosition0;\n#endif\n#ifdef HAS_TARGET_POSITION1\npos.xyz+=_morphWeights[1]*aTargetPosition1;\n#endif\n#ifdef HAS_TARGET_POSITION2\npos.xyz+=_morphWeights[2]*aTargetPosition2;\n#endif\n#ifdef HAS_TARGET_POSITION3\npos.xyz+=_morphWeights[3]*aTargetPosition3;\n#endif\n#ifdef HAS_TARGET_POSITION4\npos.xyz+=_morphWeights[4]*aTargetPosition4;\n#endif\nreturn pos;}vec4 getTargetNormal(){vec4 normal=vec4(0);\n#ifdef HAS_TARGET_NORMAL0\nnormal.xyz+=_morphWeights[0]*aTargetNormal0;\n#endif\n#ifdef HAS_TARGET_NORMAL1\nnormal.xyz+=_morphWeights[1]*aTargetNormal1;\n#endif\n#ifdef HAS_TARGET_NORMAL2\nnormal.xyz+=_morphWeights[2]*aTargetNormal2;\n#endif\n#ifdef HAS_TARGET_NORMAL3\nnormal.xyz+=_morphWeights[3]*aTargetNormal3;\n#endif\n#ifdef HAS_TARGET_NORMAL4\nnormal.xyz+=_morphWeights[4]*aTargetNormal4;\n#endif\nreturn normal;}vec4 getTargetTangent(){vec4 tangent=vec4(0);\n#ifdef HAS_TARGET_TANGENT0\ntangent.xyz+=_morphWeights[0]*aTargetTangent0;\n#endif\n#ifdef HAS_TARGET_TANGENT1\ntangent.xyz+=_morphWeights[1]*aTargetTangent1;\n#endif\n#ifdef HAS_TARGET_TANGENT2\ntangent.xyz+=_morphWeights[2]*aTargetTangent2;\n#endif\n#ifdef HAS_TARGET_TANGENT3\ntangent.xyz+=_morphWeights[3]*aTargetTangent3;\n#endif\n#ifdef HAS_TARGET_TANGENT4\ntangent.xyz+=_morphWeights[4]*aTargetTangent4;\n#endif\nreturn tangent;}\n#endif\n";
 
@@ -4294,6 +4370,9 @@ var ModelMeshComponent = /*#__PURE__*/ function(RendererComponent) {
         var _this;
         _this = RendererComponent.call(this, engine) || this;
         /**
+   * morph 动画权重
+   */ _this.morphWeights = [];
+        /**
    * 获取点击测试参数，根据元素包围盒进行相交测试，Mesh 对象会进行更加精确的点击测试
    * @param force - 是否强制进行点击测试
    * @returns 点击测试参数
@@ -4610,7 +4689,6 @@ var ModelCameraComponent = /*#__PURE__*/ function(ItemBehaviour) {
    */ _proto.start = function start() {
         this.createContent();
         this.item.type = VFX_ITEM_TYPE_3D;
-        this.timeline = this.item.getComponent(TimelineComponent);
         var scene = getSceneManager(this);
         scene == null ? void 0 : scene.addItem(this.content);
         this.updateMainCamera();
@@ -4662,19 +4740,11 @@ var ModelCameraComponent = /*#__PURE__*/ function(ItemBehaviour) {
    * @param position - 位置
    * @param rotation - 旋转
    */ _proto.setTransform = function setTransform(position, rotation) {
-        var _this_timeline_findTrack, _this_timeline;
-        var clip = (_this_timeline = this.timeline) == null ? void 0 : (_this_timeline_findTrack = _this_timeline.findTrack("AnimationTrack")) == null ? void 0 : _this_timeline_findTrack.findClip("AnimationTimelineClip");
-        if (position !== undefined) {
+        if (position) {
             this.transform.setPosition(position.x, position.y, position.z);
-            if (clip) {
-                clip.playable.originalTransform.position = position.clone();
-            }
         }
-        if (rotation !== undefined) {
+        if (rotation) {
             this.transform.setRotation(rotation.x, rotation.y, rotation.z);
-            if (clip) {
-                clip.playable.originalTransform.rotation = rotation.clone();
-            }
         }
         this.updateMainCamera();
     };
@@ -4683,6 +4753,155 @@ var ModelCameraComponent = /*#__PURE__*/ function(ItemBehaviour) {
 ModelCameraComponent = __decorate([
     effectsClass(spec.DataType.CameraComponent)
 ], ModelCameraComponent);
+var AnimationComponent = /*#__PURE__*/ function(ItemBehaviour) {
+    _inherits(AnimationComponent, ItemBehaviour);
+    function AnimationComponent(engine) {
+        var _this;
+        _this = ItemBehaviour.call(this, engine) || this;
+        _this.elapsedTime = 0;
+        _this.animation = -1;
+        _this.clips = [];
+        return _this;
+    }
+    var _proto = AnimationComponent.prototype;
+    /**
+   * 组件开始，需要创建内部对象和添加到场景管理器中
+   */ _proto.start = function start() {
+        this.elapsedTime = 0;
+        this.item.type = VFX_ITEM_TYPE_3D;
+    };
+    /**
+   * 组件更新，更新内部对象状态
+   * @param dt - 更新间隔
+   */ _proto.update = function update(dt) {
+        this.elapsedTime += dt * 0.001;
+        if (this.animation >= 0 && this.animation < this.clips.length) {
+            this.clips[this.animation].sampleAnimation(this.item, this.elapsedTime);
+        }
+    };
+    /**
+   * 组件销毁
+   */ _proto.onDestroy = function onDestroy() {};
+    /**
+   * 反序列化，记录传入参数
+   * @param data - 组件参数
+   */ _proto.fromData = function fromData(data) {
+        var _this = this;
+        ItemBehaviour.prototype.fromData.call(this, data);
+        this.data = data;
+        var _data_name;
+        //
+        this.name = (_data_name = data.name) != null ? _data_name : "<empty>";
+        var _data_animation;
+        this.animation = (_data_animation = data.animation) != null ? _data_animation : -1;
+        this.clips = [];
+        data.animationClips.forEach(function(clipData) {
+            var clipObj = new ModelAnimationClip(_this.engine);
+            clipObj.setFromAnimationClip(clipData);
+            _this.clips.push(clipObj);
+        });
+    };
+    return AnimationComponent;
+}(ItemBehaviour);
+AnimationComponent = __decorate([
+    effectsClass(spec.DataType.AnimationComponent)
+], AnimationComponent);
+var ModelAnimationClip = /*#__PURE__*/ function(AnimationClip) {
+    _inherits(ModelAnimationClip, AnimationClip);
+    function ModelAnimationClip() {
+        var _this;
+        _this = AnimationClip.apply(this, arguments) || this;
+        _this.path2Node = {};
+        return _this;
+    }
+    var _proto = ModelAnimationClip.prototype;
+    _proto.sampleAnimation = function sampleAnimation(vfxItem, time) {
+        var duration = vfxItem.duration;
+        var life = Math.max(0, time) % duration;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.positionCurves), _step; !(_step = _iterator()).done;){
+            var curve = _step.value;
+            var maxTime = curve.keyFrames.getMaxTime();
+            var value = curve.keyFrames.getValue(life % maxTime);
+            var target = this.getTargetItem(vfxItem, curve.path);
+            target == null ? void 0 : target.transform.setPosition(value.x, value.y, value.z);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.rotationCurves), _step1; !(_step1 = _iterator1()).done;){
+            var curve1 = _step1.value;
+            var maxTime1 = curve1.keyFrames.getMaxTime();
+            var value1 = curve1.keyFrames.getValue(life % maxTime1);
+            var target1 = this.getTargetItem(vfxItem, curve1.path);
+            target1 == null ? void 0 : target1.transform.setQuaternion(value1.x, value1.y, value1.z, value1.w);
+        }
+        for(var _iterator2 = _create_for_of_iterator_helper_loose(this.scaleCurves), _step2; !(_step2 = _iterator2()).done;){
+            var curve2 = _step2.value;
+            var maxTime2 = curve2.keyFrames.getMaxTime();
+            var value2 = curve2.keyFrames.getValue(life % maxTime2);
+            var target2 = this.getTargetItem(vfxItem, curve2.path);
+            target2 == null ? void 0 : target2.transform.setScale(value2.x, value2.y, value2.z);
+        }
+        for(var _iterator3 = _create_for_of_iterator_helper_loose(this.floatCurves), _step3; !(_step3 = _iterator3()).done;){
+            var curve3 = _step3.value;
+            var maxTime3 = curve3.keyFrames.getMaxTime();
+            var value3 = curve3.keyFrames.getValue(life % maxTime3);
+            var target3 = this.getTargetItem(vfxItem, curve3.path);
+            if (curve3.className === "ModelMeshComponent") {
+                var component = target3 == null ? void 0 : target3.getComponent(ModelMeshComponent);
+                if (component) {
+                    var properties = curve3.property.split(".");
+                    setProperty(component, properties, value3);
+                } else {
+                    console.error("Can't find mesh component");
+                }
+            } else {
+                console.warn("Ignore curve: className " + curve3.className);
+            }
+        }
+    };
+    _proto.setFromAnimationClip = function setFromAnimationClip(clip) {
+        this.positionCurves = clip.positionCurves.slice();
+        this.rotationCurves = clip.rotationCurves.slice();
+        this.scaleCurves = clip.scaleCurves.slice();
+        this.floatCurves = clip.floatCurves.slice();
+    };
+    _proto.getTargetItem = function getTargetItem(rootItem, path) {
+        if (this.path2Node[path]) {
+            return this.path2Node[path];
+        }
+        var target = rootItem;
+        var nameList = path.split("/");
+        for(var _iterator = _create_for_of_iterator_helper_loose(nameList), _step; !(_step = _iterator()).done;){
+            var name = _step.value;
+            var findTag = false;
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(target.children), _step1; !(_step1 = _iterator1()).done;){
+                var child = _step1.value;
+                if (child.name === name) {
+                    target = child;
+                    findTag = true;
+                    break;
+                }
+            }
+            if (!findTag) {
+                throw new Error("Can't find path in tree " + rootItem.id + ", " + path);
+            }
+        }
+        this.path2Node[path] = target;
+        return target;
+    };
+    return ModelAnimationClip;
+}(AnimationClip);
+function setProperty(obj, properties, value) {
+    var len = properties.length;
+    var current = obj;
+    for(var i = 0; i < len - 1; i++){
+        var propName = properties[i];
+        if (!(propName in current) || typeof current[propName] !== "object") {
+            console.error("Invalid properties " + properties);
+            return;
+        }
+        current = current[propName];
+    }
+    current[properties[len - 1]] = value;
+}
 
 // 射线与带旋转的包围盒求交
 // function transformDirection (m: Matrix4, direction: Vector3) {
@@ -11785,44 +12004,9 @@ var GLTFHelper = /*#__PURE__*/ function() {
     return GLTFHelper;
 }();
 
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-
-function _create_for_of_iterator_helper_loose(o, allowArrayLike) {
-    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-    if (it) return (it = it.call(o)).next.bind(it);
-    // Fallback for engines without symbol support
-    if (Array.isArray(o) || (it = _unsupported_iterable_to_array(o)) || allowArrayLike && o && typeof o.length === "number") {
-        if (it) o = it;
-        var i = 0;
-        return function() {
-            if (i >= o.length) return {
-                done: true
-            };
-            return {
-                done: false,
-                value: o[i++]
-            };
-        };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 var JSONConverter = /*#__PURE__*/ function() {
     function JSONConverter(player) {
-        this.treeItemList = [];
+        this.treeInfo = new TreeInfo();
         this.engine = player.renderer.engine;
         this.renderer = player.renderer;
         this.downloader = new Downloader();
@@ -11891,7 +12075,7 @@ var JSONConverter = /*#__PURE__*/ function() {
                     case 7:
                         // @ts-expect-error
                         oldScene.bins = binFiles;
-                        newScene = {
+                        newScene = _extends({}, oldScene, {
                             version: "3.0",
                             playerVersion: {
                                 web: "3.0",
@@ -11899,18 +12083,14 @@ var JSONConverter = /*#__PURE__*/ function() {
                             },
                             type: "ge",
                             compositions: [],
-                            compositionId: oldScene.compositionId,
                             images: [],
-                            shapes: oldScene.shapes,
-                            plugins: oldScene.plugins,
                             textures: [],
                             items: [],
                             components: [],
                             materials: [],
                             shaders: [],
                             geometries: []
-                        };
-                        _this.treeItemList = [];
+                        });
                         _this.setImage(newScene, oldScene);
                         return [
                             4,
@@ -12041,8 +12221,6 @@ var JSONConverter = /*#__PURE__*/ function() {
             var comp = _step.value;
             if (comp.dataType === spec.DataType.SkyboxComponent) {
                 newComponents.push(this.createSkyboxComponent(comp, newScene));
-            } else if (comp.dataType === spec.DataType.MeshComponent) {
-                newComponents.push(this.createMeshComponent(comp, newScene, oldScene));
             } else if (comp.dataType === spec.DataType.LightComponent) {
                 newComponents.push(this.createLightComponent(comp, newScene));
             } else if (comp.dataType === spec.DataType.CameraComponent) {
@@ -12054,16 +12232,22 @@ var JSONConverter = /*#__PURE__*/ function() {
                 treeComp.options.tree.animation = undefined;
                 treeComp.options.tree.animations = undefined;
                 newComponents.push(comp);
-            } else {
+            } else if (comp.dataType !== spec.DataType.MeshComponent) {
                 newComponents.push(comp);
             }
         }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(oldScene.components), _step1; !(_step1 = _iterator1()).done;){
+            var comp1 = _step1.value;
+            if (comp1.dataType === spec.DataType.MeshComponent) {
+                newComponents.push(this.createMeshComponent(comp1, newScene, oldScene));
+            }
+        }
     };
     _proto.setItem = function setItem(newScene, oldScene) {};
     _proto.setComposition = function setComposition(newScene, oldScene) {
         var _newScene_items;
         newScene.items = oldScene.items;
-        (_newScene_items = newScene.items).push.apply(_newScene_items, [].concat(this.treeItemList));
+        (_newScene_items = newScene.items).push.apply(_newScene_items, [].concat(this.treeInfo.getAllTreeNodeList()));
         newScene.compositionId = oldScene.compositionId;
         newScene.compositions = oldScene.compositions;
         newScene.items.forEach(function(item) {
@@ -12202,16 +12386,38 @@ var JSONConverter = /*#__PURE__*/ function() {
                     id: mat.id
                 };
                 return data;
-            }),
-            rootBone: {
-                id: ""
-            }
+            })
         };
+        if (meshOptions.skin) {
+            var parentItemId = component.item.id;
+            for(var _iterator = _create_for_of_iterator_helper_loose(oldScene.items), _step; !(_step = _iterator()).done;){
+                var item = _step.value;
+                if (item.id === component.item.id) {
+                    parentItemId = item.parentId;
+                }
+            }
+            if (parentItemId === component.item.id) {
+                throw new Error("Can't item " + component.item);
+            }
+            var treeItem = this.treeInfo.getTreeItemByNodeId(parentItemId);
+            var treeNodeList = this.treeInfo.getTreeNodeListByNodeId(parentItemId);
+            if (!treeItem || !treeNodeList) {
+                throw new Error("Can't find tree node list for " + component.item);
+            }
+            var rootBoneItem = this.setupBoneData(geometryData, meshOptions.skin, oldScene, treeItem, treeNodeList);
+            meshComponent.rootBone = {
+                id: rootBoneItem.id
+            };
+        }
+        if (meshOptions.weights !== undefined) {
+            meshComponent.morph = {
+                weights: meshOptions.weights
+            };
+        }
         return meshComponent;
     };
     _proto.createItemsFromTreeComponent = function createItemsFromTreeComponent(component, newScene, oldScene) {
         var _this = this;
-        var _this_treeItemList;
         var treeItem = oldScene.items[0];
         oldScene.items.forEach(function(item) {
             if (item.id === component.item.id) {
@@ -12220,13 +12426,13 @@ var JSONConverter = /*#__PURE__*/ function() {
         });
         var treeComp = component;
         var treeData = treeComp.options.tree;
-        var treeItemList = [];
-        treeData.nodes.forEach(function(node) {
+        var treeNodeList = [];
+        treeData.nodes.forEach(function(node, index) {
             var _node_name;
             var item = {
                 id: generateGUID(),
                 parentId: treeItem.id,
-                name: (_node_name = node.name) != null ? _node_name : "<unnamed>",
+                name: (_node_name = node.name) != null ? _node_name : "node" + index,
                 duration: treeItem.duration,
                 // @ts-expect-error
                 type: "ECS",
@@ -12241,14 +12447,14 @@ var JSONConverter = /*#__PURE__*/ function() {
                 transform: _this.getTransformData(node.transform),
                 components: []
             };
-            treeItemList.push(item);
+            treeNodeList.push(item);
             newScene.items.push(item);
         });
         treeData.nodes.forEach(function(node, index) {
             var _node_children;
-            var item = treeItemList[index];
+            var item = treeNodeList[index];
             (_node_children = node.children) == null ? void 0 : _node_children.forEach(function(child) {
-                var childItem = treeItemList[child];
+                var childItem = treeNodeList[child];
                 childItem.parentId = item.id;
             });
         });
@@ -12259,12 +12465,13 @@ var JSONConverter = /*#__PURE__*/ function() {
                     var parentId = item.parentId.substring(0, index);
                     var subIndex = +item.parentId.substring(index + 1);
                     if (parentId === treeItem.id) {
-                        item.parentId = treeItemList[subIndex].id;
+                        item.parentId = treeNodeList[subIndex].id;
                     }
                 }
             }
         });
-        (_this_treeItemList = this.treeItemList).push.apply(_this_treeItemList, [].concat(treeItemList));
+        this.treeInfo.add(treeItem, treeNodeList);
+        this.createAnimationComponent(treeData, treeItem, newScene, oldScene);
     };
     _proto.createLightComponent = function createLightComponent(component, scene) {
         var lightOptions = component.options;
@@ -12290,6 +12497,186 @@ var JSONConverter = /*#__PURE__*/ function() {
         }
         return lightComponent;
     };
+    _proto.createAnimationComponent = function createAnimationComponent(treeOptions, treeItem, newScene, oldScene) {
+        var _this = this;
+        var animation = treeOptions.animation, animations = treeOptions.animations;
+        var animationComponent = {
+            id: generateGUID(),
+            dataType: spec.DataType.AnimationComponent,
+            item: {
+                id: treeItem.id
+            },
+            animation: animation,
+            animationClips: []
+        };
+        if (animations && animations.length) {
+            // FIXME: calcuate tree item duration
+            var bins = oldScene.bins;
+            animations.forEach(function(anim) {
+                var clipData = {
+                    id: generateGUID(),
+                    name: anim.name,
+                    dataType: spec.DataType.AnimationClip,
+                    positionCurves: [],
+                    rotationCurves: [],
+                    scaleCurves: [],
+                    floatCurves: []
+                };
+                var totalAnimationTime = 0;
+                anim.tracks.forEach(function(track) {
+                    var inputArray = typedArrayFromBinary(bins, track.input);
+                    totalAnimationTime = Math.max(totalAnimationTime, inputArray[inputArray.length - 1]);
+                });
+                anim.tracks.forEach(function(track) {
+                    var inputArray = typedArrayFromBinary(bins, track.input);
+                    var outputArray = typedArrayFromBinary(bins, track.output);
+                    if (!_instanceof1(inputArray, Float32Array)) {
+                        throw new Error("Type of inputArray should be float32, " + inputArray);
+                    }
+                    if (!_instanceof1(outputArray, Float32Array)) {
+                        throw new Error("Type of outputArray should be float32, " + outputArray);
+                    }
+                    if (track.interpolation !== "LINEAR") {
+                        throw new Error("Invalid interpolation type " + track.interpolation);
+                    }
+                    if (track.path === "rotation") {
+                        var points = [];
+                        var controlPoints = [];
+                        var lineValue = [];
+                        for(var i = 0; i < inputArray.length; i++){
+                            points.push([
+                                outputArray[i * 4],
+                                outputArray[i * 4 + 1],
+                                outputArray[i * 4 + 2],
+                                outputArray[i * 4 + 3]
+                            ]);
+                            if (i > 0) {
+                                var p0 = Quaternion.fromArray(points[i - 1]);
+                                var p3 = Quaternion.fromArray(points[i]);
+                                var p1 = new Quaternion();
+                                var p2 = new Quaternion();
+                                p1.slerpQuaternions(p0, p3, 1 / 3);
+                                p2.slerpQuaternions(p0, p3, 2 / 3);
+                                controlPoints.push(p1.toArray());
+                                controlPoints.push(p2.toArray());
+                            }
+                            lineValue.push([
+                                spec.BezierKeyframeType.LINE,
+                                [
+                                    inputArray[i],
+                                    i
+                                ]
+                            ]);
+                        }
+                        var node = _this.treeInfo.getTreeNode(treeItem.id, track.node);
+                        var path = _this.treeInfo.getNodePath(node.id);
+                        var keyFrames = [
+                            spec.ValueType.BEZIER_CURVE_QUAT,
+                            [
+                                lineValue,
+                                points,
+                                controlPoints
+                            ]
+                        ];
+                        clipData.rotationCurves.push({
+                            path: path,
+                            keyFrames: keyFrames
+                        });
+                    } else if (track.path === "weights") {
+                        var node1 = _this.treeInfo.getTreeNode(treeItem.id, track.node);
+                        var path1 = _this.treeInfo.getNodePath(node1.id);
+                        if (node1.components.length === 0) {
+                            for(var i1 = 0; i1 < oldScene.items.length; i1++){
+                                var child = oldScene.items[i1];
+                                if (child.parentId === node1.id) {
+                                    path1 += "/" + child.name;
+                                    break;
+                                }
+                            }
+                        }
+                        var component = outputArray.length / inputArray.length;
+                        for(var c = 0; c < component; c++){
+                            var lineValue1 = [];
+                            for(var i2 = 0; i2 < inputArray.length; i2++){
+                                lineValue1.push([
+                                    spec.BezierKeyframeType.LINE,
+                                    [
+                                        inputArray[i2],
+                                        outputArray[i2 * component + c]
+                                    ]
+                                ]);
+                            }
+                            var keyFrames1 = [
+                                spec.ValueType.BEZIER_CURVE,
+                                lineValue1
+                            ];
+                            clipData.floatCurves.push({
+                                path: path1,
+                                className: "ModelMeshComponent",
+                                property: "morphWeights." + c,
+                                keyFrames: keyFrames1
+                            });
+                        }
+                    } else {
+                        var points1 = [];
+                        var controlPoints1 = [];
+                        var lineValue2 = [];
+                        for(var i3 = 0; i3 < inputArray.length; i3++){
+                            points1.push([
+                                outputArray[i3 * 3],
+                                outputArray[i3 * 3 + 1],
+                                outputArray[i3 * 3 + 2]
+                            ]);
+                            if (i3 > 0) {
+                                var p01 = Vector3.fromArray(points1[i3 - 1]);
+                                var p31 = Vector3.fromArray(points1[i3]);
+                                var p11 = new Vector3().lerpVectors(p01, p31, 1 / 3);
+                                var p21 = new Vector3().lerpVectors(p01, p31, 2 / 3);
+                                controlPoints1.push(p11.toArray());
+                                controlPoints1.push(p21.toArray());
+                            }
+                            lineValue2.push([
+                                spec.BezierKeyframeType.LINE,
+                                [
+                                    inputArray[i3],
+                                    i3
+                                ]
+                            ]);
+                        }
+                        var node2 = _this.treeInfo.getTreeNode(treeItem.id, track.node);
+                        var path2 = _this.treeInfo.getNodePath(node2.id);
+                        var keyFrames2 = [
+                            spec.ValueType.BEZIER_CURVE_PATH,
+                            [
+                                lineValue2,
+                                points1,
+                                controlPoints1
+                            ]
+                        ];
+                        if (track.path === "translation") {
+                            clipData.positionCurves.push({
+                                path: path2,
+                                keyFrames: keyFrames2
+                            });
+                        } else {
+                            clipData.scaleCurves.push({
+                                path: path2,
+                                keyFrames: keyFrames2
+                            });
+                        }
+                    }
+                });
+                newScene.animations.push(clipData);
+                animationComponent.animationClips.push({
+                    id: clipData.id
+                });
+            });
+        }
+        treeItem.components.push({
+            id: animationComponent.id
+        });
+        newScene.components.push(animationComponent);
+    };
     _proto.getMaterialData = function getMaterialData(material, scene) {
         if (material.type === spec.MaterialType.unlit) {
             var floats = {};
@@ -12310,7 +12697,7 @@ var JSONConverter = /*#__PURE__*/ function() {
                 shader: {
                     id: UnlitShaderGUID
                 },
-                stringTags: this.getStringTags(material),
+                stringTags: {},
                 macros: [],
                 ints: {},
                 floats: floats,
@@ -12318,6 +12705,7 @@ var JSONConverter = /*#__PURE__*/ function() {
                 colors: colors,
                 textures: textures
             };
+            this.setupMaterial(material, newMaterial);
             return newMaterial;
         } else {
             var floats1 = {
@@ -12366,7 +12754,7 @@ var JSONConverter = /*#__PURE__*/ function() {
                 shader: {
                     id: PBRShaderGUID
                 },
-                stringTags: this.getStringTags(material),
+                stringTags: {},
                 macros: [],
                 ints: {},
                 floats: floats1,
@@ -12374,29 +12762,39 @@ var JSONConverter = /*#__PURE__*/ function() {
                 colors: colors1,
                 textures: textures1
             };
+            this.setupMaterial(material, newMaterial1);
             return newMaterial1;
         }
     };
-    _proto.getStringTags = function getStringTags(material) {
-        var stringTags = {};
-        var _material_depthMask;
-        stringTags["ZWrite"] = String((_material_depthMask = material.depthMask) != null ? _material_depthMask : true);
-        stringTags["ZTest"] = String(true);
-        if (material.blending === spec.MaterialBlending.masked) {
-            stringTags["RenderType"] = RenderType.Mask;
-        } else if (material.blending === spec.MaterialBlending.translucent) {
-            stringTags["RenderType"] = RenderType.Blend;
+    _proto.setupMaterial = function setupMaterial(oldMat, newMat) {
+        if (oldMat.blending === spec.MaterialBlending.translucent) {
+            newMat.stringTags["RenderType"] = spec.RenderType.Transparent;
         } else {
-            stringTags["RenderType"] = RenderType.Opaque;
+            newMat.stringTags["RenderType"] = spec.RenderType.Opaque;
         }
-        if (material.side === spec.SideMode.BACK) {
-            stringTags["Cull"] = CullMode.Back;
-        } else if (material.side === spec.SideMode.DOUBLE) {
-            stringTags["Cull"] = CullMode.Double;
+        if (oldMat.blending === spec.MaterialBlending.masked) {
+            newMat.floats["AlphaClip"] = 1;
+            var _oldMat_alphaCutOff;
+            newMat.floats["_Cutoff"] = (_oldMat_alphaCutOff = oldMat.alphaCutOff) != null ? _oldMat_alphaCutOff : 0;
         } else {
-            stringTags["Cull"] = CullMode.Front;
+            newMat.floats["AlphaClip"] = 0;
         }
-        return stringTags;
+        switch(oldMat.side){
+            case spec.SideMode.BACK:
+                newMat.stringTags["RenderFace"] = spec.RenderFace.Back;
+                break;
+            case spec.SideMode.DOUBLE:
+                newMat.stringTags["RenderFace"] = spec.RenderFace.Both;
+                break;
+            default:
+                newMat.stringTags["RenderFace"] = spec.RenderFace.Front;
+        }
+        if (oldMat.type === spec.MaterialType.pbr) {
+            newMat.floats["_SpecularAA"] = oldMat.useSpecularAA ? 1 : 0;
+        }
+        var _oldMat_depthMask;
+        newMat.stringTags["ZWrite"] = String((_oldMat_depthMask = oldMat.depthMask) != null ? _oldMat_depthMask : true);
+        newMat.stringTags["ZTest"] = String(true);
     };
     _proto.getTextureData = function getTextureData(scene, floats, texIndex, texTransform) {
         var _scene_textures_texIndex_id;
@@ -12471,8 +12869,121 @@ var JSONConverter = /*#__PURE__*/ function() {
         }
         return result;
     };
+    _proto.setupBoneData = function setupBoneData(geom, skin, oldScene, treeItem, treeNodeList) {
+        var bins = oldScene.bins;
+        var joints = skin.joints, skeleton = skin.skeleton, inverseBindMatrices = skin.inverseBindMatrices;
+        if (!inverseBindMatrices) {
+            throw new Error("inverseBindMatrices is undefined " + skin);
+        }
+        var bindMatrixArray = typedArrayFromBinary(bins, inverseBindMatrices);
+        geom.inverseBindMatrices = Array.from(bindMatrixArray);
+        var id2Node = {};
+        var rootBoneItem = treeItem;
+        if (skeleton !== undefined) {
+            rootBoneItem = treeNodeList[skeleton];
+        } else {
+            console.warn("Root bone is missing");
+        }
+        joints.forEach(function(joint) {
+            var node = treeNodeList[joint];
+            if (node !== rootBoneItem && node.parentId === rootBoneItem.parentId) {
+                console.error("Find invalid node for rootBoneItem and adjust rootBoneItem");
+                rootBoneItem = treeItem;
+            }
+        });
+        treeNodeList.forEach(function(node) {
+            id2Node[node.id] = node;
+        });
+        geom.rootBoneName = rootBoneItem.name;
+        var boneNames = [];
+        joints.forEach(function(joint) {
+            var currentItem = treeNodeList[joint];
+            var nodeList = [];
+            while(currentItem && currentItem != rootBoneItem){
+                nodeList.push(currentItem.name);
+                if (currentItem.parentId) {
+                    currentItem = id2Node[currentItem.parentId];
+                } else {
+                    break;
+                }
+            }
+            boneNames.push(nodeList.reverse().join("/"));
+        });
+        geom.boneNames = boneNames;
+        return rootBoneItem;
+    };
     return JSONConverter;
 }();
+var TreeInfo = /*#__PURE__*/ function() {
+    function TreeInfo() {
+        this.tree2NodeList = {};
+        this.nodeList2Tree = {};
+        this.nodeId2Node = {};
+        this.node2Path = {};
+    }
+    var _proto = TreeInfo.prototype;
+    _proto.add = function add(treeItem, treeNodeList) {
+        var _this = this;
+        if (this.tree2NodeList[treeItem.id]) {
+            throw new Error("Find duplicate treeItem id: " + treeItem.id);
+        }
+        this.tree2NodeList[treeItem.id] = treeNodeList;
+        treeNodeList.forEach(function(node) {
+            if (_this.nodeList2Tree[node.id]) {
+                throw new Error("Find duplicate tree node id: " + node.id);
+            }
+            _this.nodeList2Tree[node.id] = treeItem;
+            _this.nodeId2Node[node.id] = node;
+        });
+        treeNodeList.forEach(function(node) {
+            _this.setNodePath(node);
+        });
+    };
+    _proto.setNodePath = function setNodePath(node) {
+        if (node.parentId) {
+            if (this.node2Path[node.parentId]) {
+                this.node2Path[node.id] = this.node2Path[node.parentId] + "/" + node.name;
+            } else if (this.nodeId2Node[node.parentId]) {
+                this.setNodePath(this.nodeId2Node[node.parentId]);
+                this.node2Path[node.id] = this.node2Path[node.parentId] + "/" + node.name;
+            } else {
+                this.node2Path[node.id] = node.name;
+            }
+        } else {
+            this.node2Path[node.id] = node.name;
+        }
+    };
+    _proto.getTreeNodeListByTreeId = function getTreeNodeListByTreeId(id) {
+        return this.tree2NodeList[id];
+    };
+    _proto.getTreeNodeListByNodeId = function getTreeNodeListByNodeId(id) {
+        var treeItem = this.nodeList2Tree[id];
+        if (!treeItem) {
+            throw new Error("Invalid id " + id);
+        }
+        return this.getTreeNodeListByTreeId(treeItem.id);
+    };
+    _proto.getTreeItemByNodeId = function getTreeItemByNodeId(id) {
+        return this.nodeList2Tree[id];
+    };
+    _proto.getTreeNode = function getTreeNode(treeId, nodeIndex) {
+        var nodeList = this.getTreeNodeListByTreeId(treeId);
+        return nodeList[nodeIndex];
+    };
+    _proto.getAllTreeNodeList = function getAllTreeNodeList() {
+        var _this = this;
+        var nodeList = [];
+        Object.keys(this.tree2NodeList).forEach(function(key) {
+            var _nodeList;
+            (_nodeList = nodeList).push.apply(_nodeList, [].concat(_this.tree2NodeList[key]));
+        });
+        return nodeList;
+    };
+    _proto.getNodePath = function getNodePath(id) {
+        return this.node2Path[id];
+    };
+    return TreeInfo;
+}();
 function getGeometryDataFromOptions(geomOptions) {
     var vertexCount = 0;
     var verticesType = spec.VertexFormatType.Float32;
@@ -12585,7 +13096,8 @@ function getGeometryDataFromPropsList(geomPropsList) {
         var scale = (_geomPropsList__indices_data_BYTES_PER_ELEMENT = (_geomPropsList__indices = geomPropsList[0].indices) == null ? void 0 : _geomPropsList__indices.data.BYTES_PER_ELEMENT) != null ? _geomPropsList__indices_data_BYTES_PER_ELEMENT : 1;
         subMeshes.push({
             offset: offset * scale,
-            count: count
+            indexCount: count,
+            vertexCount: count
         });
         if (i) {
             var geom0 = geomPropsList[0];
@@ -12832,7 +13344,9 @@ var vertexBufferSemanticMap = {
     a_Tangent: "TANGENT",
     a_Color: "COLOR",
     a_Joints: "JOINTS",
+    a_Joint1: "JOINTS",
     a_Weights: "WEIGHTS",
+    a_Weight1: "WEIGHTS",
     //
     a_Target_Position0: "POSITION_BS0",
     a_Target_Position1: "POSITION_BS1",
@@ -12854,8 +13368,11 @@ var vertexBufferSemanticMap = {
 
 registerPlugin("tree", ModelTreePlugin, VFXItem, true);
 registerPlugin("model", ModelPlugin, VFXItem);
-var version = "2.0.0-alpha.12";
+var version = "2.0.0-alpha.13";
 logger.info("plugin model version: " + version);
+if (version !== version$1) {
+    console.error("注意：请统一 Model 插件与 Player 版本，不统一的版本混用会有不可预知的后果！", "\nAttention: Please ensure the Model plugin is synchronized with the Player version. Mixing and matching incompatible versions may result in unpredictable consequences!");
+}
 
-export { BoxMesh, CameraGestureHandlerImp, CameraGestureType, CheckerHelper, CompositionCache, CompositionHitTest, CullMode, FBOOptions, Float16ArrayWrapper, GeometryBoxProxy, HitTestingProxy, HookOGLFunc, InterpolationSampler, JSONConverter, LoaderHelper, LoaderImpl, MeshHelper, ModelCameraComponent, ModelLightComponent, ModelMeshComponent, ModelPlugin, ModelPluginComponent, ModelSkyboxComponent, ModelTreeComponent, ModelTreeItem, ModelTreePlugin, PAnimInterpType, PAnimPathType, PAnimTexture, PAnimTrack, PAnimation, PAnimationManager, PBRShaderGUID, PBlendMode, PCamera, PCameraManager, PCoordinate, PEntity, PFaceSideMode, PGeometry, PGlobalState, PLight, PLightManager, PLightType, PMaterialBase, PMaterialPBR, PMaterialSkyboxFilter, PMaterialType, PMaterialUnlit, PMesh, PMorph, PObject, PObjectType, PSceneManager, PShaderManager, PShadowType, PSkin, PSkybox, PSkyboxCreator, PSkyboxType, PSubMesh, PTextureType, PTransform, PluginHelper, RayBoxTesting, RayIntersectsBoxWithRotation, RayTriangleTesting, RenderType, TextureDataMode, ToggleItemBounding, TwoStatesSet, UnlitShaderGUID, VFX_ITEM_TYPE_3D, VertexAttribBuffer, WebGLHelper, WebHelper, createAnimationSampler, createPluginMaterial, fetchPBRShaderCode, fetchUnlitShaderCode, getDefaultEffectsGLTFLoader, getDiffuseOnlyShaderCode, getGaussianBlurShaderCodeV1, getGaussianBlurShaderCodeV2, getGeometryDataFromOptions, getGeometryDataFromPropsList, getKawaseBlurShaderCode, getNormalVisShaderCode, getPBRPassShaderCode, getPMeshList, getQuadFilterShaderCode, getRendererGPUInfo, getSceneManager, getShadowPassShaderCode, getSimpleFilterShaderCode, getSkyBoxShaderCode, getTransparecyBaseShader, getTransparecyFilterShader, setDefaultEffectsGLTFLoader, version };
+export { AnimationComponent, BoxMesh, CameraGestureHandlerImp, CameraGestureType, CheckerHelper, CompositionCache, CompositionHitTest, CullMode, FBOOptions, Float16ArrayWrapper, GeometryBoxProxy, HitTestingProxy, HookOGLFunc, InterpolationSampler, JSONConverter, LoaderHelper, LoaderImpl, MeshHelper, ModelCameraComponent, ModelLightComponent, ModelMeshComponent, ModelPlugin, ModelPluginComponent, ModelSkyboxComponent, ModelTreeComponent, ModelTreeItem, ModelTreePlugin, PAnimInterpType, PAnimPathType, PAnimTexture, PAnimTrack, PAnimation, PAnimationManager, PBRShaderGUID, PBlendMode, PCamera, PCameraManager, PCoordinate, PEntity, PFaceSideMode, PGeometry, PGlobalState, PLight, PLightManager, PLightType, PMaterialBase, PMaterialPBR, PMaterialSkyboxFilter, PMaterialType, PMaterialUnlit, PMesh, PMorph, PObject, PObjectType, PSceneManager, PShaderManager, PShadowType, PSkin, PSkybox, PSkyboxCreator, PSkyboxType, PSubMesh, PTextureType, PTransform, PluginHelper, RayBoxTesting, RayIntersectsBoxWithRotation, RayTriangleTesting, RenderType, TextureDataMode, ToggleItemBounding, TwoStatesSet, UnlitShaderGUID, VFX_ITEM_TYPE_3D, VertexAttribBuffer, WebGLHelper, WebHelper, createAnimationSampler, createPluginMaterial, fetchPBRShaderCode, fetchUnlitShaderCode, getDefaultEffectsGLTFLoader, getDiffuseOnlyShaderCode, getGaussianBlurShaderCodeV1, getGaussianBlurShaderCodeV2, getGeometryDataFromOptions, getGeometryDataFromPropsList, getKawaseBlurShaderCode, getNormalVisShaderCode, getPBRPassShaderCode, getPMeshList, getQuadFilterShaderCode, getRendererGPUInfo, getSceneManager, getShadowPassShaderCode, getSimpleFilterShaderCode, getSkyBoxShaderCode, getTransparecyBaseShader, getTransparecyFilterShader, setDefaultEffectsGLTFLoader, version };
 //# sourceMappingURL=index.mjs.map