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

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.2
+ * Version: v2.0.0-alpha.4
  */
 
 import * as THREE from 'three';
@@ -124,7 +124,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);
@@ -142,20 +142,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);
 }
 
 /**
@@ -163,30 +163,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
@@ -201,7 +201,7 @@ function v4(options, buf, offset) {
     return buf;
   }
 
-  return unsafeStringify(rnds);
+  return unsafeStringify$1(rnds);
 }
 
 function addItem(arr, value) {
@@ -2188,7 +2188,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);
@@ -2505,7 +2505,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;
     };
     /**
@@ -3034,7 +3034,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; }
@@ -4287,7 +4287,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);
@@ -4474,7 +4474,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;
     };
     /**
@@ -4690,7 +4690,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; }
@@ -6448,7 +6448,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);
 }
 /**
@@ -6461,7 +6461,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) {
@@ -6469,7 +6469,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);
 }
 /**
@@ -6566,17 +6566,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));
+}
+
 /*********************************************/
 /*               元素属性参数类型               */
 /*********************************************/
@@ -6839,6 +6852,10 @@ var ItemType$1;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType$1 || (ItemType$1 = {}));
 /**
  * 渲染模式
@@ -6953,6 +6970,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 = {}));
 
 /*********************************************/
@@ -7091,12 +7112,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) {
@@ -7242,6 +7289,28 @@ var FontStyle$1;
     FontStyle["oblique"] = "oblique";
 })(FontStyle$1 || (FontStyle$1 = {}));
 
+var DataType$2;
+(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$2 || (DataType$2 = {}));
+
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get BezierKeyframeType () { return BezierKeyframeType$1; },
@@ -7250,7 +7319,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$2; },
     END_BEHAVIOR_DESTROY: END_BEHAVIOR_DESTROY$1,
     END_BEHAVIOR_DESTROY_CHILDREN: END_BEHAVIOR_DESTROY_CHILDREN$1,
     END_BEHAVIOR_FORWARD: END_BEHAVIOR_FORWARD$1,
@@ -7263,6 +7334,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; },
@@ -7340,390 +7412,121 @@ function generateSerializableMember(type, sourceName) {
     };
 }
 
+var ShaderType;
+(function (ShaderType) {
+    ShaderType[ShaderType["vertex"] = 0] = "vertex";
+    ShaderType[ShaderType["fragment"] = 1] = "fragment";
+})(ShaderType || (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));
-
-var ShaderType;
-(function (ShaderType) {
-    ShaderType[ShaderType["vertex"] = 0] = "vertex";
-    ShaderType[ShaderType["fragment"] = 1] = "fragment";
-})(ShaderType || (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;
@@ -7753,15 +7556,15 @@ function getPreMultiAlpha(blending) {
             return 1;
     }
 }
-var downgradeKeywords = (_a$6 = {},
-    _a$6[ShaderType.vertex] = {
+var downgradeKeywords = (_a$7 = {},
+    _a$7[ShaderType.vertex] = {
         in: 'attribute',
         out: 'varying',
     },
-    _a$6[ShaderType.fragment] = {
+    _a$7[ShaderType.fragment] = {
         in: 'varying',
     },
-    _a$6);
+    _a$7);
 /**
  * 生成 shader，检测到 WebGL1 上下文会降级
  * @param marcos - 宏定义数组
@@ -8195,6 +7998,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 抽象类
@@ -8862,13 +8702,49 @@ var GLSLVersion;
     GLSLVersion["GLSL1"] = "100";
     GLSLVersion["GLSL3"] = "300 es";
 })(GLSLVersion || (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));
 
@@ -8881,8 +8757,8 @@ function createCopyShader(level, writeDepth) {
     var version = webgl2 ? '#version 300 es' : '';
     return {
         name: EFFECTS_COPY_MESH_NAME,
-        vertex: createShaderWithMarcos([], version + '\n' + COPY_VERTEX_SHADER, ShaderType.vertex, level),
-        fragment: createShaderWithMarcos([], version + '\n' + COPY_FRAGMENT_SHADER, ShaderType.fragment, level),
+        vertex: version + '\n' + COPY_VERTEX_SHADER,
+        fragment: version + '\n' + COPY_FRAGMENT_SHADER,
         glslVersion: webgl2 ? GLSLVersion.GLSL3 : GLSLVersion.GLSL1,
         marcos: [
             ['WEBGL2', !!webgl2],
@@ -9014,13 +8890,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 抽象类
  */
@@ -9030,29 +8906,261 @@ var Geometry = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
-     * 初始化 GPU 资源
-     * @override
+     * 初始化 GPU 资源
+     * @override
+     */
+    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
+    };
+    /**
+     * 生命周期函数，每帧调用一次
      */
-    Geometry.prototype.initialize = function () {
+    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;
 /**
@@ -9357,7 +9465,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;
     };
@@ -11289,7 +11397,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;
         }
@@ -11350,7 +11458,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*/];
                         }
@@ -11441,7 +11549,7 @@ var SerializationHelper = /** @class */ (function () {
     };
     SerializationHelper.serializeObjectProperty = function (objectProperty, serializedData, level) {
         var e_15, _a;
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11486,7 +11594,7 @@ var SerializationHelper = /** @class */ (function () {
         }
     };
     SerializationHelper.serializeArrayProperty = function (arrayProperty, serializedData, level) {
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11542,18 +11650,15 @@ var AssetLoader = /** @class */ (function () {
             return undefined;
         }
         switch (effectsObjectData.dataType) {
-            case DataType.Material:
+            case DataType$1.Material:
                 effectsObject = Material.create(this.engine);
                 break;
-            case DataType.Geometry:
+            case DataType$1.Geometry:
                 effectsObject = Geometry.create(this.engine);
                 break;
-            case DataType.Texture:
+            case DataType$1.Texture:
                 effectsObject = Texture.create(this.engine, effectsObjectData);
                 return effectsObject;
-            case DataType.Shader:
-                effectsObject = this.engine.getShaderLibrary().createShader(effectsObjectData);
-                break;
             default: {
                 var classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
                 if (classConstructor) {
@@ -11597,18 +11702,15 @@ var AssetLoader = /** @class */ (function () {
                         return [2 /*return*/, effectsObject];
                     case 2:
                         switch (effectsObjectData.dataType) {
-                            case DataType.Material:
+                            case DataType$1.Material:
                                 effectsObject = Material.create(this.engine);
                                 break;
-                            case DataType.Geometry:
+                            case DataType$1.Geometry:
                                 effectsObject = Geometry.create(this.engine);
                                 break;
-                            case DataType.Texture:
+                            case DataType$1.Texture:
                                 effectsObject = Texture.create(this.engine, effectsObjectData);
                                 return [2 /*return*/, effectsObject];
-                            case DataType.Shader:
-                                effectsObject = this.engine.getShaderLibrary().createShader(effectsObjectData);
-                                break;
                             default: {
                                 classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
                                 if (classConstructor) {
@@ -11650,27 +11752,27 @@ var Database = /** @class */ (function () {
     };
     return Database;
 }());
-var DataType;
+var DataType$1;
 (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 || (DataType = {}));
+    DataType["MeshComponent"] = "MeshComponent";
+    DataType["SkyboxComponent"] = "SkyboxComponent";
+    DataType["LightComponent"] = "LightComponent";
+    DataType["CameraComponent"] = "CameraComponent";
+    DataType["ModelPluginComponent"] = "ModelPluginComponent";
+    DataType["TreeComponent"] = "TreeComponent";
+})(DataType$1 || (DataType$1 = {}));
 
 /**
  * 抽象插件类
@@ -11821,7 +11923,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];
 }
@@ -11844,7 +11946,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);
     }
@@ -11875,17 +11977,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));
 }
@@ -11910,7 +12012,7 @@ function trianglesFromRect(position, halfWidth, halfHeight) {
     ];
 }
 
-var _a$3;
+var _a$4;
 var NOT_IMPLEMENT = 'not_implement';
 var ValueGetter = /** @class */ (function () {
     function ValueGetter(arg) {
@@ -12418,50 +12520,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);
@@ -13191,7 +13293,7 @@ var CameraController = /** @class */ (function (_super) {
         }
     };
     CameraController = __decorate([
-        effectsClass(DataType.CameraController)
+        effectsClass(DataType$1.CameraController)
     ], CameraController);
     return CameraController;
 }(ItemBehaviour));
@@ -13412,13 +13514,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, ShaderType.vertex, level),
-                fragment: createShaderWithMarcos(marcos, fragment, ShaderType.fragment, level),
+                vertex: vertex,
+                fragment: fragment,
                 glslVersion: GLSLVersion.GLSL1,
                 cacheId: "".concat(rendererOptions.cachePrefix, "_effects_interact"),
+                marcos: marcos,
             },
             uniformSemantics: {
                 effects_MatrixVP: 'VIEWPROJECTION',
@@ -13492,11 +13594,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) {
@@ -13504,7 +13606,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);
@@ -13648,7 +13751,7 @@ var InteractComponent = /** @class */ (function (_super) {
     };
     var InteractComponent_1;
     InteractComponent = InteractComponent_1 = __decorate([
-        effectsClass(DataType.InteractComponent)
+        effectsClass(DataType$1.InteractComponent)
     ], InteractComponent);
     return InteractComponent;
 }(RendererComponent));
@@ -13697,8 +13800,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, ShaderType.fragment, level),
-        vertex: createShaderWithMarcos(marcos, vertex, ShaderType.vertex, level),
+        fragment: fragment,
+        vertex: vertex,
         glslVersion: level === 1 ? GLSLVersion.GLSL1 : GLSLVersion.GLSL3,
         marcos: marcos,
         shared: true,
@@ -13936,15 +14039,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();
@@ -13956,7 +14069,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 {
@@ -14008,7 +14121,7 @@ var Track = /** @class */ (function () {
         this.clips.push(clip);
     };
     return Track;
-}());
+}(PlayableAsset));
 /**
  * @since 2.0.0
  * @internal
@@ -14064,12 +14177,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();
         }
@@ -14077,7 +14190,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;
@@ -14122,7 +14235,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 = {
@@ -14193,30 +14306,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()) {
@@ -14234,7 +14362,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()) {
@@ -14252,7 +14380,7 @@ var ActivationClipPlayable = /** @class */ (function (_super) {
             finally { if (e_2) throw e_2.error; }
         }
     };
-    return ActivationClipPlayable;
+    return ActivationPlayable;
 }(Playable));
 
 /**
@@ -14507,7 +14635,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);
@@ -14522,6 +14650,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,
@@ -14532,7 +14661,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);
@@ -14946,15 +15115,12 @@ 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);
     };
     SpriteComponent = __decorate([
-        effectsClass(DataType.SpriteComponent)
+        effectsClass(DataType$1.SpriteComponent)
     ], SpriteComponent);
     return SpriteComponent;
 }(RendererComponent));
@@ -15115,8 +15281,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, ShaderType.fragment, level),
-            vertex: createShaderWithMarcos(marcos, vertex, ShaderType.vertex, level),
+            fragment: fragment,
+            vertex: vertex,
             glslVersion: level === 1 ? GLSLVersion.GLSL1 : GLSLVersion.GLSL3,
             shared: true,
             cacheId: shaderCache,
@@ -15671,8 +15837,8 @@ var TrailMesh = /** @class */ (function () {
         else {
             uniformValues.uVCurveValues = CurveValue.getAllData(keyFrameMeta);
         }
-        var vertex = createShaderWithMarcos(marcos, trailVert, ShaderType.vertex, level);
-        var fragment = createShaderWithMarcos(marcos, particleFrag, ShaderType.fragment, level);
+        var vertex = trailVert;
+        var fragment = particleFrag;
         var mtl = ({
             shader: {
                 vertex: vertex,
@@ -16359,7 +16525,7 @@ var TextureShape = /** @class */ (function () {
     return TextureShape;
 }());
 
-var _a$2;
+var _a$3;
 var ShapeNone = /** @class */ (function () {
     function ShapeNone() {
     }
@@ -16371,18 +16537,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();
@@ -17711,7 +17877,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);
                             }
                         }
@@ -18300,7 +18466,7 @@ var ParticleSystem = /** @class */ (function (_super) {
         timeline.createTrack(Track).createClip(ParticleBehaviourPlayable);
     };
     ParticleSystem = __decorate([
-        effectsClass(DataType.ParticleSystem)
+        effectsClass(DataType$1.ParticleSystem)
     ], ParticleSystem);
     return ParticleSystem;
 }(Component));
@@ -18483,7 +18649,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);
@@ -19993,7 +20161,7 @@ var TextComponent = /** @class */ (function (_super) {
         context.shadowOffsetY = -style.shadowOffsetY;
     };
     TextComponent = __decorate([
-        effectsClass(DataType.TextComponent)
+        effectsClass(DataType$1.TextComponent)
     ], TextComponent);
     return TextComponent;
 }(SpriteComponent));
@@ -20149,7 +20317,7 @@ var EffectComponent = /** @class */ (function (_super) {
         serialize()
     ], EffectComponent.prototype, "geometry", void 0);
     EffectComponent = __decorate([
-        effectsClass(DataType.EffectComponent)
+        effectsClass(DataType$1.EffectComponent)
     ], EffectComponent);
     return EffectComponent;
 }(RendererComponent));
@@ -20551,7 +20719,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 }; }
@@ -20568,6 +20739,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;
@@ -20605,10 +20777,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']));
         }
@@ -20640,7 +20808,7 @@ var VFXItem = /** @class */ (function (_super) {
         var _b, _c;
         this.taggedProperties.id = this.guid;
         this.taggedProperties.transform = this.transform.toData();
-        this.taggedProperties.dataType = DataType.VFXItemData;
+        this.taggedProperties.dataType = DataType$1.VFXItemData;
         if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.name) !== 'rootItem') {
             this.taggedProperties.parentId = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.guid;
         }
@@ -20667,10 +20835,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);
         }
     };
@@ -20737,7 +20905,7 @@ var VFXItem = /** @class */ (function (_super) {
     };
     var VFXItem_1;
     VFXItem = VFXItem_1 = __decorate([
-        effectsClass(DataType.VFXItemData)
+        effectsClass(DataType$1.VFXItemData)
     ], VFXItem);
     return VFXItem;
 }(EffectsObject));
@@ -20775,7 +20943,6 @@ function createVFXItem(props, composition) {
     if (!pluginName) {
         switch (type) {
             case ItemType$1.null:
-            case ItemType$1.base:
                 pluginName = 'cal';
                 break;
             case ItemType$1.sprite:
@@ -20896,7 +21063,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)];
@@ -20941,9 +21108,74 @@ function getPluginUsageInfo(name) {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v1.0.1
+ * 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);
+}
+
 /*********************************************/
 /*               元素属性参数类型               */
 /*********************************************/
@@ -21206,6 +21438,10 @@ var ItemType;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType || (ItemType = {}));
 /**
  * 渲染模式
@@ -21318,6 +21554,10 @@ var CompositionEndBehavior;
      * 销毁并保留最后一帧
      */
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY] = "pause_destroy";
+    /**
+     * 冻结
+     */
+    CompositionEndBehavior[CompositionEndBehavior["freeze"] = END_BEHAVIOR_FREEZE] = "freeze";
 })(CompositionEndBehavior || (CompositionEndBehavior = {}));
 
 /*********************************************/
@@ -21454,12 +21694,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) {
@@ -21605,6 +21871,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.
 
@@ -21660,11 +21948,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);
@@ -21900,6 +22199,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;
@@ -22311,6 +22638,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+)$/;
@@ -22320,16 +22950,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;
     }
@@ -22653,7 +23283,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;
@@ -22709,8 +23339,8 @@ 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.dataType = DataType.Texture;
+            texture.id = generateGUID$1();
+            texture.dataType = DataType$1.Texture;
         }
     }
     catch (e_5_1) { e_5 = { error: e_5_1 }; }
@@ -22729,23 +23359,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 };
                     }
                 }
@@ -22756,12 +23378,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 = {
@@ -22782,12 +23406,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
@@ -22805,14 +23426,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 兼容
@@ -22820,165 +23437,139 @@ 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 = DataType.SpriteComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.SpriteComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.ParticleSystem;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.ParticleSystem;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.MeshComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.MeshComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.SkyboxComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.SkyboxComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.LightComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.LightComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.CameraComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.CameraComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.TreeComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.TreeComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.InteractComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.InteractComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.CameraController;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.CameraController;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.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 = DataType.TextComponent;
-                //@ts-expect-error
+                item.content.dataType = DataType$1.TextComponent;
                 item.content.item = { id: item.id };
-                //@ts-expect-error
-                item.dataType = DataType.VFXItemData;
+                item.dataType = DataType$1.VFXItemData;
                 //@ts-expect-error
                 item.components.push({ id: item.content.id });
             }
@@ -23001,7 +23592,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];
@@ -23279,16 +23870,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)));
                 });
@@ -23306,13 +23898,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]);
@@ -23325,7 +23918,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*/];
                         }
@@ -23574,7 +24167,7 @@ function createTextureOptionsBySource(image, sourceFrom) {
         return image.source;
     }
     else if (image instanceof HTMLImageElement ||
-        image instanceof HTMLCanvasElement) {
+        isCanvas(image)) {
         return {
             image: image,
             sourceType: TextureSourceType.image,
@@ -23636,6 +24229,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);
 /**
@@ -23855,8 +24453,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));
     };
     /**
      * 设置相机的旋转四元数
@@ -23868,7 +24467,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;
@@ -24036,8 +24634,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 ||
@@ -24055,20 +24652,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;
                 // 相机不跟随合成移动
@@ -25458,10 +26042,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);
@@ -25475,10 +26057,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);
@@ -25492,10 +26072,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);
@@ -25509,10 +26087,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);
@@ -25526,10 +26102,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);
@@ -26454,13 +27028,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) {
@@ -27466,7 +28040,7 @@ var ThreeSpriteComponent = /** @class */ (function (_super) {
         this.threeMesh.clear();
     };
     ThreeSpriteComponent = __decorate([
-        effectsClass(DataType.SpriteComponent)
+        effectsClass(DataType$1.SpriteComponent)
     ], ThreeSpriteComponent);
     return ThreeSpriteComponent;
 }(SpriteComponent));
@@ -27518,8 +28092,8 @@ 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);
 
-export { AbstractPlugin, ActivationClipPlayable, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, CurveValue, DEFAULT_FONTS, DataType, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FILTER_NAME_NONE, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior$1 as InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, QCanvasViewer, QText, QTextWrapMode, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, alphaFrame_frag as alphaFrameFrag, alphaMask_frag as alphaMaskFrag, assertExist, asserts, blend, bloomMix_frag as bloomMixVert, bloomThreshold_frag as bloomThresholdVert, calculateTranslation, cameraMove_frag as cameraMoveFrag, cameraMove_vert as cameraMoveVert, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, combineImageTemplate1, combineImageTemplate1Async, combineImageTemplate2, combineImageTemplate2Async, combineImageTemplateAsync, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, copy as copyFrag, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, deepClone, defaultGlobalVolume, defaultPlugins, delay_frag as delayFrag, deserializeMipmapTexture, distortion_frag as distortionFrag, distortion_vert as distortionVert, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isScene, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, item_define as itemDefine, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadVideo, loadWebPOptional, logger, index$1 as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap, particleVert, pluginLoaderMap, random, registerPlugin, removeItem, requestAsync, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version };
+export { AbstractPlugin, ActivationPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, CurveValue, DEFAULT_FONTS, DataType$1 as DataType, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FILTER_NAME_NONE, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior$1 as InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, QCanvasViewer, QText, QTextWrapMode, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, TransformAnimationPlayable, TransformAnimationPlayableAsset, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, alphaFrame_frag as alphaFrameFrag, alphaMask_frag as alphaMaskFrag, assertExist, asserts, blend, bloomMix_frag as bloomMixVert, bloomThreshold_frag as bloomThresholdVert, calculateTranslation, cameraMove_frag as cameraMoveFrag, cameraMove_vert as cameraMoveVert, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, combineImageTemplate1, combineImageTemplate1Async, combineImageTemplate2, combineImageTemplate2Async, combineImageTemplateAsync, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, copy as copyFrag, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, deepClone, defaultGlobalVolume, defaultPlugins, delay_frag as delayFrag, deserializeMipmapTexture, distortion_frag as distortionFrag, distortion_vert as distortionVert, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID$1 as generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isScene, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, item_define as itemDefine, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadVideo, loadWebPOptional, logger, index$1 as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleVert, pluginLoaderMap, random, registerPlugin, removeItem, requestAsync, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version };
 //# sourceMappingURL=index.mjs.map