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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.2
+ * Version: v2.0.0-alpha.4
  */
 
 'use strict';
@@ -148,7 +148,7 @@ function __read$3(o, n) {
     return ar;
 }
 
-function __spreadArray$2(to, from, pack) {
+function __spreadArray$3(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -166,20 +166,20 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
+let getRandomValues$1;
+const rnds8$1 = new Uint8Array(16);
+function rng$1() {
   // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
+  if (!getRandomValues$1) {
     // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    getRandomValues$1 = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
 
-    if (!getRandomValues) {
+    if (!getRandomValues$1) {
       throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
     }
   }
 
-  return getRandomValues(rnds8);
+  return getRandomValues$1(rnds8$1);
 }
 
 /**
@@ -187,30 +187,30 @@ function rng() {
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
 
-const byteToHex = [];
+const byteToHex$2 = [];
 
 for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
+  byteToHex$2.push((i + 0x100).toString(16).slice(1));
 }
 
-function unsafeStringify(arr, offset = 0) {
+function unsafeStringify$1(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+  return byteToHex$2[arr[offset + 0]] + byteToHex$2[arr[offset + 1]] + byteToHex$2[arr[offset + 2]] + byteToHex$2[arr[offset + 3]] + '-' + byteToHex$2[arr[offset + 4]] + byteToHex$2[arr[offset + 5]] + '-' + byteToHex$2[arr[offset + 6]] + byteToHex$2[arr[offset + 7]] + '-' + byteToHex$2[arr[offset + 8]] + byteToHex$2[arr[offset + 9]] + '-' + byteToHex$2[arr[offset + 10]] + byteToHex$2[arr[offset + 11]] + byteToHex$2[arr[offset + 12]] + byteToHex$2[arr[offset + 13]] + byteToHex$2[arr[offset + 14]] + byteToHex$2[arr[offset + 15]];
 }
 
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
+const randomUUID$1 = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native$1 = {
+  randomUUID: randomUUID$1
 };
 
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
+function v4$1(options, buf, offset) {
+  if (native$1.randomUUID && !buf && !options) {
+    return native$1.randomUUID();
   }
 
   options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  const rnds = options.random || (options.rng || rng$1)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
 
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
@@ -225,7 +225,7 @@ function v4(options, buf, offset) {
     return buf;
   }
 
-  return unsafeStringify(rnds);
+  return unsafeStringify$1(rnds);
 }
 
 function addItem(arr, value) {
@@ -2212,7 +2212,7 @@ var __read$2 = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -2529,7 +2529,7 @@ var Matrix4 = /** @class */ (function () {
      * @returns 复制结果
      */
     Matrix4.prototype.copyFrom = function (m) {
-        this.elements = __spreadArray$1([], __read$2(m.elements), false);
+        this.elements = __spreadArray$2([], __read$2(m.elements), false);
         return this;
     };
     /**
@@ -3058,7 +3058,7 @@ var Matrix4 = /** @class */ (function () {
      * @returns
      */
     Matrix4.prototype.toArray = function () {
-        return __spreadArray$1([], __read$2(this.elements), false);
+        return __spreadArray$2([], __read$2(this.elements), false);
     };
     Matrix4.prototype.fill = function (array, offset) {
         if (offset === void 0) { offset = 0; }
@@ -4311,7 +4311,7 @@ var __read$1 = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -4498,7 +4498,7 @@ var Matrix3 = /** @class */ (function () {
      * @returns 复制结果
      */
     Matrix3.prototype.copyFrom = function (m) {
-        this.elements = __spreadArray([], __read$1(m.elements), false);
+        this.elements = __spreadArray$1([], __read$1(m.elements), false);
         return this;
     };
     /**
@@ -4714,7 +4714,7 @@ var Matrix3 = /** @class */ (function () {
      * @returns
      */
     Matrix3.prototype.toArray = function () {
-        return __spreadArray([], __read$1(this.elements), false);
+        return __spreadArray$1([], __read$1(this.elements), false);
     };
     Matrix3.prototype.fill = function (array, offset) {
         if (offset === void 0) { offset = 0; }
@@ -6472,7 +6472,7 @@ function error(message) {
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
     }
-    console.error.apply(console, __spreadArray$2(__spreadArray$2([], __read$3(format(message)), false), [args], false));
+    console.error.apply(console, __spreadArray$3(__spreadArray$3([], __read$3(format(message)), false), [args], false));
     localLogger === null || localLogger === void 0 ? void 0 : localLogger('error', message, args);
 }
 /**
@@ -6485,7 +6485,7 @@ function info(message) {
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
     }
-    console.debug.apply(console, __spreadArray$2([], __read$3(format(message)), false));
+    console.debug.apply(console, __spreadArray$3([], __read$3(format(message)), false));
     localLogger === null || localLogger === void 0 ? void 0 : localLogger('info', message, args);
 }
 function warn(message) {
@@ -6493,7 +6493,7 @@ function warn(message) {
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
     }
-    console.warn.apply(console, __spreadArray$2([], __read$3(format(message)), false));
+    console.warn.apply(console, __spreadArray$3([], __read$3(format(message)), false));
     localLogger === null || localLogger === void 0 ? void 0 : localLogger('warn', message, args);
 }
 /**
@@ -6590,17 +6590,30 @@ function random(min, max) {
 function throwDestroyedError() {
     throw Error('destroyed item cannot be used again');
 }
-function generateGUID() {
-    return v4().replace(/-/g, '');
+function generateGUID$1() {
+    return v4$1().replace(/-/g, '');
 }
 
 /*!
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v1.0.1
+ * Version: v2.0.0-alpha.2
+ */
+
+typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
 
+const byteToHex$1 = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex$1.push((i + 0x100).toString(16).slice(1));
+}
+
 /*********************************************/
 /*               元素属性参数类型               */
 /*********************************************/
@@ -6863,6 +6876,10 @@ var ItemType$1;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType$1 || (ItemType$1 = {}));
 /**
  * 渲染模式
@@ -6977,6 +6994,10 @@ var CompositionEndBehavior$1;
      * 销毁并保留最后一帧
      */
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY$1] = "pause_destroy";
+    /**
+     * 冻结
+     */
+    CompositionEndBehavior[CompositionEndBehavior["freeze"] = END_BEHAVIOR_FREEZE$1] = "freeze";
 })(CompositionEndBehavior$1 || (CompositionEndBehavior$1 = {}));
 
 /*********************************************/
@@ -7115,12 +7136,38 @@ var ShapeArcMode$1;
 
 var BloomFilterThresholdAvgColor = 0;
 
+var LightType$1;
+(function (LightType) {
+    /**
+     * 点光源
+     */
+    LightType["point"] = "point";
+    /**
+     * 聚光灯
+     */
+    LightType["spot"] = "spot";
+    /**
+     * 方向光
+     */
+    LightType["directional"] = "directional";
+    /**
+     * 环境光
+     */
+    LightType["ambient"] = "ambient";
+})(LightType$1 || (LightType$1 = {}));
+
 var ModelBoundingType$1;
 (function (ModelBoundingType) {
     ModelBoundingType[ModelBoundingType["box"] = 2] = "box";
     ModelBoundingType[ModelBoundingType["sphere"] = 3] = "sphere";
 })(ModelBoundingType$1 || (ModelBoundingType$1 = {}));
 
+var CameraType$1;
+(function (CameraType) {
+    CameraType["orthographic"] = "orthographic";
+    CameraType["perspective"] = "perspective";
+})(CameraType$1 || (CameraType$1 = {}));
+
 // 材质类型
 var MaterialType$1;
 (function (MaterialType) {
@@ -7266,6 +7313,28 @@ var FontStyle$1;
     FontStyle["oblique"] = "oblique";
 })(FontStyle$1 || (FontStyle$1 = {}));
 
+var DataType$1;
+(function (DataType) {
+    DataType["VFXItemData"] = "VFXItemData";
+    DataType["EffectComponent"] = "EffectComponent";
+    DataType["Material"] = "Material";
+    DataType["Shader"] = "Shader";
+    DataType["SpriteComponent"] = "SpriteComponent";
+    DataType["ParticleSystem"] = "ParticleSystem";
+    DataType["InteractComponent"] = "InteractComponent";
+    DataType["CameraController"] = "CameraController";
+    DataType["Geometry"] = "Geometry";
+    DataType["Texture"] = "Texture";
+    DataType["TextComponent"] = "TextComponent";
+    // FIXME: 先完成ECS的场景转换，后面移到spec中
+    DataType["MeshComponent"] = "MeshComponent";
+    DataType["SkyboxComponent"] = "SkyboxComponent";
+    DataType["LightComponent"] = "LightComponent";
+    DataType["CameraComponent"] = "CameraComponent";
+    DataType["ModelPluginComponent"] = "ModelPluginComponent";
+    DataType["TreeComponent"] = "TreeComponent";
+})(DataType$1 || (DataType$1 = {}));
+
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get BezierKeyframeType () { return BezierKeyframeType$1; },
@@ -7274,7 +7343,9 @@ var index = /*#__PURE__*/Object.freeze({
     CAMERA_CLIP_MODE_NORMAL: CAMERA_CLIP_MODE_NORMAL$1,
     CAMERA_CLIP_MODE_VERTICAL: CAMERA_CLIP_MODE_VERTICAL$1,
     get CameraClipMode () { return CameraClipMode$1; },
+    get CameraType () { return CameraType$1; },
     get CompositionEndBehavior () { return CompositionEndBehavior$1; },
+    get DataType () { return DataType$1; },
     END_BEHAVIOR_DESTROY: END_BEHAVIOR_DESTROY$1,
     END_BEHAVIOR_DESTROY_CHILDREN: END_BEHAVIOR_DESTROY_CHILDREN$1,
     END_BEHAVIOR_FORWARD: END_BEHAVIOR_FORWARD$1,
@@ -7287,6 +7358,7 @@ var index = /*#__PURE__*/Object.freeze({
     get InteractType () { return InteractType$1; },
     get ItemEndBehavior () { return ItemEndBehavior$1; },
     get ItemType () { return ItemType$1; },
+    get LightType () { return LightType$1; },
     MESSAGE_ITEM_PHRASE_BEGIN: MESSAGE_ITEM_PHRASE_BEGIN,
     MESSAGE_ITEM_PHRASE_END: MESSAGE_ITEM_PHRASE_END,
     get MaskMode () { return MaskMode$1; },
@@ -7364,390 +7436,121 @@ function generateSerializableMember(type, sourceName) {
     };
 }
 
+exports.ShaderType = void 0;
+(function (ShaderType) {
+    ShaderType[ShaderType["vertex"] = 0] = "vertex";
+    ShaderType[ShaderType["fragment"] = 1] = "fragment";
+})(exports.ShaderType || (exports.ShaderType = {}));
+
 /**
- * @since 2.0.0
- * @internal
+ * Helper class to create a WebGL Context
+ *
+ * @param canvas
+ * @param glType
+ * @param options
+ * @returns
  */
-var EffectsObject = /** @class */ (function () {
-    function EffectsObject(engine) {
-        this.engine = engine;
-        this.guid = generateGUID();
-        this.taggedProperties = {};
-        this.engine.addInstance(this);
+function createGLContext(canvas, glType, options) {
+    if (glType === void 0) { glType = 'webgl'; }
+    var context;
+    if (glType === 'webgl2') {
+        context = canvas.getContext('webgl2', options);
+        if (!context) {
+            console.debug('WebGL2 context retrieval failed, falling back to WebGL context.');
+        }
     }
-    EffectsObject.prototype.getInstanceId = function () {
-        return this.guid;
-    };
-    EffectsObject.prototype.setInstanceId = function (guid) {
-        this.engine.removeInstance(this.guid);
-        this.guid = guid;
-        this.engine.addInstance(this);
-    };
-    EffectsObject.prototype.toData = function () { };
-    /**
-     * 反序列化函数
-     *
-     * @param data - 对象的序列化的数据
-     */
-    EffectsObject.prototype.fromData = function (data) {
-        if (data.id) {
-            this.setInstanceId(data.id);
+    if (!context || glType === 'webgl') {
+        context = canvas.getContext('webgl', options);
+    }
+    if (!context) {
+        throw new Error('This browser does not support WebGL or the WebGL version is incorrect. Please check your WebGL version.');
+    }
+    return context;
+}
+
+function gpuTimer(gl) {
+    var _this = this;
+    var ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
+    if (ext) {
+        var query_1 = gl.createQuery();
+        var getTime_1 = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        if (query_1) {
+                            var available = gl.getQueryParameter(query_1, gl.QUERY_RESULT_AVAILABLE);
+                            var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
+                            if (available && !disjoint) {
+                                // See how much time the rendering of the object took in nanoseconds.
+                                var timeElapsed = gl.getQueryParameter(query_1, gl.QUERY_RESULT); // Do something useful with the time.  Note that care should be
+                                // taken to use all significant bits of the result, not just the
+                                // least significant 32 bits.
+                                resolve(timeElapsed / 1000 / 1000);
+                            }
+                            if (available || disjoint) {
+                                // Clean up the query object.
+                                gl.deleteQuery(query_1); // Don't re-enter this polling loop.
+                                query_1 = null;
+                            }
+                            available !== null && query_1 && window.setTimeout(function () {
+                                getTime_1().then(resolve).catch;
+                            }, 1);
+                        }
+                    })];
+            });
+        }); };
+        if (!query_1) {
+            return;
         }
-    };
-    EffectsObject.prototype.dispose = function () { };
-    __decorate([
-        serialize()
-    ], EffectsObject.prototype, "guid", void 0);
-    return EffectsObject;
-}());
+        return {
+            begin: function () {
+                query_1 && gl.beginQuery(ext.TIME_ELAPSED_EXT, query_1);
+            },
+            end: function () {
+                gl.endQuery(ext.TIME_ELAPSED_EXT);
+            },
+            getTime: getTime_1,
+        };
+    }
+}
 
-/**
- * @since 2.0.0
- * @internal
- */
-var Component = /** @class */ (function (_super) {
-    __extends(Component, _super);
-    function Component() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var initErrors = [];
+// @ts-expect-error
+var glContext = {};
+if (!initErrors.length) {
+    initGLContext();
+}
+function initGLContext() {
+    // 重要：iOS 9/10 低版本需要拷贝 gl context 的 prototype，要不然会有属性值的缺失
+    if (typeof WebGL2RenderingContext === 'function') {
+        copy$1(WebGL2RenderingContext);
     }
-    Object.defineProperty(Component.prototype, "transform", {
-        /**
-         * 附加到的 VFXItem 对象 Transform 组件
-         */
-        get: function () {
-            return this.item.transform;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Component.prototype.onAttached = function () { };
-    Component.prototype.onDestroy = function () { };
-    Component.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-        if (data.item) {
-            this.item = data.item;
-        }
-    };
-    Component.prototype.dispose = function () {
-        this.onDestroy();
-        if (this.item) {
-            removeItem(this.item.components, this);
+    else if (typeof WebGLRenderingContext !== 'undefined') {
+        copy$1(WebGLRenderingContext);
+        copy$1(WebGLRenderingContext.prototype);
+    }
+    else {
+        initErrors.push(
+        // iOS 16 lockdown mode
+        'iOS16 lockdown mode, WebGL Constants not in global');
+    }
+    if (!initErrors.length && !('HALF_FLOAT' in glContext)) {
+        // @ts-expect-error set default value
+        glContext['HALF_FLOAT'] = 5131;
+    }
+}
+function isWebGL2(gl) {
+    return typeof WebGL2RenderingContext !== 'undefined' && gl.constructor.name === 'WebGL2RenderingContext';
+}
+function copy$1(target) {
+    for (var name_1 in target) {
+        if (/^[A-Z_]/.test(name_1)) {
+            // @ts-expect-error safe to assign
+            glContext[name_1] = target[name_1];
         }
-    };
-    return Component;
-}(EffectsObject));
-/**
- * @since 2.0.0
- * @internal
- */
-var Behaviour = /** @class */ (function (_super) {
-    __extends(Behaviour, _super);
-    function Behaviour() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._enabled = true;
-        return _this;
-    }
-    Object.defineProperty(Behaviour.prototype, "isActiveAndEnabled", {
-        /**
-         * 组件是否可以更新，true 更新，false 不更新
-         */
-        get: function () {
-            return this.item.getVisible() && this.enabled;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Behaviour.prototype, "enabled", {
-        get: function () {
-            return this._enabled;
-        },
-        set: function (value) {
-            this._enabled = value;
-            if (value) {
-                this.onBehaviourEnable();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Behaviour.prototype.onBehaviourEnable = function () { };
-    Behaviour.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-    };
-    Behaviour.prototype.toData = function () {
-        _super.prototype.toData.call(this);
-    };
-    __decorate([
-        serialize()
-    ], Behaviour.prototype, "_enabled", void 0);
-    return Behaviour;
-}(Component));
-/**
- * @since 2.0.0
- * @internal
- */
-var ItemBehaviour = /** @class */ (function (_super) {
-    __extends(ItemBehaviour, _super);
-    function ItemBehaviour() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.started = false;
-        return _this;
-    }
-    // /**
-    //  * 生命周期函数，初始化后调用，生命周期内只调用一次
-    //  */
-    // awake () {
-    //   // OVERRIDE
-    // }
-    /**
-     * 在每次设置 enabled 为 true 时触发
-     */
-    ItemBehaviour.prototype.onEnable = function () { };
-    /**
-     * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
-     */
-    ItemBehaviour.prototype.start = function () {
-        // OVERRIDE
-    };
-    /**
-     * 生命周期函数，每帧调用一次
-     */
-    ItemBehaviour.prototype.update = function (dt) {
-        // OVERRIDE
-    };
-    /**
-     * 生命周期函数，每帧调用一次，在 update 之后调用
-     */
-    ItemBehaviour.prototype.lateUpdate = function (dt) {
-        // OVERRIDE
-    };
-    ItemBehaviour.prototype.onAttached = function () {
-        this.item.itemBehaviours.push(this);
-    };
-    ItemBehaviour.prototype.dispose = function () {
-        if (this.item) {
-            removeItem(this.item.itemBehaviours, this);
-        }
-        _super.prototype.dispose.call(this);
-    };
-    ItemBehaviour.prototype.onBehaviourEnable = function () {
-        this.onEnable();
-        if (!this.started) {
-            this.start();
-            this.started = true;
-        }
-    };
-    return ItemBehaviour;
-}(Behaviour));
-
-/**
- * 所有渲染组件的基类
- * @since 2.0.0
- */
-var RendererComponent = /** @class */ (function (_super) {
-    __extends(RendererComponent, _super);
-    function RendererComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.started = false;
-        _this.materials = [];
-        _this._enabled = true;
-        return _this;
-    }
-    Object.defineProperty(RendererComponent.prototype, "priority", {
-        get: function () {
-            return this._priority;
-        },
-        set: function (value) {
-            this._priority = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "enabled", {
-        get: function () {
-            return this._enabled;
-        },
-        set: function (value) {
-            this._enabled = value;
-            if (value) {
-                this.onEnable();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "isActiveAndEnabled", {
-        /**
-         * 组件是否可以更新，true 更新，false 不更新
-         */
-        get: function () {
-            return this.item.getVisible() && this.enabled;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "material", {
-        get: function () {
-            return this.materials[0];
-        },
-        set: function (material) {
-            if (this.materials.length === 0) {
-                this.materials.push(material);
-            }
-            else {
-                this.materials[0] = material;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RendererComponent.prototype.onEnable = function () { };
-    RendererComponent.prototype.start = function () { };
-    RendererComponent.prototype.update = function (dt) { };
-    RendererComponent.prototype.lateUpdate = function (dt) { };
-    RendererComponent.prototype.render = function (renderer) { };
-    RendererComponent.prototype.onAttached = function () {
-        this.item.rendererComponents.push(this);
-    };
-    RendererComponent.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-    };
-    RendererComponent.prototype.toData = function () {
-        _super.prototype.toData.call(this);
-    };
-    RendererComponent.prototype.dispose = function () {
-        if (this.item) {
-            removeItem(this.item.rendererComponents, this);
-        }
-        _super.prototype.dispose.call(this);
-    };
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "materials", void 0);
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "_priority", void 0);
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "_enabled", void 0);
-    return RendererComponent;
-}(Component));
-
-exports.ShaderType = void 0;
-(function (ShaderType) {
-    ShaderType[ShaderType["vertex"] = 0] = "vertex";
-    ShaderType[ShaderType["fragment"] = 1] = "fragment";
-})(exports.ShaderType || (exports.ShaderType = {}));
-
-/**
- * Helper class to create a WebGL Context
- *
- * @param canvas
- * @param glType
- * @param options
- * @returns
- */
-function createGLContext(canvas, glType, options) {
-    if (glType === void 0) { glType = 'webgl'; }
-    var context;
-    if (glType === 'webgl2') {
-        context = canvas.getContext('webgl2', options);
-        if (!context) {
-            console.debug('WebGL2 context retrieval failed, falling back to WebGL context.');
-        }
-    }
-    if (!context || glType === 'webgl') {
-        context = canvas.getContext('webgl', options);
-    }
-    if (!context) {
-        throw new Error('This browser does not support WebGL or the WebGL version is incorrect. Please check your WebGL version.');
-    }
-    return context;
-}
-
-function gpuTimer(gl) {
-    var _this = this;
-    var ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
-    if (ext) {
-        var query_1 = gl.createQuery();
-        var getTime_1 = function () { return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, new Promise(function (resolve, reject) {
-                        if (query_1) {
-                            var available = gl.getQueryParameter(query_1, gl.QUERY_RESULT_AVAILABLE);
-                            var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
-                            if (available && !disjoint) {
-                                // See how much time the rendering of the object took in nanoseconds.
-                                var timeElapsed = gl.getQueryParameter(query_1, gl.QUERY_RESULT); // Do something useful with the time.  Note that care should be
-                                // taken to use all significant bits of the result, not just the
-                                // least significant 32 bits.
-                                resolve(timeElapsed / 1000 / 1000);
-                            }
-                            if (available || disjoint) {
-                                // Clean up the query object.
-                                gl.deleteQuery(query_1); // Don't re-enter this polling loop.
-                                query_1 = null;
-                            }
-                            available !== null && query_1 && window.setTimeout(function () {
-                                getTime_1().then(resolve).catch;
-                            }, 1);
-                        }
-                    })];
-            });
-        }); };
-        if (!query_1) {
-            return;
-        }
-        return {
-            begin: function () {
-                query_1 && gl.beginQuery(ext.TIME_ELAPSED_EXT, query_1);
-            },
-            end: function () {
-                gl.endQuery(ext.TIME_ELAPSED_EXT);
-            },
-            getTime: getTime_1,
-        };
     }
 }
 
-var initErrors = [];
-// @ts-expect-error
-var glContext = {};
-if (!initErrors.length) {
-    initGLContext();
-}
-function initGLContext() {
-    // 重要：iOS 9/10 低版本需要拷贝 gl context 的 prototype，要不然会有属性值的缺失
-    if (typeof WebGL2RenderingContext === 'function') {
-        copy$1(WebGL2RenderingContext);
-    }
-    else if (typeof WebGLRenderingContext !== 'undefined') {
-        copy$1(WebGLRenderingContext);
-        copy$1(WebGLRenderingContext.prototype);
-    }
-    else {
-        initErrors.push(
-        // iOS 16 lockdown mode
-        'iOS16 lockdown mode, WebGL Constants not in global');
-    }
-    if (!initErrors.length && !('HALF_FLOAT' in glContext)) {
-        // @ts-expect-error set default value
-        glContext['HALF_FLOAT'] = 5131;
-    }
-}
-function isWebGL2(gl) {
-    return typeof WebGL2RenderingContext !== 'undefined' && gl.constructor.name === 'WebGL2RenderingContext';
-}
-function copy$1(target) {
-    for (var name_1 in target) {
-        if (/^[A-Z_]/.test(name_1)) {
-            // @ts-expect-error safe to assign
-            glContext[name_1] = target[name_1];
-        }
-    }
-}
-
-var _a$6;
+var _a$7;
 function valIfUndefined(val, def) {
     if (val === undefined || val === null) {
         return def;
@@ -7777,15 +7580,15 @@ function getPreMultiAlpha(blending) {
             return 1;
     }
 }
-var downgradeKeywords = (_a$6 = {},
-    _a$6[exports.ShaderType.vertex] = {
+var downgradeKeywords = (_a$7 = {},
+    _a$7[exports.ShaderType.vertex] = {
         in: 'attribute',
         out: 'varying',
     },
-    _a$6[exports.ShaderType.fragment] = {
+    _a$7[exports.ShaderType.fragment] = {
         in: 'varying',
     },
-    _a$6);
+    _a$7);
 /**
  * 生成 shader，检测到 WebGL1 上下文会降级
  * @param marcos - 宏定义数组
@@ -8219,6 +8022,43 @@ function loadMipmapImage(pointer, bins) {
     });
 }
 
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var EffectsObject = /** @class */ (function () {
+    function EffectsObject(engine) {
+        this.engine = engine;
+        this.guid = generateGUID$1();
+        this.taggedProperties = {};
+        this.engine.addInstance(this);
+    }
+    EffectsObject.prototype.getInstanceId = function () {
+        return this.guid;
+    };
+    EffectsObject.prototype.setInstanceId = function (guid) {
+        this.engine.removeInstance(this.guid);
+        this.guid = guid;
+        this.engine.addInstance(this);
+    };
+    EffectsObject.prototype.toData = function () { };
+    /**
+     * 反序列化函数
+     *
+     * @param data - 对象的序列化的数据
+     */
+    EffectsObject.prototype.fromData = function (data) {
+        if (data.id) {
+            this.setInstanceId(data.id);
+        }
+    };
+    EffectsObject.prototype.dispose = function () { };
+    __decorate([
+        serialize()
+    ], EffectsObject.prototype, "guid", void 0);
+    return EffectsObject;
+}());
+
 var seed$a = 1;
 /**
  * Texture 抽象类
@@ -8886,13 +8726,49 @@ exports.GLSLVersion = void 0;
     GLSLVersion["GLSL1"] = "100";
     GLSLVersion["GLSL3"] = "300 es";
 })(exports.GLSLVersion || (exports.GLSLVersion = {}));
-var Shader = /** @class */ (function (_super) {
-    __extends(Shader, _super);
-    function Shader(engine, source) {
+var ShaderVariant = /** @class */ (function (_super) {
+    __extends(ShaderVariant, _super);
+    function ShaderVariant(engine, source) {
         var _this = _super.call(this, engine) || this;
         _this.source = source;
         return _this;
     }
+    return ShaderVariant;
+}(EffectsObject));
+var Shader = /** @class */ (function (_super) {
+    __extends(Shader, _super);
+    function Shader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Shader.prototype.createVariant = function (macros) {
+        var e_1, _a;
+        var shaderMacros = [];
+        if (macros) {
+            try {
+                for (var _b = __values$1(Object.keys(macros)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var key = _c.value;
+                    shaderMacros.push([key, macros[key]]);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+        var shaderVariant = this.engine.getShaderLibrary().createShader(this.shaderData, shaderMacros);
+        shaderVariant.shader = this;
+        return shaderVariant;
+    };
+    Shader.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        this.shaderData = data;
+    };
+    Shader = __decorate([
+        effectsClass('Shader')
+    ], Shader);
     return Shader;
 }(EffectsObject));
 
@@ -8905,8 +8781,8 @@ function createCopyShader(level, writeDepth) {
     var version = webgl2 ? '#version 300 es' : '';
     return {
         name: EFFECTS_COPY_MESH_NAME,
-        vertex: createShaderWithMarcos([], version + '\n' + COPY_VERTEX_SHADER, exports.ShaderType.vertex, level),
-        fragment: createShaderWithMarcos([], version + '\n' + COPY_FRAGMENT_SHADER, exports.ShaderType.fragment, level),
+        vertex: version + '\n' + COPY_VERTEX_SHADER,
+        fragment: version + '\n' + COPY_FRAGMENT_SHADER,
         glslVersion: webgl2 ? exports.GLSLVersion.GLSL3 : exports.GLSLVersion.GLSL1,
         marcos: [
             ['WEBGL2', !!webgl2],
@@ -9038,13 +8914,13 @@ var SemanticMap = /** @class */ (function () {
     return SemanticMap;
 }());
 
-var _a$5;
-var BYTES_TYPE_MAP = (_a$5 = {},
-    _a$5[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.INT] = Int32Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT,
-    _a$5);
+var _a$6;
+var BYTES_TYPE_MAP = (_a$6 = {},
+    _a$6[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT,
+    _a$6[glContext.INT] = Int32Array.BYTES_PER_ELEMENT,
+    _a$6[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT,
+    _a$6[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT,
+    _a$6);
 /**
  * Geometry 抽象类
  */
@@ -9057,26 +8933,258 @@ var Geometry = /** @class */ (function (_super) {
      * 初始化 GPU 资源
      * @override
      */
-    Geometry.prototype.initialize = function () {
+    Geometry.prototype.initialize = function () {
+        // OVERRIDE
+    };
+    /**
+     * 几何数据刷新
+     */
+    Geometry.prototype.flush = function () {
+        // OVERRIDE
+    };
+    return Geometry;
+}(EffectsObject));
+function generateEmptyTypedArray(type) {
+    if (type === glContext.INT) {
+        return new Int32Array(0);
+    }
+    if (type === glContext.SHORT) {
+        return new Int16Array(0);
+    }
+    return new Float32Array(0);
+}
+
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var Component = /** @class */ (function (_super) {
+    __extends(Component, _super);
+    function Component() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(Component.prototype, "transform", {
+        /**
+         * 附加到的 VFXItem 对象 Transform 组件
+         */
+        get: function () {
+            return this.item.transform;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Component.prototype.onAttached = function () { };
+    Component.prototype.onDestroy = function () { };
+    Component.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        if (data.item) {
+            this.item = data.item;
+        }
+    };
+    Component.prototype.dispose = function () {
+        this.onDestroy();
+        if (this.item) {
+            removeItem(this.item.components, this);
+        }
+    };
+    return Component;
+}(EffectsObject));
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var Behaviour = /** @class */ (function (_super) {
+    __extends(Behaviour, _super);
+    function Behaviour() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._enabled = true;
+        return _this;
+    }
+    Object.defineProperty(Behaviour.prototype, "isActiveAndEnabled", {
+        /**
+         * 组件是否可以更新，true 更新，false 不更新
+         */
+        get: function () {
+            return this.item.getVisible() && this.enabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Behaviour.prototype, "enabled", {
+        get: function () {
+            return this._enabled;
+        },
+        set: function (value) {
+            this._enabled = value;
+            if (value) {
+                this.onBehaviourEnable();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Behaviour.prototype.onBehaviourEnable = function () { };
+    Behaviour.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+    };
+    Behaviour.prototype.toData = function () {
+        _super.prototype.toData.call(this);
+    };
+    __decorate([
+        serialize()
+    ], Behaviour.prototype, "_enabled", void 0);
+    return Behaviour;
+}(Component));
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var ItemBehaviour = /** @class */ (function (_super) {
+    __extends(ItemBehaviour, _super);
+    function ItemBehaviour() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.started = false;
+        return _this;
+    }
+    // /**
+    //  * 生命周期函数，初始化后调用，生命周期内只调用一次
+    //  */
+    // awake () {
+    //   // OVERRIDE
+    // }
+    /**
+     * 在每次设置 enabled 为 true 时触发
+     */
+    ItemBehaviour.prototype.onEnable = function () { };
+    /**
+     * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
+     */
+    ItemBehaviour.prototype.start = function () {
+        // OVERRIDE
+    };
+    /**
+     * 生命周期函数，每帧调用一次
+     */
+    ItemBehaviour.prototype.update = function (dt) {
         // OVERRIDE
     };
     /**
-     * 几何数据刷新
+     * 生命周期函数，每帧调用一次，在 update 之后调用
      */
-    Geometry.prototype.flush = function () {
+    ItemBehaviour.prototype.lateUpdate = function (dt) {
         // OVERRIDE
     };
-    return Geometry;
-}(EffectsObject));
-function generateEmptyTypedArray(type) {
-    if (type === glContext.INT) {
-        return new Int32Array(0);
-    }
-    if (type === glContext.SHORT) {
-        return new Int16Array(0);
+    ItemBehaviour.prototype.onAttached = function () {
+        this.item.itemBehaviours.push(this);
+    };
+    ItemBehaviour.prototype.dispose = function () {
+        if (this.item) {
+            removeItem(this.item.itemBehaviours, this);
+        }
+        _super.prototype.dispose.call(this);
+    };
+    ItemBehaviour.prototype.onBehaviourEnable = function () {
+        this.onEnable();
+        if (!this.started) {
+            this.start();
+            this.started = true;
+        }
+    };
+    return ItemBehaviour;
+}(Behaviour));
+
+/**
+ * 所有渲染组件的基类
+ * @since 2.0.0
+ */
+var RendererComponent = /** @class */ (function (_super) {
+    __extends(RendererComponent, _super);
+    function RendererComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.started = false;
+        _this.materials = [];
+        _this._enabled = true;
+        return _this;
     }
-    return new Float32Array(0);
-}
+    Object.defineProperty(RendererComponent.prototype, "priority", {
+        get: function () {
+            return this._priority;
+        },
+        set: function (value) {
+            this._priority = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "enabled", {
+        get: function () {
+            return this._enabled;
+        },
+        set: function (value) {
+            this._enabled = value;
+            if (value) {
+                this.onEnable();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "isActiveAndEnabled", {
+        /**
+         * 组件是否可以更新，true 更新，false 不更新
+         */
+        get: function () {
+            return this.item.getVisible() && this.enabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "material", {
+        get: function () {
+            return this.materials[0];
+        },
+        set: function (material) {
+            if (this.materials.length === 0) {
+                this.materials.push(material);
+            }
+            else {
+                this.materials[0] = material;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RendererComponent.prototype.onEnable = function () { };
+    RendererComponent.prototype.start = function () { };
+    RendererComponent.prototype.update = function (dt) { };
+    RendererComponent.prototype.lateUpdate = function (dt) { };
+    RendererComponent.prototype.render = function (renderer) { };
+    RendererComponent.prototype.onAttached = function () {
+        this.item.rendererComponents.push(this);
+    };
+    RendererComponent.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+    };
+    RendererComponent.prototype.toData = function () {
+        _super.prototype.toData.call(this);
+    };
+    RendererComponent.prototype.dispose = function () {
+        if (this.item) {
+            removeItem(this.item.rendererComponents, this);
+        }
+        _super.prototype.dispose.call(this);
+    };
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "materials", void 0);
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "_priority", void 0);
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "_enabled", void 0);
+    return RendererComponent;
+}(Component));
 
 var seed$8 = 1;
 /**
@@ -9381,7 +9489,7 @@ var RenderPass = /** @class */ (function () {
     RenderPass.prototype.setMeshes = function (meshes) {
         var _a;
         this.meshes.length = 0;
-        (_a = this.meshes).splice.apply(_a, __spreadArray$2([0, 0], __read$3(meshes), false));
+        (_a = this.meshes).splice.apply(_a, __spreadArray$3([0, 0], __read$3(meshes), false));
         sortByOrder(this.meshes, this.meshOrder);
         return this.meshes;
     };
@@ -11313,7 +11421,7 @@ var SerializationHelper = /** @class */ (function () {
     };
     SerializationHelper.deserializeProperty = function (property, engine, level) {
         var e_11, _a, e_12, _b;
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11374,7 +11482,7 @@ var SerializationHelper = /** @class */ (function () {
             return __generator(this, function (_j) {
                 switch (_j.label) {
                     case 0:
-                        if (level > 10) {
+                        if (level > 14) {
                             console.error('序列化数据的内嵌对象层数大于上限');
                             return [2 /*return*/];
                         }
@@ -11465,7 +11573,7 @@ var SerializationHelper = /** @class */ (function () {
     };
     SerializationHelper.serializeObjectProperty = function (objectProperty, serializedData, level) {
         var e_15, _a;
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11510,7 +11618,7 @@ var SerializationHelper = /** @class */ (function () {
         }
     };
     SerializationHelper.serializeArrayProperty = function (arrayProperty, serializedData, level) {
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11575,9 +11683,6 @@ var AssetLoader = /** @class */ (function () {
             case exports.DataType.Texture:
                 effectsObject = Texture.create(this.engine, effectsObjectData);
                 return effectsObject;
-            case exports.DataType.Shader:
-                effectsObject = this.engine.getShaderLibrary().createShader(effectsObjectData);
-                break;
             default: {
                 var classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
                 if (classConstructor) {
@@ -11630,9 +11735,6 @@ var AssetLoader = /** @class */ (function () {
                             case exports.DataType.Texture:
                                 effectsObject = Texture.create(this.engine, effectsObjectData);
                                 return [2 /*return*/, effectsObject];
-                            case exports.DataType.Shader:
-                                effectsObject = this.engine.getShaderLibrary().createShader(effectsObjectData);
-                                break;
                             default: {
                                 classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
                                 if (classConstructor) {
@@ -11676,24 +11778,24 @@ var Database = /** @class */ (function () {
 }());
 exports.DataType = void 0;
 (function (DataType) {
-    DataType[DataType["VFXItemData"] = 0] = "VFXItemData";
-    DataType[DataType["EffectComponent"] = 1] = "EffectComponent";
-    DataType[DataType["Material"] = 2] = "Material";
-    DataType[DataType["Shader"] = 3] = "Shader";
-    DataType[DataType["SpriteComponent"] = 4] = "SpriteComponent";
-    DataType[DataType["ParticleSystem"] = 5] = "ParticleSystem";
-    DataType[DataType["InteractComponent"] = 6] = "InteractComponent";
-    DataType[DataType["CameraController"] = 7] = "CameraController";
-    DataType[DataType["Geometry"] = 8] = "Geometry";
-    DataType[DataType["Texture"] = 9] = "Texture";
-    DataType[DataType["TextComponent"] = 10] = "TextComponent";
+    DataType["VFXItemData"] = "VFXItemData";
+    DataType["EffectComponent"] = "EffectComponent";
+    DataType["Material"] = "Material";
+    DataType["Shader"] = "Shader";
+    DataType["SpriteComponent"] = "SpriteComponent";
+    DataType["ParticleSystem"] = "ParticleSystem";
+    DataType["InteractComponent"] = "InteractComponent";
+    DataType["CameraController"] = "CameraController";
+    DataType["Geometry"] = "Geometry";
+    DataType["Texture"] = "Texture";
+    DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
-    DataType[DataType["MeshComponent"] = 10000] = "MeshComponent";
-    DataType[DataType["SkyboxComponent"] = 10001] = "SkyboxComponent";
-    DataType[DataType["LightComponent"] = 10002] = "LightComponent";
-    DataType[DataType["CameraComponent"] = 10003] = "CameraComponent";
-    DataType[DataType["ModelPluginComponent"] = 10004] = "ModelPluginComponent";
-    DataType[DataType["TreeComponent"] = 10005] = "TreeComponent";
+    DataType["MeshComponent"] = "MeshComponent";
+    DataType["SkyboxComponent"] = "SkyboxComponent";
+    DataType["LightComponent"] = "LightComponent";
+    DataType["CameraComponent"] = "CameraComponent";
+    DataType["ModelPluginComponent"] = "ModelPluginComponent";
+    DataType["TreeComponent"] = "TreeComponent";
 })(exports.DataType || (exports.DataType = {}));
 
 /**
@@ -11845,7 +11947,7 @@ function calculateTranslation(out, target, acc, time, duration, posData, velData
     return ret;
 }
 
-var _a$4;
+var _a$5;
 function ensureVec3(num) {
     return Array.isArray(num) ? [num[0], num[1], num[2]] : [0, 0, 0];
 }
@@ -11868,7 +11970,7 @@ function vecNormalize(out, a) {
         out = [];
     }
     var ap = a;
-    var sum = Math.hypot.apply(Math, __spreadArray$2([], __read$3(ap), false));
+    var sum = Math.hypot.apply(Math, __spreadArray$3([], __read$3(ap), false));
     if (sum === 0) {
         return vecAssign(out, ap, ap.length);
     }
@@ -11899,17 +12001,17 @@ function vecMulCombine(out, a, b) {
     }
     return out;
 }
-var particleOriginTranslateMap = (_a$4 = {},
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER] = [0, 0],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_BOTTOM] = [0, -0.5],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_TOP] = [0, 0.5],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_TOP] = [-0.5, 0.5],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_CENTER] = [-0.5, 0],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_BOTTOM] = [-0.5, -0.5],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_CENTER] = [0.5, 0],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
-    _a$4[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
-    _a$4);
+var particleOriginTranslateMap$1 = (_a$5 = {},
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER] = [0, 0],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_BOTTOM] = [0, -0.5],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_TOP] = [0, 0.5],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_TOP] = [-0.5, 0.5],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_CENTER] = [-0.5, 0],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_BOTTOM] = [-0.5, -0.5],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_CENTER] = [0.5, 0],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
+    _a$5[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
+    _a$5);
 function nearestPowerOfTwo(value) {
     return Math.pow(2, Math.round(Math.log(value) / Math.LN2));
 }
@@ -11934,7 +12036,7 @@ function trianglesFromRect(position, halfWidth, halfHeight) {
     ];
 }
 
-var _a$3;
+var _a$4;
 var NOT_IMPLEMENT = 'not_implement';
 var ValueGetter = /** @class */ (function () {
     function ValueGetter(arg) {
@@ -12442,50 +12544,50 @@ var BezierSegments = /** @class */ (function (_super) {
     };
     return BezierSegments;
 }(PathSegments));
-var map$1 = (_a$3 = {},
-    _a$3[ValueType$1.RANDOM] = function (props) {
+var map$1 = (_a$4 = {},
+    _a$4[ValueType$1.RANDOM] = function (props) {
         if (props[0] instanceof Array) {
             return new RandomVectorValue(props);
         }
         return new RandomValue(props);
     },
-    _a$3[ValueType$1.CONSTANT] = function (props) {
+    _a$4[ValueType$1.CONSTANT] = function (props) {
         return new StaticValue(props);
     },
-    _a$3[ValueType$1.CONSTANT_VEC2] = function (props) {
+    _a$4[ValueType$1.CONSTANT_VEC2] = function (props) {
         return new StaticValue(props);
     },
-    _a$3[ValueType$1.CONSTANT_VEC3] = function (props) {
+    _a$4[ValueType$1.CONSTANT_VEC3] = function (props) {
         return new StaticValue(props);
     },
-    _a$3[ValueType$1.CONSTANT_VEC4] = function (props) {
+    _a$4[ValueType$1.CONSTANT_VEC4] = function (props) {
         return new StaticValue(props);
     },
-    _a$3[ValueType$1.CURVE] = function (props) {
+    _a$4[ValueType$1.CURVE] = function (props) {
         return new CurveValue(props);
     },
-    _a$3[ValueType$1.RGBA_COLOR] = function (props) {
+    _a$4[ValueType$1.RGBA_COLOR] = function (props) {
         return new StaticValue(props);
     },
-    _a$3[ValueType$1.COLORS] = function (props) {
+    _a$4[ValueType$1.COLORS] = function (props) {
         return new RandomSetValue(props.map(function (c) { return colorToArr$1(c, false); }));
     },
-    _a$3[ValueType$1.LINE] = function (props) {
+    _a$4[ValueType$1.LINE] = function (props) {
         if (props.length === 2 && props[0][0] === 0 && props[1][0] === 1) {
             return new LinearValue([props[0][1], props[1][1]]);
         }
         return new LineSegments(props);
     },
-    _a$3[ValueType$1.GRADIENT_COLOR] = function (props) {
+    _a$4[ValueType$1.GRADIENT_COLOR] = function (props) {
         return new GradientValue(props);
     },
-    _a$3[ValueType$1.LINEAR_PATH] = function (pros) {
+    _a$4[ValueType$1.LINEAR_PATH] = function (pros) {
         return new PathSegments(pros);
     },
-    _a$3[ValueType$1.BEZIER_PATH] = function (pros) {
+    _a$4[ValueType$1.BEZIER_PATH] = function (pros) {
         return new BezierSegments(pros);
     },
-    _a$3);
+    _a$4);
 function createValueGetter(args) {
     if (!args || !isNaN(+args)) {
         return new StaticValue(args || 0);
@@ -13436,13 +13538,13 @@ var InteractMesh = /** @class */ (function () {
             ['ENV_EDITOR', ((_a = this.engine.renderer) === null || _a === void 0 ? void 0 : _a.env) === PLAYER_OPTIONS_ENV_EDITOR],
         ];
         var color = createValueGetter(this.color).getValue(0);
-        var level = this.engine.gpuCapability.level;
         var materialProps = {
             shader: {
-                vertex: createShaderWithMarcos(marcos, vertex, exports.ShaderType.vertex, level),
-                fragment: createShaderWithMarcos(marcos, fragment, exports.ShaderType.fragment, level),
+                vertex: vertex,
+                fragment: fragment,
                 glslVersion: exports.GLSLVersion.GLSL1,
                 cacheId: "".concat(rendererOptions.cachePrefix, "_effects_interact"),
+                marcos: marcos,
             },
             uniformSemantics: {
                 effects_MatrixVP: 'VIEWPROJECTION',
@@ -13516,11 +13618,11 @@ var InteractComponent = /** @class */ (function (_super) {
     }
     InteractComponent_1 = InteractComponent;
     InteractComponent.prototype.start = function () {
-        var _a, _b, _c;
+        var _this = this;
         var options = this.item.props.content.options;
-        var env = ((_b = (_a = this.item.engine) === null || _a === void 0 ? void 0 : _a.renderer) !== null && _b !== void 0 ? _b : {}).env;
+        var env = this.item.engine.renderer.env;
         var composition = this.item.composition;
-        var _d = this.interactData.options, type = _d.type, showPreview = _d.showPreview;
+        var _a = this.interactData.options, type = _a.type, showPreview = _a.showPreview;
         if (type === InteractType$1.CLICK) {
             this.clickable = true;
             if (showPreview && env === PLAYER_OPTIONS_ENV_EDITOR) {
@@ -13528,7 +13630,8 @@ var InteractComponent = /** @class */ (function (_super) {
                 this.previewContent = new InteractMesh(this.item.props.content, rendererOptions, this.transform, this.engine);
             }
         }
-        (_c = this.item.composition) === null || _c === void 0 ? void 0 : _c.addInteractiveItem(this.item, options.type);
+        composition.addInteractiveItem(this.item, options.type);
+        this.item.onEnd = function () { return composition.removeInteractiveItem(_this.item, options.type); };
         if (options.type === InteractType$1.DRAG) {
             if (env !== PLAYER_OPTIONS_ENV_EDITOR || options.enableInEditor) {
                 composition.event && this.beginDragTarget(options, composition.event);
@@ -13721,8 +13824,8 @@ function spriteMeshShaderFromFilter(level, options) {
     var fragment = wireframe ? itemFrameFrag : itemFrag.replace(/#pragma\s+FILTER_FRAG/, '');
     var vertex = itemVert.replace(/#pragma\s+FILTER_VERT/, 'vec4 filterMain(float t,vec4 pos){return effects_MatrixVP * pos;}');
     return {
-        fragment: createShaderWithMarcos(marcos, fragment, exports.ShaderType.fragment, level),
-        vertex: createShaderWithMarcos(marcos, vertex, exports.ShaderType.vertex, level),
+        fragment: fragment,
+        vertex: vertex,
         glslVersion: level === 1 ? exports.GLSLVersion.GLSL1 : exports.GLSLVersion.GLSL3,
         marcos: marcos,
         shared: true,
@@ -13960,15 +14063,25 @@ var PlayableOutput = /** @class */ (function () {
     };
     return PlayableOutput;
 }());
+var PlayableAsset = /** @class */ (function () {
+    function PlayableAsset() {
+    }
+    PlayableAsset.prototype.fromData = function (data) {
+    };
+    return PlayableAsset;
+}());
 
 /**
  * @since 2.0.0
  * @internal
  */
-var Track = /** @class */ (function () {
+var Track = /** @class */ (function (_super) {
+    __extends(Track, _super);
     function Track() {
-        this.clips = [];
-        this.clipSeed = 0;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.clips = [];
+        _this.clipSeed = 0;
+        return _this;
     }
     Track.prototype.createOutput = function () {
         var output = new PlayableOutput();
@@ -13980,7 +14093,7 @@ var Track = /** @class */ (function () {
     Track.prototype.createMixerPlayable = function () {
         return new Playable();
     };
-    Track.prototype.createPlayebleTree = function () {
+    Track.prototype.createPlayable = function () {
         var e_1, _a;
         var defaultMixPlayable = this.createMixerPlayable();
         try {
@@ -14032,7 +14145,7 @@ var Track = /** @class */ (function () {
         this.clips.push(clip);
     };
     return Track;
-}());
+}(PlayableAsset));
 /**
  * @since 2.0.0
  * @internal
@@ -14088,12 +14201,12 @@ var tempPos = new Vector3();
  * @since 2.0.0
  * @internal
  */
-var AnimationClipPlayable = /** @class */ (function (_super) {
-    __extends(AnimationClipPlayable, _super);
-    function AnimationClipPlayable() {
+var TransformAnimationPlayable = /** @class */ (function (_super) {
+    __extends(TransformAnimationPlayable, _super);
+    function TransformAnimationPlayable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationClipPlayable.prototype.processFrame = function (dt) {
+    TransformAnimationPlayable.prototype.processFrame = function (dt) {
         if (this.bindingItem.composition) {
             this.sampleAnimation();
         }
@@ -14101,7 +14214,7 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
     /**
      * 应用时间轴K帧数据到对象
      */
-    AnimationClipPlayable.prototype.sampleAnimation = function () {
+    TransformAnimationPlayable.prototype.sampleAnimation = function () {
         var _this = this;
         var duration = this.bindingItem.duration;
         var life = this.time / duration;
@@ -14146,7 +14259,7 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
             // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
         }
     };
-    AnimationClipPlayable.prototype.fromData = function (data) {
+    TransformAnimationPlayable.prototype.fromData = function (data) {
         var _a;
         var scale = this.bindingItem.transform.scale;
         this.originalTransform = {
@@ -14217,30 +14330,45 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
         this.velocity = this.direction.clone();
         this.velocity.multiply(this.startSpeed);
     };
-    return AnimationClipPlayable;
+    return TransformAnimationPlayable;
 }(AnimationPlayable));
+var TransformAnimationPlayableAsset = /** @class */ (function (_super) {
+    __extends(TransformAnimationPlayableAsset, _super);
+    function TransformAnimationPlayableAsset() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TransformAnimationPlayableAsset.prototype.createPlayable = function () {
+        var transformAnimationPlayable = new TransformAnimationPlayable();
+        transformAnimationPlayable.fromData(this.transformAnimationData);
+        return transformAnimationPlayable;
+    };
+    TransformAnimationPlayableAsset.prototype.fromData = function (data) {
+        this.transformAnimationData = data;
+    };
+    return TransformAnimationPlayableAsset;
+}(PlayableAsset));
 /**
  * @since 2.0.0
  * @internal
  */
-var ActivationClipPlayable = /** @class */ (function (_super) {
-    __extends(ActivationClipPlayable, _super);
-    function ActivationClipPlayable() {
+var ActivationPlayable = /** @class */ (function (_super) {
+    __extends(ActivationPlayable, _super);
+    function ActivationPlayable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    ActivationClipPlayable.prototype.onGraphStart = function () {
+    ActivationPlayable.prototype.onGraphStart = function () {
         this.bindingItem.transform.setValid(false);
         this.hideRendererComponents();
     };
-    ActivationClipPlayable.prototype.onPlayablePlay = function () {
+    ActivationPlayable.prototype.onPlayablePlay = function () {
         this.bindingItem.transform.setValid(true);
         this.showRendererComponents();
     };
-    ActivationClipPlayable.prototype.onPlayableDestroy = function () {
+    ActivationPlayable.prototype.onPlayableDestroy = function () {
         this.bindingItem.transform.setValid(false);
         this.hideRendererComponents();
     };
-    ActivationClipPlayable.prototype.hideRendererComponents = function () {
+    ActivationPlayable.prototype.hideRendererComponents = function () {
         var e_1, _a;
         try {
             for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14258,7 +14386,7 @@ var ActivationClipPlayable = /** @class */ (function (_super) {
             finally { if (e_1) throw e_1.error; }
         }
     };
-    ActivationClipPlayable.prototype.showRendererComponents = function () {
+    ActivationPlayable.prototype.showRendererComponents = function () {
         var e_2, _a;
         try {
             for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14276,7 +14404,7 @@ var ActivationClipPlayable = /** @class */ (function (_super) {
             finally { if (e_2) throw e_2.error; }
         }
     };
-    return ActivationClipPlayable;
+    return ActivationPlayable;
 }(Playable));
 
 /**
@@ -14531,7 +14659,7 @@ var TimelineComponent = /** @class */ (function (_super) {
         try {
             for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var track = _c.value;
-                var trackMixPlayable = track.createPlayebleTree();
+                var trackMixPlayable = track.createPlayable();
                 var trackOutput = track.createOutput();
                 graph.addOutput(trackOutput);
                 trackOutput.setSourcePlayeble(trackMixPlayable);
@@ -14546,6 +14674,7 @@ var TimelineComponent = /** @class */ (function (_super) {
         }
     };
     TimelineComponent.prototype.fromData = function (data) {
+        var e_13, _a, e_14, _b;
         _super.prototype.fromData.call(this, data);
         this.options = {
             start: this.item.start,
@@ -14556,7 +14685,47 @@ var TimelineComponent = /** @class */ (function (_super) {
         this.id = this.item.id;
         this.name = this.item.name;
         var activationTrack = this.createTrack(Track, 'ActivationTrack');
-        activationTrack.createClip(ActivationClipPlayable, 'ActivationTimelineClip');
+        activationTrack.createClip(ActivationPlayable, 'ActivationTimelineClip');
+        //@ts-expect-error
+        if (data.tracks) {
+            //@ts-expect-error
+            var tracks = data.tracks;
+            try {
+                for (var tracks_1 = __values$1(tracks), tracks_1_1 = tracks_1.next(); !tracks_1_1.done; tracks_1_1 = tracks_1.next()) {
+                    var track = tracks_1_1.value;
+                    var newTrack = this.createTrack(Track);
+                    try {
+                        for (var _c = (e_14 = void 0, __values$1(track.clips)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var clipAsset = _d.value;
+                            switch (clipAsset.dataType) {
+                                case 'TransformAnimationPlayableAsset':
+                                    newTrack.name = 'AnimationTrack';
+                                    newTrack.createClip(TransformAnimationPlayable, 'AnimationTimelineClip').playable.fromData(clipAsset.animationClip);
+                                    break;
+                                case 'SpriteColorAnimationPlayableAsset':
+                                    newTrack.name = 'SpriteColorTrack';
+                                    newTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData(clipAsset.animationClip);
+                                    break;
+                            }
+                        }
+                    }
+                    catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_14) throw e_14.error; }
+                    }
+                }
+            }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            finally {
+                try {
+                    if (tracks_1_1 && !tracks_1_1.done && (_a = tracks_1.return)) _a.call(tracks_1);
+                }
+                finally { if (e_13) throw e_13.error; }
+            }
+        }
     };
     TimelineComponent.prototype.toData = function () {
         _super.prototype.toData.call(this);
@@ -14970,9 +15139,6 @@ var SpriteComponent = /** @class */ (function (_super) {
         this.material.setVector4('_Color', new Vector4().setFromArray(startColor));
         this.material.setVector4('_TexOffset', new Vector4().setFromArray([0, 0, 1, 1]));
         this.setItem();
-        // 添加K帧动画
-        var colorTrack = this.item.getComponent(TimelineComponent).createTrack(Track, 'SpriteColorTrack');
-        colorTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData({ colorOverLifetime: data.colorOverLifetime, startColor: data.options.startColor });
     };
     SpriteComponent.prototype.toData = function () {
         _super.prototype.toData.call(this);
@@ -15139,8 +15305,8 @@ var ParticleMesh = /** @class */ (function () {
         var originalVertex = "#define LOOKUP_TEXTURE_CURVE ".concat(vertex_lookup_texture, "\n").concat(particleVert);
         var vertex = originalVertex;
         var shader = {
-            fragment: createShaderWithMarcos(marcos, fragment, exports.ShaderType.fragment, level),
-            vertex: createShaderWithMarcos(marcos, vertex, exports.ShaderType.vertex, level),
+            fragment: fragment,
+            vertex: vertex,
             glslVersion: level === 1 ? exports.GLSLVersion.GLSL1 : exports.GLSLVersion.GLSL3,
             shared: true,
             cacheId: shaderCache,
@@ -15695,8 +15861,8 @@ var TrailMesh = /** @class */ (function () {
         else {
             uniformValues.uVCurveValues = CurveValue.getAllData(keyFrameMeta);
         }
-        var vertex = createShaderWithMarcos(marcos, trailVert, exports.ShaderType.vertex, level);
-        var fragment = createShaderWithMarcos(marcos, particleFrag, exports.ShaderType.fragment, level);
+        var vertex = trailVert;
+        var fragment = particleFrag;
         var mtl = ({
             shader: {
                 vertex: vertex,
@@ -16383,7 +16549,7 @@ var TextureShape = /** @class */ (function () {
     return TextureShape;
 }());
 
-var _a$2;
+var _a$3;
 var ShapeNone = /** @class */ (function () {
     function ShapeNone() {
     }
@@ -16395,18 +16561,18 @@ var ShapeNone = /** @class */ (function () {
     };
     return ShapeNone;
 }());
-var map = (_a$2 = {},
-    _a$2[ShapeType$1.NONE] = ShapeNone,
-    _a$2[ShapeType$1.CONE] = Cone,
-    _a$2[ShapeType$1.SPHERE] = Sphere,
-    _a$2[ShapeType$1.HEMISPHERE] = Hemisphere,
-    _a$2[ShapeType$1.CIRCLE] = Circle,
-    _a$2[ShapeType$1.DONUT] = Donut,
-    _a$2[ShapeType$1.RECTANGLE] = Rectangle,
-    _a$2[ShapeType$1.EDGE] = Edge,
-    _a$2[ShapeType$1.RECTANGLE_EDGE] = RectangleEdge,
-    _a$2[ShapeType$1.TEXTURE] = TextureShape,
-    _a$2);
+var map = (_a$3 = {},
+    _a$3[ShapeType$1.NONE] = ShapeNone,
+    _a$3[ShapeType$1.CONE] = Cone,
+    _a$3[ShapeType$1.SPHERE] = Sphere,
+    _a$3[ShapeType$1.HEMISPHERE] = Hemisphere,
+    _a$3[ShapeType$1.CIRCLE] = Circle,
+    _a$3[ShapeType$1.DONUT] = Donut,
+    _a$3[ShapeType$1.RECTANGLE] = Rectangle,
+    _a$3[ShapeType$1.EDGE] = Edge,
+    _a$3[ShapeType$1.RECTANGLE_EDGE] = RectangleEdge,
+    _a$3[ShapeType$1.TEXTURE] = TextureShape,
+    _a$3);
 function createShape(shapeOptions) {
     if (!shapeOptions) {
         return new ShapeNone();
@@ -17735,7 +17901,7 @@ var ParticleSystem = /** @class */ (function (_super) {
                                 }));
                                 p.delay += meshTime;
                                 cursor++;
-                                (_a = p.transform).translate.apply(_a, __spreadArray$2([], __read$3(burstOffset), false));
+                                (_a = p.transform).translate.apply(_a, __spreadArray$3([], __read$3(burstOffset), false));
                                 this.addParticle(p, maxCount_1);
                             }
                         }
@@ -18507,7 +18673,9 @@ var TextStyle = /** @class */ (function () {
         this.fontOffset = 0;
         var _g = options.textColor, textColor = _g === void 0 ? [1, 1, 1, 1] : _g, _h = options.fontSize, fontSize = _h === void 0 ? 40 : _h, outline = options.outline, shadow = options.shadow, _j = options.fontWeight, fontWeight = _j === void 0 ? 'normal' : _j, _k = options.fontStyle, fontStyle = _k === void 0 ? 'normal' : _k, _l = options.fontFamily, fontFamily = _l === void 0 ? 'sans-serif' : _l;
         this.textColor = textColor;
+        //@ts-expect-error
         this.textWeight = fontWeight;
+        //@ts-expect-error
         this.fontStyle = fontStyle;
         this.fontFamily = fontFamily;
         this.fontSize = fontSize; // 暂时取消字号限制 Math.min(fontSize, this.maxFontSize);
@@ -20575,7 +20743,10 @@ var VFXItem = /** @class */ (function (_super) {
         try {
             for (var _e = __values$1(this.children), _f = _e.next(); !_f.done; _f = _e.next()) {
                 var child = _f.value;
-                return child.find(name);
+                var res = child.find(name);
+                if (res) {
+                    return res;
+                }
             }
         }
         catch (e_4_1) { e_4 = { error: e_4_1 }; }
@@ -20592,6 +20763,7 @@ var VFXItem = /** @class */ (function (_super) {
         _super.prototype.fromData.call(this, data);
         var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _b = data.listIndex, listIndex = _b === void 0 ? 0 : _b, _c = data.duration, duration = _c === void 0 ? 0 : _c;
         this.props = data;
+        //@ts-expect-error
         this.type = data.type;
         this.id = id.toString(); // TODO 老数据 id 是 number，需要转换
         this.name = name;
@@ -20629,10 +20801,6 @@ var VFXItem = /** @class */ (function (_super) {
         }
         var timelineComponent = this.getComponent(TimelineComponent);
         timelineComponent.fromData(data.content);
-        if (this.type !== ItemType$1.particle) {
-            var track = timelineComponent.createTrack(Track, 'AnimationTrack');
-            track.createClip(AnimationClipPlayable, 'AnimationTimelineClip').playable.fromData(data.content);
-        }
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see ".concat(HELP_LINK['Item duration can\'t be less than 0']));
         }
@@ -20691,10 +20859,10 @@ var VFXItem = /** @class */ (function (_super) {
     };
     VFXItem.prototype.translateByPixel = function (x, y) {
         if (this.composition) {
+            // @ts-expect-error
+            var _a = this.composition.renderer.canvas.getBoundingClientRect(), width = _a.width, height = _a.height;
             var z = this.transform.getWorldPosition().z;
-            var _a = this.composition.camera.getInverseVPRatio(z), rx = _a.x, ry = _a.y;
-            var width = this.composition.renderer.getWidth() / 2;
-            var height = this.composition.renderer.getHeight() / 2;
+            var _b = this.composition.camera.getInverseVPRatio(z), rx = _b.x, ry = _b.y;
             this.transform.translate(2 * x * rx / width, -2 * y * ry / height, 0);
         }
     };
@@ -20799,7 +20967,6 @@ function createVFXItem(props, composition) {
     if (!pluginName) {
         switch (type) {
             case ItemType$1.null:
-            case ItemType$1.base:
                 pluginName = 'cal';
                 break;
             case ItemType$1.sprite:
@@ -20920,7 +21087,7 @@ var PluginSystem = /** @class */ (function () {
                     plugin = plugins[i];
                     ctrl = pluginLoaderMap[plugin.name];
                     if (name in ctrl) {
-                        pendings.push(Promise.resolve(ctrl[name].apply(ctrl, __spreadArray$2([], __read$3(args), false))));
+                        pendings.push(Promise.resolve(ctrl[name].apply(ctrl, __spreadArray$3([], __read$3(args), false))));
                     }
                 }
                 return [2 /*return*/, Promise.all(pendings)];
@@ -20961,12 +21128,77 @@ function getPluginUsageInfo(name) {
     }
 }
 
-/*!
- * Name: @galacean/effects-specification
- * Description: Galacean Effects JSON Specification
- * Author: Ant Group CO., Ltd.
- * Version: v1.0.1
- */
+/*!
+ * Name: @galacean/effects-specification
+ * Description: Galacean Effects JSON Specification
+ * Author: Ant Group CO., Ltd.
+ * Version: v2.0.0-alpha.2
+ */
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
 
 /*********************************************/
 /*               元素属性参数类型               */
@@ -21230,6 +21462,10 @@ var ItemType;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType || (ItemType = {}));
 /**
  * 渲染模式
@@ -21342,6 +21578,10 @@ var CompositionEndBehavior;
      * 销毁并保留最后一帧
      */
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY] = "pause_destroy";
+    /**
+     * 冻结
+     */
+    CompositionEndBehavior[CompositionEndBehavior["freeze"] = END_BEHAVIOR_FREEZE] = "freeze";
 })(CompositionEndBehavior || (CompositionEndBehavior = {}));
 
 /*********************************************/
@@ -21478,12 +21718,38 @@ var ShapeArcMode;
     ShapeArcMode[ShapeArcMode["UNIFORM_BURST"] = 3] = "UNIFORM_BURST";
 })(ShapeArcMode || (ShapeArcMode = {}));
 
+var LightType;
+(function (LightType) {
+    /**
+     * 点光源
+     */
+    LightType["point"] = "point";
+    /**
+     * 聚光灯
+     */
+    LightType["spot"] = "spot";
+    /**
+     * 方向光
+     */
+    LightType["directional"] = "directional";
+    /**
+     * 环境光
+     */
+    LightType["ambient"] = "ambient";
+})(LightType || (LightType = {}));
+
 var ModelBoundingType;
 (function (ModelBoundingType) {
     ModelBoundingType[ModelBoundingType["box"] = 2] = "box";
     ModelBoundingType[ModelBoundingType["sphere"] = 3] = "sphere";
 })(ModelBoundingType || (ModelBoundingType = {}));
 
+var CameraType;
+(function (CameraType) {
+    CameraType["orthographic"] = "orthographic";
+    CameraType["perspective"] = "perspective";
+})(CameraType || (CameraType = {}));
+
 // 材质类型
 var MaterialType;
 (function (MaterialType) {
@@ -21629,6 +21895,28 @@ var FontStyle;
     FontStyle["oblique"] = "oblique";
 })(FontStyle || (FontStyle = {}));
 
+var DataType;
+(function (DataType) {
+    DataType["VFXItemData"] = "VFXItemData";
+    DataType["EffectComponent"] = "EffectComponent";
+    DataType["Material"] = "Material";
+    DataType["Shader"] = "Shader";
+    DataType["SpriteComponent"] = "SpriteComponent";
+    DataType["ParticleSystem"] = "ParticleSystem";
+    DataType["InteractComponent"] = "InteractComponent";
+    DataType["CameraController"] = "CameraController";
+    DataType["Geometry"] = "Geometry";
+    DataType["Texture"] = "Texture";
+    DataType["TextComponent"] = "TextComponent";
+    // FIXME: 先完成ECS的场景转换，后面移到spec中
+    DataType["MeshComponent"] = "MeshComponent";
+    DataType["SkyboxComponent"] = "SkyboxComponent";
+    DataType["LightComponent"] = "LightComponent";
+    DataType["CameraComponent"] = "CameraComponent";
+    DataType["ModelPluginComponent"] = "ModelPluginComponent";
+    DataType["TreeComponent"] = "TreeComponent";
+})(DataType || (DataType = {}));
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -21684,11 +21972,22 @@ function __read(o, n) {
     return ar;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var _a$2;
 function arrAdd(arr, item) {
     if (!arr.includes(item)) {
         arr.push(item);
@@ -21924,6 +22223,34 @@ function rotationZYXFromQuat(out, quat) {
     }
     return out;
 }
+function generateGUID() {
+    return v4().replace(/-/g, '');
+}
+/**
+ * 提取并转换 JSON 数据中的 anchor 值
+ */
+function convertAnchor$1(anchor, particleOrigin) {
+    if (anchor) {
+        return [anchor[0] - 0.5, 0.5 - anchor[1]];
+    }
+    else if (particleOrigin) {
+        return particleOriginTranslateMap[particleOrigin];
+    }
+    else {
+        return [0, 0];
+    }
+}
+var particleOriginTranslateMap = (_a$2 = {},
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [0, 0],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [0, -0.5],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [0, 0.5],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [-0.5, 0.5],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [-0.5, 0],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [-0.5, -0.5],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [0.5, 0],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
+    _a$2[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
+    _a$2);
 
 function getStandardParticleContent(particle) {
     var _a;
@@ -22335,6 +22662,309 @@ function version22Migration(json) {
     });
     return json;
 }
+/**
+ * 3.0 以下版本数据适配（runtime 2.0及以上版本支持）
+ */
+function version30Migration(json) {
+    var e_1, _a;
+    var _b, _c, _d, _e;
+    var result = Object.assign({}, json, {
+        items: [],
+        components: [],
+        materials: [],
+        shaders: [],
+        geometries: [],
+    });
+    // 兼容老版本数据中不存在textures的情况
+    (_b = result.textures) !== null && _b !== void 0 ? _b : (result.textures = []);
+    result.textures.forEach(function (textureOptions) {
+        Object.assign(textureOptions, {
+            id: generateGUID(),
+            dataType: DataType.Texture,
+        });
+    });
+    if (result.textures.length < result.images.length) {
+        for (var i = result.textures.length; i < result.images.length; i++) {
+            result.textures.push({
+                //@ts-expect-error
+                id: generateGUID(),
+                dataType: DataType.Texture,
+                source: i,
+                flipY: true,
+            });
+        }
+    }
+    var _loop_1 = function (composition) {
+        var e_2, _h, e_3, _j;
+        // composition 的 endbehaviour 兼容
+        if (composition.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY || composition.endBehavior === END_BEHAVIOR_PAUSE) {
+            composition.endBehavior = END_BEHAVIOR_FREEZE;
+        }
+        var itemGuidMap = {};
+        try {
+            for (var _k = (e_2 = void 0, __values(composition.items)), _l = _k.next(); !_l.done; _l = _k.next()) {
+                var item = _l.value;
+                itemGuidMap[item.id] = generateGUID();
+                // TODO: 编辑器测试用，上线后删除
+                //@ts-expect-error
+                item.oldId = item.id;
+                item.id = itemGuidMap[item.id];
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_l && !_l.done && (_h = _k.return)) _h.call(_k);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        composition.items.forEach(function (item, index) {
+            if (item.parentId) {
+                if (item.parentId.includes('^')) {
+                    var parentId = (item.parentId).split('^')[0];
+                    var nodeId = (item.parentId).split('^')[1];
+                    item.parentId = itemGuidMap[parentId] + '^' + nodeId;
+                }
+                else {
+                    item.parentId = itemGuidMap[item.parentId];
+                }
+            }
+            // @ts-expect-error fix item type
+            result.items.push(item);
+            // @ts-expect-error fix item type
+            composition.items[index] = { id: item.id };
+        });
+        try {
+            for (var _m = (e_3 = void 0, __values(result.items)), _o = _m.next(); !_o.done; _o = _m.next()) {
+                var item = _o.value;
+                // 原 texture 索引转为统一 guid 索引
+                if (item.content) {
+                    if (item.content.renderer) {
+                        if (item.content.renderer.texture !== undefined) {
+                            var oldTextureId = item.content.renderer.texture;
+                            //@ts-expect-error
+                            item.content.renderer.texture = { id: result.textures[oldTextureId].id };
+                        }
+                    }
+                    if (item.content.trails) {
+                        if (item.content.trails.texture !== undefined) {
+                            var oldTextureId = item.content.trails.texture;
+                            //@ts-expect-error
+                            item.content.trails.texture = { id: result.textures[oldTextureId].id };
+                        }
+                    }
+                }
+                // item 的 transform 属性由数组转为 {x:n, y:n, z:n}
+                if (item.transform) {
+                    //@ts-expect-error
+                    var position = __spreadArray([], __read((_c = item.transform.position) !== null && _c !== void 0 ? _c : [0, 0, 0]), false);
+                    //@ts-expect-error
+                    var rotation = __spreadArray([], __read((_d = item.transform.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0]), false);
+                    //@ts-expect-error
+                    var scale = __spreadArray([], __read((_e = item.transform.scale) !== null && _e !== void 0 ? _e : [1, 1, 1]), false);
+                    Object.assign(item, {
+                        transform: {
+                            position: { x: position[0], y: position[1], z: position[2] },
+                            rotation: { x: rotation[0], y: rotation[1], z: rotation[2] },
+                            scale: { x: scale[0], y: scale[1], z: scale[0] },
+                        },
+                    });
+                    // sprite 的 scale 转为 size
+                    if (item.type === ItemType.sprite) {
+                        item.transform.size = { x: scale[0], y: scale[1] };
+                        item.transform.scale = { x: 1, y: 1, z: 1 };
+                    }
+                    // sprite 的 anchor 修正
+                    if (item.type === ItemType.sprite) {
+                        var content = item.content;
+                        if (!content.renderer) {
+                            content.renderer = {};
+                        }
+                        var renderer = content.renderer;
+                        var realAnchor = convertAnchor$1(renderer.anchor, renderer.particleOrigin);
+                        var startSize = item.transform.size;
+                        // 兼容旧JSON（anchor和particleOrigin可能同时存在）
+                        if (!renderer.anchor && renderer.particleOrigin !== undefined) {
+                            //@ts-expect-error
+                            item.transform.position.x += -realAnchor[0] * startSize.x;
+                            //@ts-expect-error
+                            item.transform.position.y += -realAnchor[1] * startSize.y;
+                        }
+                        //@ts-expect-error
+                        item.transform.anchor = { x: realAnchor[0] * startSize.x, y: realAnchor[1] * startSize.y };
+                    }
+                }
+                if (item.type === ItemType.particle) {
+                    var content = item.content;
+                    if (!content.renderer) {
+                        content.renderer = {};
+                    }
+                    var renderer = content.renderer;
+                    content.renderer.anchor = convertAnchor$1(renderer.anchor, renderer.particleOrigin);
+                }
+                // 动画数据转化 TODO: 动画数据移到 TimelineComponentData
+                item.content.tracks = [];
+                var tracks = item.content.tracks;
+                if (item.type !== ItemType.particle) {
+                    tracks.push({
+                        clips: [
+                            {
+                                dataType: 'TransformAnimationPlayableAsset',
+                                animationClip: {
+                                    sizeOverLifetime: item.content.sizeOverLifetime,
+                                    rotationOverLifetime: item.content.rotationOverLifetime,
+                                    positionOverLifetime: item.content.positionOverLifetime,
+                                },
+                            },
+                        ],
+                    });
+                }
+                if (item.type === ItemType.sprite) {
+                    tracks.push({
+                        clips: [
+                            {
+                                dataType: 'SpriteColorAnimationPlayableAsset',
+                                animationClip: {
+                                    colorOverLifetime: item.content.colorOverLifetime,
+                                    startColor: item.content.options.startColor,
+                                },
+                            },
+                        ],
+                    });
+                }
+                // gizmo 的 target id 转换为新的 item guid
+                if (item.content.options.target) {
+                    item.content.options.target = itemGuidMap[item.content.options.target];
+                }
+                // item 的 content 转为 component data 加入 JSONScene.components
+                var uuid = generateGUID();
+                if (item.type === ItemType.sprite) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.SpriteComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.particle) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.ParticleSystem;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.mesh) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.MeshComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.skybox) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.SkyboxComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.light) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.LightComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === 'camera') {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.CameraComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.tree) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.TreeComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.interact) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.InteractComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.camera) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.CameraController;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+                else if (item.type === ItemType.text) {
+                    item.components = [];
+                    result.components.push(item.content);
+                    item.content.id = uuid;
+                    item.content.dataType = DataType.TextComponent;
+                    item.content.item = { id: item.id };
+                    item.dataType = DataType.VFXItemData;
+                    //@ts-expect-error
+                    item.components.push({ id: item.content.id });
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_o && !_o.done && (_j = _m.return)) _j.call(_m);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
+    try {
+        // 更正Composition.endBehavior
+        for (var _f = __values(json.compositions), _g = _f.next(); !_g.done; _g = _f.next()) {
+            var composition = _g.value;
+            _loop_1(composition);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    result.version = '3.0';
+    return result;
+}
 
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
@@ -22344,16 +22974,16 @@ function getStandardJSON(json) {
     if (!json || typeof json !== 'object') {
         throw Error('expect a json object');
     }
-    // 修正老版本数据中，meshItem以及lightItem结束行为错误问题
+    // 修正老版本数据中，meshItem 以及 lightItem 结束行为错误问题
     version22Migration(json);
     if (v0.test(json.version)) {
         reverseParticle = ((_a = (/^(\d+)/).exec(json.version)) === null || _a === void 0 ? void 0 : _a[0]) === '0';
-        return version21Migration(getStandardJSONFromV0(json));
+        return version30Migration(version21Migration(getStandardJSONFromV0(json)));
     }
     var mainVersion = (_b = standardVersion.exec(json.version)) === null || _b === void 0 ? void 0 : _b[1];
     if (mainVersion) {
-        if (Number(mainVersion) < 2) {
-            return version21Migration(json);
+        if (Number(mainVersion) < 3) {
+            return version30Migration(version21Migration(json));
         }
         return json;
     }
@@ -22677,7 +23307,7 @@ function version3Migration(scene) {
     try {
         for (var _j = __values$1(ecScene.items), _k = _j.next(); !_k.done; _k = _j.next()) {
             var item = _k.value;
-            itemGuidMap[item.id] = generateGUID();
+            itemGuidMap[item.id] = generateGUID$1();
             // TODO: 编辑器测试用，上线后删除
             //@ts-expect-error
             item.oldId = item.id;
@@ -22733,7 +23363,7 @@ function version3Migration(scene) {
         // texture 增加 id 和 dataType
         for (var _q = __values$1(scene.textureOptions), _r = _q.next(); !_r.done; _r = _q.next()) {
             var texture = _r.value;
-            texture.id = generateGUID();
+            texture.id = generateGUID$1();
             texture.dataType = exports.DataType.Texture;
         }
     }
@@ -22753,23 +23383,15 @@ function version3Migration(scene) {
             var item = _t.value;
             // 原 texture 索引转为统一 guid 索引
             if (item.content) {
-                //@ts-expect-error
                 if (item.content.renderer) {
-                    //@ts-expect-error
                     if (item.content.renderer.texture !== undefined) {
-                        //@ts-expect-error
                         var oldTextureId = item.content.renderer.texture;
-                        //@ts-expect-error
                         item.content.renderer.texture = { id: scene.textureOptions[oldTextureId].id };
                     }
                 }
-                //@ts-expect-error
                 if (item.content.trails) {
-                    //@ts-expect-error
                     if (item.content.trails.texture !== undefined) {
-                        //@ts-expect-error
                         var oldTextureId = item.content.trails.texture;
-                        //@ts-expect-error
                         item.content.trails.texture = { id: scene.textureOptions[oldTextureId].id };
                     }
                 }
@@ -22780,12 +23402,14 @@ function version3Migration(scene) {
                 var rotation = item.transform.rotation;
                 var scale = item.transform.scale;
                 if (!position) {
+                    //@ts-expect-error
                     position = [0, 0, 0];
                 }
                 if (!rotation) {
                     rotation = [0, 0, 0];
                 }
                 if (!scale) {
+                    //@ts-expect-error
                     scale = [1, 1, 1];
                 }
                 item.transform = {
@@ -22806,12 +23430,9 @@ function version3Migration(scene) {
                 // sprite 的 anchor 修正
                 if (item.type === ItemType$1.sprite) {
                     var content = item.content;
-                    //@ts-expect-error
                     if (!content.renderer) {
-                        //@ts-expect-error
                         content.renderer = {};
                     }
-                    //@ts-expect-error
                     var renderer = content.renderer;
                     var realAnchor = convertAnchor(renderer.anchor, renderer.particleOrigin);
                     //@ts-expect-error
@@ -22829,14 +23450,10 @@ function version3Migration(scene) {
             }
             if (item.type === ItemType$1.particle) {
                 var content = item.content;
-                //@ts-expect-error
                 if (!content.renderer) {
-                    //@ts-expect-error
                     content.renderer = {};
                 }
-                //@ts-expect-error
                 var renderer = content.renderer;
-                //@ts-expect-error
                 content.renderer.anchor = convertAnchor(renderer.anchor, renderer.particleOrigin);
             }
             // item 的 endbehaviour 兼容
@@ -22844,164 +23461,138 @@ function version3Migration(scene) {
             if (item.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 || item.endBehavior === END_BEHAVIOR_PAUSE$1) {
                 item.endBehavior = END_BEHAVIOR_FREEZE$1;
             }
+            // 动画数据转化 TODO: 动画数据移到 TimelineComponentData
+            item.content.tracks = [];
+            var tracks = item.content.tracks;
+            if (item.type !== ItemType$1.particle) {
+                tracks.push({
+                    clips: [
+                        {
+                            dataType: 'TransformAnimationPlayableAsset',
+                            animationClip: {
+                                sizeOverLifetime: item.content.sizeOverLifetime,
+                                rotationOverLifetime: item.content.rotationOverLifetime,
+                                positionOverLifetime: item.content.positionOverLifetime,
+                            },
+                        },
+                    ],
+                });
+            }
+            if (item.type === ItemType$1.sprite) {
+                tracks.push({
+                    clips: [
+                        {
+                            dataType: 'SpriteColorAnimationPlayableAsset',
+                            animationClip: {
+                                colorOverLifetime: item.content.colorOverLifetime,
+                                startColor: item.content.options.startColor,
+                            },
+                        },
+                    ],
+                });
+            }
+            // gizmo 的 target id 转换为新的 item guid
+            if (item.content && item.content.options && item.content.options.target) {
+                item.content.options.target = itemGuidMap[item.content.options.target];
+            }
             // item 的 content 转为 component data 加入 JSONScene.components
-            var uuid = v4().replace(/-/g, '');
+            var uuid = v4$1().replace(/-/g, '');
             if (item.type === ItemType$1.sprite) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.SpriteComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.particle) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.ParticleSystem;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.mesh) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.MeshComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.skybox) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.SkyboxComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.light) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.LightComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === 'camera') {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.CameraComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.tree) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.TreeComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.interact) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.InteractComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.camera) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.CameraController;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
             else if (item.type === ItemType$1.text) {
-                //@ts-expect-error
                 item.components = [];
-                //@ts-expect-error
                 components.push(item.content);
-                //@ts-expect-error
                 item.content.id = uuid;
-                //@ts-expect-error
                 item.content.dataType = exports.DataType.TextComponent;
-                //@ts-expect-error
                 item.content.item = { id: item.id };
-                //@ts-expect-error
                 item.dataType = exports.DataType.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
@@ -23025,7 +23616,7 @@ function convertAnchor(anchor, particleOrigin) {
         return [anchor[0] - 0.5, 0.5 - anchor[1]];
     }
     else if (particleOrigin) {
-        return particleOriginTranslateMap[particleOrigin];
+        return particleOriginTranslateMap$1[particleOrigin];
     }
     else {
         return [0, 0];
@@ -23303,16 +23894,17 @@ var AssetManager = /** @class */ (function () {
     };
     AssetManager.prototype.processBins = function (bins) {
         return __awaiter(this, void 0, void 0, function () {
-            var renderLevel, jobs;
+            var renderLevel, baseUrl, jobs;
             var _this = this;
             return __generator(this, function (_a) {
                 renderLevel = this.options.renderLevel;
+                baseUrl = this.baseUrl;
                 jobs = bins.map(function (bin) {
                     if (bin instanceof ArrayBuffer) {
                         return bin;
                     }
                     if (passRenderLevel(bin.renderLevel, renderLevel)) {
-                        return _this.loadBins(bin.url);
+                        return _this.loadBins(new URL(bin.url, baseUrl).href);
                     }
                     throw new Error("Invalid bins source: ".concat(JSON.stringify(bins)));
                 });
@@ -23330,13 +23922,14 @@ var AssetManager = /** @class */ (function () {
                     return [2 /*return*/];
                 }
                 jobs = fonts.map(function (font) { return __awaiter(_this, void 0, void 0, function () {
-                    var fontFace;
+                    var url, fontFace;
                     var _a;
                     return __generator(this, function (_b) {
                         switch (_b.label) {
                             case 0:
                                 if (!(font.fontURL && !AssetManager.fonts.has(font.fontFamily))) return [3 /*break*/, 4];
-                                fontFace = new FontFace((_a = font.fontFamily) !== null && _a !== void 0 ? _a : '', 'url(' + font.fontURL + ')');
+                                url = new URL(font.fontURL, this.baseUrl).href;
+                                fontFace = new FontFace((_a = font.fontFamily) !== null && _a !== void 0 ? _a : '', 'url(' + url + ')');
                                 _b.label = 1;
                             case 1:
                                 _b.trys.push([1, 3, , 4]);
@@ -23349,7 +23942,7 @@ var AssetManager = /** @class */ (function () {
                                 return [3 /*break*/, 4];
                             case 3:
                                 _b.sent();
-                                logger.warn("Invalid fonts source: ".concat(JSON.stringify(font.fontURL)));
+                                logger.warn("Invalid fonts source: ".concat(JSON.stringify(url)));
                                 return [3 /*break*/, 4];
                             case 4: return [2 /*return*/];
                         }
@@ -23598,7 +24191,7 @@ function createTextureOptionsBySource(image, sourceFrom) {
         return image.source;
     }
     else if (image instanceof HTMLImageElement ||
-        image instanceof HTMLCanvasElement) {
+        isCanvas(image)) {
         return {
             image: image,
             sourceType: exports.TextureSourceType.image,
@@ -23660,6 +24253,11 @@ function base64ToFile(base64, filename, contentType) {
     var file = new File([blob], filename, { type: contentType });
     return file;
 }
+function isCanvas(cavnas) {
+    var _a;
+    // 小程序 Canvas 无法使用 instanceof HTMLCanvasElement 判断
+    return typeof cavnas === 'object' && cavnas !== null && ((_a = cavnas.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'CANVAS';
+}
 
 var tmpScale = new Vector3(1, 1, 1);
 /**
@@ -23879,8 +24477,9 @@ var Camera = /** @class */ (function () {
     Camera.prototype.getInverseVPRatio = function (z) {
         var pos = new Vector3(0, 0, z);
         var mat = this.getViewProjectionMatrix();
-        var nz = pos.applyMatrix(mat).z;
-        return new Vector3(1, 1, nz).applyMatrix(mat);
+        var inverseVP = this.getInverseViewProjectionMatrix();
+        var nz = mat.projectPoint(pos).z;
+        return inverseVP.projectPoint(new Vector3(1, 1, nz));
     };
     /**
      * 设置相机的旋转四元数
@@ -23892,7 +24491,6 @@ var Camera = /** @class */ (function () {
             this.dirty = true;
         }
         else {
-            this.options.quat;
             if (!this.options.quat.equals(value)) {
                 this.options.quat.copyFrom(value);
                 this.dirty = true;
@@ -24060,8 +24658,7 @@ var CompositionComponent = /** @class */ (function (_super) {
                     }
                     item.getComponent(CompositionComponent).createContent();
                 }
-                else if (itemData.type === 'ECS' ||
-                    itemData.type === ItemType$1.sprite ||
+                else if (itemData.type === ItemType$1.sprite ||
                     itemData.type === ItemType$1.text ||
                     itemData.type === ItemType$1.particle ||
                     itemData.type === ItemType$1.mesh ||
@@ -24079,20 +24676,7 @@ var CompositionComponent = /** @class */ (function (_super) {
                     item = new VFXItem(this.engine, itemData);
                     item.composition = this.item.composition;
                     // 兼容老的数据代码，json 更新后可移除
-                    switch (itemData.type) {
-                        case ItemType$1.text: {
-                            // 添加文本组件
-                            var textItem = new TextComponent(this.engine, itemData.content);
-                            textItem.item = item;
-                            item.components.push(textItem);
-                            item.rendererComponents.push(textItem);
-                            item._content = textItem;
-                            break;
-                        }
-                        default: {
-                            item = createVFXItem(itemData, this.item.composition);
-                        }
-                    }
+                    item = createVFXItem(itemData, this.item.composition);
                 }
                 item.parent = this.item;
                 // 相机不跟随合成移动
@@ -25482,10 +26066,8 @@ var Engine = /** @class */ (function () {
     Engine.prototype.addPackageDatas = function (scene) {
         var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e, e_6, _f;
         var jsonScene = scene.jsonScene;
-        //@ts-expect-error
         if (jsonScene.items) {
             try {
-                //@ts-expect-error
                 for (var _g = __values$1(jsonScene.items), _h = _g.next(); !_h.done; _h = _g.next()) {
                     var vfxItemData = _h.value;
                     this.addEffectsObjectData(vfxItemData);
@@ -25499,10 +26081,8 @@ var Engine = /** @class */ (function () {
                 finally { if (e_1) throw e_1.error; }
             }
         }
-        //@ts-expect-error
         if (jsonScene.materials) {
             try {
-                //@ts-expect-error
                 for (var _j = __values$1(jsonScene.materials), _k = _j.next(); !_k.done; _k = _j.next()) {
                     var materialData = _k.value;
                     this.addEffectsObjectData(materialData);
@@ -25516,10 +26096,8 @@ var Engine = /** @class */ (function () {
                 finally { if (e_2) throw e_2.error; }
             }
         }
-        //@ts-expect-error
         if (jsonScene.shaders) {
             try {
-                //@ts-expect-error
                 for (var _l = __values$1(jsonScene.shaders), _m = _l.next(); !_m.done; _m = _l.next()) {
                     var shaderData = _m.value;
                     this.addEffectsObjectData(shaderData);
@@ -25533,10 +26111,8 @@ var Engine = /** @class */ (function () {
                 finally { if (e_3) throw e_3.error; }
             }
         }
-        //@ts-expect-error
         if (jsonScene.geometries) {
             try {
-                //@ts-expect-error
                 for (var _o = __values$1(jsonScene.geometries), _p = _o.next(); !_p.done; _p = _o.next()) {
                     var geometryData = _p.value;
                     this.addEffectsObjectData(geometryData);
@@ -25550,10 +26126,8 @@ var Engine = /** @class */ (function () {
                 finally { if (e_4) throw e_4.error; }
             }
         }
-        //@ts-expect-error
         if (jsonScene.components) {
             try {
-                //@ts-expect-error
                 for (var _q = __values$1(jsonScene.components), _r = _q.next(); !_r.done; _r = _q.next()) {
                     var componentData = _r.value;
                     this.addEffectsObjectData(componentData);
@@ -26478,13 +27052,13 @@ var ThreeMaterial = /** @class */ (function (_super) {
         this.uniforms[name] = this.material.uniforms[name] = uniform;
     };
     // 下列三个方法暂时不需要实现
-    ThreeMaterial.prototype.enableKeyword = function (keyword) {
+    ThreeMaterial.prototype.enableMacro = function (keyword) {
         throw new Error('Method not implemented.');
     };
-    ThreeMaterial.prototype.disableKeyword = function (keyword) {
+    ThreeMaterial.prototype.disableMacro = function (keyword) {
         throw new Error('Method not implemented.');
     };
-    ThreeMaterial.prototype.isKeywordEnabled = function (keyword) {
+    ThreeMaterial.prototype.isMacroEnabled = function (keyword) {
         throw new Error('Method not implemented.');
     };
     ThreeMaterial.prototype.clone = function (props) {
@@ -27542,12 +28116,11 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.2";
+var version = "2.0.0-alpha.4";
 logger.info('THREEJS plugin version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;
-exports.ActivationClipPlayable = ActivationClipPlayable;
-exports.AnimationClipPlayable = AnimationClipPlayable;
+exports.ActivationPlayable = ActivationPlayable;
 exports.AssetLoader = AssetLoader;
 exports.AssetManager = AssetManager;
 exports.BYTES_TYPE_MAP = BYTES_TYPE_MAP;
@@ -27636,6 +28209,7 @@ exports.SPRITE_VERTEX_STRIDE = SPRITE_VERTEX_STRIDE;
 exports.SemanticMap = SemanticMap;
 exports.SerializationHelper = SerializationHelper;
 exports.Shader = Shader;
+exports.ShaderVariant = ShaderVariant;
 exports.SpriteColorPlayable = SpriteColorPlayable;
 exports.SpriteComponent = SpriteComponent;
 exports.SpriteLoader = SpriteLoader;
@@ -27657,6 +28231,8 @@ exports.TimelineClip = TimelineClip;
 exports.TimelineComponent = TimelineComponent;
 exports.Track = Track;
 exports.Transform = Transform;
+exports.TransformAnimationPlayable = TransformAnimationPlayable;
+exports.TransformAnimationPlayableAsset = TransformAnimationPlayableAsset;
 exports.VFXItem = VFXItem;
 exports.ValueGetter = ValueGetter;
 exports.addByOrder = addByOrder;
@@ -27710,7 +28286,7 @@ exports.gaussianDownHFrag = gaussianDownHFrag;
 exports.gaussianDownVFrag = gaussianDownVFrag;
 exports.gaussianUpFrag = gaussianUpFrag;
 exports.generateEmptyTypedArray = generateEmptyTypedArray;
-exports.generateGUID = generateGUID;
+exports.generateGUID = generateGUID$1;
 exports.generateHalfFloatTexture = generateHalfFloatTexture;
 exports.getBackgroundImage = getBackgroundImage;
 exports.getColorFromGradientStops = getColorFromGradientStops;
@@ -27767,7 +28343,7 @@ exports.nearestPowerOfTwo = nearestPowerOfTwo;
 exports.noop = noop;
 exports.parsePercent = parsePercent$1;
 exports.particleFrag = particleFrag;
-exports.particleOriginTranslateMap = particleOriginTranslateMap;
+exports.particleOriginTranslateMap = particleOriginTranslateMap$1;
 exports.particleVert = particleVert;
 exports.pluginLoaderMap = pluginLoaderMap;
 exports.random = random;