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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.4.0-beta.0
+ * Version: v2.4.0-beta.2
  */
 
 'use strict';
@@ -2026,7 +2026,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;
@@ -2051,11 +2051,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() {};
@@ -2151,9 +2147,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) {
@@ -2218,11 +2211,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() {
@@ -2252,10 +2249,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);
@@ -2264,18 +2257,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",
@@ -3898,11 +3879,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,
@@ -3933,7 +3914,7 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
         }
     };
     return PostProcessVolume;
-}(Behaviour);
+}(Component);
 __decorate([
     serialize()
 ], exports.PostProcessVolume.prototype, "bloom", void 0);
@@ -6166,12 +6147,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;
@@ -7643,13 +7619,6 @@ exports.MaterialRenderType = void 0;
             set: /**
    * 设置 Material 的通过 alpha 值决定临时覆盖值计算的开关
    * @param value - 是否开启 alpha 抖动
-   */ function set(value) {}
-        },
-        {
-            key: "colorMask",
-            set: /**
-   * 设置 Material 颜色缓冲区的写入开关
-   * @param value
    */ function set(value) {}
         },
         {
@@ -7708,10 +7677,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;
 }();
 
@@ -12618,17 +12592,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;
@@ -12766,10 +12739,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 新蒙板上线后移除
         //-------------------------------------------------------------------------
@@ -12777,15 +12767,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,
@@ -13002,14 +12992,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();
                         }
                     }
@@ -13139,6 +13129,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 ? [
@@ -13288,11 +13282,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);
         }
@@ -13313,11 +13307,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);
@@ -15398,6 +15392,7 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         };
         _this.duringPlay = false;
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
+        _this.lastTime = -1;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -15488,11 +15483,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;
@@ -18624,6 +18629,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);
@@ -19465,7 +19471,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
         };
@@ -19552,7 +19558,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),
@@ -19573,6 +19579,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) {
@@ -19591,8 +19598,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,
@@ -19880,7 +19888,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();
         }
     };
@@ -19895,7 +19903,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;
@@ -20263,7 +20271,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);
@@ -20680,13 +20688,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 = [] // 场景的所有元素
@@ -20862,13 +20868,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;){
@@ -20891,7 +20894,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);
 
 /**
  *
@@ -21083,482 +21098,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
  // }
 (TickData);
 
-var SerializationHelper = /*#__PURE__*/ function() {
-    function SerializationHelper() {}
-    SerializationHelper.collectSerializableObject = function collectSerializableObject(effectsObject, res) {
-        if (res[effectsObject.getInstanceId()]) {
-            return;
-        }
-        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);
-                        }
-                    }
-                }
-            }
-        }
-    };
-    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;
-    };
-    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$2;
-/**
- * 机型和渲染等级对应表
- *
- * 机型：B-低端机、A-中端机、S-高端机
- * 渲染等级：B-低、A-中、S-高、A+-中高、B+-全部
- *
- * - S（高端机）：高、全部、中高
- * - A（中端机）：中、全部、中高
- * - B（低端机）：低、全部
- * - undefined（全部机型）
- */ var renderLevelPassSet = (_obj$2 = {}, _obj$2[RenderLevel.S] = [
-    RenderLevel.S,
-    RenderLevel.BPlus,
-    RenderLevel.APlus
-], _obj$2[RenderLevel.A] = [
-    RenderLevel.A,
-    RenderLevel.BPlus,
-    RenderLevel.APlus
-], _obj$2[RenderLevel.B] = [
-    RenderLevel.B,
-    RenderLevel.BPlus
-], _obj$2);
-function passRenderLevel(l, renderLevel) {
-    if (!l || !renderLevel) {
-        return true;
-    }
-    var arr = renderLevelPassSet[renderLevel];
-    if (arr) {
-        return arr.includes(l);
-    }
-    return false;
-}
-
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -21624,10 +21163,16 @@ function passRenderLevel(l, renderLevel) {
         _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);
+        // 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;
@@ -21655,7 +21200,7 @@ function passRenderLevel(l, renderLevel) {
         _this.handleItemMessage = handleItemMessage;
         _this.createRenderFrame();
         _this.rendererOptions = null;
-        _this.buildItemTree(_this.rootItem);
+        Composition.buildItemTree(_this.rootItem);
         _this.rootComposition.setChildrenRenderOrder(0);
         _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
         return _this;
@@ -21873,38 +21418,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() {
@@ -22015,7 +21528,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;
     };
@@ -22068,7 +21581,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);
@@ -22263,6 +21776,30 @@ function passRenderLevel(l, renderLevel) {
             });
         })();
     };
+    /**
+   * @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, [
         {
             key: "transform",
@@ -22324,25 +21861,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);
@@ -22355,7 +21873,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _this.transform = new Transform();
         /**
    * 元素动画的当前时间
-   */ _this.time = 0;
+   */ _this.time = -1;
         /**
    * 元素动画的持续时间
    */ _this.duration = 0;
@@ -22366,9 +21884,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;
@@ -22636,6 +22153,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;
@@ -22730,19 +22266,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)) {
@@ -22751,24 +22286,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) {
@@ -22825,17 +22360,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);
+        }
     };
     /**
    *
@@ -22942,9 +22512,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;
+                        }
                     }
                 }
             }
@@ -22968,9 +22540,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);
@@ -27035,8 +26604,6 @@ exports.BinaryAsset = /*#__PURE__*/ function(EffectsObject) {
     function BinaryAsset() {
         return EffectsObject.apply(this, arguments);
     }
-    var _proto = BinaryAsset.prototype;
-    _proto.fromData = function fromData(data) {};
     return BinaryAsset;
 }(EffectsObject);
 __decorate([
@@ -27046,6 +26613,197 @@ 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);
+            }
+        }
+    };
+    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;
+}();
+
 /**
  * @since 2.0.0
  */ var AssetLoader = /*#__PURE__*/ function() {
@@ -27053,9 +26811,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;
@@ -27090,92 +26849,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];
     };
@@ -27525,35 +27198,35 @@ function rotationZYXFromQuat(out, quat) {
         ];
     }
 }
-var _obj$1;
-var particleOriginTranslateMap = (_obj$1 = {}, _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
+var _obj$2;
+var particleOriginTranslateMap = (_obj$2 = {}, _obj$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [
     0,
     0
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [
     0,
     -0.5
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [
     0,
     0.5
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [
     -0.5,
     0.5
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [
     -0.5,
     0
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [
     -0.5,
     -0.5
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [
     0.5,
     0
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [
     0.5,
     -0.5
-], _obj$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
+], _obj$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [
     0.5,
     0.5
-], _obj$1);
+], _obj$2);
 function getBezierCurveFromHermite(m0, m1, p0, p3) {
     var xStart = p0[0];
     var yStart = p0[1];
@@ -27792,28 +27465,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) {
@@ -27840,21 +27491,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) {
@@ -28728,7 +28426,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) || [];
@@ -28753,6 +28451,9 @@ function getStandardJSON(json) {
             if (minorVersion < 3) {
                 json = version32Migration(json);
             }
+            if (minorVersion < 4) {
+                json = version33Migration(json);
+            }
         }
         return json;
     }
@@ -29036,6 +28737,40 @@ function getStandardItem(item, opt) {
     }
 }
 
+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;
+}
+
 exports.Scene = void 0;
 (function(Scene) {
     function isJSONObject(scene) {
@@ -29935,7 +29670,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();
@@ -31582,8 +31319,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];
@@ -31597,6 +31344,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;){
@@ -31651,45 +31402,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
+                ];
             });
         })();
     };
@@ -31937,7 +31663,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem);
 registerPlugin("particle", ParticleLoader, exports.VFXItem);
 registerPlugin("cal", CalculateLoader, exports.VFXItem);
 registerPlugin("interact", InteractLoader, exports.VFXItem);
-var version$1 = "2.4.0-beta.0";
+var version$1 = "2.4.0-beta.2";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -32530,6 +32256,17 @@ var _obj3;
                     this.material.side = THREE__namespace.BackSide;
                 }
             }
+        },
+        {
+            key: "colorMask",
+            get: function get() {
+                return this.material.colorWrite;
+            },
+            set: /**
+   * 获取颜色写入开关
+   */ function set(value) {
+                this.material.colorWrite = value;
+            }
         }
     ]);
     return ThreeMaterial;
@@ -33101,7 +32838,7 @@ var seed = 1;
         // 预合成元素
         for(var _iterator2 = _create_for_of_iterator_helper_loose(this.refContent), _step2; !(_step2 = _iterator2()).done;){
             var refContent = _step2.value;
-            for(var _iterator3 = _create_for_of_iterator_helper_loose(refContent.getComponent(CompositionComponent).items), _step3; !(_step3 = _iterator3()).done;){
+            for(var _iterator3 = _create_for_of_iterator_helper_loose(refContent.getComponent(exports.CompositionComponent).items), _step3; !(_step3 = _iterator3()).done;){
                 var vfxItem1 = _step3.value;
                 var rendererComponents1 = vfxItem1.getComponents(RendererComponent);
                 for(var _iterator4 = _create_for_of_iterator_helper_loose(rendererComponents1), _step4; !(_step4 = _iterator4()).done;){
@@ -33528,7 +33265,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.4.0-beta.0";
+var version = "2.4.0-beta.2";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -33557,7 +33294,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;
@@ -33687,7 +33423,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;