@galacean/effects-core 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.3
+ * Version: v2.0.0-alpha.4
  */
 
 /******************************************************************************
@@ -122,7 +122,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);
@@ -140,20 +140,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);
 }
 
 /**
@@ -161,30 +161,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
@@ -199,7 +199,7 @@ function v4(options, buf, offset) {
     return buf;
   }
 
-  return unsafeStringify(rnds);
+  return unsafeStringify$1(rnds);
 }
 
 function addItem(arr, value) {
@@ -2186,7 +2186,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);
@@ -2503,7 +2503,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;
     };
     /**
@@ -3032,7 +3032,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; }
@@ -4285,7 +4285,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);
@@ -4472,7 +4472,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;
     };
     /**
@@ -4688,7 +4688,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; }
@@ -6446,7 +6446,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);
 }
 /**
@@ -6459,7 +6459,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) {
@@ -6467,7 +6467,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);
 }
 /**
@@ -6564,17 +6564,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));
+}
+
 /*********************************************/
 /*               元素属性参数类型               */
 /*********************************************/
@@ -6837,6 +6850,10 @@ var ItemType$1;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType$1 || (ItemType$1 = {}));
 /**
  * 渲染模式
@@ -6951,6 +6968,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 = {}));
 
 /*********************************************/
@@ -7089,12 +7110,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) {
@@ -7240,6 +7287,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; },
@@ -7248,7 +7317,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,
@@ -7261,6 +7332,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; },
@@ -7452,7 +7524,7 @@ function copy$1(target) {
     }
 }
 
-var _a$5;
+var _a$6;
 function valIfUndefined(val, def) {
     if (val === undefined || val === null) {
         return def;
@@ -7482,15 +7554,15 @@ function getPreMultiAlpha(blending) {
             return 1;
     }
 }
-var downgradeKeywords = (_a$5 = {},
-    _a$5[ShaderType.vertex] = {
+var downgradeKeywords = (_a$6 = {},
+    _a$6[ShaderType.vertex] = {
         in: 'attribute',
         out: 'varying',
     },
-    _a$5[ShaderType.fragment] = {
+    _a$6[ShaderType.fragment] = {
         in: 'varying',
     },
-    _a$5);
+    _a$6);
 /**
  * 生成 shader，检测到 WebGL1 上下文会降级
  * @param marcos - 宏定义数组
@@ -7931,7 +8003,7 @@ function loadMipmapImage(pointer, bins) {
 var EffectsObject = /** @class */ (function () {
     function EffectsObject(engine) {
         this.engine = engine;
-        this.guid = generateGUID();
+        this.guid = generateGUID$1();
         this.taggedProperties = {};
         this.engine.addInstance(this);
     }
@@ -8628,13 +8700,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));
 
@@ -8647,8 +8755,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],
@@ -8780,13 +8888,13 @@ var SemanticMap = /** @class */ (function () {
     return SemanticMap;
 }());
 
-var _a$4;
-var BYTES_TYPE_MAP = (_a$4 = {},
-    _a$4[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT,
-    _a$4[glContext.INT] = Int32Array.BYTES_PER_ELEMENT,
-    _a$4[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT,
-    _a$4[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT,
-    _a$4);
+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);
 /**
  * Geometry 抽象类
  */
@@ -9355,7 +9463,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;
     };
@@ -11540,18 +11648,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) {
@@ -11595,18 +11700,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) {
@@ -11648,7 +11750,7 @@ var Database = /** @class */ (function () {
     };
     return Database;
 }());
-var DataType;
+var DataType$1;
 (function (DataType) {
     DataType["VFXItemData"] = "VFXItemData";
     DataType["EffectComponent"] = "EffectComponent";
@@ -11668,7 +11770,7 @@ var DataType;
     DataType["CameraComponent"] = "CameraComponent";
     DataType["ModelPluginComponent"] = "ModelPluginComponent";
     DataType["TreeComponent"] = "TreeComponent";
-})(DataType || (DataType = {}));
+})(DataType$1 || (DataType$1 = {}));
 
 /**
  * 抽象插件类
@@ -11819,7 +11921,7 @@ function calculateTranslation(out, target, acc, time, duration, posData, velData
     return ret;
 }
 
-var _a$3;
+var _a$4;
 function ensureVec3(num) {
     return Array.isArray(num) ? [num[0], num[1], num[2]] : [0, 0, 0];
 }
@@ -11842,7 +11944,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);
     }
@@ -11873,17 +11975,17 @@ function vecMulCombine(out, a, b) {
     }
     return out;
 }
-var particleOriginTranslateMap = (_a$3 = {},
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER] = [0, 0],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_BOTTOM] = [0, -0.5],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_CENTER_TOP] = [0, 0.5],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_TOP] = [-0.5, 0.5],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_CENTER] = [-0.5, 0],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_LEFT_BOTTOM] = [-0.5, -0.5],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_CENTER] = [0.5, 0],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
-    _a$3[ParticleOrigin$1.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
-    _a$3);
+var particleOriginTranslateMap$1 = (_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);
 function nearestPowerOfTwo(value) {
     return Math.pow(2, Math.round(Math.log(value) / Math.LN2));
 }
@@ -11908,7 +12010,7 @@ function trianglesFromRect(position, halfWidth, halfHeight) {
     ];
 }
 
-var _a$2;
+var _a$3;
 var NOT_IMPLEMENT = 'not_implement';
 var ValueGetter = /** @class */ (function () {
     function ValueGetter(arg) {
@@ -12416,50 +12518,50 @@ var BezierSegments = /** @class */ (function (_super) {
     };
     return BezierSegments;
 }(PathSegments));
-var map$1 = (_a$2 = {},
-    _a$2[ValueType$1.RANDOM] = function (props) {
+var map$1 = (_a$3 = {},
+    _a$3[ValueType$1.RANDOM] = function (props) {
         if (props[0] instanceof Array) {
             return new RandomVectorValue(props);
         }
         return new RandomValue(props);
     },
-    _a$2[ValueType$1.CONSTANT] = function (props) {
+    _a$3[ValueType$1.CONSTANT] = function (props) {
         return new StaticValue(props);
     },
-    _a$2[ValueType$1.CONSTANT_VEC2] = function (props) {
+    _a$3[ValueType$1.CONSTANT_VEC2] = function (props) {
         return new StaticValue(props);
     },
-    _a$2[ValueType$1.CONSTANT_VEC3] = function (props) {
+    _a$3[ValueType$1.CONSTANT_VEC3] = function (props) {
         return new StaticValue(props);
     },
-    _a$2[ValueType$1.CONSTANT_VEC4] = function (props) {
+    _a$3[ValueType$1.CONSTANT_VEC4] = function (props) {
         return new StaticValue(props);
     },
-    _a$2[ValueType$1.CURVE] = function (props) {
+    _a$3[ValueType$1.CURVE] = function (props) {
         return new CurveValue(props);
     },
-    _a$2[ValueType$1.RGBA_COLOR] = function (props) {
+    _a$3[ValueType$1.RGBA_COLOR] = function (props) {
         return new StaticValue(props);
     },
-    _a$2[ValueType$1.COLORS] = function (props) {
+    _a$3[ValueType$1.COLORS] = function (props) {
         return new RandomSetValue(props.map(function (c) { return colorToArr$1(c, false); }));
     },
-    _a$2[ValueType$1.LINE] = function (props) {
+    _a$3[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$2[ValueType$1.GRADIENT_COLOR] = function (props) {
+    _a$3[ValueType$1.GRADIENT_COLOR] = function (props) {
         return new GradientValue(props);
     },
-    _a$2[ValueType$1.LINEAR_PATH] = function (pros) {
+    _a$3[ValueType$1.LINEAR_PATH] = function (pros) {
         return new PathSegments(pros);
     },
-    _a$2[ValueType$1.BEZIER_PATH] = function (pros) {
+    _a$3[ValueType$1.BEZIER_PATH] = function (pros) {
         return new BezierSegments(pros);
     },
-    _a$2);
+    _a$3);
 function createValueGetter(args) {
     if (!args || !isNaN(+args)) {
         return new StaticValue(args || 0);
@@ -13189,7 +13291,7 @@ var CameraController = /** @class */ (function (_super) {
         }
     };
     CameraController = __decorate([
-        effectsClass(DataType.CameraController)
+        effectsClass(DataType$1.CameraController)
     ], CameraController);
     return CameraController;
 }(ItemBehaviour));
@@ -13410,13 +13512,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',
@@ -13490,11 +13592,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) {
@@ -13502,7 +13604,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);
@@ -13646,7 +13749,7 @@ var InteractComponent = /** @class */ (function (_super) {
     };
     var InteractComponent_1;
     InteractComponent = InteractComponent_1 = __decorate([
-        effectsClass(DataType.InteractComponent)
+        effectsClass(DataType$1.InteractComponent)
     ], InteractComponent);
     return InteractComponent;
 }(RendererComponent));
@@ -13695,8 +13798,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,
@@ -15015,7 +15118,7 @@ var SpriteComponent = /** @class */ (function (_super) {
         _super.prototype.toData.call(this);
     };
     SpriteComponent = __decorate([
-        effectsClass(DataType.SpriteComponent)
+        effectsClass(DataType$1.SpriteComponent)
     ], SpriteComponent);
     return SpriteComponent;
 }(RendererComponent));
@@ -15176,8 +15279,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,
@@ -15732,8 +15835,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,
@@ -16420,7 +16523,7 @@ var TextureShape = /** @class */ (function () {
     return TextureShape;
 }());
 
-var _a$1;
+var _a$2;
 var ShapeNone = /** @class */ (function () {
     function ShapeNone() {
     }
@@ -16432,18 +16535,18 @@ var ShapeNone = /** @class */ (function () {
     };
     return ShapeNone;
 }());
-var map = (_a$1 = {},
-    _a$1[ShapeType$1.NONE] = ShapeNone,
-    _a$1[ShapeType$1.CONE] = Cone,
-    _a$1[ShapeType$1.SPHERE] = Sphere,
-    _a$1[ShapeType$1.HEMISPHERE] = Hemisphere,
-    _a$1[ShapeType$1.CIRCLE] = Circle,
-    _a$1[ShapeType$1.DONUT] = Donut,
-    _a$1[ShapeType$1.RECTANGLE] = Rectangle,
-    _a$1[ShapeType$1.EDGE] = Edge,
-    _a$1[ShapeType$1.RECTANGLE_EDGE] = RectangleEdge,
-    _a$1[ShapeType$1.TEXTURE] = TextureShape,
-    _a$1);
+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);
 function createShape(shapeOptions) {
     if (!shapeOptions) {
         return new ShapeNone();
@@ -17772,7 +17875,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);
                             }
                         }
@@ -18361,7 +18464,7 @@ var ParticleSystem = /** @class */ (function (_super) {
         timeline.createTrack(Track).createClip(ParticleBehaviourPlayable);
     };
     ParticleSystem = __decorate([
-        effectsClass(DataType.ParticleSystem)
+        effectsClass(DataType$1.ParticleSystem)
     ], ParticleSystem);
     return ParticleSystem;
 }(Component));
@@ -18544,7 +18647,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);
@@ -20054,7 +20159,7 @@ var TextComponent = /** @class */ (function (_super) {
         context.shadowOffsetY = -style.shadowOffsetY;
     };
     TextComponent = __decorate([
-        effectsClass(DataType.TextComponent)
+        effectsClass(DataType$1.TextComponent)
     ], TextComponent);
     return TextComponent;
 }(SpriteComponent));
@@ -20210,7 +20315,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));
@@ -20612,7 +20717,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 }; }
@@ -20629,6 +20737,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;
@@ -20697,7 +20806,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;
         }
@@ -20724,10 +20833,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);
         }
     };
@@ -20794,7 +20903,7 @@ var VFXItem = /** @class */ (function (_super) {
     };
     var VFXItem_1;
     VFXItem = VFXItem_1 = __decorate([
-        effectsClass(DataType.VFXItemData)
+        effectsClass(DataType$1.VFXItemData)
     ], VFXItem);
     return VFXItem;
 }(EffectsObject));
@@ -20832,7 +20941,6 @@ function createVFXItem(props, composition) {
     if (!pluginName) {
         switch (type) {
             case ItemType$1.null:
-            case ItemType$1.base:
                 pluginName = 'cal';
                 break;
             case ItemType$1.sprite:
@@ -20953,7 +21061,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)];
@@ -20998,9 +21106,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);
+}
+
 /*********************************************/
 /*               元素属性参数类型               */
 /*********************************************/
@@ -21263,6 +21436,10 @@ var ItemType;
      * 天空盒元素
      */
     ItemType["skybox"] = "skybox";
+    /**
+     * 特效元素
+     */
+    ItemType["effect"] = "effect";
 })(ItemType || (ItemType = {}));
 /**
  * 渲染模式
@@ -21375,6 +21552,10 @@ var CompositionEndBehavior;
      * 销毁并保留最后一帧
      */
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY] = "pause_destroy";
+    /**
+     * 冻结
+     */
+    CompositionEndBehavior[CompositionEndBehavior["freeze"] = END_BEHAVIOR_FREEZE] = "freeze";
 })(CompositionEndBehavior || (CompositionEndBehavior = {}));
 
 /*********************************************/
@@ -21511,12 +21692,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) {
@@ -21662,6 +21869,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.
 
@@ -21717,11 +21946,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$1;
 function arrAdd(arr, item) {
     if (!arr.includes(item)) {
         arr.push(item);
@@ -21957,6 +22197,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$1 = {},
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER] = [0, 0],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_BOTTOM] = [0, -0.5],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_CENTER_TOP] = [0, 0.5],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_TOP] = [-0.5, 0.5],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_CENTER] = [-0.5, 0],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_LEFT_BOTTOM] = [-0.5, -0.5],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_CENTER] = [0.5, 0],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_BOTTOM] = [0.5, -0.5],
+    _a$1[ParticleOrigin.PARTICLE_ORIGIN_RIGHT_TOP] = [0.5, 0.5],
+    _a$1);
 
 function getStandardParticleContent(particle) {
     var _a;
@@ -22368,6 +22636,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+)$/;
@@ -22377,16 +22948,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;
     }
@@ -22710,7 +23281,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;
@@ -22766,8 +23337,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 }; }
@@ -22786,23 +23357,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 };
                     }
                 }
@@ -22813,12 +23376,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 = {
@@ -22839,12 +23404,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
@@ -22862,14 +23424,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 兼容
@@ -22878,9 +23436,7 @@ function version3Migration(scene) {
                 item.endBehavior = END_BEHAVIOR_FREEZE$1;
             }
             // 动画数据转化 TODO: 动画数据移到 TimelineComponentData
-            //@ts-expect-error
             item.content.tracks = [];
-            //@ts-expect-error
             var tracks = item.content.tracks;
             if (item.type !== ItemType$1.particle) {
                 tracks.push({
@@ -22888,11 +23444,8 @@ function version3Migration(scene) {
                         {
                             dataType: 'TransformAnimationPlayableAsset',
                             animationClip: {
-                                //@ts-expect-error
                                 sizeOverLifetime: item.content.sizeOverLifetime,
-                                //@ts-expect-error
                                 rotationOverLifetime: item.content.rotationOverLifetime,
-                                //@ts-expect-error
                                 positionOverLifetime: item.content.positionOverLifetime,
                             },
                         },
@@ -22905,9 +23458,7 @@ function version3Migration(scene) {
                         {
                             dataType: 'SpriteColorAnimationPlayableAsset',
                             animationClip: {
-                                //@ts-expect-error
                                 colorOverLifetime: item.content.colorOverLifetime,
-                                //@ts-expect-error
                                 startColor: item.content.options.startColor,
                             },
                         },
@@ -22915,170 +23466,108 @@ function version3Migration(scene) {
                 });
             }
             // gizmo 的 target id 转换为新的 item guid
-            //@ts-expect-error
-            if (item.content.options.target) {
-                //@ts-expect-error
+            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 });
             }
@@ -23101,7 +23590,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];
@@ -23379,16 +23868,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)));
                 });
@@ -23406,13 +23896,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]);
@@ -23425,7 +23916,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*/];
                         }
@@ -23674,7 +24165,7 @@ function createTextureOptionsBySource(image, sourceFrom) {
         return image.source;
     }
     else if (image instanceof HTMLImageElement ||
-        image instanceof HTMLCanvasElement) {
+        isCanvas(image)) {
         return {
             image: image,
             sourceType: TextureSourceType.image,
@@ -23736,6 +24227,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);
 /**
@@ -23955,8 +24451,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));
     };
     /**
      * 设置相机的旋转四元数
@@ -23968,7 +24465,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;
@@ -24136,8 +24632,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 ||
@@ -24155,20 +24650,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;
                 // 相机不跟随合成移动
@@ -25558,10 +26040,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);
@@ -25575,10 +26055,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);
@@ -25592,10 +26070,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);
@@ -25609,10 +26085,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);
@@ -25626,10 +26100,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);
@@ -25983,5 +26455,5 @@ registerPlugin('cal', CalculateLoader, VFXItem, true);
 registerPlugin('interact', InteractLoader, VFXItem, true);
 // registerFilters(filters);
 
-export { AbstractPlugin, ActivationPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, 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, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, 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, 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, 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, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize };
+export { AbstractPlugin, ActivationPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierSegments, COMPRESSED_TEXTURE, 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, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, 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, 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, sortByOrder, index as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize };
 //# sourceMappingURL=index.mjs.map