@galacean/effects 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/weapp.js

@@ -8191,7 +8191,7 @@ function loadMipmapImage(pointer, bins) {
     });
 }
 
-var seed$e = 1;
+var seed$d = 1;
 /**
  * Texture 抽象类
  */
@@ -8200,7 +8200,7 @@ var Texture = /** @class */ (function (_super) {
     function Texture(engine) {
         var _this = _super.call(this, engine) || this;
         _this.destroyed = false;
-        _this.id = 'Tex' + seed$e++;
+        _this.id = 'Tex' + seed$d++;
         return _this;
     }
     Object.defineProperty(Texture.prototype, "isDestroyed", {
@@ -8602,7 +8602,7 @@ exports.MaterialRenderType = void 0;
  * 用于设置材质默认名称的自增序号
  * @internal
  */
-var seed$d = 1;
+var seed$c = 1;
 /**
  * Material 抽象类
  */
@@ -8617,7 +8617,7 @@ var Material = /** @class */ (function (_super) {
         _this.destroyed = false;
         _this.initialized = false;
         if (props) {
-            var _a = props.name, name_1 = _a === void 0 ? 'Material' + seed$d++ : _a, _b = props.renderType, renderType = _b === void 0 ? exports.MaterialRenderType.normal : _b, shader = props.shader, uniformSemantics = props.uniformSemantics;
+            var _a = props.name, name_1 = _a === void 0 ? 'Material' + seed$c++ : _a, _b = props.renderType, renderType = _b === void 0 ? exports.MaterialRenderType.normal : _b, shader = props.shader, uniformSemantics = props.uniformSemantics;
             _this.name = name_1;
             _this.renderType = renderType; // TODO 没有地方用到
             _this.shaderSource = shader;
@@ -8625,7 +8625,7 @@ var Material = /** @class */ (function (_super) {
             _this.uniformSemantics = __assign$1({}, uniformSemantics); // TODO 废弃，待移除
         }
         else {
-            _this.name = 'Material' + seed$d++;
+            _this.name = 'Material' + seed$c++;
             _this.renderType = exports.MaterialRenderType.normal;
         }
         return _this;
@@ -9050,7 +9050,7 @@ function generateEmptyTypedArray(type) {
     return new Float32Array(0);
 }
 
-var seed$c = 1;
+var seed$b = 1;
 /**
  * Mesh 抽象类
  */
@@ -9062,7 +9062,7 @@ var Mesh = /** @class */ (function (_super) {
         _this.visible = true;
         if (props) {
             var material = props.material, geometry = props.geometry, _a = props.name, name_1 = _a === void 0 ? '<unnamed>' : _a, _b = props.priority, priority = _b === void 0 ? 0 : _b, _c = props.worldMatrix, worldMatrix = _c === void 0 ? Matrix4$1.fromIdentity() : _c;
-            _this.id = 'Mesh' + seed$c++;
+            _this.id = 'Mesh' + seed$b++;
             _this.name = name_1;
             _this.geometry = geometry;
             _this.material = material;
@@ -9070,7 +9070,7 @@ var Mesh = /** @class */ (function (_super) {
             _this.worldMatrix = worldMatrix;
         }
         else {
-            _this.id = 'Mesh' + seed$c++;
+            _this.id = 'Mesh' + seed$b++;
             _this.name = '<unnamed>';
             _this.worldMatrix = Matrix4$1.fromIdentity();
             _this._priority = 0;
@@ -9290,7 +9290,7 @@ exports.RenderPassDestroyAttachmentType = void 0;
      */
     RenderPassDestroyAttachmentType[RenderPassDestroyAttachmentType["destroy"] = 0] = "destroy";
 })(exports.RenderPassDestroyAttachmentType || (exports.RenderPassDestroyAttachmentType = {}));
-var seed$b = 1;
+var seed$a = 1;
 /**
  * RenderPass 抽象类
  */
@@ -9302,7 +9302,7 @@ var RenderPass = /** @class */ (function () {
         this.attachments = [];
         this.destroyed = false;
         this.initialized = false;
-        var _a = options.name, name = _a === void 0 ? 'RenderPass_' + seed$b++ : _a, clearAction = options.clearAction, semantics = options.semantics, depthStencilAttachment = options.depthStencilAttachment, storeAction = options.storeAction, _b = options.priority, priority = _b === void 0 ? 0 : _b, _c = options.meshOrder, meshOrder = _c === void 0 ? exports.OrderType.ascending : _c, _d = options.meshes, meshes = _d === void 0 ? [] : _d, _e = options.delegate, delegate = _e === void 0 ? {} : _e;
+        var _a = options.name, name = _a === void 0 ? 'RenderPass_' + seed$a++ : _a, clearAction = options.clearAction, semantics = options.semantics, depthStencilAttachment = options.depthStencilAttachment, storeAction = options.storeAction, _b = options.priority, priority = _b === void 0 ? 0 : _b, _c = options.meshOrder, meshOrder = _c === void 0 ? exports.OrderType.ascending : _c, _d = options.meshes, meshes = _d === void 0 ? [] : _d, _e = options.delegate, delegate = _e === void 0 ? {} : _e;
         this.name = name;
         this.renderer = renderer;
         this.priority = priority;
@@ -9919,7 +9919,7 @@ var defaultGlobalVolume = {
 };
 
 var RENDER_PASS_NAME_PREFIX = '_effects_default_';
-var seed$a = 1;
+var seed$9 = 1;
 /**
  * RenderFrame 抽象类
  */
@@ -10054,7 +10054,7 @@ var RenderFrame = /** @class */ (function () {
         }
         this.semantics = new SemanticMap(options.semantics);
         this.clearAction = clearAction;
-        this.name = "RenderFrame".concat(seed$a++);
+        this.name = "RenderFrame".concat(seed$9++);
         var firstRP = renderPasses[0];
         var sourceOpts = {
             type: glContext.UNSIGNED_BYTE,
@@ -11277,6 +11277,12 @@ var SerializationHelper = /** @class */ (function () {
             value.id &&
             value.id.length === 32;
     };
+    // TODO 测试函数，2.0 上线后移除
+    SerializationHelper.checkGLTFNode = function (value) {
+        return value instanceof Object &&
+            value.nodeIndex !== undefined &&
+            value.isJoint !== undefined;
+    };
     SerializationHelper.deserializeProperty = function (property, engine, level) {
         var e_11, _a, e_12, _b;
         if (level > 10) {
@@ -11309,7 +11315,9 @@ var SerializationHelper = /** @class */ (function () {
         else if (SerializationHelper.checkDataPath(property)) {
             return engine.assetLoader.loadGUID(property.id);
         }
-        else if (property instanceof EffectsObject || SerializationHelper.checkTypedArray(property)) {
+        else if (property instanceof EffectsObject ||
+            SerializationHelper.checkTypedArray(property) ||
+            SerializationHelper.checkGLTFNode(property)) {
             return property;
         }
         else if (property instanceof Object) {
@@ -11384,7 +11392,9 @@ var SerializationHelper = /** @class */ (function () {
                         res = _j.sent();
                         return [2 /*return*/, res];
                     case 12:
-                        if (!(property instanceof EffectsObject || SerializationHelper.checkTypedArray(property))) return [3 /*break*/, 13];
+                        if (!(property instanceof EffectsObject ||
+                            SerializationHelper.checkTypedArray(property) ||
+                            SerializationHelper.checkGLTFNode(property))) return [3 /*break*/, 13];
                         return [2 /*return*/, property];
                     case 13:
                         if (!(property instanceof Object)) return [3 /*break*/, 22];
@@ -11872,20 +11882,6 @@ var particleOriginTranslateMap = (_a$7 = {},
     _a$7[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
     _a$7[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
     _a$7);
-/**
- * 提取并转换 JSON 数据中的 anchor 值
- */
-function convertAnchor(anchor, particleOrigin) {
-    if (anchor) {
-        return [anchor[0] - 0.5, 0.5 - anchor[1]];
-    }
-    else if (particleOrigin) {
-        return particleOriginTranslateMap[particleOrigin];
-    }
-    else {
-        return [0, 0];
-    }
-}
 function nearestPowerOfTwo(value) {
     return Math.pow(2, Math.round(Math.log(value) / Math.LN2));
 }
@@ -12581,7 +12577,7 @@ function createKeyFrameMeta() {
 }
 
 var tempQuat$1 = new Quaternion();
-var seed$9 = 1;
+var seed$8 = 1;
 // TODO 继承 Component
 var Transform = /** @class */ (function () {
     function Transform(props, parent) {
@@ -12644,7 +12640,7 @@ var Transform = /** @class */ (function () {
          * 最终模型矩阵对应变换的缓存，当自身矩阵或父矩阵有修改时需要更新
          */
         this.worldTRSCache = { position: new Vector3(0, 0, 0), quat: new Quaternion(0, 0, 0, 1), scale: new Vector3(1, 1, 1) };
-        this.name = "transform_".concat(seed$9++);
+        this.name = "transform_".concat(seed$8++);
         if (props) {
             this.setTransform(props);
         }
@@ -12824,13 +12820,11 @@ var Transform = /** @class */ (function () {
      * 设置锚点
      * @param x
      * @param y
-     * @param z
      */
-    Transform.prototype.setAnchor = function (x, y, z) {
-        if (this.anchor.x !== x || this.anchor.y !== y || this.anchor.z !== z) {
+    Transform.prototype.setAnchor = function (x, y) {
+        if (this.anchor.x !== x || this.anchor.y !== y) {
             this.anchor.x = x;
             this.anchor.y = y;
-            this.anchor.z = z;
             this.dirtyFlags.localData = true;
             this.dispatchValueChange();
         }
@@ -12841,8 +12835,7 @@ var Transform = /** @class */ (function () {
      * @param reverseEuler - 设置 rotation时，欧拉角是否需要取负值
      */
     Transform.prototype.setTransform = function (props, reverseEuler) {
-        var _a;
-        var position = props.position, rotation = props.rotation, scale = props.scale, quat = props.quat, name = props.name, anchor = props.anchor;
+        var position = props.position, rotation = props.rotation, scale = props.scale, size = props.size, quat = props.quat, name = props.name, anchor = props.anchor;
         if (name) {
             this.name = name;
         }
@@ -12879,12 +12872,15 @@ var Transform = /** @class */ (function () {
                 this.setScale(scale[0], scale[1], scale[2]);
             }
         }
+        if (size) {
+            this.setSize(size.x, size.y);
+        }
         if (anchor) {
-            if (anchor instanceof Vector3) {
-                this.setAnchor(anchor.x, anchor.y, anchor.z);
+            if (anchor instanceof Vector2) {
+                this.setAnchor(anchor.x, anchor.y);
             }
             else {
-                this.setAnchor(anchor[0], anchor[1], (_a = anchor[2]) !== null && _a !== void 0 ? _a : 0);
+                this.setAnchor(anchor[0], anchor[1]);
             }
         }
     };
@@ -13378,7 +13374,7 @@ var HELP_LINK$1 = {
 
 var vertex = "\nprecision highp float;\n\nattribute vec2 aPoint;\nuniform vec4 uPos;\nuniform vec2 uSize;\nuniform vec4 uQuat;\nuniform vec4 uColor;\nuniform mat4 effects_ObjectToWorld;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_MatrixVP;\nvarying vec4 vColor;\n#ifdef ENV_EDITOR\n  uniform vec4 uEditorTransform;\n#endif\n\nvec3 rotateByQuat(vec3 a, vec4 quat){\n  vec3 qvec = quat.xyz;\n  vec3 uv = cross(qvec, a);\n  vec3 uuv = cross(qvec, uv) * 2.;\n  return a +(uv * 2. * quat.w + uuv);\n}\n\nvoid main() {\n  vec4 _pos = uPos;\n  vec3 point = rotateByQuat(vec3(aPoint.xy * uSize, 0.),uQuat);\n  vec4 pos = vec4(_pos.xyz, 1.0);\n  pos = effects_ObjectToWorld * pos;\n  pos.xyz += effects_MatrixInvV[0].xyz * point.x+ effects_MatrixInvV[1].xyz * point.y;\n  gl_Position = effects_MatrixVP * pos;\n  vColor = uColor;\n  #ifdef ENV_EDITOR\n    gl_Position = vec4(gl_Position.xy * uEditorTransform.xy + uEditorTransform.zw * gl_Position.w, gl_Position.zw);\n  #endif\n}\n";
 var fragment = "\nprecision highp float;\n\n#define fragColor gl_FragColor\n\nvarying vec4 vColor;\nvoid main() {\n  gl_FragColor = vColor;\n}\n";
-var seed$8 = 1;
+var seed$7 = 1;
 var InteractMesh = /** @class */ (function () {
     function InteractMesh(props, rendererOptions, transform, engine) {
         this.transform = transform;
@@ -13456,7 +13452,7 @@ var InteractMesh = /** @class */ (function () {
     };
     InteractMesh.prototype.createMesh = function (geometry, material) {
         return Mesh.create(this.engine, {
-            name: 'Interact_preview' + seed$8++,
+            name: 'Interact_preview' + seed$7++,
             priority: 0,
             worldMatrix: Matrix4$1.fromIdentity(),
             geometry: geometry,
@@ -13941,783 +13937,1019 @@ var PlayableOutput = /** @class */ (function () {
  * @since 2.0.0
  * @internal
  */
-var TimelineComponent = /** @class */ (function (_super) {
-    __extends(TimelineComponent, _super);
-    function TimelineComponent(engine) {
-        var _this = _super.call(this, engine) || this;
-        _this.reusable = false;
-        _this.timelineStarted = false;
-        _this.playableGraph = new PlayableGraph();
-        /**
-         * 元素动画已经播放的时间
-         */
-        _this.time = 0;
-        _this.tracks = [];
-        _this.trackSeed = 0;
-        return _this;
+var Track = /** @class */ (function () {
+    function Track() {
+        this.clips = [];
+        this.clipSeed = 0;
     }
-    TimelineComponent.prototype.start = function () {
-        var e_1, _a, e_2, _b;
+    Track.prototype.createOutput = function () {
+        var output = new PlayableOutput();
+        return output;
+    };
+    /**
+     * 重写该方法以创建自定义混合器
+     */
+    Track.prototype.createMixerPlayable = function () {
+        return new Playable();
+    };
+    Track.prototype.createPlayebleTree = function () {
+        var e_1, _a;
+        var defaultMixPlayable = this.createMixerPlayable();
         try {
-            // TODO TimelineClip 需要传入 start 和 duration 数据
-            for (var _c = __values$1(this.tracks), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var track = _d.value;
-                try {
-                    for (var _e = (e_2 = void 0, __values$1(track.getClips())), _f = _e.next(); !_f.done; _f = _e.next()) {
-                        var clip = _f.value;
-                        clip.start = this.item.start;
-                        clip.duration = this.item.duration;
-                    }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
-                    }
-                    finally { if (e_2) throw e_2.error; }
-                }
+            for (var _b = __values$1(this.clips), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var clip = _c.value;
+                defaultMixPlayable.connect(clip.playable);
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
             finally { if (e_1) throw e_1.error; }
         }
-        this.compileTracks(this.playableGraph);
+        return defaultMixPlayable;
     };
-    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
-    TimelineComponent.prototype.update = function (dt) {
-        var e_3, _a, e_4, _b, e_5, _c, e_6, _d, e_7, _e, e_8, _f, e_9, _g, e_10, _h;
-        if (this.item.stopped || !this.item.composition) {
-            return;
-        }
-        if (!this.timelineStarted) {
-            try {
-                for (var _j = __values$1(this.tracks), _k = _j.next(); !_k.done; _k = _j.next()) {
-                    var track = _k.value;
-                    try {
-                        for (var _l = (e_4 = void 0, __values$1(track.getClips())), _m = _l.next(); !_m.done; _m = _l.next()) {
-                            var clip = _m.value;
-                            clip.playable.onGraphStart();
-                        }
-                    }
-                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                    finally {
-                        try {
-                            if (_m && !_m.done && (_b = _l.return)) _b.call(_l);
-                        }
-                        finally { if (e_4) throw e_4.error; }
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_k && !_k.done && (_a = _j.return)) _a.call(_j);
+    Track.prototype.createClip = function (classConstructor, name) {
+        var newClip = new TimelineClip();
+        newClip.playable = new classConstructor();
+        newClip.name = name ? name : 'TimelineClip' + newClip.id;
+        this.addClip(newClip);
+        return newClip;
+    };
+    Track.prototype.getClips = function () {
+        return this.clips;
+    };
+    Track.prototype.findClip = function (name) {
+        var e_2, _a;
+        try {
+            for (var _b = __values$1(this.clips), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var clip = _c.value;
+                if (clip.name === name) {
+                    return clip;
                 }
-                finally { if (e_3) throw e_3.error; }
             }
-            this.timelineStarted = true;
         }
-        var now = this.time;
-        // 判断动画是否开始
-        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
-            this.item.delaying = false;
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
             try {
-                for (var _o = __values$1(this.tracks), _p = _o.next(); !_p.done; _p = _o.next()) {
-                    var track = _p.value;
-                    try {
-                        for (var _q = (e_6 = void 0, __values$1(track.getClips())), _r = _q.next(); !_r.done; _r = _q.next()) {
-                            var clip = _r.value;
-                            clip.playable.onPlayablePlay();
-                        }
-                    }
-                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                    finally {
-                        try {
-                            if (_r && !_r.done && (_d = _q.return)) _d.call(_q);
-                        }
-                        finally { if (e_6) throw e_6.error; }
-                    }
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (_p && !_p.done && (_c = _o.return)) _c.call(_o);
-                }
-                finally { if (e_5) throw e_5.error; }
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
+            finally { if (e_2) throw e_2.error; }
         }
-        // 判断动画是否结束
-        var ended;
-        if (VFXItem.isParticle(this.item)) {
-            ended = this.item.isEnded(now) && this.item.content.destoryed;
+    };
+    Track.prototype.addClip = function (clip) {
+        clip.playable.bindingItem = this.bindingItem;
+        clip.id = (this.clipSeed++).toString();
+        this.clips.push(clip);
+    };
+    return Track;
+}());
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var TimelineClip = /** @class */ (function () {
+    function TimelineClip() {
+        this.start = 0;
+        this.duration = 0;
+    }
+    return TimelineClip;
+}());
+
+var AnimationStream = /** @class */ (function () {
+    function AnimationStream(playable) {
+        this.curveValues = {};
+        this.playable = playable;
+    }
+    AnimationStream.prototype.setCurveValue = function (componentType, propertyName, value) {
+        if (!this.findCurveValue(componentType, propertyName)) {
+            this.curveValues[componentType + propertyName] = { componentType: componentType, propertyName: propertyName, value: value };
         }
         else {
-            ended = this.item.isEnded(now);
+            this.curveValues[componentType + propertyName].value = value;
         }
-        if (ended) {
-            var endBehavior = this.item.endBehavior;
-            if (!this.item.ended) {
-                this.item.ended = true;
-                this.item.onEnd();
-                if (endBehavior === END_BEHAVIOR_DESTROY$1) {
-                    try {
-                        for (var _s = __values$1(this.tracks), _t = _s.next(); !_t.done; _t = _s.next()) {
-                            var track = _t.value;
-                            try {
-                                for (var _u = (e_8 = void 0, __values$1(track.getClips())), _v = _u.next(); !_v.done; _v = _u.next()) {
-                                    var clip = _v.value;
-                                    clip.playable.onPlayableDestroy();
-                                }
-                            }
-                            catch (e_8_1) { e_8 = { error: e_8_1 }; }
-                            finally {
-                                try {
-                                    if (_v && !_v.done && (_f = _u.return)) _f.call(_u);
-                                }
-                                finally { if (e_8) throw e_8.error; }
-                            }
-                        }
-                    }
-                    catch (e_7_1) { e_7 = { error: e_7_1 }; }
-                    finally {
-                        try {
-                            if (_t && !_t.done && (_e = _s.return)) _e.call(_s);
-                        }
-                        finally { if (e_7) throw e_7.error; }
-                    }
-                    this.item.delaying = true;
-                    if (!this.item.reusable && !this.reusable) {
-                        this.item.dispose();
-                        return;
-                    }
-                }
-            }
+        return this.curveValues[componentType + propertyName];
+    };
+    AnimationStream.prototype.findCurveValue = function (componentType, propertyName) {
+        return this.curveValues[componentType + propertyName];
+    };
+    AnimationStream.prototype.getInputStream = function (index) {
+        var inputPlayable = this.playable.getInput(index);
+        if (inputPlayable instanceof AnimationPlayable) {
+            return inputPlayable.animationStream;
         }
-        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
-        // 在生命周期内更新动画
-        if (!this.item.delaying) {
-            var lifetime = this.time / this.item.duration;
-            this.item.lifetime = lifetime;
-            try {
-                for (var _w = __values$1(this.tracks), _x = _w.next(); !_x.done; _x = _w.next()) {
-                    var track = _x.value;
-                    try {
-                        for (var _y = (e_10 = void 0, __values$1(track.getClips())), _z = _y.next(); !_z.done; _z = _y.next()) {
-                            var clip = _z.value;
-                            clip.playable.setTime(this.time);
-                        }
-                    }
-                    catch (e_10_1) { e_10 = { error: e_10_1 }; }
-                    finally {
-                        try {
-                            if (_z && !_z.done && (_h = _y.return)) _h.call(_y);
-                        }
-                        finally { if (e_10) throw e_10.error; }
-                    }
-                }
+    };
+    return AnimationStream;
+}());
+
+var AnimationPlayable = /** @class */ (function (_super) {
+    __extends(AnimationPlayable, _super);
+    function AnimationPlayable() {
+        var _this = _super.call(this) || this;
+        _this.animationStream = new AnimationStream(_this);
+        return _this;
+    }
+    return AnimationPlayable;
+}(Playable));
+
+var tempRot$1 = new Euler();
+var tempSize$1 = new Vector3(1, 1, 1);
+var tempPos = new Vector3();
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var AnimationClipPlayable = /** @class */ (function (_super) {
+    __extends(AnimationClipPlayable, _super);
+    function AnimationClipPlayable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnimationClipPlayable.prototype.processFrame = function (dt) {
+        if (this.bindingItem.composition) {
+            this.sampleAnimation();
+        }
+    };
+    /**
+     * 应用时间轴K帧数据到对象
+     */
+    AnimationClipPlayable.prototype.sampleAnimation = function () {
+        var _this = this;
+        var duration = this.bindingItem.duration;
+        var life = this.time / duration;
+        life = life < 0 ? 0 : (life > 1 ? 1 : life);
+        if (this.sizeXOverLifetime) {
+            tempSize$1.x = this.sizeXOverLifetime.getValue(life);
+            if (this.sizeSeparateAxes) {
+                tempSize$1.y = this.sizeYOverLifetime.getValue(life);
+                tempSize$1.z = this.sizeZOverLifetime.getValue(life);
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
-            finally {
-                try {
-                    if (_x && !_x.done && (_g = _w.return)) _g.call(_w);
-                }
-                finally { if (e_9) throw e_9.error; }
+            else {
+                tempSize$1.z = tempSize$1.y = tempSize$1.x;
             }
-            this.playableGraph.evaluate(dt);
+            var startSize = this.originalTransform.scale;
+            this.bindingItem.transform.setScale(tempSize$1.x * startSize.x, tempSize$1.y * startSize.y, tempSize$1.z * startSize.z);
+            // this.animationStream.setCurveValue('transform', 'scale.x', tempSize.x * startSize.x);
+            // this.animationStream.setCurveValue('transform', 'scale.y', tempSize.y * startSize.y);
+            // this.animationStream.setCurveValue('transform', 'scale.z', tempSize.z * startSize.z);
+        }
+        if (this.rotationOverLifetime) {
+            var func = function (v) { return _this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration); };
+            var incZ = func(this.rotationOverLifetime.z);
+            var separateAxes = this.rotationOverLifetime.separateAxes;
+            tempRot$1.x = separateAxes ? func(this.rotationOverLifetime.x) : 0;
+            tempRot$1.y = separateAxes ? func(this.rotationOverLifetime.y) : 0;
+            tempRot$1.z = incZ;
+            var rot = tempRot$1.addEulers(this.originalTransform.rotation, tempRot$1);
+            this.bindingItem.transform.setRotation(rot.x, rot.y, rot.z);
+            // this.animationStream.setCurveValue('transform', 'rotation.x', rot.x);
+            // this.animationStream.setCurveValue('transform', 'rotation.y', rot.y);
+            // this.animationStream.setCurveValue('transform', 'rotation.z', rot.z);
+        }
+        if (this.positionOverLifetime) {
+            var pos = tempPos;
+            calculateTranslation(pos, this, this.gravity, this.time, duration, this.originalTransform.position, this.velocity);
+            if (this.originalTransform.path) {
+                pos.add(this.originalTransform.path.getValue(life));
+            }
+            this.bindingItem.transform.setPosition(pos.x, pos.y, pos.z);
+            // this.animationStream.setCurveValue('transform', 'position.x', pos.x);
+            // this.animationStream.setCurveValue('transform', 'position.y', pos.y);
+            // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
         }
     };
-    // time 单位秒
-    TimelineComponent.prototype.setTime = function (time) {
-        this.time = time;
-    };
-    TimelineComponent.prototype.getTime = function () {
-        return this.time;
-    };
-    TimelineComponent.prototype.toLocalTime = function (time) {
-        var localTime = time - this.options.start;
-        var duration = this.options.duration;
-        if (localTime - duration > 0.001) {
-            if (this.options.endBehavior === END_BEHAVIOR_RESTART$1) {
-                localTime = localTime % duration;
+    AnimationClipPlayable.prototype.fromData = function (data) {
+        var _a;
+        var scale = this.bindingItem.transform.scale;
+        this.originalTransform = {
+            position: this.bindingItem.transform.position.clone(),
+            rotation: this.bindingItem.transform.getRotation().clone(),
+            // TODO 编辑器 scale 没有z轴控制
+            scale: new Vector3(scale.x, scale.y, scale.x),
+        };
+        var positionOverLifetime = data.positionOverLifetime;
+        var rotationOverLifetime = data.rotationOverLifetime;
+        var sizeOverLifetime = data.sizeOverLifetime;
+        // TODO: 没有 K 帧数据的不需要传 positionOverLifetime 空对象
+        if (positionOverLifetime && Object.keys(positionOverLifetime).length !== 0) {
+            this.positionOverLifetime = positionOverLifetime;
+            if (positionOverLifetime.path) {
+                this.originalTransform.path = createValueGetter(positionOverLifetime.path);
             }
-            else if (this.options.endBehavior === END_BEHAVIOR_FREEZE$1) {
-                localTime = Math.min(duration, localTime);
+            var linearVelEnable = positionOverLifetime.linearX || positionOverLifetime.linearY || positionOverLifetime.linearZ;
+            if (linearVelEnable) {
+                this.linearVelOverLifetime = {
+                    x: positionOverLifetime.linearX && createValueGetter(positionOverLifetime.linearX),
+                    y: positionOverLifetime.linearY && createValueGetter(positionOverLifetime.linearY),
+                    z: positionOverLifetime.linearZ && createValueGetter(positionOverLifetime.linearZ),
+                    asMovement: positionOverLifetime.asMovement,
+                    enabled: !!linearVelEnable,
+                };
+            }
+            var orbitalVelEnable = positionOverLifetime.orbitalX || positionOverLifetime.orbitalY || positionOverLifetime.orbitalZ;
+            if (orbitalVelEnable) {
+                this.orbitalVelOverLifetime = {
+                    x: positionOverLifetime.orbitalX && createValueGetter(positionOverLifetime.orbitalX),
+                    y: positionOverLifetime.orbitalY && createValueGetter(positionOverLifetime.orbitalY),
+                    z: positionOverLifetime.orbitalZ && createValueGetter(positionOverLifetime.orbitalZ),
+                    center: ensureVec3(positionOverLifetime.orbCenter),
+                    asRotation: positionOverLifetime.asRotation,
+                    enabled: !!orbitalVelEnable,
+                };
             }
+            this.speedOverLifetime = positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime);
         }
-        return localTime;
+        if (sizeOverLifetime) {
+            if (sizeOverLifetime.separateAxes) {
+                this.sizeSeparateAxes = true;
+                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.x || 1);
+                this.sizeYOverLifetime = createValueGetter(sizeOverLifetime.y || 1);
+                this.sizeZOverLifetime = createValueGetter(sizeOverLifetime.z || 1);
+            }
+            else {
+                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.size || 1);
+            }
+        }
+        if (rotationOverLifetime) {
+            this.rotationOverLifetime = {
+                asRotation: rotationOverLifetime.asRotation,
+                separateAxes: rotationOverLifetime.separateAxes,
+                z: createValueGetter(rotationOverLifetime.z || 0),
+            };
+            if (rotationOverLifetime.separateAxes) {
+                var rotLt = this.rotationOverLifetime;
+                rotLt.x = createValueGetter(rotationOverLifetime.x || 0);
+                rotLt.y = createValueGetter(rotationOverLifetime.y || 0);
+            }
+        }
+        this.gravity = Vector3.fromArray((positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.gravity) || []);
+        this.gravityModifier = createValueGetter((_a = positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.gravityOverLifetime) !== null && _a !== void 0 ? _a : 0);
+        this.direction = (positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.direction) ? Vector3.fromArray(positionOverLifetime.direction).normalize() : new Vector3();
+        this.startSpeed = (positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.startSpeed) || 0;
+        this.velocity = this.direction.clone();
+        this.velocity.multiply(this.startSpeed);
     };
-    TimelineComponent.prototype.createTrack = function (classConstructor, name) {
-        var newTrack = new classConstructor();
-        newTrack.bindingItem = this.item;
-        newTrack.id = (this.trackSeed++).toString();
-        newTrack.name = name ? name : 'Track' + newTrack.id;
-        this.tracks.push(newTrack);
-        return newTrack;
+    return AnimationClipPlayable;
+}(AnimationPlayable));
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var ActivationClipPlayable = /** @class */ (function (_super) {
+    __extends(ActivationClipPlayable, _super);
+    function ActivationClipPlayable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ActivationClipPlayable.prototype.onGraphStart = function () {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
     };
-    TimelineComponent.prototype.getTracks = function () {
-        return this.tracks;
+    ActivationClipPlayable.prototype.onPlayablePlay = function () {
+        this.bindingItem.transform.setValid(true);
+        this.showRendererComponents();
     };
-    TimelineComponent.prototype.findTrack = function (name) {
-        var e_11, _a;
+    ActivationClipPlayable.prototype.onPlayableDestroy = function () {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
+    };
+    ActivationClipPlayable.prototype.hideRendererComponents = function () {
+        var e_1, _a;
         try {
-            for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var track = _c.value;
-                if (track.name === name) {
-                    return track;
+            for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var rendererComponent = _c.value;
+                if (rendererComponent.enabled) {
+                    rendererComponent.enabled = false;
                 }
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_1) throw e_1.error; }
         }
     };
-    TimelineComponent.prototype.rebuildGraph = function () {
-        this.playableGraph = new PlayableGraph();
-        this.compileTracks(this.playableGraph);
-    };
-    TimelineComponent.prototype.compileTracks = function (graph) {
-        var e_12, _a;
+    ActivationClipPlayable.prototype.showRendererComponents = function () {
+        var e_2, _a;
         try {
-            for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var track = _c.value;
-                var trackMixPlayable = track.createPlayebleTree();
-                var trackOutput = track.createOutput();
-                graph.addOutput(trackOutput);
-                trackOutput.setSourcePlayeble(trackMixPlayable);
+            for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var rendererComponent = _c.value;
+                if (!rendererComponent.enabled) {
+                    rendererComponent.enabled = true;
+                }
             }
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_12) throw e_12.error; }
+            finally { if (e_2) throw e_2.error; }
         }
     };
-    TimelineComponent.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-        this.options = {
-            start: this.item.start,
-            duration: this.item.duration,
-            looping: this.item.endBehavior === END_BEHAVIOR_RESTART$1,
-            endBehavior: this.item.endBehavior || END_BEHAVIOR_DESTROY$1,
-        };
-        this.id = this.item.id;
-        this.name = this.item.name;
-    };
-    TimelineComponent.prototype.toData = function () {
-        _super.prototype.toData.call(this);
-    };
-    __decorate([
-        serialize()
-    ], TimelineComponent.prototype, "time", void 0);
-    return TimelineComponent;
-}(ItemBehaviour));
+    return ActivationClipPlayable;
+}(Playable));
 
 /**
  * @since 2.0.0
  * @internal
  */
-var Track = /** @class */ (function () {
-    function Track() {
-        this.clips = [];
-        this.clipSeed = 0;
+var TimelineComponent = /** @class */ (function (_super) {
+    __extends(TimelineComponent, _super);
+    function TimelineComponent(engine) {
+        var _this = _super.call(this, engine) || this;
+        _this.reusable = false;
+        _this.timelineStarted = false;
+        _this.playableGraph = new PlayableGraph();
+        /**
+         * 元素动画已经播放的时间
+         */
+        _this.time = 0;
+        _this.tracks = [];
+        _this.trackSeed = 0;
+        return _this;
     }
-    Track.prototype.createOutput = function () {
-        var output = new PlayableOutput();
-        return output;
-    };
-    /**
-     * 重写该方法以创建自定义混合器
-     */
-    Track.prototype.createMixerPlayable = function () {
-        return new Playable();
-    };
-    Track.prototype.createPlayebleTree = function () {
-        var e_1, _a;
-        var defaultMixPlayable = this.createMixerPlayable();
+    TimelineComponent.prototype.start = function () {
+        var e_1, _a, e_2, _b;
         try {
-            for (var _b = __values$1(this.clips), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var clip = _c.value;
-                defaultMixPlayable.connect(clip.playable);
+            // TODO TimelineClip 需要传入 start 和 duration 数据
+            for (var _c = __values$1(this.tracks), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var track = _d.value;
+                try {
+                    for (var _e = (e_2 = void 0, __values$1(track.getClips())), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var clip = _f.value;
+                        clip.start = this.item.start;
+                        clip.duration = this.item.duration;
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
             finally { if (e_1) throw e_1.error; }
         }
-        return defaultMixPlayable;
-    };
-    Track.prototype.createClip = function (classConstructor, name) {
-        var newClip = new TimelineClip();
-        newClip.playable = new classConstructor();
-        newClip.name = name ? name : 'TimelineClip' + newClip.id;
-        this.addClip(newClip);
-        return newClip;
-    };
-    Track.prototype.getClips = function () {
-        return this.clips;
+        this.compileTracks(this.playableGraph);
     };
-    Track.prototype.findClip = function (name) {
-        var e_2, _a;
-        try {
-            for (var _b = __values$1(this.clips), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var clip = _c.value;
-                if (clip.name === name) {
-                    return clip;
-                }
-            }
+    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
+    TimelineComponent.prototype.update = function (dt) {
+        var e_3, _a, e_4, _b, e_5, _c, e_6, _d, e_7, _e, e_8, _f, e_9, _g, e_10, _h;
+        if (this.item.stopped || !this.item.composition) {
+            return;
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
+        if (!this.timelineStarted) {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                for (var _j = __values$1(this.tracks), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var track = _k.value;
+                    try {
+                        for (var _l = (e_4 = void 0, __values$1(track.getClips())), _m = _l.next(); !_m.done; _m = _l.next()) {
+                            var clip = _m.value;
+                            clip.playable.onGraphStart();
+                        }
+                    }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    finally {
+                        try {
+                            if (_m && !_m.done && (_b = _l.return)) _b.call(_l);
+                        }
+                        finally { if (e_4) throw e_4.error; }
+                    }
+                }
             }
-            finally { if (e_2) throw e_2.error; }
-        }
-    };
-    Track.prototype.addClip = function (clip) {
-        clip.playable.bindingItem = this.bindingItem;
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
-    };
-    return Track;
-}());
-/**
- * @since 2.0.0
- * @internal
- */
-var TimelineClip = /** @class */ (function () {
-    function TimelineClip() {
-        this.start = 0;
-        this.duration = 0;
-    }
-    return TimelineClip;
-}());
-
-var singleSplits = [[0, 0, 1, 1, undefined]];
-var tempColor = [1, 1, 1, 1];
-var seed$7 = 0;
-var SpriteColorPlayable = /** @class */ (function (_super) {
-    __extends(SpriteColorPlayable, _super);
-    function SpriteColorPlayable() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.renderColor = [1, 1, 1, 1];
-        return _this;
-    }
-    SpriteColorPlayable.prototype.onPlayablePlay = function () {
-        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
-    };
-    SpriteColorPlayable.prototype.processFrame = function (dt) {
-        var colorInc = vecFill(tempColor, 1);
-        var colorChanged;
-        var life = this.time / this.bindingItem.duration;
-        var opacityOverLifetime = this.opacityOverLifetime;
-        var colorOverLifetime = this.colorOverLifetime;
-        if (colorOverLifetime) {
-            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
-            colorChanged = true;
-        }
-        if (opacityOverLifetime) {
-            colorInc[3] *= opacityOverLifetime.getValue(life);
-            colorChanged = true;
-        }
-        if (colorChanged) {
-            vecMulCombine(this.renderColor, colorInc, this.startColor);
-            this.spriteMaterial.getVector4('_Color').setFromArray(this.renderColor);
-        }
-    };
-    SpriteColorPlayable.prototype.fromData = function (clipData) {
-        var _a;
-        this.clipData = clipData;
-        var colorOverLifetime = clipData.colorOverLifetime;
-        if (colorOverLifetime) {
-            this.opacityOverLifetime = createValueGetter((_a = colorOverLifetime.opacity) !== null && _a !== void 0 ? _a : 1);
-            if (colorOverLifetime.color && colorOverLifetime.color[0] === ValueType$1.GRADIENT_COLOR) {
-                this.colorOverLifetime = colorStopsFromGradient(colorOverLifetime.color[1]);
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_a = _j.return)) _a.call(_j);
+                }
+                finally { if (e_3) throw e_3.error; }
             }
+            this.timelineStarted = true;
         }
-        this.startColor = clipData.startColor || [1, 1, 1, 1];
-        return this;
-    };
-    return SpriteColorPlayable;
-}(Playable));
-var SpriteComponent = /** @class */ (function (_super) {
-    __extends(SpriteComponent, _super);
-    function SpriteComponent(engine, props) {
-        var _this = _super.call(this, engine) || this;
-        _this.color = [1, 1, 1, 1];
-        _this.visible = true;
-        _this.getHitTestParams = function (force) {
-            var _a;
-            var ui = _this.interaction;
-            if ((force || ui)) {
-                var area = _this.getBoundingBox();
-                if (area) {
-                    return {
-                        behavior: ((_a = _this.interaction) === null || _a === void 0 ? void 0 : _a.behavior) || 0,
-                        type: area.type,
-                        triangles: area.area,
-                        backfaceCulling: _this.renderer.side === SideMode$1.FRONT,
-                    };
+        var now = this.time;
+        // 判断动画是否开始
+        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
+            this.item.delaying = false;
+            try {
+                for (var _o = __values$1(this.tracks), _p = _o.next(); !_p.done; _p = _o.next()) {
+                    var track = _p.value;
+                    try {
+                        for (var _q = (e_6 = void 0, __values$1(track.getClips())), _r = _q.next(); !_r.done; _r = _q.next()) {
+                            var clip = _r.value;
+                            clip.playable.onPlayablePlay();
+                        }
+                    }
+                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                    finally {
+                        try {
+                            if (_r && !_r.done && (_d = _q.return)) _d.call(_q);
+                        }
+                        finally { if (e_6) throw e_6.error; }
+                    }
                 }
             }
-        };
-        if (props) {
-            _this.fromData(props);
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_p && !_p.done && (_c = _o.return)) _c.call(_o);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
         }
-        return _this;
-    }
-    /**
-     * 设置当前 Mesh 的可见性。
-     * @param visible - true：可见，false：不可见
-     */
-    SpriteComponent.prototype.setVisible = function (visible) {
-        this.visible = visible;
-    };
-    /**
-     * 获取当前 Mesh 的可见性。
-     */
-    SpriteComponent.prototype.getVisible = function () {
-        return this.visible;
-    };
-    SpriteComponent.prototype.render = function (renderer) {
-        if (!this.getVisible()) {
-            return;
+        // 判断动画是否结束
+        var ended;
+        if (VFXItem.isParticle(this.item)) {
+            ended = this.item.isEnded(now) && this.item.content.destoryed;
         }
-        var material = this.material;
-        var geo = this.geometry;
-        if (renderer.renderingData.currentFrame.globalUniforms) {
-            renderer.setGlobalMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
+        else {
+            ended = this.item.isEnded(now);
         }
-        this.material.setVector2('_Size', this.transform.size);
-        // 执行 Geometry 的数据刷新
-        geo.flush();
-        renderer.drawGeometry(geo, material);
-    };
-    SpriteComponent.prototype.start = function () {
-        this.priority = this.item.listIndex;
-        this.timelineComponent = this.item.getComponent(TimelineComponent);
-        this.item.getHitTestParams = this.getHitTestParams;
-    };
-    SpriteComponent.prototype.update = function (dt) {
-        var time = this.timelineComponent.getTime();
-        var duration = this.item.duration;
-        var life = Math.min(Math.max(time / duration, 0.0), 1.0);
-        var ta = this.textureSheetAnimation;
-        if (ta) {
-            var total = ta.total || (ta.row * ta.col);
-            var texRectX = 0;
-            var texRectY = 0;
-            var texRectW = 1;
-            var texRectH = 1;
-            var flip = void 0;
-            if (this.splits) {
-                var sp = this.splits[0];
-                flip = sp[4];
-                texRectX = sp[0];
-                texRectY = sp[1];
-                if (flip) {
-                    texRectW = sp[3];
-                    texRectH = sp[2];
-                }
-                else {
-                    texRectW = sp[2];
-                    texRectH = sp[3];
+        if (ended) {
+            var endBehavior = this.item.endBehavior;
+            if (!this.item.ended) {
+                this.item.ended = true;
+                this.item.onEnd();
+                if (endBehavior === END_BEHAVIOR_DESTROY$1) {
+                    try {
+                        for (var _s = __values$1(this.tracks), _t = _s.next(); !_t.done; _t = _s.next()) {
+                            var track = _t.value;
+                            try {
+                                for (var _u = (e_8 = void 0, __values$1(track.getClips())), _v = _u.next(); !_v.done; _v = _u.next()) {
+                                    var clip = _v.value;
+                                    clip.playable.onPlayableDestroy();
+                                }
+                            }
+                            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                            finally {
+                                try {
+                                    if (_v && !_v.done && (_f = _u.return)) _f.call(_u);
+                                }
+                                finally { if (e_8) throw e_8.error; }
+                            }
+                        }
+                    }
+                    catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                    finally {
+                        try {
+                            if (_t && !_t.done && (_e = _s.return)) _e.call(_s);
+                        }
+                        finally { if (e_7) throw e_7.error; }
+                    }
+                    this.item.delaying = true;
+                    if (!this.item.reusable && !this.reusable) {
+                        this.item.dispose();
+                        return;
+                    }
                 }
             }
-            var dx = void 0, dy = void 0;
-            if (flip) {
-                dx = 1 / ta.row * texRectW;
-                dy = 1 / ta.col * texRectH;
+        }
+        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
+        // 在生命周期内更新动画
+        if (!this.item.delaying) {
+            var lifetime = this.time / this.item.duration;
+            this.item.lifetime = lifetime;
+            try {
+                for (var _w = __values$1(this.tracks), _x = _w.next(); !_x.done; _x = _w.next()) {
+                    var track = _x.value;
+                    try {
+                        for (var _y = (e_10 = void 0, __values$1(track.getClips())), _z = _y.next(); !_z.done; _z = _y.next()) {
+                            var clip = _z.value;
+                            clip.playable.setTime(this.time);
+                        }
+                    }
+                    catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                    finally {
+                        try {
+                            if (_z && !_z.done && (_h = _y.return)) _h.call(_y);
+                        }
+                        finally { if (e_10) throw e_10.error; }
+                    }
+                }
             }
-            else {
-                dx = 1 / ta.col * texRectW;
-                dy = 1 / ta.row * texRectH;
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            finally {
+                try {
+                    if (_x && !_x.done && (_g = _w.return)) _g.call(_w);
+                }
+                finally { if (e_9) throw e_9.error; }
             }
-            var texOffset = void 0;
-            if (ta.animate) {
-                var frameIndex = Math.round(life * (total - 1));
-                var yIndex = Math.floor(frameIndex / ta.col);
-                var xIndex = frameIndex - yIndex * ta.col;
-                texOffset = flip ? [dx * yIndex, dy * (ta.col - xIndex)] : [dx * xIndex, dy * (1 + yIndex)];
+            this.playableGraph.evaluate(dt);
+        }
+    };
+    // time 单位秒
+    TimelineComponent.prototype.setTime = function (time) {
+        this.time = time;
+    };
+    TimelineComponent.prototype.getTime = function () {
+        return this.time;
+    };
+    TimelineComponent.prototype.toLocalTime = function (time) {
+        var localTime = time - this.options.start;
+        var duration = this.options.duration;
+        if (localTime - duration > 0.001) {
+            if (this.options.endBehavior === END_BEHAVIOR_RESTART$1) {
+                localTime = localTime % duration;
             }
-            else {
-                texOffset = [0, dy];
+            else if (this.options.endBehavior === END_BEHAVIOR_FREEZE$1) {
+                localTime = Math.min(duration, localTime);
             }
-            this.material.getVector4('_TexOffset').setFromArray([
-                texRectX + texOffset[0],
-                texRectH + texRectY - texOffset[1],
-                dx, dy,
-            ]);
         }
+        return localTime;
     };
-    SpriteComponent.prototype.onDestroy = function () {
-        if (this.item && this.item.composition) {
-            this.item.composition.destroyTextures(this.getTextures());
-        }
+    TimelineComponent.prototype.createTrack = function (classConstructor, name) {
+        var newTrack = new classConstructor();
+        newTrack.bindingItem = this.item;
+        newTrack.id = (this.trackSeed++).toString();
+        newTrack.name = name ? name : 'Track' + newTrack.id;
+        this.tracks.push(newTrack);
+        return newTrack;
     };
-    SpriteComponent.prototype.getItemInitData = function (item, idx, pointStartIndex, textureIndex) {
-        var geoData = item.geoData;
-        if (!geoData) {
-            geoData = item.geoData = this.getItemGeometryData(item, idx);
+    TimelineComponent.prototype.getTracks = function () {
+        return this.tracks;
+    };
+    TimelineComponent.prototype.findTrack = function (name) {
+        var e_11, _a;
+        try {
+            for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var track = _c.value;
+                if (track.name === name) {
+                    return track;
+                }
+            }
         }
-        var index = geoData.index;
-        var idxCount = index.length;
-        // @ts-expect-error
-        var indexData = this.wireframe ? new Uint8Array([0, 1, 1, 3, 2, 3, 2, 0]) : new index.constructor(idxCount);
-        if (!this.wireframe) {
-            for (var i = 0; i < idxCount; i++) {
-                indexData[i] = pointStartIndex + index[i];
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
+            finally { if (e_11) throw e_11.error; }
         }
-        return {
-            atlasOffset: geoData.atlasOffset,
-            index: indexData,
-        };
     };
-    SpriteComponent.prototype.setItem = function () {
-        var textures = [];
-        var texture = this.renderer.texture;
-        if (texture) {
-            addItem(textures, texture);
-        }
-        texture = this.renderer.texture;
-        var textureIndex = texture ? textures.indexOf(texture) : -1;
-        var data = this.getItemInitData(this, 0, 0, textureIndex);
-        var renderer = this.renderer;
-        var texParams = this.material.getVector4('_TexParams');
-        texParams.x = renderer.occlusion ? +(renderer.transparentOcclusion) : 1;
-        texParams.y = +this.preMultiAlpha;
-        texParams.z = renderer.renderMode;
-        var attributes = {
-            atlasOffset: new Float32Array(data.atlasOffset.length),
-            index: new Uint16Array(data.index.length),
-        };
-        attributes.atlasOffset.set(data.atlasOffset);
-        attributes.index.set(data.index);
-        var _a = this, material = _a.material, geometry = _a.geometry;
-        var indexData = attributes.index;
-        geometry.setIndexData(indexData);
-        geometry.setAttributeData('atlasOffset', attributes.atlasOffset);
-        geometry.setDrawCount(data.index.length);
-        for (var i = 0; i < textures.length; i++) {
-            var texture_1 = textures[i];
-            material.setTexture('uSampler' + i, texture_1);
+    TimelineComponent.prototype.rebuildGraph = function () {
+        this.playableGraph = new PlayableGraph();
+        this.compileTracks(this.playableGraph);
+    };
+    TimelineComponent.prototype.compileTracks = function (graph) {
+        var e_12, _a;
+        try {
+            for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var track = _c.value;
+                var trackMixPlayable = track.createPlayebleTree();
+                var trackOutput = track.createOutput();
+                graph.addOutput(trackOutput);
+                trackOutput.setSourcePlayeble(trackMixPlayable);
+            }
         }
-        // FIXME: 内存泄漏的临时方案，后面再调整
-        var emptyTexture = this.emptyTexture;
-        for (var k = textures.length; k < exports.maxSpriteMeshItemCount; k++) {
-            material.setTexture('uSampler' + k, emptyTexture);
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_12) throw e_12.error; }
         }
     };
-    SpriteComponent.prototype.createGeometry = function (mode) {
-        var maxVertex = 12 * this.splits.length;
-        return Geometry.create(this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5, 0.5, 0,
-                        -0.5, -0.5, 0,
-                        0.5, 0.5, 0,
-                        0.5, -0.5, 0, //右下
-                    ]),
-                },
-                atlasOffset: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array(0),
-                },
-            },
-            indices: { data: new Uint16Array(0), releasable: true },
-            mode: mode,
-            maxVertex: maxVertex,
-        });
-    };
-    SpriteComponent.prototype.createMaterial = function (renderInfo, count) {
-        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
-        var materialProps = {
-            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1),
-        };
-        this.preMultiAlpha = getPreMultiAlpha(blending);
-        var material = Material.create(this.engine, materialProps);
-        var states = {
-            side: side,
-            blending: true,
-            blendMode: blending,
-            mask: mask,
-            maskMode: maskMode,
-            depthTest: true,
-            depthMask: occlusion,
+    TimelineComponent.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        this.options = {
+            start: this.item.start,
+            duration: this.item.duration,
+            looping: this.item.endBehavior === END_BEHAVIOR_RESTART$1,
+            endBehavior: this.item.endBehavior || END_BEHAVIOR_DESTROY$1,
         };
-        material.blending = states.blending;
-        material.stencilRef = states.mask !== undefined ? [states.mask, states.mask] : undefined;
-        material.depthTest = states.depthTest;
-        material.depthMask = states.depthMask;
-        setBlendMode(material, states.blendMode);
-        setMaskMode(material, states.maskMode);
-        setSideMode(material, states.side);
-        if (!material.hasUniform('_Color')) {
-            material.setVector4('_Color', new Vector4$1(0, 0, 0, 1));
+        this.id = this.item.id;
+        this.name = this.item.name;
+        var activationTrack = this.createTrack(Track, 'ActivationTrack');
+        activationTrack.createClip(ActivationClipPlayable, 'ActivationTimelineClip');
+    };
+    TimelineComponent.prototype.toData = function () {
+        _super.prototype.toData.call(this);
+    };
+    __decorate([
+        serialize()
+    ], TimelineComponent.prototype, "time", void 0);
+    return TimelineComponent;
+}(ItemBehaviour));
+
+var singleSplits = [[0, 0, 1, 1, undefined]];
+var tempColor = [1, 1, 1, 1];
+var seed$6 = 0;
+var SpriteColorPlayable = /** @class */ (function (_super) {
+    __extends(SpriteColorPlayable, _super);
+    function SpriteColorPlayable() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderColor = [1, 1, 1, 1];
+        return _this;
+    }
+    SpriteColorPlayable.prototype.onPlayablePlay = function () {
+        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
+    };
+    SpriteColorPlayable.prototype.processFrame = function (dt) {
+        var colorInc = vecFill(tempColor, 1);
+        var colorChanged;
+        var life = this.time / this.bindingItem.duration;
+        var opacityOverLifetime = this.opacityOverLifetime;
+        var colorOverLifetime = this.colorOverLifetime;
+        if (colorOverLifetime) {
+            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
+            colorChanged = true;
         }
-        if (!material.hasUniform('_TexOffset')) {
-            material.setVector4('_TexOffset', new Vector4$1());
+        if (opacityOverLifetime) {
+            colorInc[3] *= opacityOverLifetime.getValue(life);
+            colorChanged = true;
         }
-        if (!material.hasUniform('_TexParams')) {
-            material.setVector4('_TexParams', new Vector4$1());
+        if (colorChanged) {
+            vecMulCombine(this.renderColor, colorInc, this.startColor);
+            this.spriteMaterial.getVector4('_Color').setFromArray(this.renderColor);
         }
-        return material;
     };
-    SpriteComponent.prototype.getItemGeometryData = function (item, aIndex) {
-        var splits = item.splits, renderer = item.renderer, textureSheetAnimation = item.textureSheetAnimation;
-        var sx = 1, sy = 1;
-        if (renderer.shape) {
-            var _a = renderer.shape, index_1 = _a.index, aPoint = _a.aPoint;
-            var point = new Float32Array(aPoint);
-            var position_1 = [];
-            var atlasOffset_1 = [];
-            for (var i = 0; i < point.length; i += 6) {
-                point[i] *= sx;
-                point[i + 1] *= sy;
-                atlasOffset_1.push(aPoint[i + 2], aPoint[i + 3]);
-                position_1.push(point[i], point[i + 1], 0.0);
-            }
-            this.geometry.setAttributeData('aPos', new Float32Array(position_1));
-            return {
-                index: index_1,
-                atlasOffset: atlasOffset_1,
-            };
-        }
-        var originData = [-.5, .5, -.5, -.5, .5, .5, .5, -.5];
-        var atlasOffset = [];
-        var index = [];
-        var col = 2;
-        var row = 2;
-        if (splits.length === 1) {
-            col = 1;
-            row = 1;
-        }
-        var position = [];
-        for (var x = 0; x < col; x++) {
-            for (var y = 0; y < row; y++) {
-                var base = (y * 2 + x) * 4;
-                // @ts-expect-error
-                var split = textureSheetAnimation ? [0, 0, 1, 1, splits[0][4]] : splits[y * 2 + x];
-                var texOffset = split[4] ? [0, 0, 1, 0, 0, 1, 1, 1] : [0, 1, 0, 0, 1, 1, 1, 0];
-                var dw = ((x + x + 1) / col - 1) / 2;
-                var dh = ((y + y + 1) / row - 1) / 2;
-                var tox = split[0];
-                var toy = split[1];
-                var tsx = split[4] ? split[3] : split[2];
-                var tsy = split[4] ? split[2] : split[3];
-                var origin_1 = [
-                    originData[0] / col + dw,
-                    originData[1] / row + dh,
-                    originData[2] / col + dw,
-                    originData[3] / row + dh,
-                    originData[4] / col + dw,
-                    originData[5] / row + dh,
-                    originData[6] / col + dw,
-                    originData[7] / row + dh,
-                ];
-                atlasOffset.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
-                position.push((origin_1[0]) * sx, (origin_1[1]) * sy, 0.0, (origin_1[2]) * sx, (origin_1[3]) * sy, 0.0, (origin_1[4]) * sx, (origin_1[5]) * sy, 0.0, (origin_1[6]) * sx, (origin_1[7]) * sy, 0.0);
-                index.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
+    SpriteColorPlayable.prototype.fromData = function (clipData) {
+        var _a;
+        this.clipData = clipData;
+        var colorOverLifetime = clipData.colorOverLifetime;
+        if (colorOverLifetime) {
+            this.opacityOverLifetime = createValueGetter((_a = colorOverLifetime.opacity) !== null && _a !== void 0 ? _a : 1);
+            if (colorOverLifetime.color && colorOverLifetime.color[0] === ValueType$1.GRADIENT_COLOR) {
+                this.colorOverLifetime = colorStopsFromGradient(colorOverLifetime.color[1]);
             }
         }
-        this.geometry.setAttributeData('aPos', new Float32Array(position));
-        return { index: index, atlasOffset: atlasOffset };
+        this.startColor = clipData.startColor || [1, 1, 1, 1];
+        return this;
     };
-    SpriteComponent.prototype.getTextures = function () {
-        var ret = [];
-        var tex = this.renderer.texture;
-        if (tex) {
-            ret.push(tex);
+    return SpriteColorPlayable;
+}(Playable));
+var SpriteComponent = /** @class */ (function (_super) {
+    __extends(SpriteComponent, _super);
+    function SpriteComponent(engine, props) {
+        var _this = _super.call(this, engine) || this;
+        _this.color = [1, 1, 1, 1];
+        _this.visible = true;
+        _this.getHitTestParams = function (force) {
+            var _a;
+            var ui = _this.interaction;
+            if ((force || ui)) {
+                var area = _this.getBoundingBox();
+                if (area) {
+                    return {
+                        behavior: ((_a = _this.interaction) === null || _a === void 0 ? void 0 : _a.behavior) || 0,
+                        type: area.type,
+                        triangles: area.area,
+                        backfaceCulling: _this.renderer.side === SideMode$1.FRONT,
+                    };
+                }
+            }
+        };
+        if (props) {
+            _this.fromData(props);
         }
-        return ret;
+        return _this;
+    }
+    /**
+     * 设置当前 Mesh 的可见性。
+     * @param visible - true：可见，false：不可见
+     */
+    SpriteComponent.prototype.setVisible = function (visible) {
+        this.visible = visible;
     };
     /**
-     * 获取图层包围盒的类型和世界坐标
-     * @returns
+     * 获取当前 Mesh 的可见性。
      */
-    SpriteComponent.prototype.getBoundingBox = function () {
-        if (!this.item) {
+    SpriteComponent.prototype.getVisible = function () {
+        return this.visible;
+    };
+    SpriteComponent.prototype.render = function (renderer) {
+        if (!this.getVisible()) {
             return;
         }
-        var worldMatrix = this.transform.getWorldMatrix();
-        var triangles = trianglesFromRect(Vector3.ZERO, 1 / 2, 1 / 2);
-        triangles.forEach(function (triangle) {
-            worldMatrix.transformPoint(triangle.p0);
-            worldMatrix.transformPoint(triangle.p1);
-            worldMatrix.transformPoint(triangle.p2);
-        });
-        return {
-            type: exports.HitTestType.triangle,
-            area: triangles,
-        };
-    };
-    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
-    SpriteComponent.prototype.fromData = function (data) {
-        var _a, _b, _c, _d, _e, _f;
-        _super.prototype.fromData.call(this, data);
-        var interaction = data.interaction, options = data.options, _g = data.listIndex, listIndex = _g === void 0 ? 0 : _g;
-        var renderer = data.renderer;
-        if (!renderer) {
-            //@ts-expect-error
-            renderer = {};
+        var material = this.material;
+        var geo = this.geometry;
+        if (renderer.renderingData.currentFrame.globalUniforms) {
+            renderer.setGlobalMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
         }
-        this.interaction = interaction;
-        this.renderer = {
-            renderMode: (_a = renderer.renderMode) !== null && _a !== void 0 ? _a : RenderMode$1.BILLBOARD,
-            blending: (_b = renderer.blending) !== null && _b !== void 0 ? _b : BlendingMode$1.ALPHA,
-            texture: (_c = renderer.texture) !== null && _c !== void 0 ? _c : this.engine.emptyTexture,
-            occlusion: !!(renderer.occlusion),
-            transparentOcclusion: !!(renderer.transparentOcclusion) || (renderer.maskMode === MaskMode$1.MASK),
-            side: (_d = renderer.side) !== null && _d !== void 0 ? _d : SideMode$1.DOUBLE,
-            shape: renderer.shape,
-            mask: (_e = renderer.mask) !== null && _e !== void 0 ? _e : 0,
-            maskMode: (_f = renderer.maskMode) !== null && _f !== void 0 ? _f : MaskMode$1.NONE,
-            order: listIndex,
-        };
-        this.emptyTexture = this.engine.emptyTexture;
-        this.splits = data.splits || singleSplits;
-        this.textureSheetAnimation = data.textureSheetAnimation;
-        this.cachePrefix = '-';
-        this.renderInfo = getImageItemRenderInfo(this);
-        var geometry = this.createGeometry(glContext.TRIANGLES);
-        var material = this.createMaterial(this.renderInfo, 2);
-        this.worldMatrix = Matrix4$1.fromIdentity();
-        this.material = material;
-        this.geometry = geometry;
-        this.name = 'MSprite' + seed$7++;
-        var startColor = options.startColor || [1, 1, 1, 1];
-        this.material.setVector4('_Color', new Vector4$1().setFromArray(startColor));
-        this.material.setVector4('_TexOffset', new Vector4$1().setFromArray([0, 0, 1, 1]));
-        this.setItem();
-        // 添加K帧动画
-        var colorTrack = this.item.getComponent(TimelineComponent).createTrack(Track, 'SpriteColorTrack');
-        colorTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData({ colorOverLifetime: data.colorOverLifetime, startColor: data.options.startColor });
-    };
-    SpriteComponent.prototype.toData = function () {
-        _super.prototype.toData.call(this);
+        this.material.setVector2('_Size', this.transform.size);
+        // 执行 Geometry 的数据刷新
+        geo.flush();
+        renderer.drawGeometry(geo, material);
     };
-    SpriteComponent = __decorate([
+    SpriteComponent.prototype.start = function () {
+        this.priority = this.item.listIndex;
+        this.timelineComponent = this.item.getComponent(TimelineComponent);
+        this.item.getHitTestParams = this.getHitTestParams;
+    };
+    SpriteComponent.prototype.update = function (dt) {
+        var time = this.timelineComponent.getTime();
+        var duration = this.item.duration;
+        var life = Math.min(Math.max(time / duration, 0.0), 1.0);
+        var ta = this.textureSheetAnimation;
+        if (ta) {
+            var total = ta.total || (ta.row * ta.col);
+            var texRectX = 0;
+            var texRectY = 0;
+            var texRectW = 1;
+            var texRectH = 1;
+            var flip = void 0;
+            if (this.splits) {
+                var sp = this.splits[0];
+                flip = sp[4];
+                texRectX = sp[0];
+                texRectY = sp[1];
+                if (flip) {
+                    texRectW = sp[3];
+                    texRectH = sp[2];
+                }
+                else {
+                    texRectW = sp[2];
+                    texRectH = sp[3];
+                }
+            }
+            var dx = void 0, dy = void 0;
+            if (flip) {
+                dx = 1 / ta.row * texRectW;
+                dy = 1 / ta.col * texRectH;
+            }
+            else {
+                dx = 1 / ta.col * texRectW;
+                dy = 1 / ta.row * texRectH;
+            }
+            var texOffset = void 0;
+            if (ta.animate) {
+                var frameIndex = Math.round(life * (total - 1));
+                var yIndex = Math.floor(frameIndex / ta.col);
+                var xIndex = frameIndex - yIndex * ta.col;
+                texOffset = flip ? [dx * yIndex, dy * (ta.col - xIndex)] : [dx * xIndex, dy * (1 + yIndex)];
+            }
+            else {
+                texOffset = [0, dy];
+            }
+            this.material.getVector4('_TexOffset').setFromArray([
+                texRectX + texOffset[0],
+                texRectH + texRectY - texOffset[1],
+                dx, dy,
+            ]);
+        }
+    };
+    SpriteComponent.prototype.onDestroy = function () {
+        if (this.item && this.item.composition) {
+            this.item.composition.destroyTextures(this.getTextures());
+        }
+    };
+    SpriteComponent.prototype.getItemInitData = function (item, idx, pointStartIndex, textureIndex) {
+        var geoData = item.geoData;
+        if (!geoData) {
+            geoData = item.geoData = this.getItemGeometryData(item, idx);
+        }
+        var index = geoData.index;
+        var idxCount = index.length;
+        // @ts-expect-error
+        var indexData = this.wireframe ? new Uint8Array([0, 1, 1, 3, 2, 3, 2, 0]) : new index.constructor(idxCount);
+        if (!this.wireframe) {
+            for (var i = 0; i < idxCount; i++) {
+                indexData[i] = pointStartIndex + index[i];
+            }
+        }
+        return {
+            atlasOffset: geoData.atlasOffset,
+            index: indexData,
+        };
+    };
+    SpriteComponent.prototype.setItem = function () {
+        var textures = [];
+        var texture = this.renderer.texture;
+        if (texture) {
+            addItem(textures, texture);
+        }
+        texture = this.renderer.texture;
+        var textureIndex = texture ? textures.indexOf(texture) : -1;
+        var data = this.getItemInitData(this, 0, 0, textureIndex);
+        var renderer = this.renderer;
+        var texParams = this.material.getVector4('_TexParams');
+        texParams.x = renderer.occlusion ? +(renderer.transparentOcclusion) : 1;
+        texParams.y = +this.preMultiAlpha;
+        texParams.z = renderer.renderMode;
+        var attributes = {
+            atlasOffset: new Float32Array(data.atlasOffset.length),
+            index: new Uint16Array(data.index.length),
+        };
+        attributes.atlasOffset.set(data.atlasOffset);
+        attributes.index.set(data.index);
+        var _a = this, material = _a.material, geometry = _a.geometry;
+        var indexData = attributes.index;
+        geometry.setIndexData(indexData);
+        geometry.setAttributeData('atlasOffset', attributes.atlasOffset);
+        geometry.setDrawCount(data.index.length);
+        for (var i = 0; i < textures.length; i++) {
+            var texture_1 = textures[i];
+            material.setTexture('uSampler' + i, texture_1);
+        }
+        // FIXME: 内存泄漏的临时方案，后面再调整
+        var emptyTexture = this.emptyTexture;
+        for (var k = textures.length; k < exports.maxSpriteMeshItemCount; k++) {
+            material.setTexture('uSampler' + k, emptyTexture);
+        }
+    };
+    SpriteComponent.prototype.createGeometry = function (mode) {
+        var maxVertex = 12 * this.splits.length;
+        return Geometry.create(this.engine, {
+            attributes: {
+                aPos: {
+                    type: glContext.FLOAT,
+                    size: 3,
+                    data: new Float32Array([
+                        -0.5, 0.5, 0,
+                        -0.5, -0.5, 0,
+                        0.5, 0.5, 0,
+                        0.5, -0.5, 0, //右下
+                    ]),
+                },
+                atlasOffset: {
+                    size: 2,
+                    offset: 0,
+                    releasable: true,
+                    type: glContext.FLOAT,
+                    data: new Float32Array(0),
+                },
+            },
+            indices: { data: new Uint16Array(0), releasable: true },
+            mode: mode,
+            maxVertex: maxVertex,
+        });
+    };
+    SpriteComponent.prototype.createMaterial = function (renderInfo, count) {
+        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
+        var materialProps = {
+            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1),
+        };
+        this.preMultiAlpha = getPreMultiAlpha(blending);
+        var material = Material.create(this.engine, materialProps);
+        var states = {
+            side: side,
+            blending: true,
+            blendMode: blending,
+            mask: mask,
+            maskMode: maskMode,
+            depthTest: true,
+            depthMask: occlusion,
+        };
+        material.blending = states.blending;
+        material.stencilRef = states.mask !== undefined ? [states.mask, states.mask] : undefined;
+        material.depthTest = states.depthTest;
+        material.depthMask = states.depthMask;
+        setBlendMode(material, states.blendMode);
+        setMaskMode(material, states.maskMode);
+        setSideMode(material, states.side);
+        if (!material.hasUniform('_Color')) {
+            material.setVector4('_Color', new Vector4$1(0, 0, 0, 1));
+        }
+        if (!material.hasUniform('_TexOffset')) {
+            material.setVector4('_TexOffset', new Vector4$1());
+        }
+        if (!material.hasUniform('_TexParams')) {
+            material.setVector4('_TexParams', new Vector4$1());
+        }
+        return material;
+    };
+    SpriteComponent.prototype.getItemGeometryData = function (item, aIndex) {
+        var splits = item.splits, renderer = item.renderer, textureSheetAnimation = item.textureSheetAnimation;
+        var sx = 1, sy = 1;
+        if (renderer.shape) {
+            var _a = renderer.shape, index_1 = _a.index, aPoint = _a.aPoint;
+            var point = new Float32Array(aPoint);
+            var position_1 = [];
+            var atlasOffset_1 = [];
+            for (var i = 0; i < point.length; i += 6) {
+                point[i] *= sx;
+                point[i + 1] *= sy;
+                atlasOffset_1.push(aPoint[i + 2], aPoint[i + 3]);
+                position_1.push(point[i], point[i + 1], 0.0);
+            }
+            this.geometry.setAttributeData('aPos', new Float32Array(position_1));
+            return {
+                index: index_1,
+                atlasOffset: atlasOffset_1,
+            };
+        }
+        var originData = [-.5, .5, -.5, -.5, .5, .5, .5, -.5];
+        var atlasOffset = [];
+        var index = [];
+        var col = 2;
+        var row = 2;
+        if (splits.length === 1) {
+            col = 1;
+            row = 1;
+        }
+        var position = [];
+        for (var x = 0; x < col; x++) {
+            for (var y = 0; y < row; y++) {
+                var base = (y * 2 + x) * 4;
+                // @ts-expect-error
+                var split = textureSheetAnimation ? [0, 0, 1, 1, splits[0][4]] : splits[y * 2 + x];
+                var texOffset = split[4] ? [0, 0, 1, 0, 0, 1, 1, 1] : [0, 1, 0, 0, 1, 1, 1, 0];
+                var dw = ((x + x + 1) / col - 1) / 2;
+                var dh = ((y + y + 1) / row - 1) / 2;
+                var tox = split[0];
+                var toy = split[1];
+                var tsx = split[4] ? split[3] : split[2];
+                var tsy = split[4] ? split[2] : split[3];
+                var origin_1 = [
+                    originData[0] / col + dw,
+                    originData[1] / row + dh,
+                    originData[2] / col + dw,
+                    originData[3] / row + dh,
+                    originData[4] / col + dw,
+                    originData[5] / row + dh,
+                    originData[6] / col + dw,
+                    originData[7] / row + dh,
+                ];
+                atlasOffset.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
+                position.push((origin_1[0]) * sx, (origin_1[1]) * sy, 0.0, (origin_1[2]) * sx, (origin_1[3]) * sy, 0.0, (origin_1[4]) * sx, (origin_1[5]) * sy, 0.0, (origin_1[6]) * sx, (origin_1[7]) * sy, 0.0);
+                index.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
+            }
+        }
+        this.geometry.setAttributeData('aPos', new Float32Array(position));
+        return { index: index, atlasOffset: atlasOffset };
+    };
+    SpriteComponent.prototype.getTextures = function () {
+        var ret = [];
+        var tex = this.renderer.texture;
+        if (tex) {
+            ret.push(tex);
+        }
+        return ret;
+    };
+    /**
+     * 获取图层包围盒的类型和世界坐标
+     * @returns
+     */
+    SpriteComponent.prototype.getBoundingBox = function () {
+        if (!this.item) {
+            return;
+        }
+        var worldMatrix = this.transform.getWorldMatrix();
+        var triangles = trianglesFromRect(Vector3.ZERO, 1 / 2, 1 / 2);
+        triangles.forEach(function (triangle) {
+            worldMatrix.transformPoint(triangle.p0);
+            worldMatrix.transformPoint(triangle.p1);
+            worldMatrix.transformPoint(triangle.p2);
+        });
+        return {
+            type: exports.HitTestType.triangle,
+            area: triangles,
+        };
+    };
+    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
+    SpriteComponent.prototype.fromData = function (data) {
+        var _a, _b, _c, _d, _e, _f;
+        _super.prototype.fromData.call(this, data);
+        var interaction = data.interaction, options = data.options, _g = data.listIndex, listIndex = _g === void 0 ? 0 : _g;
+        var renderer = data.renderer;
+        if (!renderer) {
+            //@ts-expect-error
+            renderer = {};
+        }
+        this.interaction = interaction;
+        this.renderer = {
+            renderMode: (_a = renderer.renderMode) !== null && _a !== void 0 ? _a : RenderMode$1.BILLBOARD,
+            blending: (_b = renderer.blending) !== null && _b !== void 0 ? _b : BlendingMode$1.ALPHA,
+            texture: (_c = renderer.texture) !== null && _c !== void 0 ? _c : this.engine.emptyTexture,
+            occlusion: !!(renderer.occlusion),
+            transparentOcclusion: !!(renderer.transparentOcclusion) || (renderer.maskMode === MaskMode$1.MASK),
+            side: (_d = renderer.side) !== null && _d !== void 0 ? _d : SideMode$1.DOUBLE,
+            shape: renderer.shape,
+            mask: (_e = renderer.mask) !== null && _e !== void 0 ? _e : 0,
+            maskMode: (_f = renderer.maskMode) !== null && _f !== void 0 ? _f : MaskMode$1.NONE,
+            order: listIndex,
+        };
+        this.emptyTexture = this.engine.emptyTexture;
+        this.splits = data.splits || singleSplits;
+        this.textureSheetAnimation = data.textureSheetAnimation;
+        this.cachePrefix = '-';
+        this.renderInfo = getImageItemRenderInfo(this);
+        var geometry = this.createGeometry(glContext.TRIANGLES);
+        var material = this.createMaterial(this.renderInfo, 2);
+        this.worldMatrix = Matrix4$1.fromIdentity();
+        this.material = material;
+        this.geometry = geometry;
+        this.name = 'MSprite' + seed$6++;
+        var startColor = options.startColor || [1, 1, 1, 1];
+        this.material.setVector4('_Color', new Vector4$1().setFromArray(startColor));
+        this.material.setVector4('_TexOffset', new Vector4$1().setFromArray([0, 0, 1, 1]));
+        this.setItem();
+        // 添加K帧动画
+        var colorTrack = this.item.getComponent(TimelineComponent).createTrack(Track, 'SpriteColorTrack');
+        colorTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData({ colorOverLifetime: data.colorOverLifetime, startColor: data.options.startColor });
+    };
+    SpriteComponent.prototype.toData = function () {
+        _super.prototype.toData.call(this);
+    };
+    SpriteComponent = __decorate([
         effectsClass(exports.DataType.SpriteComponent)
     ], SpriteComponent);
     return SpriteComponent;
@@ -17710,7 +17942,7 @@ var ParticleSystem = /** @class */ (function (_super) {
             sprite[1] = tsa.animationDuration.getValue(lifetime);
             sprite[2] = tsa.cycles.getValue(lifetime);
         }
-        var rot = tempRot$1;
+        var rot = tempRot;
         if (options.start3DRotation) {
             // @ts-expect-error
             rot.set(options.startRotationX.getValue(lifetime), options.startRotationY.getValue(lifetime), options.startRotationZ.getValue(lifetime));
@@ -17726,7 +17958,7 @@ var ParticleSystem = /** @class */ (function (_super) {
         if (color.length === 3) {
             color[3] = 1;
         }
-        var size = tempSize$1;
+        var size = tempSize;
         if (options.start3DSize) {
             size.x = options.startSizeX.getValue(lifetime);
             size.y = options.startSizeY.getValue(lifetime);
@@ -17888,7 +18120,8 @@ var ParticleSystem = /** @class */ (function (_super) {
                 separateAxes: false,
                 x: createValueGetter(('size' in sizeOverLifetime ? sizeOverLifetime.size : sizeOverLifetime.x) || 1),
             };
-        var anchor = Vector2.fromArray(convertAnchor(renderer.anchor, renderer.particleOrigin));
+        renderer.anchor = renderer.anchor || [0, 0];
+        var anchor = Vector2.fromArray(renderer.anchor);
         this.options = {
             particleFollowParent: !!options.particleFollowParent,
             startLifetime: createValueGetter(options.startLifetime),
@@ -17900,484 +18133,250 @@ var ParticleSystem = /** @class */ (function (_super) {
             maxCount: (_e = options.maxCount) !== null && _e !== void 0 ? _e : 0,
             gravityModifier: createValueGetter(gravityModifier || 0),
             gravity: gravity,
-            start3DSize: !!options.start3DSize,
-            startTurbulence: startTurbulence,
-            turbulence: turbulence,
-            speedOverLifetime: positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime),
-            linearVelOverLifetime: linearVelOverLifetime,
-            orbitalVelOverLifetime: orbitalVelOverLifetime,
-            forceTarget: forceTarget,
-        };
-        if (options.startRotationZ) {
-            this.options.startRotation = createValueGetter(options.startRotationZ || 0);
-        }
-        if (options.startRotationX || options.startRotationY) {
-            this.options.start3DRotation = true;
-            this.options.startRotationX = createValueGetter(options.startRotationX || 0);
-            this.options.startRotationY = createValueGetter(options.startRotationY || 0);
-            this.options.startRotationZ = createValueGetter(options.startRotationZ || 0);
-        }
-        if (options.start3DSize) {
-            this.options.startSizeX = createValueGetter(options.startSizeX);
-            this.options.startSizeY = createValueGetter(options.startSizeY);
-        }
-        else {
-            this.options.startSize = createValueGetter(options.startSize);
-            this.options.sizeAspect = createValueGetter(options.sizeAspect || 1);
-        }
-        var particleMeshProps = {
-            // listIndex: vfxItem.listIndex,
-            meshSlots: options.meshSlots,
-            name: this.name,
-            matrix: Matrix4$1.IDENTITY,
-            filter: props.filter,
-            shaderCachePrefix: shaderCachePrefix,
-            renderMode: renderer.renderMode || RenderMode$1.BILLBOARD,
-            side: renderer.side || SideMode$1.DOUBLE,
-            gravity: gravity,
-            // duration: vfxItem.duration,
-            blending: renderer.blending || BlendingMode$1.ALPHA,
-            rotationOverLifetime: rotationOverLifetime,
-            gravityModifier: this.options.gravityModifier,
-            linearVelOverLifetime: this.options.linearVelOverLifetime,
-            orbitalVelOverLifetime: this.options.orbitalVelOverLifetime,
-            speedOverLifetime: this.options.speedOverLifetime,
-            sprite: textureSheetAnimation,
-            occlusion: !!renderer.occlusion,
-            transparentOcclusion: !!renderer.transparentOcclusion,
-            maxCount: options.maxCount,
-            mask: renderer.mask,
-            maskMode: (_f = renderer.maskMode) !== null && _f !== void 0 ? _f : MaskMode$1.NONE,
-            forceTarget: forceTarget,
-            diffuse: renderer.texture,
-            sizeOverLifetime: sizeOverLifetimeGetter,
-            anchor: anchor,
-        };
-        if (colorOverLifetime) {
-            var color = colorOverLifetime.color, opacity = colorOverLifetime.opacity;
-            particleMeshProps.colorOverLifetime = {};
-            if (opacity) {
-                particleMeshProps.colorOverLifetime.opacity = createValueGetter(colorOverLifetime.opacity);
-            }
-            if (color) {
-                if (color[0] === ValueType$1.GRADIENT_COLOR) {
-                    particleMeshProps.colorOverLifetime.color = colorOverLifetime.color[1];
-                }
-                else if (color[0] === ValueType$1.RGBA_COLOR) {
-                    particleMeshProps.colorOverLifetime.color = Texture.createWithData(this.engine, {
-                        data: new Uint8Array(color[1]),
-                        width: 1,
-                        height: 1,
-                    });
-                }
-                else if (color instanceof Texture) {
-                    particleMeshProps.colorOverLifetime.color = color;
-                }
-            }
-        }
-        var uvs = [];
-        var textureMap = [0, 0, 1, 1];
-        var flip;
-        if (props.splits) {
-            var s = props.splits[0];
-            flip = s[4];
-            textureMap = flip ? [s[0], s[1], s[3], s[2]] : [s[0], s[1], s[2], s[3]];
-        }
-        if (textureSheetAnimation && !textureSheetAnimation.animate) {
-            var col = flip ? textureSheetAnimation.row : textureSheetAnimation.col;
-            var row = flip ? textureSheetAnimation.col : textureSheetAnimation.row;
-            var total = textureSheetAnimation.total || col * row;
-            var index$1 = 0;
-            for (var x = 0; x < col; x++) {
-                for (var y = 0; y < row && index$1 < total; y++, index$1++) {
-                    uvs.push([
-                        x * textureMap[2] / col + textureMap[0],
-                        y * textureMap[3] / row + textureMap[1],
-                        textureMap[2] / col,
-                        textureMap[3] / row
-                    ]);
-                }
-            }
-        }
-        else {
-            uvs.push(textureMap);
-        }
-        this.uvs = uvs;
-        // @ts-expect-error
-        particleMeshProps.textureFlip = flip;
-        var trails = props.trails;
-        var trailMeshProps;
-        if (trails) {
-            this.trails = {
-                lifetime: createValueGetter(trails.lifetime),
-                dieWithParticles: trails.dieWithParticles !== false,
-                sizeAffectsWidth: !!trails.sizeAffectsWidth,
-                sizeAffectsLifetime: !!trails.sizeAffectsLifetime,
-                inheritParticleColor: !!trails.inheritParticleColor,
-                parentAffectsPosition: !!trails.parentAffectsPosition,
-            };
-            trailMeshProps = {
-                name: 'Trail',
-                matrix: Matrix4$1.IDENTITY,
-                minimumVertexDistance: trails.minimumVertexDistance || 0.02,
-                maxTrailCount: options.maxCount,
-                pointCountPerTrail: Math.round(trails.maxPointPerTrail) || 32,
-                blending: trails.blending,
-                texture: trails.texture,
-                opacityOverLifetime: createValueGetter(trails.opacityOverLifetime || 1),
-                widthOverTrail: createValueGetter(trails.widthOverTrail || 1),
-                // order: vfxItem.listIndex + (trails.orderOffset || 0),
-                shaderCachePrefix: shaderCachePrefix,
-                lifetime: this.trails.lifetime,
-                occlusion: !!trails.occlusion,
-                transparentOcclusion: !!trails.transparentOcclusion,
-                textureMap: trails.textureMap,
-                mask: renderer.mask,
-                maskMode: renderer.maskMode,
-            };
-            if (trails.colorOverLifetime && trails.colorOverLifetime[0] === ValueType$1.GRADIENT_COLOR) {
-                trailMeshProps.colorOverLifetime = trails.colorOverLifetime[1];
-            }
-            if (trails.colorOverTrail && trails.colorOverTrail[0] === ValueType$1.GRADIENT_COLOR) {
-                trailMeshProps.colorOverTrail = trails.colorOverTrail[1];
-            }
-        }
-        this.renderer = new ParticleSystemRenderer(this.engine, particleMeshProps, trailMeshProps);
-        this.meshes = this.renderer.meshes;
-        // this.item = vfxItem;
-        var interaction = props.interaction;
-        if (interaction) {
-            this.interaction = {
-                multiple: interaction.multiple,
-                radius: interaction.radius,
-                behavior: interaction.behavior,
-            };
-        }
-        this.item.getHitTestParams = this.getHitTestParams;
-        this.item._content = this;
-        this.renderer.item = this.item;
-        this.item.components.push(this.renderer);
-        this.item.rendererComponents.push(this.renderer);
-        // 添加粒子动画 clip
-        var timeline = this.item.getComponent(TimelineComponent);
-        timeline.createTrack(Track).createClip(ParticleBehaviourPlayable);
-    };
-    ParticleSystem = __decorate([
-        effectsClass(exports.DataType.ParticleSystem)
-    ], ParticleSystem);
-    return ParticleSystem;
-}(Component));
-// array performance better for small memory than Float32Array
-var tempDir = new Vector3();
-var tempSize$1 = new Vector2();
-var tempRot$1 = new Euler();
-var tmpDirX = new Vector3();
-var tmpDirY = new Vector3();
-var tempVec3 = new Vector3();
-var tempEuler = new Euler();
-var tempSprite = [0, 0, 0];
-var tempMat4 = new Matrix4$1();
-function getBurstOffsets(burstOffsets) {
-    var ret = {};
-    if (Array.isArray(burstOffsets)) {
-        burstOffsets.forEach(function (arr) {
-            var isArr = arr instanceof Array;
-            var index = isArr ? arr[0] : arr.index;
-            var offsets = ret[index];
-            if (!offsets) {
-                offsets = ret[index] = [];
-            }
-            if (isArr) {
-                offsets.push(arr.slice(1, 4));
-            }
-            else {
-                offsets.push([+arr.x, +arr.y, +arr.z]);
-            }
-        });
-    }
-    return ret;
-}
-function randomArrItem(arr, keepArr) {
-    var index = Math.floor(Math.random() * arr.length);
-    var item = arr[index];
-    if (!keepArr) {
-        arr.splice(index, 1);
-    }
-    return item;
-}
-
-/**
- * @since 2.0.0
- * @internal
- */
-var ParticleBehaviourPlayable = /** @class */ (function (_super) {
-    __extends(ParticleBehaviourPlayable, _super);
-    function ParticleBehaviourPlayable() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ParticleBehaviourPlayable.prototype.onPlayablePlay = function () {
-        this.particleSystem = this.bindingItem.getComponent(ParticleSystem);
-        if (this.particleSystem) {
-            this.particleSystem.name = this.bindingItem.name;
-            this.particleSystem.start();
-            this.particleSystem.initEmitterTransform();
+            start3DSize: !!options.start3DSize,
+            startTurbulence: startTurbulence,
+            turbulence: turbulence,
+            speedOverLifetime: positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime),
+            linearVelOverLifetime: linearVelOverLifetime,
+            orbitalVelOverLifetime: orbitalVelOverLifetime,
+            forceTarget: forceTarget,
+        };
+        if (options.startRotationZ) {
+            this.options.startRotation = createValueGetter(options.startRotationZ || 0);
         }
-    };
-    ParticleBehaviourPlayable.prototype.processFrame = function (dt) {
-        var particleSystem = this.particleSystem;
-        if (particleSystem) {
-            this.bindingItem.parent;
-            // TODO: [1.31] @十弦 验证 https://github.com/galacean/effects-runtime/commit/3e7d73d37b7d98c2a25e4544e80e928b17801ccd#diff-fae062f28caf3771cfedd3a20dc22f9749bd054c7541bf2fd50a9a5e413153d4
-            // particleSystem.setParentTransform(parentItem.transform);
-            particleSystem.setVisible(true);
-            particleSystem.onUpdate(dt);
+        if (options.startRotationX || options.startRotationY) {
+            this.options.start3DRotation = true;
+            this.options.startRotationX = createValueGetter(options.startRotationX || 0);
+            this.options.startRotationY = createValueGetter(options.startRotationY || 0);
+            this.options.startRotationZ = createValueGetter(options.startRotationZ || 0);
         }
-    };
-    return ParticleBehaviourPlayable;
-}(Playable));
-
-var CalculateLoader = /** @class */ (function (_super) {
-    __extends(CalculateLoader, _super);
-    function CalculateLoader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return CalculateLoader;
-}(AbstractPlugin));
-
-var AnimationStream = /** @class */ (function () {
-    function AnimationStream(playable) {
-        this.curveValues = {};
-        this.playable = playable;
-    }
-    AnimationStream.prototype.setCurveValue = function (componentType, propertyName, value) {
-        if (!this.findCurveValue(componentType, propertyName)) {
-            this.curveValues[componentType + propertyName] = { componentType: componentType, propertyName: propertyName, value: value };
+        if (options.start3DSize) {
+            this.options.startSizeX = createValueGetter(options.startSizeX);
+            this.options.startSizeY = createValueGetter(options.startSizeY);
         }
         else {
-            this.curveValues[componentType + propertyName].value = value;
-        }
-        return this.curveValues[componentType + propertyName];
-    };
-    AnimationStream.prototype.findCurveValue = function (componentType, propertyName) {
-        return this.curveValues[componentType + propertyName];
-    };
-    AnimationStream.prototype.getInputStream = function (index) {
-        var inputPlayable = this.playable.getInput(index);
-        if (inputPlayable instanceof AnimationPlayable) {
-            return inputPlayable.animationStream;
-        }
-    };
-    return AnimationStream;
-}());
-
-var AnimationPlayable = /** @class */ (function (_super) {
-    __extends(AnimationPlayable, _super);
-    function AnimationPlayable() {
-        var _this = _super.call(this) || this;
-        _this.animationStream = new AnimationStream(_this);
-        return _this;
-    }
-    return AnimationPlayable;
-}(Playable));
-
-var tempRot = new Euler();
-var tempSize = new Vector3(1, 1, 1);
-var tempPos = new Vector3();
-/**
- * @since 2.0.0
- * @internal
- */
-var AnimationClipPlayable = /** @class */ (function (_super) {
-    __extends(AnimationClipPlayable, _super);
-    function AnimationClipPlayable() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AnimationClipPlayable.prototype.processFrame = function (dt) {
-        if (this.bindingItem.composition) {
-            this.sampleAnimation();
+            this.options.startSize = createValueGetter(options.startSize);
+            this.options.sizeAspect = createValueGetter(options.sizeAspect || 1);
         }
-    };
-    /**
-     * 应用时间轴K帧数据到对象
-     */
-    AnimationClipPlayable.prototype.sampleAnimation = function () {
-        var _this = this;
-        var duration = this.bindingItem.duration;
-        var life = this.time / duration;
-        life = life < 0 ? 0 : (life > 1 ? 1 : life);
-        if (this.sizeXOverLifetime) {
-            tempSize.x = this.sizeXOverLifetime.getValue(life);
-            if (this.sizeSeparateAxes) {
-                tempSize.y = this.sizeYOverLifetime.getValue(life);
-                tempSize.z = this.sizeZOverLifetime.getValue(life);
+        var particleMeshProps = {
+            // listIndex: vfxItem.listIndex,
+            meshSlots: options.meshSlots,
+            name: this.name,
+            matrix: Matrix4$1.IDENTITY,
+            filter: props.filter,
+            shaderCachePrefix: shaderCachePrefix,
+            renderMode: renderer.renderMode || RenderMode$1.BILLBOARD,
+            side: renderer.side || SideMode$1.DOUBLE,
+            gravity: gravity,
+            // duration: vfxItem.duration,
+            blending: renderer.blending || BlendingMode$1.ALPHA,
+            rotationOverLifetime: rotationOverLifetime,
+            gravityModifier: this.options.gravityModifier,
+            linearVelOverLifetime: this.options.linearVelOverLifetime,
+            orbitalVelOverLifetime: this.options.orbitalVelOverLifetime,
+            speedOverLifetime: this.options.speedOverLifetime,
+            sprite: textureSheetAnimation,
+            occlusion: !!renderer.occlusion,
+            transparentOcclusion: !!renderer.transparentOcclusion,
+            maxCount: options.maxCount,
+            mask: renderer.mask,
+            maskMode: (_f = renderer.maskMode) !== null && _f !== void 0 ? _f : MaskMode$1.NONE,
+            forceTarget: forceTarget,
+            diffuse: renderer.texture,
+            sizeOverLifetime: sizeOverLifetimeGetter,
+            anchor: anchor,
+        };
+        if (colorOverLifetime) {
+            var color = colorOverLifetime.color, opacity = colorOverLifetime.opacity;
+            particleMeshProps.colorOverLifetime = {};
+            if (opacity) {
+                particleMeshProps.colorOverLifetime.opacity = createValueGetter(colorOverLifetime.opacity);
             }
-            else {
-                tempSize.z = tempSize.y = tempSize.x;
+            if (color) {
+                if (color[0] === ValueType$1.GRADIENT_COLOR) {
+                    particleMeshProps.colorOverLifetime.color = colorOverLifetime.color[1];
+                }
+                else if (color[0] === ValueType$1.RGBA_COLOR) {
+                    particleMeshProps.colorOverLifetime.color = Texture.createWithData(this.engine, {
+                        data: new Uint8Array(color[1]),
+                        width: 1,
+                        height: 1,
+                    });
+                }
+                else if (color instanceof Texture) {
+                    particleMeshProps.colorOverLifetime.color = color;
+                }
             }
-            var startSize = this.originalTransform.scale;
-            this.bindingItem.transform.setScale(tempSize.x * startSize.x, tempSize.y * startSize.y, tempSize.z * startSize.z);
-            // this.animationStream.setCurveValue('transform', 'scale.x', tempSize.x * startSize.x);
-            // this.animationStream.setCurveValue('transform', 'scale.y', tempSize.y * startSize.y);
-            // this.animationStream.setCurveValue('transform', 'scale.z', tempSize.z * startSize.z);
         }
-        if (this.rotationOverLifetime) {
-            var func = function (v) { return _this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration); };
-            var incZ = func(this.rotationOverLifetime.z);
-            var separateAxes = this.rotationOverLifetime.separateAxes;
-            tempRot.x = separateAxes ? func(this.rotationOverLifetime.x) : 0;
-            tempRot.y = separateAxes ? func(this.rotationOverLifetime.y) : 0;
-            tempRot.z = incZ;
-            var rot = tempRot.addEulers(this.originalTransform.rotation, tempRot);
-            this.bindingItem.transform.setRotation(rot.x, rot.y, rot.z);
-            // this.animationStream.setCurveValue('transform', 'rotation.x', rot.x);
-            // this.animationStream.setCurveValue('transform', 'rotation.y', rot.y);
-            // this.animationStream.setCurveValue('transform', 'rotation.z', rot.z);
+        var uvs = [];
+        var textureMap = [0, 0, 1, 1];
+        var flip;
+        if (props.splits) {
+            var s = props.splits[0];
+            flip = s[4];
+            textureMap = flip ? [s[0], s[1], s[3], s[2]] : [s[0], s[1], s[2], s[3]];
         }
-        if (this.positionOverLifetime) {
-            var pos = tempPos;
-            calculateTranslation(pos, this, this.gravity, this.time, duration, this.originalTransform.position, this.velocity);
-            if (this.originalTransform.path) {
-                pos.add(this.originalTransform.path.getValue(life));
+        if (textureSheetAnimation && !textureSheetAnimation.animate) {
+            var col = flip ? textureSheetAnimation.row : textureSheetAnimation.col;
+            var row = flip ? textureSheetAnimation.col : textureSheetAnimation.row;
+            var total = textureSheetAnimation.total || col * row;
+            var index$1 = 0;
+            for (var x = 0; x < col; x++) {
+                for (var y = 0; y < row && index$1 < total; y++, index$1++) {
+                    uvs.push([
+                        x * textureMap[2] / col + textureMap[0],
+                        y * textureMap[3] / row + textureMap[1],
+                        textureMap[2] / col,
+                        textureMap[3] / row
+                    ]);
+                }
             }
-            this.bindingItem.transform.setPosition(pos.x, pos.y, pos.z);
-            // this.animationStream.setCurveValue('transform', 'position.x', pos.x);
-            // this.animationStream.setCurveValue('transform', 'position.y', pos.y);
-            // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
         }
-    };
-    AnimationClipPlayable.prototype.fromData = function (data) {
-        var _a;
-        var scale = this.bindingItem.transform.scale;
-        this.originalTransform = {
-            position: this.bindingItem.transform.position.clone(),
-            rotation: this.bindingItem.transform.getRotation().clone(),
-            // TODO 编辑器 scale 没有z轴控制
-            scale: new Vector3(scale.x, scale.y, scale.x),
-        };
-        var positionOverLifetime = data.positionOverLifetime;
-        var rotationOverLifetime = data.rotationOverLifetime;
-        var sizeOverLifetime = data.sizeOverLifetime;
-        // TODO: 没有 K 帧数据的不需要传 positionOverLifetime 空对象
-        if (positionOverLifetime && Object.keys(positionOverLifetime).length !== 0) {
-            this.positionOverLifetime = positionOverLifetime;
-            if (positionOverLifetime.path) {
-                this.originalTransform.path = createValueGetter(positionOverLifetime.path);
-            }
-            var linearVelEnable = positionOverLifetime.linearX || positionOverLifetime.linearY || positionOverLifetime.linearZ;
-            if (linearVelEnable) {
-                this.linearVelOverLifetime = {
-                    x: positionOverLifetime.linearX && createValueGetter(positionOverLifetime.linearX),
-                    y: positionOverLifetime.linearY && createValueGetter(positionOverLifetime.linearY),
-                    z: positionOverLifetime.linearZ && createValueGetter(positionOverLifetime.linearZ),
-                    asMovement: positionOverLifetime.asMovement,
-                    enabled: !!linearVelEnable,
-                };
-            }
-            var orbitalVelEnable = positionOverLifetime.orbitalX || positionOverLifetime.orbitalY || positionOverLifetime.orbitalZ;
-            if (orbitalVelEnable) {
-                this.orbitalVelOverLifetime = {
-                    x: positionOverLifetime.orbitalX && createValueGetter(positionOverLifetime.orbitalX),
-                    y: positionOverLifetime.orbitalY && createValueGetter(positionOverLifetime.orbitalY),
-                    z: positionOverLifetime.orbitalZ && createValueGetter(positionOverLifetime.orbitalZ),
-                    center: ensureVec3(positionOverLifetime.orbCenter),
-                    asRotation: positionOverLifetime.asRotation,
-                    enabled: !!orbitalVelEnable,
-                };
-            }
-            this.speedOverLifetime = positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime);
+        else {
+            uvs.push(textureMap);
         }
-        if (sizeOverLifetime) {
-            if (sizeOverLifetime.separateAxes) {
-                this.sizeSeparateAxes = true;
-                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.x || 1);
-                this.sizeYOverLifetime = createValueGetter(sizeOverLifetime.y || 1);
-                this.sizeZOverLifetime = createValueGetter(sizeOverLifetime.z || 1);
+        this.uvs = uvs;
+        // @ts-expect-error
+        particleMeshProps.textureFlip = flip;
+        var trails = props.trails;
+        var trailMeshProps;
+        if (trails) {
+            this.trails = {
+                lifetime: createValueGetter(trails.lifetime),
+                dieWithParticles: trails.dieWithParticles !== false,
+                sizeAffectsWidth: !!trails.sizeAffectsWidth,
+                sizeAffectsLifetime: !!trails.sizeAffectsLifetime,
+                inheritParticleColor: !!trails.inheritParticleColor,
+                parentAffectsPosition: !!trails.parentAffectsPosition,
+            };
+            trailMeshProps = {
+                name: 'Trail',
+                matrix: Matrix4$1.IDENTITY,
+                minimumVertexDistance: trails.minimumVertexDistance || 0.02,
+                maxTrailCount: options.maxCount,
+                pointCountPerTrail: Math.round(trails.maxPointPerTrail) || 32,
+                blending: trails.blending,
+                texture: trails.texture,
+                opacityOverLifetime: createValueGetter(trails.opacityOverLifetime || 1),
+                widthOverTrail: createValueGetter(trails.widthOverTrail || 1),
+                // order: vfxItem.listIndex + (trails.orderOffset || 0),
+                shaderCachePrefix: shaderCachePrefix,
+                lifetime: this.trails.lifetime,
+                occlusion: !!trails.occlusion,
+                transparentOcclusion: !!trails.transparentOcclusion,
+                textureMap: trails.textureMap,
+                mask: renderer.mask,
+                maskMode: renderer.maskMode,
+            };
+            if (trails.colorOverLifetime && trails.colorOverLifetime[0] === ValueType$1.GRADIENT_COLOR) {
+                trailMeshProps.colorOverLifetime = trails.colorOverLifetime[1];
             }
-            else {
-                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.size || 1);
+            if (trails.colorOverTrail && trails.colorOverTrail[0] === ValueType$1.GRADIENT_COLOR) {
+                trailMeshProps.colorOverTrail = trails.colorOverTrail[1];
             }
         }
-        if (rotationOverLifetime) {
-            this.rotationOverLifetime = {
-                asRotation: rotationOverLifetime.asRotation,
-                separateAxes: rotationOverLifetime.separateAxes,
-                z: createValueGetter(rotationOverLifetime.z || 0),
+        this.renderer = new ParticleSystemRenderer(this.engine, particleMeshProps, trailMeshProps);
+        this.meshes = this.renderer.meshes;
+        // this.item = vfxItem;
+        var interaction = props.interaction;
+        if (interaction) {
+            this.interaction = {
+                multiple: interaction.multiple,
+                radius: interaction.radius,
+                behavior: interaction.behavior,
             };
-            if (rotationOverLifetime.separateAxes) {
-                var rotLt = this.rotationOverLifetime;
-                rotLt.x = createValueGetter(rotationOverLifetime.x || 0);
-                rotLt.y = createValueGetter(rotationOverLifetime.y || 0);
-            }
         }
-        this.gravity = Vector3.fromArray((positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.gravity) || []);
-        this.gravityModifier = createValueGetter((_a = positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.gravityOverLifetime) !== null && _a !== void 0 ? _a : 0);
-        this.direction = (positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.direction) ? Vector3.fromArray(positionOverLifetime.direction).normalize() : new Vector3();
-        this.startSpeed = (positionOverLifetime === null || positionOverLifetime === void 0 ? void 0 : positionOverLifetime.startSpeed) || 0;
-        this.velocity = this.direction.clone();
-        this.velocity.multiply(this.startSpeed);
+        this.item.getHitTestParams = this.getHitTestParams;
+        this.item._content = this;
+        this.renderer.item = this.item;
+        this.item.components.push(this.renderer);
+        this.item.rendererComponents.push(this.renderer);
+        // 添加粒子动画 clip
+        var timeline = this.item.getComponent(TimelineComponent);
+        timeline.createTrack(Track).createClip(ParticleBehaviourPlayable);
     };
-    return AnimationClipPlayable;
-}(AnimationPlayable));
+    ParticleSystem = __decorate([
+        effectsClass(exports.DataType.ParticleSystem)
+    ], ParticleSystem);
+    return ParticleSystem;
+}(Component));
+// array performance better for small memory than Float32Array
+var tempDir = new Vector3();
+var tempSize = new Vector2();
+var tempRot = new Euler();
+var tmpDirX = new Vector3();
+var tmpDirY = new Vector3();
+var tempVec3 = new Vector3();
+var tempEuler = new Euler();
+var tempSprite = [0, 0, 0];
+var tempMat4 = new Matrix4$1();
+function getBurstOffsets(burstOffsets) {
+    var ret = {};
+    if (Array.isArray(burstOffsets)) {
+        burstOffsets.forEach(function (arr) {
+            var isArr = arr instanceof Array;
+            var index = isArr ? arr[0] : arr.index;
+            var offsets = ret[index];
+            if (!offsets) {
+                offsets = ret[index] = [];
+            }
+            if (isArr) {
+                offsets.push(arr.slice(1, 4));
+            }
+            else {
+                offsets.push([+arr.x, +arr.y, +arr.z]);
+            }
+        });
+    }
+    return ret;
+}
+function randomArrItem(arr, keepArr) {
+    var index = Math.floor(Math.random() * arr.length);
+    var item = arr[index];
+    if (!keepArr) {
+        arr.splice(index, 1);
+    }
+    return item;
+}
+
 /**
  * @since 2.0.0
  * @internal
  */
-var ActivationClipPlayable = /** @class */ (function (_super) {
-    __extends(ActivationClipPlayable, _super);
-    function ActivationClipPlayable() {
+var ParticleBehaviourPlayable = /** @class */ (function (_super) {
+    __extends(ParticleBehaviourPlayable, _super);
+    function ParticleBehaviourPlayable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    ActivationClipPlayable.prototype.onGraphStart = function () {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
-    };
-    ActivationClipPlayable.prototype.onPlayablePlay = function () {
-        this.bindingItem.transform.setValid(true);
-        this.showRendererComponents();
-    };
-    ActivationClipPlayable.prototype.onPlayableDestroy = function () {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
-    };
-    ActivationClipPlayable.prototype.hideRendererComponents = function () {
-        var e_1, _a;
-        try {
-            for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var rendererComponent = _c.value;
-                if (rendererComponent.enabled) {
-                    rendererComponent.enabled = false;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
+    ParticleBehaviourPlayable.prototype.onPlayablePlay = function () {
+        this.particleSystem = this.bindingItem.getComponent(ParticleSystem);
+        if (this.particleSystem) {
+            this.particleSystem.name = this.bindingItem.name;
+            this.particleSystem.start();
+            this.particleSystem.initEmitterTransform();
         }
     };
-    ActivationClipPlayable.prototype.showRendererComponents = function () {
-        var e_2, _a;
-        try {
-            for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var rendererComponent = _c.value;
-                if (!rendererComponent.enabled) {
-                    rendererComponent.enabled = true;
-                }
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_2) throw e_2.error; }
+    ParticleBehaviourPlayable.prototype.processFrame = function (dt) {
+        var particleSystem = this.particleSystem;
+        if (particleSystem) {
+            this.bindingItem.parent;
+            // TODO: [1.31] @十弦 验证 https://github.com/galacean/effects-runtime/commit/3e7d73d37b7d98c2a25e4544e80e928b17801ccd#diff-fae062f28caf3771cfedd3a20dc22f9749bd054c7541bf2fd50a9a5e413153d4
+            // particleSystem.setParentTransform(parentItem.transform);
+            particleSystem.setVisible(true);
+            particleSystem.onUpdate(dt);
         }
     };
-    return ActivationClipPlayable;
+    return ParticleBehaviourPlayable;
 }(Playable));
 
+var CalculateLoader = /** @class */ (function (_super) {
+    __extends(CalculateLoader, _super);
+    function CalculateLoader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CalculateLoader;
+}(AbstractPlugin));
+
 var TextLayout = /** @class */ (function () {
     function TextLayout(options) {
         this.width = 0;
@@ -19675,9 +19674,10 @@ var TextComponent = /** @class */ (function (_super) {
         if (this.textStyle.fontSize === value) {
             return;
         }
+        // 保证字号变化后位置正常
+        var diff = this.textStyle.fontSize - value;
+        this.textLayout.lineHeight += diff;
         this.textStyle.fontSize = value;
-        // 1.5175 = 31.43 / 20
-        this.textLayout.lineHeight = this.textStyle.fontSize * 1.5175;
         this.isDirty = true;
     };
     /**
@@ -20003,7 +20003,7 @@ var TextLoader = /** @class */ (function (_super) {
     return TextLoader;
 }(AbstractPlugin));
 
-var seed$6 = 1;
+var seed$5 = 1;
 /**
  * @since 2.0.0
  * @internal
@@ -20029,24 +20029,9 @@ var EffectComponent = /** @class */ (function (_super) {
                 };
             }
         };
-        _this.id = 'Mesh' + seed$6++;
+        _this.id = 'Mesh' + seed$5++;
         _this.name = '<unnamed>';
         _this._priority = 0;
-        _this.geometry = Geometry.create(_this.engine);
-        var geometryData = {
-            vertices: [
-                -1, 1, 0,
-                -1, -1, 0,
-                1, 1, 0,
-                1, -1, 0, //右下
-            ],
-            uvs: [0, 1, 0, 0, 1, 1, 1, 0],
-            indices: [0, 1, 2, 2, 1, 3],
-            dataType: exports.DataType.Geometry,
-            id: generateGUID(),
-        };
-        _this.geometry.fromData(geometryData);
-        _this.triangles = geometryToTriangles(_this.geometry);
         return _this;
     }
     Object.defineProperty(EffectComponent.prototype, "isDestroyed", {
@@ -20583,11 +20568,6 @@ var VFXItem = /** @class */ (function (_super) {
         this.id = id.toString(); // TODO 老数据 id 是 number，需要转换
         this.name = name;
         this.start = delay ? delay : this.start;
-        // TODO spec 数据需要区分 scale 和 size
-        if (transform && transform.scale && data.type !== 'ECS') {
-            //@ts-expect-error  TODO 数据改造后移除 expect-error
-            transform.scale.z = transform.scale.x;
-        }
         if (transform) {
             //@ts-expect-error TODO 数据改造后移除 expect-error
             transform.position = new Vector3().copyFrom(transform.position);
@@ -20595,51 +20575,36 @@ var VFXItem = /** @class */ (function (_super) {
             transform.rotation = new Euler().copyFrom(transform.rotation);
             //@ts-expect-error
             transform.scale = new Vector3().copyFrom(transform.scale);
+            //@ts-expect-error
+            if (transform.size) {
+                //@ts-expect-error
+                transform.size = new Vector2().copyFrom(transform.size);
+            }
+            //@ts-expect-error
+            if (transform.anchor) {
+                //@ts-expect-error
+                transform.anchor = new Vector2().copyFrom(transform.anchor);
+            }
             this.transform.setTransform(transform);
         }
         this.transform.name = this.name;
         this.transform.engine = this.engine;
-        // TODO spec 数据需要区分 scale 和 size
-        if (data.type === ItemType$1.sprite && transform) {
-            this.transform.setSize(this.transform.scale.x, this.transform.scale.y);
-            this.transform.setScale(1, 1, 1);
-        }
         this.parentId = parentId;
         this.duration = duration;
         this.endBehavior = endBehavior;
-        // TODO: 放到 Spec 处理
-        if (this.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 || this.endBehavior === END_BEHAVIOR_PAUSE$1) {
-            this.endBehavior = END_BEHAVIOR_FREEZE$1;
-        }
         this.lifetime = -(this.start / this.duration);
         this.listIndex = listIndex;
+        //@ts-expect-error
+        this.oldId = data.oldId;
         if (!data.content) {
             data.content = { options: {} };
         }
         var timelineComponent = this.getComponent(TimelineComponent);
         timelineComponent.fromData(data.content);
-        // TODO anchor 应该放在 transform data
-        if (data.type === ItemType$1.sprite) {
-            var content = data.content;
-            if (!content.renderer) {
-                //@ts-expect-error
-                content.renderer = {};
-            }
-            var realAnchor = convertAnchor(content.renderer.anchor, content.renderer.particleOrigin);
-            var startSize = this.transform.size;
-            // 兼容旧JSON（anchor和particleOrigin可能同时存在）
-            if (!content.renderer.anchor && content.renderer.particleOrigin !== undefined) {
-                this.transform.position.add([-realAnchor[0] * startSize.x, -realAnchor[1] * startSize.y, 0]);
-            }
-            this.transform.setAnchor(realAnchor[0] * startSize.x, realAnchor[1] * startSize.y, 0);
-        }
-        // TODO 要放在上面的 if 后面添加，否则会 position 初始化错误
         if (this.type !== ItemType$1.particle) {
             var track = timelineComponent.createTrack(Track, 'AnimationTrack');
             track.createClip(AnimationClipPlayable, 'AnimationTimelineClip').playable.fromData(data.content);
         }
-        var activationTrack = timelineComponent.createTrack(Track, 'ActivationTrack');
-        activationTrack.createClip(ActivationClipPlayable, 'ActivationTimelineClip');
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see ".concat(HELP_LINK$1['Item duration can\'t be less than 0']));
         }
@@ -22654,7 +22619,7 @@ function isScene(scene) {
 
 function version3Migration(scene) {
     var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e, e_6, _f;
-    scene.jsonScene.version = 3.0;
+    scene.jsonScene.version = '3.0';
     var ecScene = scene.jsonScene;
     if (!ecScene.items) {
         ecScene.items = [];
@@ -22666,6 +22631,10 @@ function version3Migration(scene) {
             for (var i = 0; i < composition.items.length; i++) {
                 ecScene.items.push(composition.items[i]);
             }
+            // composition 的 endbehaviour 兼容
+            if (composition.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 || composition.endBehavior === END_BEHAVIOR_PAUSE$1) {
+                composition.endBehavior = END_BEHAVIOR_FREEZE$1;
+            }
         }
     }
     catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -22681,6 +22650,9 @@ function version3Migration(scene) {
         for (var _j = __values$1(ecScene.items), _k = _j.next(); !_k.done; _k = _j.next()) {
             var item = _k.value;
             itemGuidMap[item.id] = generateGUID();
+            // TODO: 编辑器测试用，上线后删除
+            //@ts-expect-error
+            item.oldId = item.id;
             item.id = itemGuidMap[item.id];
         }
     }
@@ -22788,12 +22760,61 @@ function version3Migration(scene) {
                 if (!scale) {
                     scale = [1, 1, 1];
                 }
+                item.transform = {
+                    //@ts-expect-error
+                    position: { x: position[0], y: position[1], z: position[2] },
+                    //@ts-expect-error
+                    rotation: { x: rotation[0], y: rotation[1], z: rotation[2] },
+                    //@ts-expect-error
+                    scale: { x: scale[0], y: scale[1], z: scale[0] },
+                };
+                // sprite 的 scale 转为 size
+                if (item.type === ItemType$1.sprite) {
+                    //@ts-expect-error
+                    item.transform.size = { x: scale[0], y: scale[1] };
+                    //@ts-expect-error
+                    item.transform.scale = { x: 1, y: 1, z: 1 };
+                }
+                // sprite 的 anchor 修正
+                if (item.type === ItemType$1.sprite) {
+                    var content = item.content;
+                    //@ts-expect-error
+                    if (!content.renderer) {
+                        //@ts-expect-error
+                        content.renderer = {};
+                    }
+                    //@ts-expect-error
+                    var renderer = content.renderer;
+                    var realAnchor = convertAnchor(renderer.anchor, renderer.particleOrigin);
+                    //@ts-expect-error
+                    var startSize = item.transform.size;
+                    // 兼容旧JSON（anchor和particleOrigin可能同时存在）
+                    if (!renderer.anchor && renderer.particleOrigin !== undefined) {
+                        //@ts-expect-error
+                        item.transform.position.x += -realAnchor[0] * startSize.x;
+                        //@ts-expect-error
+                        item.transform.position.y += -realAnchor[1] * startSize.y;
+                    }
+                    //@ts-expect-error
+                    item.transform.anchor = { x: realAnchor[0] * startSize.x, y: realAnchor[1] * startSize.y };
+                }
+            }
+            if (item.type === ItemType$1.particle) {
+                var content = item.content;
                 //@ts-expect-error
-                item.transform.position = { x: position[0], y: position[1], z: position[2] };
+                if (!content.renderer) {
+                    //@ts-expect-error
+                    content.renderer = {};
+                }
                 //@ts-expect-error
-                item.transform.rotation = { x: rotation[0], y: rotation[1], z: rotation[2] };
+                var renderer = content.renderer;
                 //@ts-expect-error
-                item.transform.scale = { x: scale[0], y: scale[1], z: scale[2] };
+                content.renderer.anchor = convertAnchor(renderer.anchor, renderer.particleOrigin);
+            }
+            // item 的 endbehaviour 兼容
+            // @ts-expect-error
+            if (item.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 || item.endBehavior === END_BEHAVIOR_PAUSE$1) {
+                item.endBehavior = END_BEHAVIOR_FREEZE$1;
             }
             // item 的 content 转为 component data 加入 JSONScene.components
             var uuid = v4().replace(/-/g, '');
@@ -22968,8 +22989,22 @@ function version3Migration(scene) {
     }
     return scene;
 }
+/**
+ * 提取并转换 JSON 数据中的 anchor 值
+ */
+function convertAnchor(anchor, particleOrigin) {
+    if (anchor) {
+        return [anchor[0] - 0.5, 0.5 - anchor[1]];
+    }
+    else if (particleOrigin) {
+        return particleOriginTranslateMap[particleOrigin];
+    }
+    else {
+        return [0, 0];
+    }
+}
 
-var seed$5 = 1;
+var seed$4 = 1;
 /**
  * 资源管理器
  * 用于加载和动效中所有的资源文件，包括图片、插件、图层粒子数据等
@@ -22989,7 +23024,7 @@ var AssetManager = /** @class */ (function () {
          * 图像资源，用于创建和释放GPU纹理资源
          */
         this.assets = {};
-        this.id = seed$5++;
+        this.id = seed$4++;
         /**
          * 场景加载的超时定时器
          */
@@ -23005,6 +23040,26 @@ var AssetManager = /** @class */ (function () {
         var _a = options.timeout, timeout = _a === void 0 ? 10 : _a;
         this.timeout = timeout;
     };
+    /**
+     * 根据用户传入的参数修改场景数据
+     */
+    AssetManager.prototype.updateSceneData = function (compositions) {
+        var variables = this.options.variables;
+        if (!variables || Object.keys(variables).length <= 0) {
+            return compositions;
+        }
+        compositions.forEach(function (composition) {
+            composition.items.forEach(function (item) {
+                if (item.type === ItemType$1.text) {
+                    var textVariable = variables[item.name];
+                    if (textVariable) {
+                        item.content.options.text = textVariable;
+                    }
+                }
+            });
+        });
+        return compositions;
+    };
     /**
      * 场景创建，通过 json 创建出场景对象，并进行提前编译等工作
      * @param url - json 的 URL 链接或者 json 对象
@@ -23096,6 +23151,7 @@ var AssetManager = /** @class */ (function () {
                                 for (i = 0; i < scene.images.length; i++) {
                                     scene.textureOptions[i].image = scene.images[i];
                                 }
+                                scene.jsonScene.compositions = this.updateSceneData(scene.jsonScene.compositions);
                                 _e.label = 5;
                             case 5: return [3 /*break*/, 12];
                             case 6: return [4 /*yield*/, hookTimeInfo('processJSON', function () { return _this.processJSON(rawJSON); })];
@@ -23115,6 +23171,7 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, hookTimeInfo('processTextures', function () { return _this.processTextures(loadedImages_1, loadedBins_1, jsonScene_1); })];
                             case 10:
                                 loadedTextures = _e.sent();
+                                jsonScene_1.compositions = this.updateSceneData(jsonScene_1.compositions);
                                 scene = {
                                     url: url,
                                     renderLevel: this.options.renderLevel,
@@ -23961,7 +24018,9 @@ var CompositionComponent = /** @class */ (function (_super) {
                     }
                     // endBehaviour 类型需优化
                     props.content = itemData.content;
-                    item = new VFXItem(this.engine, __assign$1(__assign$1({}, props), { id: itemData.id, name: itemData.name, delay: itemData.delay, duration: itemData.duration, endBehavior: itemData.endBehavior, parentId: itemData.parentId, transform: itemData.transform }));
+                    item = new VFXItem(this.engine, __assign$1(__assign$1({}, props), { id: itemData.id, name: itemData.name, delay: itemData.delay, duration: itemData.duration, endBehavior: itemData.endBehavior, parentId: itemData.parentId, transform: itemData.transform, 
+                        // @ts-expect-error TODO: 2.0 编辑器测试代码，后续移除
+                        oldId: itemData.oldId }));
                     // TODO 编辑器数据传入 composition type 后移除
                     item.type = ItemType$1.composition;
                     item.composition = this.item.composition;
@@ -24096,7 +24155,6 @@ var CompositionComponent = /** @class */ (function (_super) {
     return CompositionComponent;
 }(ItemBehaviour));
 
-var seed$4 = 1;
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -24169,7 +24227,7 @@ var Composition = /** @class */ (function () {
         this.width = width;
         this.height = height;
         this.renderOrder = baseRenderOrder;
-        this.id = seed$4++;
+        this.id = sourceContent.id;
         this.renderer = renderer;
         this.texInfo = imageUsage !== null && imageUsage !== void 0 ? imageUsage : {};
         this.event = event;
@@ -24196,7 +24254,7 @@ var Composition = /** @class */ (function () {
         this.rootItem.onEnd = function () {
             weapp.window.setTimeout(function () {
                 var _a;
-                (_a = _this.handleEnd) === null || _a === void 0 ? void 0 : _a.call(_this, _this);
+                (_a = _this.onEnd) === null || _a === void 0 ? void 0 : _a.call(_this, _this);
             }, 0);
         };
         this.pluginSystem.resetComposition(this, this.renderFrame);
@@ -24275,9 +24333,9 @@ var Composition = /** @class */ (function () {
      * 重新开始合成
      */
     Composition.prototype.restart = function () {
-        var contentItems = this.rootComposition.items;
-        contentItems.forEach(function (item) { return item.dispose(); });
-        contentItems.length = 0;
+        this.rootComposition.items;
+        // contentItems.forEach(item => item.dispose());
+        // contentItems.length = 0;
         this.prepareRender();
         this.reset();
         this.transform.setValid(true);
@@ -24560,7 +24618,8 @@ var Composition = /** @class */ (function () {
         var time = this.getUpdateTime(deltaTime * this.speed);
         this.globalTime += time;
         if (this.rootTimeline.isActiveAndEnabled) {
-            this.rootTimeline.setTime(this.globalTime / 1000);
+            var localTime = this.rootTimeline.toLocalTime(this.globalTime / 1000);
+            this.rootTimeline.setTime(localTime);
         }
         this.updateVideo();
         // 更新 model-tree-plugin
@@ -25025,6 +25084,9 @@ var Composition = /** @class */ (function () {
         }
         this.compositionSourceManager.dispose();
         this.refCompositionProps.clear();
+        if (this.renderer.env === PLAYER_OPTIONS_ENV_EDITOR) {
+            return;
+        }
         this.renderer.clear({
             stencilAction: exports.TextureLoadAction.clear,
             clearStencil: 0,
@@ -25695,9 +25757,20 @@ var Ticker = /** @class */ (function () {
         if (fps === void 0) { fps = 60; }
         this.paused = true;
         this.lastTime = 0;
+        this._deltaTime = 0;
         this.setFPS(fps);
         this.tickers = [];
     }
+    Object.defineProperty(Ticker.prototype, "deltaTime", {
+        /**
+         * 获取定时器当前帧更新的时间
+         */
+        get: function () {
+            return this._deltaTime;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * FPS 帧率设置
      */
@@ -25724,6 +25797,7 @@ var Ticker = /** @class */ (function () {
     Ticker.prototype.start = function () {
         var _this = this;
         this.paused = false;
+        this._deltaTime = 0;
         if (!this.intervalId) {
             this.lastTime = weapp.performance.now();
             var raf_1 = weapp.requestAnimationFrame || function (func) {
@@ -25746,6 +25820,7 @@ var Ticker = /** @class */ (function () {
         this.intervalId = 0;
         this.lastTime = 0;
         this.paused = true;
+        this._deltaTime = 0;
         this.tickers = [];
     };
     /**
@@ -25753,12 +25828,14 @@ var Ticker = /** @class */ (function () {
      */
     Ticker.prototype.pause = function () {
         this.paused = true;
+        this._deltaTime = 0;
     };
     /**
      * 定时器恢复方法
      */
     Ticker.prototype.resume = function () {
         this.paused = false;
+        this._deltaTime = 0;
     };
     /**
      * 定时器 tick 方法
@@ -25768,8 +25845,8 @@ var Ticker = /** @class */ (function () {
             return;
         }
         var startTime = weapp.performance.now();
-        var deltaTime = startTime - this.lastTime;
-        if (deltaTime >= this.interval) {
+        this._deltaTime = startTime - this.lastTime;
+        if (this._deltaTime >= this.interval) {
             this.lastTime = startTime;
             if (this.resetTickers) {
                 this.tickers = this.tickers.filter(function (tick) { return tick; });
@@ -25777,7 +25854,7 @@ var Ticker = /** @class */ (function () {
             }
             for (var i = 0, len = this.tickers.length; i < len; i++) {
                 var tick = this.tickers[i];
-                tick(deltaTime);
+                tick(this._deltaTime);
             }
         }
     };
@@ -26974,35 +27051,39 @@ var GLGeometry = /** @class */ (function (_super) {
     };
     GLGeometry.prototype.fromData = function (data) {
         _super.prototype.fromData.call(this, data);
-        var geometryData = data;
-        var fullGeometryData = __assign$1({ vertices: [], uvs: [], normals: [], indices: [] }, geometryData);
+        var buffer = decodeBase64ToArrays(data.buffer);
+        var vertexCount = data.vertexData.vertexCount;
+        var positionChannel = data.vertexData.channels[0];
+        var uvChannel = data.vertexData.channels[1];
+        var normalChannel = data.vertexData.channels[2];
+        // 根据提供的长度信息创建 Float32Array
+        var positionBuffer = new Float32Array(buffer, positionChannel.offset, positionChannel.dimension * vertexCount);
+        var uvBuffer = new Float32Array(buffer, uvChannel.offset, uvChannel.dimension * vertexCount);
+        var normalBuffer = new Float32Array(buffer, normalChannel.offset, normalChannel.dimension * vertexCount);
+        // 根据提供的长度信息创建 Uint16Array，它紧随 Float32Array 数据之后
+        var indexBuffer = new Uint16Array(buffer, data.indexOffset);
         var geometryProps = {
             mode: glContext.TRIANGLES,
             attributes: {
                 aPos: {
                     type: glContext.FLOAT,
                     size: 3,
-                    data: new Float32Array(fullGeometryData.vertices),
+                    data: positionBuffer,
                 },
                 aUV: {
                     type: glContext.FLOAT,
                     size: 2,
-                    data: new Float32Array(fullGeometryData.uvs),
+                    data: uvBuffer,
                 },
                 aNormal: {
                     type: glContext.FLOAT,
                     size: 3,
-                    data: new Float32Array(fullGeometryData.normals),
+                    data: normalBuffer,
                 },
             },
         };
-        if (fullGeometryData.indices.length !== 0) {
-            geometryProps.indices = { data: new Uint32Array(fullGeometryData.indices) };
-            geometryProps.drawCount = fullGeometryData.indices.length;
-        }
-        else {
-            geometryProps.drawCount = fullGeometryData.vertices.length / 3;
-        }
+        geometryProps.indices = { data: indexBuffer };
+        geometryProps.drawCount = indexBuffer.length;
         this.processProps(geometryProps);
     };
     GLGeometry.prototype.dispose = function () {
@@ -27037,6 +27118,19 @@ var GLGeometry = /** @class */ (function (_super) {
     };
     return GLGeometry;
 }(Geometry));
+function decodeBase64ToArrays(base64String) {
+    // 将 Base64 编码的字符串转换为二进制字符串
+    var binaryString = atob(base64String);
+    // 将二进制字符串转换为字节数组
+    var bytes = new Uint8Array(binaryString.length);
+    for (var i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    // 创建 ArrayBuffer 并为其创建视图
+    var buffer = bytes.buffer;
+    // 返回解码后的数组
+    return buffer;
+}
 
 var GLMaterialState = /** @class */ (function () {
     function GLMaterialState() {
@@ -30888,7 +30982,7 @@ var Player = /** @class */ (function () {
 }());
 function isSceneWithOptions(scene) {
     // TODO: 判断不太优雅，后期试情况优化
-    return isObject(scene) && 'scene' in scene;
+    return isObject(scene) && 'scene' in scene && 'options' in scene;
 }
 /**
  * 禁止/允许创建新的播放器，已创建的不受影响
@@ -31018,7 +31112,7 @@ Renderer.create = function (canvas, framework, renderOptions) {
 Engine.create = function (gl) {
     return new GLEngine(gl);
 };
-var version = "2.0.0-alpha.0";
+var version = "2.0.0-alpha.2";
 logger.info('player version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -31153,7 +31247,6 @@ exports.combineImageTemplate2Async = combineImageTemplate2Async;
 exports.combineImageTemplateAsync = combineImageTemplateAsync;
 exports.compatibleFrag = compatible_frag;
 exports.compatibleVert = compatible_vert;
-exports.convertAnchor = convertAnchor;
 exports.copyFrag = copy;
 exports.createCopyShader = createCopyShader;
 exports.createGLContext = createGLContext;