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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.0
+ * Version: v2.0.0-alpha.2
  */
 
 'use strict';
@@ -8219,7 +8219,7 @@ function loadMipmapImage(pointer, bins) {
     });
 }
 
-var seed$b = 1;
+var seed$a = 1;
 /**
  * Texture 抽象类
  */
@@ -8228,7 +8228,7 @@ var Texture = /** @class */ (function (_super) {
     function Texture(engine) {
         var _this = _super.call(this, engine) || this;
         _this.destroyed = false;
-        _this.id = 'Tex' + seed$b++;
+        _this.id = 'Tex' + seed$a++;
         return _this;
     }
     Object.defineProperty(Texture.prototype, "isDestroyed", {
@@ -8630,7 +8630,7 @@ exports.MaterialRenderType = void 0;
  * 用于设置材质默认名称的自增序号
  * @internal
  */
-var seed$a = 1;
+var seed$9 = 1;
 /**
  * Material 抽象类
  */
@@ -8645,7 +8645,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$a++ : _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$9++ : _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;
@@ -8653,7 +8653,7 @@ var Material = /** @class */ (function (_super) {
             _this.uniformSemantics = __assign$1({}, uniformSemantics); // TODO 废弃，待移除
         }
         else {
-            _this.name = 'Material' + seed$a++;
+            _this.name = 'Material' + seed$9++;
             _this.renderType = exports.MaterialRenderType.normal;
         }
         return _this;
@@ -9078,7 +9078,7 @@ function generateEmptyTypedArray(type) {
     return new Float32Array(0);
 }
 
-var seed$9 = 1;
+var seed$8 = 1;
 /**
  * Mesh 抽象类
  */
@@ -9090,7 +9090,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.fromIdentity() : _c;
-            _this.id = 'Mesh' + seed$9++;
+            _this.id = 'Mesh' + seed$8++;
             _this.name = name_1;
             _this.geometry = geometry;
             _this.material = material;
@@ -9098,7 +9098,7 @@ var Mesh = /** @class */ (function (_super) {
             _this.worldMatrix = worldMatrix;
         }
         else {
-            _this.id = 'Mesh' + seed$9++;
+            _this.id = 'Mesh' + seed$8++;
             _this.name = '<unnamed>';
             _this.worldMatrix = Matrix4.fromIdentity();
             _this._priority = 0;
@@ -9318,7 +9318,7 @@ exports.RenderPassDestroyAttachmentType = void 0;
      */
     RenderPassDestroyAttachmentType[RenderPassDestroyAttachmentType["destroy"] = 0] = "destroy";
 })(exports.RenderPassDestroyAttachmentType || (exports.RenderPassDestroyAttachmentType = {}));
-var seed$8 = 1;
+var seed$7 = 1;
 /**
  * RenderPass 抽象类
  */
@@ -9330,7 +9330,7 @@ var RenderPass = /** @class */ (function () {
         this.attachments = [];
         this.destroyed = false;
         this.initialized = false;
-        var _a = options.name, name = _a === void 0 ? 'RenderPass_' + seed$8++ : _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$7++ : _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;
@@ -9947,7 +9947,7 @@ var defaultGlobalVolume = {
 };
 
 var RENDER_PASS_NAME_PREFIX = '_effects_default_';
-var seed$7 = 1;
+var seed$6 = 1;
 /**
  * RenderFrame 抽象类
  */
@@ -10082,7 +10082,7 @@ var RenderFrame = /** @class */ (function () {
         }
         this.semantics = new SemanticMap(options.semantics);
         this.clearAction = clearAction;
-        this.name = "RenderFrame".concat(seed$7++);
+        this.name = "RenderFrame".concat(seed$6++);
         var firstRP = renderPasses[0];
         var sourceOpts = {
             type: glContext.UNSIGNED_BYTE,
@@ -11305,6 +11305,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) {
@@ -11337,7 +11343,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) {
@@ -11412,7 +11420,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];
@@ -11900,20 +11910,6 @@ var particleOriginTranslateMap = (_a$4 = {},
     _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
     _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
     _a$4);
-/**
- * 提取并转换 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));
 }
@@ -12609,7 +12605,7 @@ function createKeyFrameMeta() {
 }
 
 var tempQuat$1 = new Quaternion();
-var seed$6 = 1;
+var seed$5 = 1;
 // TODO 继承 Component
 var Transform = /** @class */ (function () {
     function Transform(props, parent) {
@@ -12672,7 +12668,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$6++);
+        this.name = "transform_".concat(seed$5++);
         if (props) {
             this.setTransform(props);
         }
@@ -12852,13 +12848,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();
         }
@@ -12869,8 +12863,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;
         }
@@ -12907,12 +12900,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]);
             }
         }
     };
@@ -13406,7 +13402,7 @@ var HELP_LINK = {
 
 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$5 = 1;
+var seed$4 = 1;
 var InteractMesh = /** @class */ (function () {
     function InteractMesh(props, rendererOptions, transform, engine) {
         this.transform = transform;
@@ -13484,7 +13480,7 @@ var InteractMesh = /** @class */ (function () {
     };
     InteractMesh.prototype.createMesh = function (geometry, material) {
         return Mesh.create(this.engine, {
-            name: 'Interact_preview' + seed$5++,
+            name: 'Interact_preview' + seed$4++,
             priority: 0,
             worldMatrix: Matrix4.fromIdentity(),
             geometry: geometry,
@@ -13969,171 +13965,489 @@ 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;
+    };
+    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);
+            }
+            else {
+                tempSize$1.z = tempSize$1.y = tempSize$1.x;
+            }
+            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);
+        }
+    };
+    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);
+        }
+        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);
+    };
+    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();
+    };
+    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; }
+        }
+    };
+    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; }
+        }
+    };
+    return ActivationClipPlayable;
+}(Playable));
+
+/**
+ * @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;
+    }
+    TimelineComponent.prototype.start = function () {
+        var e_1, _a, e_2, _b;
+        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; }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        this.compileTracks(this.playableGraph);
+    };
+    // 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);
+                }
+                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;
+            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; }
+            }
+        }
+        // 判断动画是否结束
+        var ended;
+        if (VFXItem.isParticle(this.item)) {
+            ended = this.item.isEnded(now) && this.item.content.destoryed;
+        }
+        else {
+            ended = this.item.isEnded(now);
+        }
+        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;
+                    }
+                }
+            }
+        }
+        // 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;
@@ -14209,135 +14523,53 @@ var TimelineComponent = /** @class */ (function (_super) {
         }
     };
     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);
-            }
-        }
-        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; }
-        }
-    };
-    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));
-
-/**
- * @since 2.0.0
- * @internal
- */
-var Track = /** @class */ (function () {
-    function Track() {
-        this.clips = [];
-        this.clipSeed = 0;
-    }
-    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 {
-            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 (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            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.playableGraph = new PlayableGraph();
+        this.compileTracks(this.playableGraph);
     };
-    Track.prototype.findClip = function (name) {
-        var e_2, _a;
+    TimelineComponent.prototype.compileTracks = function (graph) {
+        var e_12, _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;
-                }
+            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);
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        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_2) throw e_2.error; }
+            finally { if (e_12) throw e_12.error; }
         }
     };
-    Track.prototype.addClip = function (clip) {
-        clip.playable.bindingItem = this.bindingItem;
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
+    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;
+        var activationTrack = this.createTrack(Track, 'ActivationTrack');
+        activationTrack.createClip(ActivationClipPlayable, 'ActivationTimelineClip');
     };
-    return Track;
-}());
-/**
- * @since 2.0.0
- * @internal
- */
-var TimelineClip = /** @class */ (function () {
-    function TimelineClip() {
-        this.start = 0;
-        this.duration = 0;
-    }
-    return TimelineClip;
-}());
+    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$4 = 0;
+var seed$3 = 0;
 var SpriteColorPlayable = /** @class */ (function (_super) {
     __extends(SpriteColorPlayable, _super);
     function SpriteColorPlayable() {
@@ -14733,7 +14965,7 @@ var SpriteComponent = /** @class */ (function (_super) {
         this.worldMatrix = Matrix4.fromIdentity();
         this.material = material;
         this.geometry = geometry;
-        this.name = 'MSprite' + seed$4++;
+        this.name = 'MSprite' + seed$3++;
         var startColor = options.startColor || [1, 1, 1, 1];
         this.material.setVector4('_Color', new Vector4().setFromArray(startColor));
         this.material.setVector4('_TexOffset', new Vector4().setFromArray([0, 0, 1, 1]));
@@ -17738,7 +17970,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));
@@ -17754,7 +17986,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);
@@ -17916,7 +18148,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),
@@ -18097,8 +18330,8 @@ var ParticleSystem = /** @class */ (function (_super) {
 }(Component));
 // array performance better for small memory than Float32Array
 var tempDir = new Vector3();
-var tempSize$1 = new Vector2();
-var tempRot$1 = new Euler();
+var tempSize = new Vector2();
+var tempRot = new Euler();
 var tmpDirX = new Vector3();
 var tmpDirY = new Vector3();
 var tempVec3 = new Vector3();
@@ -18113,299 +18346,65 @@ function getBurstOffsets(burstOffsets) {
             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();
-        }
-    };
-    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 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 };
-        }
-        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();
-        }
-    };
-    /**
-     * 应用时间轴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);
-            }
-            else {
-                tempSize.z = tempSize.y = tempSize.x;
-            }
-            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);
-        }
-        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);
-        }
-    };
-    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);
-        }
-        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);
+                offsets = ret[index] = [];
             }
-            else {
-                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.size || 1);
+            if (isArr) {
+                offsets.push(arr.slice(1, 4));
             }
-        }
-        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);
+            else {
+                offsets.push([+arr.x, +arr.y, +arr.z]);
             }
-        }
-        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);
-    };
-    return AnimationClipPlayable;
-}(AnimationPlayable));
+        });
+    }
+    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;
@@ -19703,9 +19702,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;
     };
     /**
@@ -20031,7 +20031,7 @@ var TextLoader = /** @class */ (function (_super) {
     return TextLoader;
 }(AbstractPlugin));
 
-var seed$3 = 1;
+var seed$2 = 1;
 /**
  * @since 2.0.0
  * @internal
@@ -20057,24 +20057,9 @@ var EffectComponent = /** @class */ (function (_super) {
                 };
             }
         };
-        _this.id = 'Mesh' + seed$3++;
+        _this.id = 'Mesh' + seed$2++;
         _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", {
@@ -20611,11 +20596,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);
@@ -20623,51 +20603,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['Item duration can\'t be less than 0']));
         }
@@ -22682,7 +22647,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 = [];
@@ -22694,6 +22659,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 }; }
@@ -22709,6 +22678,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];
         }
     }
@@ -22816,12 +22788,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, '');
@@ -22996,8 +23017,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$2 = 1;
+var seed$1 = 1;
 /**
  * 资源管理器
  * 用于加载和动效中所有的资源文件，包括图片、插件、图层粒子数据等
@@ -23017,7 +23052,7 @@ var AssetManager = /** @class */ (function () {
          * 图像资源，用于创建和释放GPU纹理资源
          */
         this.assets = {};
-        this.id = seed$2++;
+        this.id = seed$1++;
         /**
          * 场景加载的超时定时器
          */
@@ -23033,6 +23068,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 对象
@@ -23124,6 +23179,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); })];
@@ -23143,6 +23199,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,
@@ -23989,7 +24046,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;
@@ -24124,7 +24183,6 @@ var CompositionComponent = /** @class */ (function (_super) {
     return CompositionComponent;
 }(ItemBehaviour));
 
-var seed$1 = 1;
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -24197,7 +24255,7 @@ var Composition = /** @class */ (function () {
         this.width = width;
         this.height = height;
         this.renderOrder = baseRenderOrder;
-        this.id = seed$1++;
+        this.id = sourceContent.id;
         this.renderer = renderer;
         this.texInfo = imageUsage !== null && imageUsage !== void 0 ? imageUsage : {};
         this.event = event;
@@ -24224,7 +24282,7 @@ var Composition = /** @class */ (function () {
         this.rootItem.onEnd = function () {
             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);
@@ -24303,9 +24361,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);
@@ -24588,7 +24646,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
@@ -25053,6 +25112,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,
@@ -25723,9 +25785,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 帧率设置
      */
@@ -25752,6 +25825,7 @@ var Ticker = /** @class */ (function () {
     Ticker.prototype.start = function () {
         var _this = this;
         this.paused = false;
+        this._deltaTime = 0;
         if (!this.intervalId) {
             this.lastTime = performance.now();
             var raf_1 = requestAnimationFrame || function (func) {
@@ -25774,6 +25848,7 @@ var Ticker = /** @class */ (function () {
         this.intervalId = 0;
         this.lastTime = 0;
         this.paused = true;
+        this._deltaTime = 0;
         this.tickers = [];
     };
     /**
@@ -25781,12 +25856,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 方法
@@ -25796,8 +25873,8 @@ var Ticker = /** @class */ (function () {
             return;
         }
         var startTime = 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; });
@@ -25805,7 +25882,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);
             }
         }
     };
@@ -27321,6 +27398,103 @@ function isSceneWithOptions(scene) {
     return isObject(scene) && 'scene' in scene;
 }
 
+var ThreeSpriteComponent = /** @class */ (function (_super) {
+    __extends(ThreeSpriteComponent, _super);
+    function ThreeSpriteComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ThreeSpriteComponent.prototype, "priority", {
+        /**
+         * 获取 mesh 的渲染顺序
+         */
+        get: function () {
+            return this.threeMesh.renderOrder;
+        },
+        /**
+         * 设置 mesh 的渲染顺序
+         *
+         * @param v - 顺序 index
+         */
+        set: function (v) {
+            if (this.threeMesh) {
+                this.threeMesh.renderOrder = v;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * TODO: 待移除
+     * 设置 mesh 可见性
+     *
+     * @param val - 可见性开关
+     */
+    ThreeSpriteComponent.prototype.setVisible = function (val) {
+        this.threeMesh.visible = val;
+    };
+    /**
+     * TODO: 待移除
+     * 获取 mesh 的可见性
+     *
+     * @returns
+     */
+    ThreeSpriteComponent.prototype.getVisible = function () {
+        return this.threeMesh.visible;
+    };
+    Object.defineProperty(ThreeSpriteComponent.prototype, "enabled", {
+        get: function () {
+            return this.threeMesh.visible;
+        },
+        set: function (value) {
+            this.threeMesh.visible = value;
+            if (value) {
+                this.onEnable();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 销毁方法
+     *
+     */
+    ThreeSpriteComponent.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!this.isActiveAndEnabled) {
+            this.threeMesh.clear();
+        }
+    };
+    ThreeSpriteComponent.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        if (!this.threeMesh) {
+            if (this.geometry.mode === glContext.LINES) {
+                this.threeMesh = new THREE__namespace.LineSegments(this.geometry.geometry, this.material.material);
+            }
+            else {
+                this.threeMesh = new THREE__namespace.Mesh(this.geometry.geometry, this.material.material);
+            }
+        }
+    };
+    ThreeSpriteComponent.prototype.start = function () {
+        _super.prototype.start.call(this);
+        this.engine.threeGroup.add(this.threeMesh);
+    };
+    ThreeSpriteComponent.prototype.render = function (renderer) {
+        if (!this.isActiveAndEnabled) {
+            return;
+        }
+        this.material.setMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
+        this.material.use(renderer, renderer.renderingData.currentFrame.globalUniforms);
+    };
+    ThreeSpriteComponent.prototype.onDestroy = function () {
+        this.threeMesh.clear();
+    };
+    ThreeSpriteComponent = __decorate([
+        effectsClass(exports.DataType.SpriteComponent)
+    ], ThreeSpriteComponent);
+    return ThreeSpriteComponent;
+}(SpriteComponent));
+
 setMaxSpriteMeshItemCount(8);
 /**
  * 图片的创建方法
@@ -27368,7 +27542,7 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.0";
+var version = "2.0.0-alpha.2";
 logger.info('THREEJS plugin version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -27476,6 +27650,7 @@ exports.ThreeComposition = ThreeComposition;
 exports.ThreeDisplayObject = ThreeDisplayObject;
 exports.ThreeEngine = ThreeEngine;
 exports.ThreeMaterial = ThreeMaterial;
+exports.ThreeSpriteComponent = ThreeSpriteComponent;
 exports.ThreeTexture = ThreeTexture;
 exports.Ticker = Ticker;
 exports.TimelineClip = TimelineClip;
@@ -27509,7 +27684,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;