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

package/dist/index.mjs

@@ -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
  */
 
 import * as THREE from 'three';
@@ -8195,7 +8195,7 @@ function loadMipmapImage(pointer, bins) {
     });
 }
 
-var seed$b = 1;
+var seed$a = 1;
 /**
  * Texture 抽象类
  */
@@ -8204,7 +8204,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", {
@@ -8606,7 +8606,7 @@ var MaterialRenderType;
  * 用于设置材质默认名称的自增序号
  * @internal
  */
-var seed$a = 1;
+var seed$9 = 1;
 /**
  * Material 抽象类
  */
@@ -8621,7 +8621,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 ? 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 ? MaterialRenderType.normal : _b, shader = props.shader, uniformSemantics = props.uniformSemantics;
             _this.name = name_1;
             _this.renderType = renderType; // TODO 没有地方用到
             _this.shaderSource = shader;
@@ -8629,7 +8629,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 = MaterialRenderType.normal;
         }
         return _this;
@@ -9054,7 +9054,7 @@ function generateEmptyTypedArray(type) {
     return new Float32Array(0);
 }
 
-var seed$9 = 1;
+var seed$8 = 1;
 /**
  * Mesh 抽象类
  */
@@ -9066,7 +9066,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;
@@ -9074,7 +9074,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;
@@ -9294,7 +9294,7 @@ var RenderPassDestroyAttachmentType;
      */
     RenderPassDestroyAttachmentType[RenderPassDestroyAttachmentType["destroy"] = 0] = "destroy";
 })(RenderPassDestroyAttachmentType || (RenderPassDestroyAttachmentType = {}));
-var seed$8 = 1;
+var seed$7 = 1;
 /**
  * RenderPass 抽象类
  */
@@ -9306,7 +9306,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 ? 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 ? 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;
@@ -9923,7 +9923,7 @@ var defaultGlobalVolume = {
 };
 
 var RENDER_PASS_NAME_PREFIX = '_effects_default_';
-var seed$7 = 1;
+var seed$6 = 1;
 /**
  * RenderFrame 抽象类
  */
@@ -10058,7 +10058,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,
@@ -11281,6 +11281,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) {
@@ -11313,7 +11319,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) {
@@ -11388,7 +11396,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];
@@ -11876,20 +11886,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));
 }
@@ -12585,7 +12581,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) {
@@ -12648,7 +12644,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);
         }
@@ -12828,13 +12824,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();
         }
@@ -12845,8 +12839,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;
         }
@@ -12883,12 +12876,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]);
             }
         }
     };
@@ -13382,7 +13378,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;
@@ -13460,7 +13456,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,
@@ -13945,171 +13941,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;
@@ -14185,135 +14499,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() {
@@ -14709,7 +14941,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]));
@@ -17714,7 +17946,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));
@@ -17730,7 +17962,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);
@@ -17892,7 +18124,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),
@@ -18073,8 +18306,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();
@@ -18089,299 +18322,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;
@@ -19679,9 +19678,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;
     };
     /**
@@ -20007,7 +20007,7 @@ var TextLoader = /** @class */ (function (_super) {
     return TextLoader;
 }(AbstractPlugin));
 
-var seed$3 = 1;
+var seed$2 = 1;
 /**
  * @since 2.0.0
  * @internal
@@ -20033,24 +20033,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: DataType.Geometry,
-            id: generateGUID(),
-        };
-        _this.geometry.fromData(geometryData);
-        _this.triangles = geometryToTriangles(_this.geometry);
         return _this;
     }
     Object.defineProperty(EffectComponent.prototype, "isDestroyed", {
@@ -20587,11 +20572,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);
@@ -20599,51 +20579,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']));
         }
@@ -22658,7 +22623,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 = [];
@@ -22670,6 +22635,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 }; }
@@ -22685,6 +22654,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];
         }
     }
@@ -22792,12 +22764,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, '');
@@ -22972,8 +22993,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;
 /**
  * 资源管理器
  * 用于加载和动效中所有的资源文件，包括图片、插件、图层粒子数据等
@@ -22993,7 +23028,7 @@ var AssetManager = /** @class */ (function () {
          * 图像资源，用于创建和释放GPU纹理资源
          */
         this.assets = {};
-        this.id = seed$2++;
+        this.id = seed$1++;
         /**
          * 场景加载的超时定时器
          */
@@ -23009,6 +23044,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 对象
@@ -23100,6 +23155,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); })];
@@ -23119,6 +23175,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,
@@ -23965,7 +24022,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;
@@ -24100,7 +24159,6 @@ var CompositionComponent = /** @class */ (function (_super) {
     return CompositionComponent;
 }(ItemBehaviour));
 
-var seed$1 = 1;
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -24173,7 +24231,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;
@@ -24200,7 +24258,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);
@@ -24279,9 +24337,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);
@@ -24564,7 +24622,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
@@ -25029,6 +25088,9 @@ var Composition = /** @class */ (function () {
         }
         this.compositionSourceManager.dispose();
         this.refCompositionProps.clear();
+        if (this.renderer.env === PLAYER_OPTIONS_ENV_EDITOR) {
+            return;
+        }
         this.renderer.clear({
             stencilAction: TextureLoadAction.clear,
             clearStencil: 0,
@@ -25699,9 +25761,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 帧率设置
      */
@@ -25728,6 +25801,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) {
@@ -25750,6 +25824,7 @@ var Ticker = /** @class */ (function () {
         this.intervalId = 0;
         this.lastTime = 0;
         this.paused = true;
+        this._deltaTime = 0;
         this.tickers = [];
     };
     /**
@@ -25757,12 +25832,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 方法
@@ -25772,8 +25849,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; });
@@ -25781,7 +25858,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);
             }
         }
     };
@@ -27297,6 +27374,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.LineSegments(this.geometry.geometry, this.material.material);
+            }
+            else {
+                this.threeMesh = new THREE.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(DataType.SpriteComponent)
+    ], ThreeSpriteComponent);
+    return ThreeSpriteComponent;
+}(SpriteComponent));
+
 setMaxSpriteMeshItemCount(8);
 /**
  * 图片的创建方法
@@ -27344,8 +27518,8 @@ 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);
 
-export { AbstractPlugin, ActivationClipPlayable, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, CurveValue, DEFAULT_FONTS, DataType, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FILTER_NAME_NONE, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior$1 as InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, QCanvasViewer, QText, QTextWrapMode, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, alphaFrame_frag as alphaFrameFrag, alphaMask_frag as alphaMaskFrag, assertExist, asserts, blend, bloomMix_frag as bloomMixVert, bloomThreshold_frag as bloomThresholdVert, calculateTranslation, cameraMove_frag as cameraMoveFrag, cameraMove_vert as cameraMoveVert, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, combineImageTemplate1, combineImageTemplate1Async, combineImageTemplate2, combineImageTemplate2Async, combineImageTemplateAsync, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, convertAnchor, copy as copyFrag, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, deepClone, defaultGlobalVolume, defaultPlugins, delay_frag as delayFrag, deserializeMipmapTexture, distortion_frag as distortionFrag, distortion_vert as distortionVert, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isScene, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, item_define as itemDefine, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadVideo, loadWebPOptional, logger, index$1 as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap, particleVert, pluginLoaderMap, random, registerPlugin, removeItem, requestAsync, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version };
+export { AbstractPlugin, ActivationClipPlayable, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, CurveValue, DEFAULT_FONTS, DataType, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FILTER_NAME_NONE, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior$1 as InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, QCanvasViewer, QText, QTextWrapMode, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, alphaFrame_frag as alphaFrameFrag, alphaMask_frag as alphaMaskFrag, assertExist, asserts, blend, bloomMix_frag as bloomMixVert, bloomThreshold_frag as bloomThresholdVert, calculateTranslation, cameraMove_frag as cameraMoveFrag, cameraMove_vert as cameraMoveVert, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, combineImageTemplate1, combineImageTemplate1Async, combineImageTemplate2, combineImageTemplate2Async, combineImageTemplateAsync, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, copy as copyFrag, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, deepClone, defaultGlobalVolume, defaultPlugins, delay_frag as delayFrag, deserializeMipmapTexture, distortion_frag as distortionFrag, distortion_vert as distortionVert, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isScene, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, item_define as itemDefine, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadVideo, loadWebPOptional, logger, index$1 as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap, particleVert, pluginLoaderMap, random, registerPlugin, removeItem, requestAsync, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version };
 //# sourceMappingURL=index.mjs.map