@galacean/effects-core 2.4.0-beta.0 → 2.4.0-beta.2

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.4.0-beta.0
+ * Version: v2.4.0-beta.2
  */
 
 'use strict';
@@ -2004,7 +2004,7 @@ function getDirectStore(target) {
     function EffectsObject(engine) {
         this.engine = engine;
         this.guid = generateGUID();
-        this.taggedProperties = {};
+        this.defination = {};
         this.engine.addInstance(this);
     }
     var _proto = EffectsObject.prototype;
@@ -2029,11 +2029,7 @@ function getDirectStore(target) {
    * 反序列化函数
    *
    * @param data - 对象的序列化的数据
-   */ _proto.fromData = function fromData(data) {
-        if (data.id) {
-            this.setInstanceId(data.id);
-        }
-    };
+   */ _proto.fromData = function fromData(data) {};
     /**
    *
    */ _proto.dispose = function dispose() {};
@@ -2129,9 +2125,6 @@ function getDirectStore(target) {
     };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
-        if (data.item) {
-            this.item = data.item;
-        }
     };
     _proto.dispose = function dispose() {
         if (this.isEnableCalled) {
@@ -2196,11 +2189,15 @@ function getDirectStore(target) {
     ]);
     return Component;
 }(EffectsObject);
+__decorate([
+    serialize()
+], Component.prototype, "item", void 0);
 __decorate([
     serialize()
 ], Component.prototype, "_enabled", void 0);
 /**
  * @since 2.0.0
+ * @deprecated 2.4.0 Please use Component instead
  */ var Behaviour = /*#__PURE__*/ function(Component) {
     _inherits(Behaviour, Component);
     function Behaviour() {
@@ -2230,10 +2227,6 @@ __decorate([
     }
     var _proto = RendererComponent.prototype;
     _proto.render = function render(renderer) {};
-    _proto.setVFXItem = function setVFXItem(item) {
-        Component.prototype.setVFXItem.call(this, item);
-        this.item.rendererComponents.push(this);
-    };
     _proto.onEnable = function onEnable() {
         var _this_item_composition;
         (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.renderFrame.addMeshToDefaultRenderPass(this);
@@ -2242,18 +2235,6 @@ __decorate([
         var _this_item_composition;
         (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.renderFrame.removeMeshFromDefaultRenderPass(this);
     };
-    _proto.fromData = function fromData(data) {
-        Component.prototype.fromData.call(this, data);
-    };
-    _proto.toData = function toData() {
-        Component.prototype.toData.call(this);
-    };
-    _proto.dispose = function dispose() {
-        if (this.item) {
-            removeItem(this.item.rendererComponents, this);
-        }
-        Component.prototype.dispose.call(this);
-    };
     _create_class(RendererComponent, [
         {
             key: "priority",
@@ -3876,11 +3857,11 @@ exports.EffectComponent = __decorate([
     effectsClass(DataType.EffectComponent)
 ], exports.EffectComponent);
 
-exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
-    _inherits(PostProcessVolume, Behaviour);
+exports.PostProcessVolume = /*#__PURE__*/ function(Component) {
+    _inherits(PostProcessVolume, Component);
     function PostProcessVolume(engine) {
         var _this;
-        _this = Behaviour.call(this, engine) || this;
+        _this = Component.call(this, engine) || this;
         _this.bloom = {
             threshold: 0,
             intensity: 0,
@@ -3911,7 +3892,7 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
         }
     };
     return PostProcessVolume;
-}(Behaviour);
+}(Component);
 __decorate([
     serialize()
 ], exports.PostProcessVolume.prototype, "bloom", void 0);
@@ -6144,12 +6125,7 @@ function setMaskMode(material, maskMode, colorMask) {
                 glContext.REPLACE
             ];
             // 关闭/开启蒙版元素的颜色写入
-            material.colorMask = [
-                colorMask,
-                colorMask,
-                colorMask,
-                colorMask
-            ];
+            material.colorMask = colorMask;
             break;
         case exports.MaskMode.OBSCURED:
             material.stencilTest = true;
@@ -7621,13 +7597,6 @@ exports.MaterialRenderType = void 0;
             set: /**
    * 设置 Material 的通过 alpha 值决定临时覆盖值计算的开关
    * @param value - 是否开启 alpha 抖动
-   */ function set(value) {}
-        },
-        {
-            key: "colorMask",
-            set: /**
-   * 设置 Material 颜色缓冲区的写入开关
-   * @param value
    */ function set(value) {}
         },
         {
@@ -7686,10 +7655,15 @@ var MaskProcessor = /*#__PURE__*/ function() {
             } else if (mode === ObscuredMode.OBSCURED || mode === ObscuredMode.REVERSE_OBSCURED) {
                 maskMode = mode === ObscuredMode.OBSCURED ? exports.MaskMode.OBSCURED : exports.MaskMode.REVERSE_OBSCURED;
                 this.maskRef = ref.maskManager.getRefValue();
+                this.maskable = ref;
             }
         }
         return maskMode;
     };
+    _proto.drawStencilMask = function drawStencilMask(renderer) {
+        var _this_maskable;
+        (_this_maskable = this.maskable) == null ? void 0 : _this_maskable.drawStencilMask(renderer);
+    };
     return MaskProcessor;
 }();
 
@@ -12596,17 +12570,16 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         if (!this.getVisible()) {
             return;
         }
-        if (renderer.renderingData.currentFrame.globalUniforms) {
-            renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
-        }
-        for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            material.setVector2("_Size", this.transform.size);
-            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
-                material.setVector3("_Scale", this.transform.scale);
-            }
-            renderer.drawGeometry(this.geometry, material, i);
-        }
+        this.maskManager.drawStencilMask(renderer);
+        this.draw(renderer);
+    };
+    /**
+   * @internal
+   */ _proto.drawStencilMask = function drawStencilMask(renderer) {
+        var previousColorMask = this.material.colorMask;
+        this.material.colorMask = false;
+        this.draw(renderer);
+        this.material.colorMask = previousColorMask;
     };
     _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
@@ -12744,10 +12717,27 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         }
         return material;
     };
+    _proto.draw = function draw(renderer) {
+        if (renderer.renderingData.currentFrame.globalUniforms) {
+            renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
+        }
+        for(var i = 0; i < this.materials.length; i++){
+            var material = this.materials[i];
+            material.setVector2("_Size", this.transform.size);
+            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
+                material.setVector3("_Scale", this.transform.scale);
+            }
+            renderer.drawGeometry(this.geometry, material, i);
+        }
+    };
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
         var _data_renderer;
         var renderer = (_data_renderer = data.renderer) != null ? _data_renderer : {};
+        var maskProps = data.mask;
+        if (maskProps && maskProps.ref) {
+            maskProps.ref = this.engine.findObject(maskProps.ref);
+        }
         var maskMode = this.maskManager.getMaskMode(data);
         // TODO 新蒙板上线后移除
         //-------------------------------------------------------------------------
@@ -12755,15 +12745,15 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         //@ts-expect-error
         var split = data.splits && !data.textureSheetAnimation ? data.splits[0] : undefined;
         var shapeGeometry = undefined;
-        if (shapeData !== undefined && !("aPoint" in shapeData && "index" in shapeData)) {
+        if (shapeData !== undefined && shapeData !== null && !("aPoint" in shapeData && "index" in shapeData)) {
             shapeGeometry = getGeometryByShape(shapeData, split);
         }
-        var _renderer_renderMode, _renderer_blending, _renderer_texture, _renderer_side;
+        var _renderer_renderMode, _renderer_blending, _renderer_side;
         //-------------------------------------------------------------------------
         this.renderer = {
             renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.MESH,
             blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
-            texture: (_renderer_texture = renderer.texture) != null ? _renderer_texture : this.engine.emptyTexture,
+            texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.emptyTexture,
             occlusion: !!renderer.occlusion,
             transparentOcclusion: !!renderer.transparentOcclusion || maskMode === exports.MaskMode.MASK,
             side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
@@ -12980,14 +12970,14 @@ exports.ShapeComponent = /*#__PURE__*/ function(BaseRenderComponent) {
                             var control2 = easingIns[pointIndex.easingIn];
                             this.graphicsPath.bezierCurveTo(control1.x + lastPoint.x, control1.y + lastPoint.y, control2.x + point.x, control2.y + point.y, point.x, point.y, 1);
                         }
-                        var pointIndex1 = indices[0];
-                        var lastPointIndex1 = indices[indices.length - 1];
-                        var point1 = points[pointIndex1.point];
-                        var lastPoint1 = points[lastPointIndex1.point];
-                        var control11 = easingOuts[lastPointIndex1.easingOut];
-                        var control21 = easingIns[pointIndex1.easingIn];
-                        this.graphicsPath.bezierCurveTo(control11.x + lastPoint1.x, control11.y + lastPoint1.y, control21.x + point1.x, control21.y + point1.y, point1.x, point1.y, 1);
                         if (shape.close) {
+                            var pointIndex1 = indices[0];
+                            var lastPointIndex1 = indices[indices.length - 1];
+                            var point1 = points[pointIndex1.point];
+                            var lastPoint1 = points[lastPointIndex1.point];
+                            var control11 = easingOuts[lastPointIndex1.easingOut];
+                            var control21 = easingIns[pointIndex1.easingIn];
+                            this.graphicsPath.bezierCurveTo(control11.x + lastPoint1.x, control11.y + lastPoint1.y, control21.x + point1.x, control21.y + point1.y, point1.x, point1.y, 1);
                             this.graphicsPath.closePath();
                         }
                     }
@@ -13117,6 +13107,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(BaseRenderComponent) {
                     break;
                 }
         }
+        var maskProps = data.mask;
+        if (maskProps && maskProps.ref) {
+            maskProps.ref = this.engine.findObject(maskProps.ref);
+        }
         var maskMode = this.maskManager.getMaskMode(data);
         var maskRef = this.maskManager.getRefValue();
         this.material.stencilRef = maskRef !== undefined ? [
@@ -13266,11 +13260,11 @@ exports.Fake3DAnimationMode = void 0;
     Fake3DAnimationMode[Fake3DAnimationMode["Linear"] = 1] = "Linear";
 })(exports.Fake3DAnimationMode || (exports.Fake3DAnimationMode = {}));
 
-exports.CameraController = /*#__PURE__*/ function(Behaviour) {
-    _inherits(CameraController, Behaviour);
+exports.CameraController = /*#__PURE__*/ function(Component) {
+    _inherits(CameraController, Component);
     function CameraController(engine, props) {
         var _this;
-        _this = Behaviour.call(this, engine) || this;
+        _this = Component.call(this, engine) || this;
         if (props) {
             _this.fromData(props);
         }
@@ -13291,11 +13285,11 @@ exports.CameraController = /*#__PURE__*/ function(Behaviour) {
         }
     };
     _proto.fromData = function fromData(data) {
-        Behaviour.prototype.fromData.call(this, data);
+        Component.prototype.fromData.call(this, data);
         this.options = data.options;
     };
     return CameraController;
-}(Behaviour);
+}(Component);
 exports.CameraController = __decorate([
     effectsClass(DataType.CameraController)
 ], exports.CameraController);
@@ -15376,6 +15370,7 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         };
         _this.duringPlay = false;
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
+        _this.lastTime = -1;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -15466,11 +15461,21 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         var _this_previewContent;
         this.duringPlay = true;
         // trigger messageBegin when item enter
-        if (this.item.time > 0 && this.item.time - dt / 1000 <= 0) {
-            var _this_item_composition;
-            var options = this.item.props.content.options;
-            (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.addInteractiveItem(this.item, options.type);
+        if (this.lastTime <= this.item.time) {
+            if (this.item.time >= 0 && this.lastTime < 0) {
+                var _this_item_composition;
+                var options = this.item.props.content.options;
+                (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.addInteractiveItem(this.item, options.type);
+            }
+        } else {
+            // loop trigger
+            if (this.item.time >= 0) {
+                var _this_item_composition1;
+                var options1 = this.item.props.content.options;
+                (_this_item_composition1 = this.item.composition) == null ? void 0 : _this_item_composition1.addInteractiveItem(this.item, options1.type);
+            }
         }
+        this.lastTime = this.item.time;
         (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
         if (!this.dragEvent || !this.bouncingArg) {
             return;
@@ -18602,6 +18607,7 @@ function modifyMaxKeyframeShader(shader, maxVertex, maxFrag) {
         this.particleMesh.mesh.material.setVector4("uParams", uParams.set(time, this.item.duration, 0, 0));
     };
     _proto.render = function render(renderer) {
+        this.maskManager.drawStencilMask(renderer);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
             mesh.render(renderer);
@@ -19443,7 +19449,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             mask: maskProps.maskRef,
             maskMode: maskProps.maskMode,
             forceTarget: forceTarget,
-            diffuse: renderer.texture,
+            diffuse: renderer.texture ? this.engine.findObject(renderer.texture) : undefined,
             sizeOverLifetime: sizeOverLifetimeGetter,
             anchor: anchor
         };
@@ -19530,7 +19536,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
                 maxTrailCount: options.maxCount,
                 pointCountPerTrail: Math.round(trails.maxPointPerTrail) || 32,
                 blending: trails.blending,
-                texture: trails.texture,
+                texture: trails.texture ? this.engine.findObject(trails.texture) : undefined,
                 opacityOverLifetime: createValueGetter(trails.opacityOverLifetime || 1),
                 widthOverTrail: createValueGetter(trails.widthOverTrail || 1),
                 // order: vfxItem.listIndex + (trails.orderOffset || 0),
@@ -19551,6 +19557,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         }
         this.renderer = new ParticleSystemRenderer(this.engine, particleMeshProps, trailMeshProps);
         this.renderer.item = this.item;
+        this.renderer.maskManager = this.maskManager;
         this.meshes = this.renderer.meshes;
         var interaction = props.interaction;
         if (interaction) {
@@ -19569,8 +19576,9 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         var maskRef = 0;
         if (data.mask) {
             var _data_mask = data.mask, mode = _data_mask.mode, ref = _data_mask.ref;
+            var refComponent = this.engine.findObject(ref);
             maskMode = mode;
-            maskRef = ref.maskManager.getRefValue();
+            maskRef = refComponent.maskManager.getRefValue();
         }
         return {
             maskMode: maskMode,
@@ -19858,7 +19866,7 @@ var SubCompositionClipPlayable = /*#__PURE__*/ function(Playable) {
     var _proto = SubCompositionClipPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
         var boundObject = context.output.getUserData();
-        if (_instanceof1(boundObject, CompositionComponent)) {
+        if (_instanceof1(boundObject, exports.CompositionComponent)) {
             boundObject.time = this.getTime();
         }
     };
@@ -19873,7 +19881,7 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
     var _proto = SubCompositionMixerPlayable.prototype;
     _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
-        if (!_instanceof1(boundObject, CompositionComponent)) {
+        if (!_instanceof1(boundObject, exports.CompositionComponent)) {
             return;
         }
         var compositionComponent = boundObject;
@@ -20241,7 +20249,7 @@ exports.SubCompositionTrack = /*#__PURE__*/ function(TrackAsset) {
         if (!this.parent || !_instanceof1(this.parent.boundObject, exports.VFXItem)) {
             throw new Error("SubCompositionTrack needs to be set under the VFXItem track.");
         }
-        this.boundObject = this.parent.boundObject.getComponent(CompositionComponent);
+        this.boundObject = this.parent.boundObject.getComponent(exports.CompositionComponent);
     };
     _proto.createTrackMixer = function createTrackMixer(graph) {
         return new SubCompositionMixerPlayable(graph);
@@ -20658,13 +20666,11 @@ exports.Vector2PropertyPlayableAsset = __decorate([
     effectsClass(DataType.Vector2PropertyPlayableAsset)
 ], exports.Vector2PropertyPlayableAsset);
 
-/**
- * @since 2.0.0
- */ var CompositionComponent = /*#__PURE__*/ function(Behaviour) {
-    _inherits(CompositionComponent, Behaviour);
+exports.CompositionComponent = /*#__PURE__*/ function(Component) {
+    _inherits(CompositionComponent, Component);
     function CompositionComponent() {
         var _this;
-        _this = Behaviour.apply(this, arguments) || this;
+        _this = Component.apply(this, arguments) || this;
         _this.time = 0;
         _this.startTime = 0;
         _this.items = [] // 场景的所有元素
@@ -20840,13 +20846,10 @@ exports.Vector2PropertyPlayableAsset = __decorate([
         return startOrder;
     };
     _proto.fromData = function fromData(data) {
-        Behaviour.prototype.fromData.call(this, data);
+        Component.prototype.fromData.call(this, data);
         var compositionData = data;
-        this.items = compositionData.items;
         var _compositionData_startTime;
         this.startTime = (_compositionData_startTime = compositionData.startTime) != null ? _compositionData_startTime : 0;
-        this.sceneBindings = compositionData.sceneBindings;
-        this.timelineAsset = compositionData.timelineAsset;
     };
     _proto.resolveBindings = function resolveBindings() {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.sceneBindings), _step; !(_step = _iterator()).done;){
@@ -20869,7 +20872,19 @@ exports.Vector2PropertyPlayableAsset = __decorate([
         }
     };
     return CompositionComponent;
-}(Behaviour);
+}(Component);
+__decorate([
+    serialize()
+], exports.CompositionComponent.prototype, "items", void 0);
+__decorate([
+    serialize()
+], exports.CompositionComponent.prototype, "sceneBindings", void 0);
+__decorate([
+    serialize()
+], exports.CompositionComponent.prototype, "timelineAsset", void 0);
+exports.CompositionComponent = __decorate([
+    effectsClass("CompositionComponent")
+], exports.CompositionComponent);
 
 /**
  *
@@ -21061,631 +21076,161 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
  // }
 (TickData);
 
-var SerializationHelper = /*#__PURE__*/ function() {
-    function SerializationHelper() {}
-    SerializationHelper.collectSerializableObject = function collectSerializableObject(effectsObject, res) {
-        if (res[effectsObject.getInstanceId()]) {
-            return;
+/**
+ * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
+ * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
+ * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
+ */ var Composition = /*#__PURE__*/ function(EventEmitter) {
+    _inherits(Composition, EventEmitter);
+    function Composition(props, scene) {
+        var _this;
+        var _scene_jsonScene_renderSettings;
+        _this = EventEmitter.call(this) || this;
+        /**
+   *
+   */ _this.sceneTicking = new SceneTicking();
+        /**
+   * 动画播放速度
+   */ _this.speed = 1;
+        /**
+   * 合成是否结束
+   */ _this.isEnded = false;
+        /**
+   * 用于保存与当前合成相关的插件数据
+   */ _this.loaderData = {};
+        /**
+   * 预合成数组
+   */ _this.refContent = [];
+        /**
+   * 是否开启后处理
+   */ _this.postProcessingEnabled = false;
+        // TODO: 待优化
+        _this.assigned = false;
+        /**
+   * 销毁状态位
+   */ _this.destroyed = false;
+        _this.postLoaders = [];
+        /**
+   * 合成暂停/播放 标识
+   */ _this.paused = false;
+        _this.lastVideoUpdateTime = 0;
+        _this.isEndCalled = false;
+        _this._textures = [];
+        var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, event = props.event, width = props.width, height = props.height, handleItemMessage = props.handleItemMessage;
+        _this.renderer = renderer;
+        _this._textures = scene.textureOptions;
+        var _scene_jsonScene_renderSettings_postProcessingEnabled;
+        _this.postProcessingEnabled = (_scene_jsonScene_renderSettings_postProcessingEnabled = (_scene_jsonScene_renderSettings = scene.jsonScene.renderSettings) == null ? void 0 : _scene_jsonScene_renderSettings.postProcessingEnabled) != null ? _scene_jsonScene_renderSettings_postProcessingEnabled : false;
+        _this.getEngine().renderLevel = scene.renderLevel;
+        if (reusable) {
+            _this.keepResource = true;
+            scene.textures = undefined;
+            scene.consumed = true;
         }
-        effectsObject.toData();
-        res[effectsObject.getInstanceId()] = effectsObject;
-        var serializedProperties = getMergedStore(effectsObject);
-        if (serializedProperties) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties)), _step; !(_step = _iterator()).done;){
-                var key = _step.value;
-                // TODO 待移除，序列化属性通过 effectsObject 对象直接获取
-                var value = effectsObject.taggedProperties[key];
-                if (value === undefined) {
-                    value = effectsObject[key];
-                }
-                if (EffectsObject.is(value)) {
-                    SerializationHelper.collectSerializableObject(value, res);
-                } else if (isArray(value)) {
-                    for(var _iterator1 = _create_for_of_iterator_helper_loose(value), _step1; !(_step1 = _iterator1()).done;){
-                        var arrayValue = _step1.value;
-                        if (EffectsObject.is(arrayValue)) {
-                            SerializationHelper.collectSerializableObject(arrayValue, res);
-                        }
-                    }
-                } else if (isObject(value)) {
-                    // 非 EffectsObject 对象只递归一层
-                    for(var _iterator2 = _create_for_of_iterator_helper_loose(Object.keys(value)), _step2; !(_step2 = _iterator2()).done;){
-                        var objectKey = _step2.value;
-                        var objectValue = value[objectKey];
-                        if (EffectsObject.is(objectValue)) {
-                            SerializationHelper.collectSerializableObject(objectValue, res);
-                        }
-                    }
-                }
+        var sourceContent = scene.jsonScene.compositions[0];
+        for(var _iterator = _create_for_of_iterator_helper_loose(scene.jsonScene.compositions), _step; !(_step = _iterator()).done;){
+            var composition = _step.value;
+            if (composition.id === scene.jsonScene.compositionId) {
+                sourceContent = composition;
             }
         }
+        assertExist(sourceContent);
+        // Instantiate composition rootItem
+        _this.rootItem = new exports.VFXItem(_this.getEngine());
+        _this.rootItem.name = "rootItem";
+        _this.rootItem.duration = sourceContent.duration;
+        _this.rootItem.endBehavior = sourceContent.endBehavior;
+        _this.rootItem.composition = _assert_this_initialized(_this);
+        // Create rootItem components
+        //@ts-expect-error TODO update spec.
+        var componentPaths = sourceContent.components;
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(componentPaths), _step1; !(_step1 = _iterator1()).done;){
+            var componentPath = _step1.value;
+            var component = _this.getEngine().findObject(componentPath);
+            _this.rootItem.components.push(component);
+            component.item = _this.rootItem;
+        }
+        _this.rootComposition = _this.rootItem.getComponent(exports.CompositionComponent);
+        _this.width = width;
+        _this.height = height;
+        _this.renderOrder = baseRenderOrder;
+        _this.id = sourceContent.id;
+        _this.renderer = renderer;
+        _this.event = event;
+        var _scene_startTime, _scene_totalTime;
+        _this.statistic = {
+            loadStart: (_scene_startTime = scene.startTime) != null ? _scene_startTime : 0,
+            loadTime: (_scene_totalTime = scene.totalTime) != null ? _scene_totalTime : 0,
+            compileTime: 0,
+            firstFrameTime: 0
+        };
+        _this.reusable = reusable;
+        _this.speed = speed;
+        _this.name = sourceContent.name;
+        _this.pluginSystem = scene.pluginSystem;
+        _this.pluginSystem.initializeComposition(_assert_this_initialized(_this), scene);
+        _this.camera = new Camera(_this.name, _extends({}, sourceContent == null ? void 0 : sourceContent.camera, {
+            aspect: width / height
+        }));
+        _this.url = scene.url;
+        _this.assigned = true;
+        _this.interactive = true;
+        _this.handleItemMessage = handleItemMessage;
+        _this.createRenderFrame();
+        _this.rendererOptions = null;
+        Composition.buildItemTree(_this.rootItem);
+        _this.rootComposition.setChildrenRenderOrder(0);
+        _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
+        return _this;
+    }
+    var _proto = Composition.prototype;
+    /**
+   * 获取合成的时长
+   */ _proto.getDuration = function getDuration() {
+        return this.rootItem.duration;
     };
-    SerializationHelper.serializeEffectObject = function serializeEffectObject(effectsObject) {
-        // 持有所有需要序列化的引擎对象
-        var serializableMap = {};
-        var engine = effectsObject.engine;
-        // 加入内存中已加载的资产数据，避免重复创建资产数据
-        var serializedDatas = _extends({}, engine.jsonSceneData);
-        // 递归收集所有需要序列化的对象
-        SerializationHelper.collectSerializableObject(effectsObject, serializableMap);
-        // 依次序列化
-        for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializableMap)), _step; !(_step = _iterator()).done;){
-            var guid = _step.value;
-            var serializeObject = serializableMap[guid];
-            if (!serializedDatas[serializeObject.getInstanceId()]) {
-                serializedDatas[serializeObject.getInstanceId()] = {};
-            }
-            SerializationHelper.serialize(serializeObject, serializedDatas[serializeObject.getInstanceId()]);
-        }
-        return serializedDatas;
+    /**
+   * 重新开始合成
+   */ _proto.restart = function restart() {
+        this.reset();
+        this.forwardTime(this.startTime);
     };
-    SerializationHelper.serialize = function serialize(effectsObject, serializedData) {
-        effectsObject.toData();
-        if (!serializedData) {
-            serializedData = {};
-        }
-        var serializedProperties = getMergedStore(effectsObject);
-        if (serializedProperties) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties)), _step; !(_step = _iterator()).done;){
-                var key = _step.value;
-                var value = effectsObject[key];
-                if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(value)) {
-                    // TODO json 数据避免传 typedArray
-                    serializedData[key] = value;
-                } else if (isArray(value)) {
-                    if (!serializedData[key]) {
-                        serializedData[key] = [];
-                    }
-                    SerializationHelper.serializeArrayProperty(value, serializedData[key], 0);
-                } else if (EffectsObject.is(value)) {
-                    // TODO 处理 EffectsObject 递归序列化
-                    serializedData[key] = {
-                        id: value.getInstanceId()
-                    };
-                } else if (isObject(value)) {
-                    if (!serializedData[key]) {
-                        serializedData[key] = {};
-                    }
-                    SerializationHelper.serializeObjectProperty(value, serializedData[key], 0);
-                }
-            }
-        }
-        // TODO 待移除 tagggedProperties 为没有装饰器的临时方案
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(effectsObject.taggedProperties)), _step1; !(_step1 = _iterator1()).done;){
-            var key1 = _step1.value;
-            var value1 = effectsObject.taggedProperties[key1];
-            if (typeof value1 === "number" || typeof value1 === "string" || typeof value1 === "boolean" || SerializationHelper.checkTypedArray(value1)) {
-                // TODO json 数据避免传 typedArray
-                serializedData[key1] = value1;
-            } else if (isArray(value1)) {
-                if (!serializedData[key1]) {
-                    serializedData[key1] = [];
-                }
-                SerializationHelper.serializeArrayProperty(value1, serializedData[key1], 0);
-            } else if (EffectsObject.is(value1)) {
-                // TODO 处理 EffectsObject 递归序列化
-                serializedData[key1] = {
-                    id: value1.getInstanceId()
-                };
-            } else if (isObject(value1)) {
-                if (!serializedData[key1]) {
-                    serializedData[key1] = {};
-                }
-                SerializationHelper.serializeObjectProperty(value1, serializedData[key1], 0);
-            }
-        }
-        return serializedData;
-    };
-    SerializationHelper.deserialize = function deserialize(serializedData, effectsObject) {
-        var taggedProperties = effectsObject.taggedProperties;
-        var serializedProperties = getMergedStore(effectsObject);
-        var engine = effectsObject.engine;
-        for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedData)), _step; !(_step = _iterator()).done;){
-            var key = _step.value;
-            if (serializedProperties && serializedProperties[key]) {
-                continue;
-            }
-            var value = serializedData[key];
-            taggedProperties[key] = SerializationHelper.deserializeProperty(value, engine, 0);
-        }
-        if (serializedProperties) {
-            for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties)), _step1; !(_step1 = _iterator1()).done;){
-                var key1 = _step1.value;
-                var value1 = serializedData[key1];
-                if (value1 === undefined) {
-                    continue;
-                }
-                var propertyType = serializedProperties[key1].type;
-                // FIXME: taggedProperties 为 readonly，这里存在强制赋值
-                // @ts-expect-error
-                effectsObject[key1] = SerializationHelper.deserializeProperty(value1, engine, 0, propertyType);
-            }
-        }
-        effectsObject.fromData(taggedProperties);
-    };
-    SerializationHelper.deserializeAsync = function deserializeAsync(serializedData, effectsObject) {
-        return _async_to_generator(function() {
-            var taggedProperties, serializedProperties, engine, _iterator, _step, key, value, _iterator1, _step1, key1, value1, propertyType;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        taggedProperties = effectsObject.taggedProperties;
-                        serializedProperties = getMergedStore(effectsObject);
-                        engine = effectsObject.engine;
-                        _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedData));
-                        _state.label = 1;
-                    case 1:
-                        if (!!(_step = _iterator()).done) return [
-                            3,
-                            4
-                        ];
-                        key = _step.value;
-                        if (serializedProperties && serializedProperties[key]) {
-                            return [
-                                3,
-                                3
-                            ];
-                        }
-                        value = serializedData[key];
-                        return [
-                            4,
-                            SerializationHelper.deserializePropertyAsync(value, engine, 0)
-                        ];
-                    case 2:
-                        taggedProperties[key] = _state.sent();
-                        _state.label = 3;
-                    case 3:
-                        return [
-                            3,
-                            1
-                        ];
-                    case 4:
-                        if (!serializedProperties) return [
-                            3,
-                            8
-                        ];
-                        _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties));
-                        _state.label = 5;
-                    case 5:
-                        if (!!(_step1 = _iterator1()).done) return [
-                            3,
-                            8
-                        ];
-                        key1 = _step1.value;
-                        value1 = serializedData[key1];
-                        if (value1 === undefined) {
-                            return [
-                                3,
-                                7
-                            ];
-                        }
-                        propertyType = serializedProperties[key1].type;
-                        return [
-                            4,
-                            SerializationHelper.deserializePropertyAsync(value1, engine, 0, propertyType)
-                        ];
-                    case 6:
-                        // FIXME: taggedProperties 为 readonly，这里存在强制赋值
-                        // @ts-expect-error
-                        effectsObject[key1] = _state.sent();
-                        _state.label = 7;
-                    case 7:
-                        return [
-                            3,
-                            5
-                        ];
-                    case 8:
-                        effectsObject.fromData(taggedProperties);
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
-    SerializationHelper.checkTypedArray = function checkTypedArray(obj) {
-        return _instanceof1(obj, Int8Array) || _instanceof1(obj, Uint8Array) || _instanceof1(obj, Uint8ClampedArray) || _instanceof1(obj, Int16Array) || _instanceof1(obj, Uint16Array) || _instanceof1(obj, Int32Array) || _instanceof1(obj, Uint32Array) || _instanceof1(obj, Float32Array) || _instanceof1(obj, Float64Array) || _instanceof1(obj, ArrayBuffer);
-    };
-    // check value is { id: 7e69662e964e4892ae8933f24562395b }
-    SerializationHelper.checkDataPath = function checkDataPath(value) {
-        return !!(isObject(value) && Object.keys(value).length === 1 && "id" in value && isString(value.id) && value.id.length === 32);
-    };
-    // TODO 测试函数，2.0 上线后移除
-    SerializationHelper.checkGLTFNode = function checkGLTFNode(value) {
-        return isObject(value) && value.nodeIndex !== undefined && value.isJoint !== undefined;
-    };
-    SerializationHelper.checkImageSource = function checkImageSource(value) {
-        return isCanvas(value) || _instanceof1(value, HTMLImageElement);
-    };
-    SerializationHelper.deserializeProperty = function deserializeProperty(property, engine, level, type) {
-        if (level > 14) {
-            console.error("The nested object layers of the serialized data exceed the maximum limit.");
-            return;
-        }
-        // 加载并链接 DataPath 字段表示的 EffectsObject 引用。Class 对象 copy [key, value] 会丢失对象信息，因此只递归数组对象和普通 js Object 结构对象。
-        if (isArray(property)) {
-            var res = [];
-            for(var _iterator = _create_for_of_iterator_helper_loose(property), _step; !(_step = _iterator()).done;){
-                var value = _step.value;
-                res.push(SerializationHelper.deserializeProperty(value, engine, level + 1, type));
-            }
-            return res;
-        // TODO json 数据避免传 typedArray
-        } else if (SerializationHelper.checkDataPath(property)) {
-            return engine.assetLoader.loadGUID(property.id);
-        } else if (isObject(property) && property.constructor === Object) {
-            var res1;
-            if (type) {
-                res1 = new type();
-            } else {
-                res1 = {};
-            }
-            for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(property)), _step1; !(_step1 = _iterator1()).done;){
-                var key = _step1.value;
-                res1[key] = SerializationHelper.deserializeProperty(property[key], engine, level + 1);
-            }
-            return res1;
-        } else {
-            return property;
-        }
-    };
-    SerializationHelper.deserializePropertyAsync = function deserializePropertyAsync(property, engine, level, type) {
-        return _async_to_generator(function() {
-            var res, _iterator, _step, value, _, res1, res2, _iterator1, _step1, key;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (level > 14) {
-                            console.error("The nested object layers of the serialized data exceed the maximum limit.");
-                            return [
-                                2
-                            ];
-                        }
-                        if (!isArray(property)) return [
-                            3,
-                            5
-                        ];
-                        res = [];
-                        _iterator = _create_for_of_iterator_helper_loose(property);
-                        _state.label = 1;
-                    case 1:
-                        if (!!(_step = _iterator()).done) return [
-                            3,
-                            4
-                        ];
-                        value = _step.value;
-                        _ = res.push;
-                        return [
-                            4,
-                            SerializationHelper.deserializePropertyAsync(value, engine, level + 1, type)
-                        ];
-                    case 2:
-                        _.apply(res, [
-                            _state.sent()
-                        ]);
-                        _state.label = 3;
-                    case 3:
-                        return [
-                            3,
-                            1
-                        ];
-                    case 4:
-                        return [
-                            2,
-                            res
-                        ];
-                    case 5:
-                        if (!SerializationHelper.checkDataPath(property)) return [
-                            3,
-                            7
-                        ];
-                        return [
-                            4,
-                            engine.assetLoader.loadGUIDAsync(property.id)
-                        ];
-                    case 6:
-                        res1 = _state.sent();
-                        return [
-                            2,
-                            res1
-                        ];
-                    case 7:
-                        if (!(isObject(property) && property.constructor === Object)) return [
-                            3,
-                            12
-                        ];
-                        if (type) {
-                            res2 = new type();
-                        } else {
-                            res2 = {};
-                        }
-                        _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(property));
-                        _state.label = 8;
-                    case 8:
-                        if (!!(_step1 = _iterator1()).done) return [
-                            3,
-                            11
-                        ];
-                        key = _step1.value;
-                        return [
-                            4,
-                            SerializationHelper.deserializePropertyAsync(property[key], engine, level + 1)
-                        ];
-                    case 9:
-                        res2[key] = _state.sent();
-                        _state.label = 10;
-                    case 10:
-                        return [
-                            3,
-                            8
-                        ];
-                    case 11:
-                        return [
-                            2,
-                            res2
-                        ];
-                    case 12:
-                        return [
-                            2,
-                            property
-                        ];
-                    case 13:
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
-    SerializationHelper.serializeObjectProperty = function serializeObjectProperty(objectProperty, serializedData, level) {
-        if (level > 14) {
-            console.error("The nested object layers of the serialized data exceed the maximum limit.");
-            return;
-        }
-        if (!serializedData) {
-            serializedData = {};
-        }
-        for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(objectProperty)), _step; !(_step = _iterator()).done;){
-            var key = _step.value;
-            var value = objectProperty[key];
-            if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(objectProperty)) {
-                // TODO json 数据避免传 typedArray
-                serializedData[key] = value;
-            } else if (isArray(value)) {
-                if (!serializedData[key]) {
-                    serializedData[key] = [];
-                }
-                SerializationHelper.serializeArrayProperty(value, serializedData[key], level + 1);
-            } else if (EffectsObject.is(value)) {
-                // TODO 处理 EffectsObject 递归序列化
-                serializedData[key] = {
-                    id: value.getInstanceId()
-                };
-            } else if (isObject(value)) {
-                if (!serializedData[key]) {
-                    serializedData[key] = {};
-                }
-                SerializationHelper.serializeObjectProperty(value, serializedData[key], level + 1);
-            }
-        }
-    };
-    SerializationHelper.serializeArrayProperty = function serializeArrayProperty(arrayProperty, serializedData, level) {
-        if (level > 14) {
-            console.error("The nested object layers of the serialized data exceed the maximum limit.");
-            return;
-        }
-        if (!serializedData) {
-            serializedData = [];
-        }
-        for(var i = 0; i < arrayProperty.length; i++){
-            var value = arrayProperty[i];
-            if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(arrayProperty)) {
-                // TODO json 数据避免传 typedArray
-                serializedData[i] = value;
-            } else if (isArray(value)) {
-                if (!serializedData[i]) {
-                    serializedData[i] = [];
-                }
-                SerializationHelper.serializeArrayProperty(value, serializedData[i], level + 1);
-            } else if (EffectsObject.is(value)) {
-                // TODO 处理 EffectsObject 递归序列化
-                serializedData[i] = {
-                    id: value.getInstanceId()
-                };
-            } else if (isObject(value)) {
-                if (!serializedData[i]) {
-                    serializedData[i] = {};
-                }
-                SerializationHelper.serializeObjectProperty(value, serializedData[i], level + 1);
-            }
-        }
-    };
-    return SerializationHelper;
-}();
-
-var _obj$1;
-/**
- * 机型和渲染等级对应表
- *
- * 机型：B-低端机、A-中端机、S-高端机
- * 渲染等级：B-低、A-中、S-高、A+-中高、B+-全部
- *
- * - S（高端机）：高、全部、中高
- * - A（中端机）：中、全部、中高
- * - B（低端机）：低、全部
- * - undefined（全部机型）
- */ var renderLevelPassSet = (_obj$1 = {}, _obj$1[RenderLevel.S] = [
-    RenderLevel.S,
-    RenderLevel.BPlus,
-    RenderLevel.APlus
-], _obj$1[RenderLevel.A] = [
-    RenderLevel.A,
-    RenderLevel.BPlus,
-    RenderLevel.APlus
-], _obj$1[RenderLevel.B] = [
-    RenderLevel.B,
-    RenderLevel.BPlus
-], _obj$1);
-function passRenderLevel(l, renderLevel) {
-    if (!l || !renderLevel) {
-        return true;
-    }
-    var arr = renderLevelPassSet[renderLevel];
-    if (arr) {
-        return arr.includes(l);
-    }
-    return false;
-}
-
-/**
- * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
- * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
- * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
- */ var Composition = /*#__PURE__*/ function(EventEmitter) {
-    _inherits(Composition, EventEmitter);
-    function Composition(props, scene) {
-        var _this;
-        var _scene_jsonScene_renderSettings;
-        _this = EventEmitter.call(this) || this;
-        /**
-   *
-   */ _this.sceneTicking = new SceneTicking();
-        /**
-   * 动画播放速度
-   */ _this.speed = 1;
-        /**
-   * 合成是否结束
-   */ _this.isEnded = false;
-        /**
-   * 用于保存与当前合成相关的插件数据
-   */ _this.loaderData = {};
-        /**
-   * 预合成数组
-   */ _this.refContent = [];
-        /**
-   * 是否开启后处理
-   */ _this.postProcessingEnabled = false;
-        // TODO: 待优化
-        _this.assigned = false;
-        /**
-   * 销毁状态位
-   */ _this.destroyed = false;
-        _this.postLoaders = [];
-        /**
-   * 合成暂停/播放 标识
-   */ _this.paused = false;
-        _this.lastVideoUpdateTime = 0;
-        _this.isEndCalled = false;
-        _this._textures = [];
-        var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, event = props.event, width = props.width, height = props.height, handleItemMessage = props.handleItemMessage;
-        _this.renderer = renderer;
-        _this._textures = scene.textureOptions;
-        var _scene_jsonScene_renderSettings_postProcessingEnabled;
-        _this.postProcessingEnabled = (_scene_jsonScene_renderSettings_postProcessingEnabled = (_scene_jsonScene_renderSettings = scene.jsonScene.renderSettings) == null ? void 0 : _scene_jsonScene_renderSettings.postProcessingEnabled) != null ? _scene_jsonScene_renderSettings_postProcessingEnabled : false;
-        _this.getEngine().renderLevel = scene.renderLevel;
-        if (reusable) {
-            _this.keepResource = true;
-            scene.textures = undefined;
-            scene.consumed = true;
-        }
-        var sourceContent = scene.jsonScene.compositions[0];
-        for(var _iterator = _create_for_of_iterator_helper_loose(scene.jsonScene.compositions), _step; !(_step = _iterator()).done;){
-            var composition = _step.value;
-            if (composition.id === scene.jsonScene.compositionId) {
-                sourceContent = composition;
-            }
-        }
-        assertExist(sourceContent);
-        // Instantiate composition rootItem
-        _this.rootItem = new exports.VFXItem(_this.getEngine());
-        _this.rootItem.name = "rootItem";
-        _this.rootItem.duration = sourceContent.duration;
-        _this.rootItem.endBehavior = sourceContent.endBehavior;
-        _this.rootItem.composition = _assert_this_initialized(_this);
-        // Create rootCompositionComponent
-        _this.rootComposition = _this.rootItem.addComponent(CompositionComponent);
-        filterItemsByRenderLevel(sourceContent, _this.getEngine(), scene.renderLevel);
-        SerializationHelper.deserialize(sourceContent, _this.rootComposition);
-        _this.width = width;
-        _this.height = height;
-        _this.renderOrder = baseRenderOrder;
-        _this.id = sourceContent.id;
-        _this.renderer = renderer;
-        _this.event = event;
-        var _scene_startTime, _scene_totalTime;
-        _this.statistic = {
-            loadStart: (_scene_startTime = scene.startTime) != null ? _scene_startTime : 0,
-            loadTime: (_scene_totalTime = scene.totalTime) != null ? _scene_totalTime : 0,
-            compileTime: 0,
-            firstFrameTime: 0
-        };
-        _this.reusable = reusable;
-        _this.speed = speed;
-        _this.name = sourceContent.name;
-        _this.pluginSystem = scene.pluginSystem;
-        _this.pluginSystem.initializeComposition(_assert_this_initialized(_this), scene);
-        _this.camera = new Camera(_this.name, _extends({}, sourceContent == null ? void 0 : sourceContent.camera, {
-            aspect: width / height
-        }));
-        _this.url = scene.url;
-        _this.assigned = true;
-        _this.interactive = true;
-        _this.handleItemMessage = handleItemMessage;
-        _this.createRenderFrame();
-        _this.rendererOptions = null;
-        _this.buildItemTree(_this.rootItem);
-        _this.rootComposition.setChildrenRenderOrder(0);
-        _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
-        return _this;
-    }
-    var _proto = Composition.prototype;
-    /**
-   * 获取合成的时长
-   */ _proto.getDuration = function getDuration() {
-        return this.rootItem.duration;
-    };
-    /**
-   * 重新开始合成
-   */ _proto.restart = function restart() {
-        this.reset();
-        this.forwardTime(this.startTime);
-    };
-    /**
-   * 设置当前合成的渲染顺序
-   * @param index - 序号，大的后绘制
-   */ _proto.setIndex = function setIndex(index) {
-        this.renderOrder = index;
-    };
-    /**
-   * 获取当前合成的渲染顺序
-   * @returns
-   */ _proto.getIndex = function getIndex() {
-        return this.renderOrder;
-    };
-    /**
-   * 设置合成的动画速度
-   * @param speed - 速度
-   */ _proto.setSpeed = function setSpeed(speed) {
-        this.speed = speed;
-    };
-    /**
-   * 设置合成的可见性
-   * @since 2.0.0
-   * @param visible - 是否可见
-   */ _proto.setVisible = function setVisible(visible) {
-        this.rootItem.setVisible(visible);
-    };
-    /**
-   * 获取合成的动画速度
-   * @returns
-   */ _proto.getSpeed = function getSpeed() {
-        return this.speed;
-    };
-    /**
-   *
-   */ _proto.play = function play() {
-        if (this.isEnded && this.reusable) {
-            this.restart();
+    /**
+   * 设置当前合成的渲染顺序
+   * @param index - 序号，大的后绘制
+   */ _proto.setIndex = function setIndex(index) {
+        this.renderOrder = index;
+    };
+    /**
+   * 获取当前合成的渲染顺序
+   * @returns
+   */ _proto.getIndex = function getIndex() {
+        return this.renderOrder;
+    };
+    /**
+   * 设置合成的动画速度
+   * @param speed - 速度
+   */ _proto.setSpeed = function setSpeed(speed) {
+        this.speed = speed;
+    };
+    /**
+   * 设置合成的可见性
+   * @since 2.0.0
+   * @param visible - 是否可见
+   */ _proto.setVisible = function setVisible(visible) {
+        this.rootItem.setVisible(visible);
+    };
+    /**
+   * 获取合成的动画速度
+   * @returns
+   */ _proto.getSpeed = function getSpeed() {
+        return this.speed;
+    };
+    /**
+   *
+   */ _proto.play = function play() {
+        if (this.isEnded && this.reusable) {
+            this.restart();
         }
         if (this.rootComposition.isStartCalled) {
             this.gotoAndPlay(this.time - this.startTime);
@@ -21851,38 +21396,6 @@ function passRenderLevel(l, renderLevel) {
         }
     };
     /**
-   * 构建父子树，同时保存到 itemCacheMap 中便于查找
-   */ _proto.buildItemTree = function buildItemTree(compVFXItem) {
-        if (!compVFXItem.composition) {
-            return;
-        }
-        var itemMap = new Map();
-        var contentItems = compVFXItem.getComponent(CompositionComponent).items;
-        for(var _iterator = _create_for_of_iterator_helper_loose(contentItems), _step; !(_step = _iterator()).done;){
-            var item = _step.value;
-            itemMap.set(item.id, item);
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(contentItems), _step1; !(_step1 = _iterator1()).done;){
-            var item1 = _step1.value;
-            if (item1.parentId === undefined) {
-                item1.setParent(compVFXItem);
-            } else {
-                var parent = itemMap.get(item1.parentId);
-                if (parent) {
-                    item1.setParent(parent);
-                } else {
-                    throw new Error("The element references a non-existent element, please check the data.");
-                }
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(contentItems), _step2; !(_step2 = _iterator2()).done;){
-            var item2 = _step2.value;
-            if (exports.VFXItem.isComposition(item2)) {
-                this.buildItemTree(item2);
-            }
-        }
-    };
-    /**
    * 更新视频数据到纹理
    * @override
    */ _proto.updateVideo = function updateVideo() {
@@ -21993,7 +21506,7 @@ function passRenderLevel(l, renderLevel) {
         var ray = this.getHitTestRay(x, y);
         this.refContent.forEach(function(ref) {
             var _ref_getComponent;
-            (_ref_getComponent = ref.getComponent(CompositionComponent)) == null ? void 0 : _ref_getComponent.hitTest(ray, x, y, regions, force, options);
+            (_ref_getComponent = ref.getComponent(exports.CompositionComponent)) == null ? void 0 : _ref_getComponent.hitTest(ray, x, y, regions, force, options);
         });
         return regions;
     };
@@ -22046,7 +21559,7 @@ function passRenderLevel(l, renderLevel) {
         // 预合成元素销毁时销毁其中的item
         if (item.type == ItemType.composition) {
             if (item.endBehavior !== EndBehavior.freeze) {
-                var contentItems = item.getComponent(CompositionComponent).items;
+                var contentItems = item.getComponent(exports.CompositionComponent).items;
                 contentItems.forEach(function(it) {
                     return _this.pluginSystem.plugins.forEach(function(loader) {
                         return loader.onCompositionItemRemoved(_this, it);
@@ -22238,8 +21751,32 @@ function passRenderLevel(l, renderLevel) {
                             2
                         ];
                 }
-            });
-        })();
+            });
+        })();
+    };
+    /**
+   * @internal
+   * 构建父子树，同时保存到 itemCacheMap 中便于查找
+   */ Composition.buildItemTree = function buildItemTree(compVFXItem) {
+        var itemMap = new Map();
+        var contentItems = compVFXItem.getComponent(exports.CompositionComponent).items;
+        for(var _iterator = _create_for_of_iterator_helper_loose(contentItems), _step; !(_step = _iterator()).done;){
+            var item = _step.value;
+            itemMap.set(item.id, item);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(contentItems), _step1; !(_step1 = _iterator1()).done;){
+            var item1 = _step1.value;
+            if (item1.parentId === undefined) {
+                item1.setParent(compVFXItem);
+            } else {
+                var parent = itemMap.get(item1.parentId);
+                if (parent) {
+                    item1.setParent(parent);
+                } else {
+                    throw new Error("The element references a non-existent element, please check the data.");
+                }
+            }
+        }
     };
     _create_class(Composition, [
         {
@@ -22302,25 +21839,6 @@ function passRenderLevel(l, renderLevel) {
     ]);
     return Composition;
 }(EventEmitter);
-function filterItemsByRenderLevel(composition, engine, renderLevel) {
-    var items = [];
-    for(var _iterator = _create_for_of_iterator_helper_loose(composition.items), _step; !(_step = _iterator()).done;){
-        var itemDataPath = _step.value;
-        var itemProps = engine.findEffectsObjectData(itemDataPath.id);
-        if (passRenderLevel(itemProps.renderLevel, renderLevel)) {
-            items.push(itemDataPath);
-        } else {
-            // 非预合成元素未达到渲染等级的转化为空节点。
-            // 预合成元素有根据 item type 的子元素加载判断，没法保留空节点，这边先整体过滤掉。
-            if (itemProps.type !== ItemType.composition) {
-                itemProps.components = [];
-                items.push(itemDataPath);
-            }
-        }
-    }
-    composition.items = items;
-    return composition;
-}
 
 exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     _inherits(VFXItem, EffectsObject);
@@ -22333,7 +21851,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _this.transform = new Transform();
         /**
    * 元素动画的当前时间
-   */ _this.time = 0;
+   */ _this.time = -1;
         /**
    * 元素动画的持续时间
    */ _this.duration = 0;
@@ -22344,9 +21862,8 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * 元素动画结束时行为（如何处理元素）
    */ _this.endBehavior = EndBehavior.forward;
         _this.type = ItemType.base;
-        _this.isDuringPlay = false;
         _this.components = [];
-        _this.rendererComponents = [];
+        _this.isDuringPlay = false;
         /**
    * 元素是否激活
    */ _this.active = true;
@@ -22614,6 +22131,25 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return undefined;
     };
     /**
+   * 复制 VFXItem，返回一个新的 VFXItem
+   * @since 2.4.0
+   * @returns 复制的新 VFXItem
+   */ _proto.duplicate = function duplicate() {
+        var previousObjectIDMap = new Map();
+        this.gatherPreviousObjectID(previousObjectIDMap);
+        // 重新设置当前元素和组件的 ID 以及子元素和子元素组件的 ID，避免实例化新的对象时产生碰撞
+        this.resetGUID();
+        var newItem = this.engine.findObject({
+            id: this.defination.id
+        });
+        newItem.resetGUID();
+        this.resetGUID(previousObjectIDMap);
+        if (this.composition) {
+            newItem.setParent(this.composition.rootItem);
+        }
+        return newItem;
+    };
+    /**
    * @internal
    */ _proto.beginPlay = function beginPlay() {
         this.isDuringPlay = true;
@@ -22708,19 +22244,18 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         if (duration < 0) {
             throw new Error("Item duration can't be less than 0, see " + HELP_LINK["Item duration can't be less than 0"] + ".");
         }
-        this.rendererComponents.length = 0;
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
-            var component = _step.value;
-            component.item = this;
-            if (_instanceof1(component, RendererComponent)) {
-                this.rendererComponents.push(component);
-            }
-            // TODO ParticleSystemRenderer 现在是动态生成的，后面需要在 json 中单独表示为一个组件
-            if (_instanceof1(component, exports.ParticleSystem)) {
-                if (!this.components.includes(component.renderer)) {
-                    this.components.push(component.renderer);
+        if (data.components) {
+            this.components.length = 0;
+            for(var _iterator = _create_for_of_iterator_helper_loose(data.components), _step; !(_step = _iterator()).done;){
+                var componentPath = _step.value;
+                var component = this.engine.findObject(componentPath);
+                this.components.push(component);
+                // TODO ParticleSystemRenderer 现在是动态生成的，后面需要在 json 中单独表示为一个组件
+                if (_instanceof1(component, exports.ParticleSystem)) {
+                    if (!this.components.includes(component.renderer)) {
+                        this.components.push(component.renderer);
+                    }
                 }
-                this.rendererComponents.push(component.renderer);
             }
         }
         if (VFXItem.isComposition(this)) {
@@ -22729,24 +22264,24 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     _proto.toData = function toData() {
         var _this_parent;
-        this.taggedProperties.id = this.guid;
-        this.taggedProperties.transform = this.transform.toData();
-        this.taggedProperties.dataType = DataType.VFXItemData;
+        this.defination.id = this.guid;
+        this.defination.transform = this.transform.toData();
+        this.defination.dataType = DataType.VFXItemData;
         if (((_this_parent = this.parent) == null ? void 0 : _this_parent.name) !== "rootItem") {
             var _this_parent1;
-            this.taggedProperties.parentId = (_this_parent1 = this.parent) == null ? void 0 : _this_parent1.guid;
+            this.defination.parentId = (_this_parent1 = this.parent) == null ? void 0 : _this_parent1.guid;
         }
         // TODO 统一 sprite 等其他组件的序列化逻辑
-        if (!this.taggedProperties.components) {
-            this.taggedProperties.components = [];
+        if (!this.defination.components) {
+            this.defination.components = [];
             for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
                 var component = _step.value;
                 if (_instanceof1(component, exports.EffectComponent)) {
-                    this.taggedProperties.components.push(component);
+                    this.defination.components.push(component);
                 }
             }
         }
-        this.taggedProperties.content = {};
+        this.defination.content = {};
     };
     _proto.translateByPixel = function translateByPixel(x, y) {
         if (this.composition) {
@@ -22803,17 +22338,52 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         if (!props) {
             throw new Error("Referenced precomposition with Id: " + refId + " does not exist.");
         }
-        var compositionComponent = this.addComponent(CompositionComponent);
-        filterItemsByRenderLevel(props, this.engine, this.engine.renderLevel);
-        SerializationHelper.deserialize(props, compositionComponent);
-        for(var _iterator = _create_for_of_iterator_helper_loose(compositionComponent.items), _step; !(_step = _iterator()).done;){
-            var vfxItem = _step.value;
-            vfxItem.setInstanceId(generateGUID());
-            for(var _iterator1 = _create_for_of_iterator_helper_loose(vfxItem.components), _step1; !(_step1 = _iterator1()).done;){
-                var component = _step1.value;
-                component.setInstanceId(generateGUID());
+        //@ts-expect-error TODO update spec.
+        var componentPaths = props.components;
+        for(var _iterator = _create_for_of_iterator_helper_loose(componentPaths), _step; !(_step = _iterator()).done;){
+            var componentPath = _step.value;
+            var component = this.engine.findObject(componentPath);
+            component.item = this;
+            this.components.push(component);
+            component.setInstanceId(generateGUID());
+            if (_instanceof1(component, exports.CompositionComponent)) {
+                for(var _iterator1 = _create_for_of_iterator_helper_loose(component.items), _step1; !(_step1 = _iterator1()).done;){
+                    var vfxItem = _step1.value;
+                    vfxItem.setInstanceId(generateGUID());
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(vfxItem.components), _step2; !(_step2 = _iterator2()).done;){
+                        var component1 = _step2.value;
+                        component1.setInstanceId(generateGUID());
+                    }
+                }
             }
         }
+        Composition.buildItemTree(this);
+    };
+    _proto.resetGUID = function resetGUID(previousObjectIDMap) {
+        var _previousObjectIDMap_get;
+        var itemGUID = (_previousObjectIDMap_get = previousObjectIDMap == null ? void 0 : previousObjectIDMap.get(this)) != null ? _previousObjectIDMap_get : generateGUID();
+        this.setInstanceId(itemGUID);
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            var _previousObjectIDMap_get1;
+            var componentGUID = (_previousObjectIDMap_get1 = previousObjectIDMap == null ? void 0 : previousObjectIDMap.get(component)) != null ? _previousObjectIDMap_get1 : generateGUID();
+            component.setInstanceId(componentGUID);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.children), _step1; !(_step1 = _iterator1()).done;){
+            var child = _step1.value;
+            child.resetGUID(previousObjectIDMap);
+        }
+    };
+    _proto.gatherPreviousObjectID = function gatherPreviousObjectID(previousObjectIDMap) {
+        previousObjectIDMap.set(this, this.getInstanceId());
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            previousObjectIDMap.set(component, component.getInstanceId());
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.children), _step1; !(_step1 = _iterator1()).done;){
+            var child = _step1.value;
+            child.gatherPreviousObjectID(previousObjectIDMap);
+        }
     };
     /**
    *
@@ -22920,9 +22490,11 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
             set: function set(value) {
                 if (this.listIndex !== value) {
                     this.listIndex = value;
-                    for(var _iterator = _create_for_of_iterator_helper_loose(this.rendererComponents), _step; !(_step = _iterator()).done;){
-                        var rendererComponent = _step.value;
-                        rendererComponent.priority = value;
+                    for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+                        var component = _step.value;
+                        if (_instanceof1(component, RendererComponent)) {
+                            component.priority = value;
+                        }
                     }
                 }
             }
@@ -22946,9 +22518,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     ]);
     return VFXItem;
 }(EffectsObject);
-__decorate([
-    serialize()
-], exports.VFXItem.prototype, "components", void 0);
 exports.VFXItem = __decorate([
     effectsClass(DataType.VFXItemData)
 ], exports.VFXItem);
@@ -26963,66 +26532,255 @@ var TextComponentBase = /*#__PURE__*/ function() {
         if (fontStyle !== FontStyle.normal) {
             fontDesc = fontStyle + " " + fontDesc;
         }
-        return fontDesc;
+        return fontDesc;
+    };
+    _proto.setupOutline = function setupOutline() {
+        var context = this.context;
+        var _this_textStyle = this.textStyle, outlineColor = _this_textStyle.outlineColor, outlineWidth = _this_textStyle.outlineWidth;
+        var r = outlineColor[0], g = outlineColor[1], b = outlineColor[2], a = outlineColor[3];
+        if (context) {
+            context.strokeStyle = "rgba(" + r * 255 + ", " + g * 255 + ", " + b * 255 + ", " + a + ")";
+            context.lineWidth = outlineWidth * 2;
+        }
+    };
+    _proto.setupShadow = function setupShadow() {
+        var context = this.context;
+        var _this_textStyle = this.textStyle, outlineColor = _this_textStyle.outlineColor, shadowBlur = _this_textStyle.shadowBlur, shadowOffsetX = _this_textStyle.shadowOffsetX, shadowOffsetY = _this_textStyle.shadowOffsetY;
+        var r = outlineColor[0], g = outlineColor[1], b = outlineColor[2], a = outlineColor[3];
+        if (context) {
+            context.shadowColor = "rgba(" + r * 255 + ", " + g * 255 + ", " + b * 255 + ", " + a + ")";
+            context.shadowBlur = shadowBlur;
+            context.shadowOffsetX = shadowOffsetX;
+            context.shadowOffsetY = -shadowOffsetY;
+        }
+    };
+    return TextComponentBase;
+}();
+applyMixins(exports.TextComponent, [
+    TextComponentBase
+]);
+
+// TODO: 注册必须用
+var TextLoader = /*#__PURE__*/ function(AbstractPlugin) {
+    _inherits(TextLoader, AbstractPlugin);
+    function TextLoader() {
+        return AbstractPlugin.apply(this, arguments);
+    }
+    return TextLoader;
+}(AbstractPlugin);
+
+var Asset = /*#__PURE__*/ function(EffectsObject) {
+    _inherits(Asset, EffectsObject);
+    function Asset() {
+        return EffectsObject.apply(this, arguments);
+    }
+    return Asset;
+}(EffectsObject);
+
+exports.BinaryAsset = /*#__PURE__*/ function(EffectsObject) {
+    _inherits(BinaryAsset, EffectsObject);
+    function BinaryAsset() {
+        return EffectsObject.apply(this, arguments);
+    }
+    return BinaryAsset;
+}(EffectsObject);
+__decorate([
+    serialize()
+], exports.BinaryAsset.prototype, "buffer", void 0);
+exports.BinaryAsset = __decorate([
+    effectsClass(DataType.BinaryAsset)
+], exports.BinaryAsset);
+
+var SerializationHelper = /*#__PURE__*/ function() {
+    function SerializationHelper() {}
+    SerializationHelper.serialize = function serialize(effectsObject, serializedData) {
+        effectsObject.toData();
+        if (!serializedData) {
+            serializedData = {};
+        }
+        var serializedProperties = getMergedStore(effectsObject);
+        if (serializedProperties) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties)), _step; !(_step = _iterator()).done;){
+                var key = _step.value;
+                var value = effectsObject[key];
+                if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(value)) {
+                    // TODO json 数据避免传 typedArray
+                    serializedData[key] = value;
+                } else if (isArray(value)) {
+                    if (!serializedData[key]) {
+                        serializedData[key] = [];
+                    }
+                    SerializationHelper.serializeArrayProperty(value, serializedData[key], 0);
+                } else if (EffectsObject.is(value)) {
+                    // TODO 处理 EffectsObject 递归序列化
+                    serializedData[key] = {
+                        id: value.getInstanceId()
+                    };
+                } else if (isObject(value)) {
+                    if (!serializedData[key]) {
+                        serializedData[key] = {};
+                    }
+                    SerializationHelper.serializeObjectProperty(value, serializedData[key], 0);
+                }
+            }
+        }
+        // TODO 待移除 tagggedProperties 为没有装饰器的临时方案
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(effectsObject.defination)), _step1; !(_step1 = _iterator1()).done;){
+            var key1 = _step1.value;
+            var value1 = effectsObject.defination[key1];
+            if (typeof value1 === "number" || typeof value1 === "string" || typeof value1 === "boolean" || SerializationHelper.checkTypedArray(value1)) {
+                // TODO json 数据避免传 typedArray
+                serializedData[key1] = value1;
+            } else if (isArray(value1)) {
+                if (!serializedData[key1]) {
+                    serializedData[key1] = [];
+                }
+                SerializationHelper.serializeArrayProperty(value1, serializedData[key1], 0);
+            } else if (EffectsObject.is(value1)) {
+                // TODO 处理 EffectsObject 递归序列化
+                serializedData[key1] = {
+                    id: value1.getInstanceId()
+                };
+            } else if (isObject(value1)) {
+                if (!serializedData[key1]) {
+                    serializedData[key1] = {};
+                }
+                SerializationHelper.serializeObjectProperty(value1, serializedData[key1], 0);
+            }
+        }
+        return serializedData;
+    };
+    SerializationHelper.deserialize = function deserialize(serializedData, effectsObject) {
+        effectsObject.defination = serializedData;
+        var serializedProperties = getMergedStore(effectsObject);
+        var engine = effectsObject.engine;
+        if (serializedProperties) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(serializedProperties)), _step; !(_step = _iterator()).done;){
+                var key = _step.value;
+                var value = serializedData[key];
+                if (value === undefined) {
+                    continue;
+                }
+                var propertyType = serializedProperties[key].type;
+                // FIXME: taggedProperties 为 readonly，这里存在强制赋值
+                effectsObject[key] = SerializationHelper.deserializeProperty(value, engine, 0, propertyType);
+            }
+        }
+        effectsObject.fromData(effectsObject.defination);
+    };
+    SerializationHelper.checkTypedArray = function checkTypedArray(obj) {
+        return _instanceof1(obj, Int8Array) || _instanceof1(obj, Uint8Array) || _instanceof1(obj, Uint8ClampedArray) || _instanceof1(obj, Int16Array) || _instanceof1(obj, Uint16Array) || _instanceof1(obj, Int32Array) || _instanceof1(obj, Uint32Array) || _instanceof1(obj, Float32Array) || _instanceof1(obj, Float64Array) || _instanceof1(obj, ArrayBuffer);
+    };
+    // check value is { id: 7e69662e964e4892ae8933f24562395b }
+    SerializationHelper.checkDataPath = function checkDataPath(value) {
+        return !!(isObject(value) && Object.keys(value).length === 1 && "id" in value && isString(value.id) && value.id.length === 32);
+    };
+    // TODO 测试函数，2.0 上线后移除
+    SerializationHelper.checkGLTFNode = function checkGLTFNode(value) {
+        return isObject(value) && value.nodeIndex !== undefined && value.isJoint !== undefined;
+    };
+    SerializationHelper.checkImageSource = function checkImageSource(value) {
+        return isCanvas(value) || _instanceof1(value, HTMLImageElement);
+    };
+    SerializationHelper.deserializeProperty = function deserializeProperty(property, engine, level, type, overrideDataPath) {
+        if (overrideDataPath === void 0) overrideDataPath = true;
+        if (level > 14) {
+            console.error("The nested object layers of the serialized data exceed the maximum limit.");
+            return;
+        }
+        // 加载并链接 DataPath 字段表示的 EffectsObject 引用。Class 对象 copy [key, value] 会丢失对象信息，因此只递归数组对象和普通 js Object 结构对象。
+        if (isArray(property)) {
+            var res = [];
+            for(var _iterator = _create_for_of_iterator_helper_loose(property), _step; !(_step = _iterator()).done;){
+                var value = _step.value;
+                res.push(SerializationHelper.deserializeProperty(value, engine, level + 1, type, overrideDataPath));
+            }
+            return res;
+        // TODO json 数据避免传 typedArray
+        } else if (SerializationHelper.checkDataPath(property)) {
+            var referenceObject = engine.findObject(property);
+            return overrideDataPath ? referenceObject : property;
+        } else if (isObject(property) && property.constructor === Object) {
+            var res1;
+            if (type) {
+                res1 = new type();
+            } else {
+                res1 = {};
+            }
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(property)), _step1; !(_step1 = _iterator1()).done;){
+                var key = _step1.value;
+                res1[key] = SerializationHelper.deserializeProperty(property[key], engine, level + 1, undefined, overrideDataPath);
+            }
+            return res1;
+        } else {
+            return property;
+        }
+    };
+    SerializationHelper.serializeObjectProperty = function serializeObjectProperty(objectProperty, serializedData, level) {
+        if (level > 14) {
+            console.error("The nested object layers of the serialized data exceed the maximum limit.");
+            return;
+        }
+        if (!serializedData) {
+            serializedData = {};
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(objectProperty)), _step; !(_step = _iterator()).done;){
+            var key = _step.value;
+            var value = objectProperty[key];
+            if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(objectProperty)) {
+                // TODO json 数据避免传 typedArray
+                serializedData[key] = value;
+            } else if (isArray(value)) {
+                if (!serializedData[key]) {
+                    serializedData[key] = [];
+                }
+                SerializationHelper.serializeArrayProperty(value, serializedData[key], level + 1);
+            } else if (EffectsObject.is(value)) {
+                // TODO 处理 EffectsObject 递归序列化
+                serializedData[key] = {
+                    id: value.getInstanceId()
+                };
+            } else if (isObject(value)) {
+                if (!serializedData[key]) {
+                    serializedData[key] = {};
+                }
+                SerializationHelper.serializeObjectProperty(value, serializedData[key], level + 1);
+            }
+        }
     };
-    _proto.setupOutline = function setupOutline() {
-        var context = this.context;
-        var _this_textStyle = this.textStyle, outlineColor = _this_textStyle.outlineColor, outlineWidth = _this_textStyle.outlineWidth;
-        var r = outlineColor[0], g = outlineColor[1], b = outlineColor[2], a = outlineColor[3];
-        if (context) {
-            context.strokeStyle = "rgba(" + r * 255 + ", " + g * 255 + ", " + b * 255 + ", " + a + ")";
-            context.lineWidth = outlineWidth * 2;
+    SerializationHelper.serializeArrayProperty = function serializeArrayProperty(arrayProperty, serializedData, level) {
+        if (level > 14) {
+            console.error("The nested object layers of the serialized data exceed the maximum limit.");
+            return;
         }
-    };
-    _proto.setupShadow = function setupShadow() {
-        var context = this.context;
-        var _this_textStyle = this.textStyle, outlineColor = _this_textStyle.outlineColor, shadowBlur = _this_textStyle.shadowBlur, shadowOffsetX = _this_textStyle.shadowOffsetX, shadowOffsetY = _this_textStyle.shadowOffsetY;
-        var r = outlineColor[0], g = outlineColor[1], b = outlineColor[2], a = outlineColor[3];
-        if (context) {
-            context.shadowColor = "rgba(" + r * 255 + ", " + g * 255 + ", " + b * 255 + ", " + a + ")";
-            context.shadowBlur = shadowBlur;
-            context.shadowOffsetX = shadowOffsetX;
-            context.shadowOffsetY = -shadowOffsetY;
+        if (!serializedData) {
+            serializedData = [];
+        }
+        for(var i = 0; i < arrayProperty.length; i++){
+            var value = arrayProperty[i];
+            if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(arrayProperty)) {
+                // TODO json 数据避免传 typedArray
+                serializedData[i] = value;
+            } else if (isArray(value)) {
+                if (!serializedData[i]) {
+                    serializedData[i] = [];
+                }
+                SerializationHelper.serializeArrayProperty(value, serializedData[i], level + 1);
+            } else if (EffectsObject.is(value)) {
+                // TODO 处理 EffectsObject 递归序列化
+                serializedData[i] = {
+                    id: value.getInstanceId()
+                };
+            } else if (isObject(value)) {
+                if (!serializedData[i]) {
+                    serializedData[i] = {};
+                }
+                SerializationHelper.serializeObjectProperty(value, serializedData[i], level + 1);
+            }
         }
     };
-    return TextComponentBase;
+    return SerializationHelper;
 }();
-applyMixins(exports.TextComponent, [
-    TextComponentBase
-]);
-
-// TODO: 注册必须用
-var TextLoader = /*#__PURE__*/ function(AbstractPlugin) {
-    _inherits(TextLoader, AbstractPlugin);
-    function TextLoader() {
-        return AbstractPlugin.apply(this, arguments);
-    }
-    return TextLoader;
-}(AbstractPlugin);
-
-var Asset = /*#__PURE__*/ function(EffectsObject) {
-    _inherits(Asset, EffectsObject);
-    function Asset() {
-        return EffectsObject.apply(this, arguments);
-    }
-    return Asset;
-}(EffectsObject);
-
-exports.BinaryAsset = /*#__PURE__*/ function(EffectsObject) {
-    _inherits(BinaryAsset, EffectsObject);
-    function BinaryAsset() {
-        return EffectsObject.apply(this, arguments);
-    }
-    var _proto = BinaryAsset.prototype;
-    _proto.fromData = function fromData(data) {};
-    return BinaryAsset;
-}(EffectsObject);
-__decorate([
-    serialize()
-], exports.BinaryAsset.prototype, "buffer", void 0);
-exports.BinaryAsset = __decorate([
-    effectsClass(DataType.BinaryAsset)
-], exports.BinaryAsset);
 
 /**
  * @since 2.0.0
@@ -27031,9 +26789,10 @@ exports.BinaryAsset = __decorate([
         this.engine = engine;
     }
     var _proto = AssetLoader.prototype;
-    _proto.loadGUID = function loadGUID(guid) {
-        if (this.engine.objectInstance[guid]) {
-            return this.engine.objectInstance[guid];
+    _proto.loadGUID = function loadGUID(dataPath) {
+        var guid = dataPath.id;
+        if (!dataPath) {
+            return null;
         }
         var effectsObjectData = this.findData(guid);
         var effectsObject;
@@ -27068,92 +26827,6 @@ exports.BinaryAsset = __decorate([
         SerializationHelper.deserialize(effectsObjectData, effectsObject);
         return effectsObject;
     };
-    // 加载本地文件资产
-    _proto.loadGUIDAsync = function loadGUIDAsync(guid) {
-        var _this = this;
-        return _async_to_generator(function() {
-            var effectsObjectData, effectsObject, classConstructor;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (_this.engine.objectInstance[guid]) {
-                            return [
-                                2,
-                                _this.engine.objectInstance[guid]
-                            ];
-                        }
-                        effectsObjectData = _this.findData(guid);
-                        if (!!effectsObjectData) return [
-                            3,
-                            2
-                        ];
-                        if (!_this.engine.database) {
-                            console.error("Object data with uuid: " + guid + " not found.");
-                            return [
-                                2,
-                                undefined
-                            ];
-                        }
-                        return [
-                            4,
-                            _this.engine.database.loadGUID(guid)
-                        ];
-                    case 1:
-                        effectsObject = _state.sent();
-                        if (!effectsObject) {
-                            console.error("Disk data with uuid: " + guid + " not found.");
-                            return [
-                                2,
-                                undefined
-                            ];
-                        }
-                        _this.engine.addInstance(effectsObject);
-                        return [
-                            2,
-                            effectsObject
-                        ];
-                    case 2:
-                        switch(effectsObjectData.dataType){
-                            case DataType.Material:
-                                effectsObject = Material.create(_this.engine);
-                                break;
-                            case DataType.Geometry:
-                                effectsObject = Geometry.create(_this.engine);
-                                break;
-                            case DataType.Texture:
-                                effectsObject = Texture.create(_this.engine);
-                                break;
-                            default:
-                                {
-                                    classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
-                                    if (classConstructor) {
-                                        effectsObject = new classConstructor(_this.engine);
-                                    }
-                                }
-                        }
-                        if (!effectsObject) {
-                            console.error("Constructor for DataType: " + effectsObjectData.dataType + " not found.");
-                            return [
-                                2,
-                                undefined
-                            ];
-                        }
-                        effectsObject.setInstanceId(effectsObjectData.id);
-                        _this.engine.addInstance(effectsObject);
-                        return [
-                            4,
-                            SerializationHelper.deserializeAsync(effectsObjectData, effectsObject)
-                        ];
-                    case 3:
-                        _state.sent();
-                        return [
-                            2,
-                            effectsObject
-                        ];
-                }
-            });
-        })();
-    };
     _proto.findData = function findData(uuid) {
         return this.engine.jsonSceneData[uuid];
     };
@@ -27503,35 +27176,35 @@ function rotationZYXFromQuat(out, quat) {
         ];
     }
 }
-var _obj;
-var particleOriginTranslateMap = (_obj = {}, _obj[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
+var _obj$1;
+var particleOriginTranslateMap = (_obj$1 = {}, _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
     0,
     0
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
     0,
     -0.5
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
     0,
     0.5
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
     -0.5,
     0.5
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
     -0.5,
     0
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
     -0.5,
     -0.5
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
     0.5,
     0
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
     0.5,
     -0.5
-], _obj[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
+], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
     0.5,
     0.5
-], _obj);
+], _obj$1);
 function getBezierCurveFromHermite(m0, m1, p0, p3) {
     var xStart = p0[0];
     var yStart = p0[1];
@@ -27770,28 +27443,6 @@ var refCompositions = new Map();
             }
         }
     }
-    // Composition id 转 guid
-    var compositionId = json.compositionId;
-    var compositionIdToGUIDMap = {};
-    for(var _iterator3 = _create_for_of_iterator_helper_loose(json.compositions), _step3; !(_step3 = _iterator3()).done;){
-        var composition = _step3.value;
-        var guid = generateGUID();
-        compositionIdToGUIDMap[composition.id] = guid;
-        if (composition.id === compositionId) {
-            json.compositionId = guid;
-        }
-        composition.id = guid;
-    }
-    // 预合成元素 refId 同步改为生成的合成 guid
-    for(var _iterator4 = _create_for_of_iterator_helper_loose(json.items), _step4; !(_step4 = _iterator4()).done;){
-        var item = _step4.value;
-        if (item.content) {
-            var compositionOptions = item.content.options;
-            if (compositionOptions && compositionOptions.refId !== undefined) {
-                compositionOptions.refId = compositionIdToGUIDMap[compositionOptions.refId];
-            }
-        }
-    }
     return json;
 }
 function version32Migration(json) {
@@ -27818,21 +27469,68 @@ function version32Migration(json) {
         itemMap.set(item.id, item);
     }
     processContent(mainComp);
+    return json;
+}
+function version33Migration(json) {
     // 老 shape 数据兼容
-    for(var _iterator3 = _create_for_of_iterator_helper_loose(items), _step3; !(_step3 = _iterator3()).done;){
-        var item1 = _step3.value;
-        if (item1.type === ItemType.sprite) {
-            var spriteComponent = componentMap.get(item1.components[0].id);
+    for(var _iterator = _create_for_of_iterator_helper_loose(json.items), _step; !(_step = _iterator()).done;){
+        var item = _step.value;
+        if (item.type === ItemType.sprite) {
+            var spriteComponent = componentMap.get(item.components[0].id);
             if (spriteComponent) {
                 var shape = spriteComponent.renderer.shape;
                 var shapeData = void 0;
                 if (Number.isInteger(shape)) {
                     shapeData = json.shapes[shape];
+                } else {
+                    shapeData = shape;
                 }
                 spriteComponent.renderer.shape = shapeData;
             }
         }
     }
+    // Composition id 转 guid, Composition 分离 CompositionComponent
+    var compositionId = json.compositionId;
+    var compositionIdToGUIDMap = {};
+    for(var _iterator1 = _create_for_of_iterator_helper_loose(json.compositions), _step1; !(_step1 = _iterator1()).done;){
+        var composition = _step1.value;
+        var guid = generateGUID();
+        compositionIdToGUIDMap[composition.id] = guid;
+        if (composition.id === compositionId) {
+            json.compositionId = guid;
+        }
+        composition.id = guid;
+        var compositionComponent = {
+            id: generateGUID(),
+            dataType: "CompositionComponent",
+            items: composition.items,
+            timelineAsset: composition.timelineAsset,
+            sceneBindings: composition.sceneBindings,
+            startTime: composition.startTime
+        };
+        //@ts-expect-error
+        composition.timelineAsset = undefined;
+        //@ts-expect-error
+        composition.sceneBindings = undefined;
+        composition.startTime = undefined;
+        //@ts-expect-error
+        composition.components = [
+            {
+                id: compositionComponent.id
+            }
+        ];
+        json.components.push(compositionComponent);
+    }
+    // 预合成元素 refId 同步改为生成的合成 guid
+    for(var _iterator2 = _create_for_of_iterator_helper_loose(json.items), _step2; !(_step2 = _iterator2()).done;){
+        var item1 = _step2.value;
+        if (item1.content) {
+            var compositionOptions = item1.content.options;
+            if (compositionOptions && compositionOptions.refId !== undefined) {
+                compositionOptions.refId = compositionIdToGUIDMap[compositionOptions.refId];
+            }
+        }
+    }
     return json;
 }
 function processContent(composition) {
@@ -28706,7 +28404,7 @@ function getStandardJSON(json) {
     if (v0.test(json.version)) {
         var _exec;
         reverseParticle = ((_exec = /^(\d+)/.exec(json.version)) == null ? void 0 : _exec[0]) === "0";
-        return version32Migration(version31Migration(version30Migration(version21Migration(getStandardJSONFromV0(json)))));
+        return version33Migration(version32Migration(version31Migration(version30Migration(version21Migration(getStandardJSONFromV0(json))))));
     }
     reverseParticle = false;
     var vs = standardVersion.exec(json.version) || [];
@@ -28731,6 +28429,9 @@ function getStandardJSON(json) {
             if (minorVersion < 3) {
                 json = version32Migration(json);
             }
+            if (minorVersion < 4) {
+                json = version33Migration(json);
+            }
         }
         return json;
     }
@@ -29014,6 +28715,40 @@ function getStandardItem(item, opt) {
     }
 }
 
+var _obj;
+/**
+ * 机型和渲染等级对应表
+ *
+ * 机型：B-低端机、A-中端机、S-高端机
+ * 渲染等级：B-低、A-中、S-高、A+-中高、B+-全部
+ *
+ * - S（高端机）：高、全部、中高
+ * - A（中端机）：中、全部、中高
+ * - B（低端机）：低、全部
+ * - undefined（全部机型）
+ */ var renderLevelPassSet = (_obj = {}, _obj[RenderLevel.S] = [
+    RenderLevel.S,
+    RenderLevel.BPlus,
+    RenderLevel.APlus
+], _obj[RenderLevel.A] = [
+    RenderLevel.A,
+    RenderLevel.BPlus,
+    RenderLevel.APlus
+], _obj[RenderLevel.B] = [
+    RenderLevel.B,
+    RenderLevel.BPlus
+], _obj);
+function passRenderLevel(l, renderLevel) {
+    if (!l || !renderLevel) {
+        return true;
+    }
+    var arr = renderLevelPassSet[renderLevel];
+    if (arr) {
+        return arr.includes(l);
+    }
+    return false;
+}
+
 exports.Scene = void 0;
 (function(Scene) {
     function isJSONObject(scene) {
@@ -29913,7 +29648,9 @@ function createTextureOptionsBySource(image, sourceFrom, id) {
             if (_instanceof1(textureOptions, Texture)) {
                 this.engine.addInstance(textureOptions);
             } else {
-                textureOptions = this.engine.assetLoader.loadGUID(scene.textureOptions[i].id);
+                textureOptions = this.engine.findObject({
+                    id: scene.textureOptions[i].id
+                });
                 scene.textureOptions[i] = textureOptions;
             }
             textureOptions.initialize();
@@ -31560,8 +31297,18 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
     _proto.addInstance = function addInstance(effectsObject) {
         this.objectInstance[effectsObject.getInstanceId()] = effectsObject;
     };
-    _proto.getInstance = function getInstance(id) {
-        return this.objectInstance[id];
+    /**
+   * @ignore
+   */ _proto.findObject = function findObject(guid) {
+        // 编辑器可能传 Class 对象，这边判断处理一下直接返回原对象。
+        if (!(isObject(guid) && guid.constructor === Object)) {
+            return guid;
+        }
+        if (this.objectInstance[guid.id]) {
+            return this.objectInstance[guid.id];
+        }
+        var result = this.assetLoader.loadGUID(guid);
+        return result;
     };
     _proto.removeInstance = function removeInstance(id) {
         delete this.objectInstance[id];
@@ -31575,6 +31322,10 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
         }
         for(var _iterator1 = _create_for_of_iterator_helper_loose(items), _step1; !(_step1 = _iterator1()).done;){
             var vfxItemData = _step1.value;
+            if (!passRenderLevel(vfxItemData.renderLevel, scene.renderLevel)) {
+                vfxItemData.components = [];
+                vfxItemData.type = ItemType.null;
+            }
             this.addEffectsObjectData(vfxItemData);
         }
         for(var _iterator2 = _create_for_of_iterator_helper_loose(materials), _step2; !(_step2 = _iterator2()).done;){
@@ -31629,45 +31380,20 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
         return _async_to_generator(function() {
             var jsonScene, _iterator, _step, itemData, itemType;
             return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        jsonScene = scene.jsonScene;
-                        _iterator = _create_for_of_iterator_helper_loose(jsonScene.items);
-                        _state.label = 1;
-                    case 1:
-                        if (!!(_step = _iterator()).done) return [
-                            3,
-                            4
-                        ];
-                        itemData = _step.value;
-                        itemType = itemData.type;
-                        if (!(itemType === "ECS" || itemType === "camera" || itemType === ItemType.sprite || itemType === ItemType.particle || itemType === ItemType.mesh || itemType === ItemType.skybox || itemType === ItemType.light || itemType === ItemType.tree || itemType === ItemType.interact || itemType === ItemType.camera)) {
-                            return [
-                                3,
-                                3
-                            ];
-                        }
-                        if (!_this.database) return [
-                            3,
-                            3
-                        ];
-                        return [
-                            4,
-                            _this.assetLoader.loadGUIDAsync(itemData.id)
-                        ];
-                    case 2:
-                        _state.sent();
-                        _state.label = 3;
-                    case 3:
-                        return [
-                            3,
-                            1
-                        ];
-                    case 4:
-                        return [
-                            2
-                        ];
+                jsonScene = scene.jsonScene;
+                for(_iterator = _create_for_of_iterator_helper_loose(jsonScene.items); !(_step = _iterator()).done;){
+                    itemData = _step.value;
+                    itemType = itemData.type;
+                    if (!(itemType === "ECS" || itemType === "camera" || itemType === ItemType.sprite || itemType === ItemType.particle || itemType === ItemType.mesh || itemType === ItemType.skybox || itemType === ItemType.light || itemType === ItemType.tree || itemType === ItemType.interact || itemType === ItemType.camera)) {
+                        continue;
+                    }
+                    if (_this.database) {
+                        _this.assetLoader.loadGUID(itemData);
+                    }
                 }
+                return [
+                    2
+                ];
             });
         })();
     };
@@ -31915,7 +31641,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem);
 registerPlugin("particle", ParticleLoader, exports.VFXItem);
 registerPlugin("cal", CalculateLoader, exports.VFXItem);
 registerPlugin("interact", InteractLoader, exports.VFXItem);
-var version = "2.4.0-beta.0";
+var version = "2.4.0-beta.2";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -31940,7 +31666,6 @@ exports.CameraVFXItemLoader = CameraVFXItemLoader;
 exports.ColorCurve = ColorCurve;
 exports.Component = Component;
 exports.Composition = Composition;
-exports.CompositionComponent = CompositionComponent;
 exports.DEFAULT_FONTS = DEFAULT_FONTS;
 exports.DEFAULT_FPS = DEFAULT_FPS;
 exports.Database = Database;
@@ -32064,7 +31789,6 @@ exports.effectsClassStore = effectsClassStore;
 exports.enlargeBuffer = enlargeBuffer;
 exports.ensureFixedNumber = ensureFixedNumber;
 exports.ensureVec3 = ensureVec3;
-exports.filterItemsByRenderLevel = filterItemsByRenderLevel;
 exports.findPreviousRenderPass = findPreviousRenderPass;
 exports.gaussianDownFrag = gaussianDown_frag;
 exports.gaussianDownHFrag = gaussianDownHFrag;