@galacean/effects-threejs 2.1.0-beta.0 → 2.1.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.1.0-beta.0
+ * Version: v2.1.0
  */
 
 import * as THREE from 'three';
@@ -1092,39 +1092,39 @@ function _inherits(subClass, superClass) {
 })(MaskMode || (MaskMode = {}));
 /**
  * 发射器形状
- */ var ShapeType;
-(function(ShapeType) {
+ */ var ParticleEmitterShapeType;
+(function(ParticleEmitterShapeType) {
     /**
      * 没有类型
-     */ ShapeType[ShapeType["NONE"] = 0] = "NONE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["NONE"] = 0] = "NONE";
     /**
      * 圆球
-     */ ShapeType[ShapeType["SPHERE"] = 1] = "SPHERE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["SPHERE"] = 1] = "SPHERE";
     /**
      * 圆锥
-     */ ShapeType[ShapeType["CONE"] = 2] = "CONE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["CONE"] = 2] = "CONE";
     /**
      * 半球
-     */ ShapeType[ShapeType["HEMISPHERE"] = 3] = "HEMISPHERE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["HEMISPHERE"] = 3] = "HEMISPHERE";
     /**
      * 圆
-     */ ShapeType[ShapeType["CIRCLE"] = 4] = "CIRCLE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["CIRCLE"] = 4] = "CIRCLE";
     /**
      * 圆环
-     */ ShapeType[ShapeType["DONUT"] = 5] = "DONUT";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["DONUT"] = 5] = "DONUT";
     /**
      * 矩形
-     */ ShapeType[ShapeType["RECTANGLE"] = 6] = "RECTANGLE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["RECTANGLE"] = 6] = "RECTANGLE";
     /**
      * 矩形框
-     */ ShapeType[ShapeType["RECTANGLE_EDGE"] = 7] = "RECTANGLE_EDGE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["RECTANGLE_EDGE"] = 7] = "RECTANGLE_EDGE";
     /**
      * 直线
-     */ ShapeType[ShapeType["EDGE"] = 8] = "EDGE";
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["EDGE"] = 8] = "EDGE";
     /**
      * 贴图
-     */ ShapeType[ShapeType["TEXTURE"] = 9] = "TEXTURE";
-})(ShapeType || (ShapeType = {}));
+     */ ParticleEmitterShapeType[ParticleEmitterShapeType["TEXTURE"] = 9] = "TEXTURE";
+})(ParticleEmitterShapeType || (ParticleEmitterShapeType = {}));
 /**
  * 插件类型
  */ var PluginType;
@@ -1620,6 +1620,34 @@ var BuiltinObjectGUID = {
     UnlitShader: "unlit000000000000000000000000000"
 };
 
+/**
+ * 矢量图形类型
+ */ var ShapePrimitiveType;
+(function(ShapePrimitiveType) {
+    /**
+     * 自定义图形
+     */ ShapePrimitiveType[ShapePrimitiveType["Custom"] = 0] = "Custom";
+    /**
+     * 矩形
+     */ ShapePrimitiveType[ShapePrimitiveType["Rectangle"] = 1] = "Rectangle";
+    /**
+     * 椭圆
+     */ ShapePrimitiveType[ShapePrimitiveType["Ellipse"] = 2] = "Ellipse";
+    /**
+     * 多边形
+     */ ShapePrimitiveType[ShapePrimitiveType["Polygon"] = 3] = "Polygon";
+    /**
+     * 星形
+     */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
+})(ShapePrimitiveType || (ShapePrimitiveType = {}));
+
+// 本期无该功能 待补充
+var ShapeConnectType;
+(function(ShapeConnectType) {})(ShapeConnectType || (ShapeConnectType = {}));
+// @待补充
+var ShapePointType;
+(function(ShapePointType) {})(ShapePointType || (ShapePointType = {}));
+
 /**
  * 动态换图类型
  * @since 1.1.0
@@ -1650,6 +1678,7 @@ var DataType;
     DataType["PostProcessVolume"] = "PostProcessVolume";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["Image"] = "Image";
     DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     DataType["BinaryAsset"] = "BinaryAsset";
@@ -1681,6 +1710,8 @@ var DataType;
     DataType["VideoComponent"] = "VideoComponent";
     DataType["AudioComponent"] = "AudioComponent";
     DataType["RichTextComponent"] = "RichTextComponent";
+    DataType["OrientationComponent"] = "OrientationComponent";
+    DataType["ShapeComponent"] = "ShapeComponent";
     // Non-EffectObject
     DataType["TimelineClip"] = "TimelineClip";
 })(DataType || (DataType = {}));
@@ -1775,7 +1806,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get BlendingMode () { return BlendingMode; },
     get SideMode () { return SideMode; },
     get MaskMode () { return MaskMode; },
-    get ShapeType () { return ShapeType; },
+    get ParticleEmitterShapeType () { return ParticleEmitterShapeType; },
     get PluginType () { return PluginType; },
     get InteractType () { return InteractType; },
     get InteractBehavior () { return InteractBehavior; },
@@ -1814,6 +1845,9 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get TextWeight () { return TextWeight; },
     get FontStyle () { return FontStyle; },
     BuiltinObjectGUID: BuiltinObjectGUID,
+    get ShapePrimitiveType () { return ShapePrimitiveType; },
+    get ShapeConnectType () { return ShapeConnectType; },
+    get ShapePointType () { return ShapePointType; },
     get BackgroundType () { return BackgroundType; },
     get MultimediaType () { return MultimediaType; },
     get DataType () { return DataType; },
@@ -2134,6 +2168,14 @@ __decorate([
         Component.prototype.setVFXItem.call(this, item);
         this.item.rendererComponents.push(this);
     };
+    _proto.onEnable = function onEnable() {
+        var _this_item_composition;
+        (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.renderFrame.addMeshToDefaultRenderPass(this);
+    };
+    _proto.onDisable = function onDisable() {
+        var _this_item_composition;
+        (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.renderFrame.removeMeshFromDefaultRenderPass(this);
+    };
     _proto.fromData = function fromData(data) {
         Component.prototype.fromData.call(this, data);
     };
@@ -10654,16 +10696,16 @@ var seed$6 = 1;
                 depthAction: TextureLoadAction.clear
             };
         }
-        // 创建 drawObjectPass
+        this.drawObjectPass = new RenderPass(renderer, {
+            name: RENDER_PASS_NAME_PREFIX,
+            priority: RenderPassPriorityNormal,
+            meshOrder: OrderType.ascending,
+            depthStencilAttachment: depthStencilAttachment,
+            attachments: attachments,
+            clearAction: drawObjectPassClearAction
+        });
         var renderPasses = [
-            new RenderPass(renderer, {
-                name: RENDER_PASS_NAME_PREFIX,
-                priority: RenderPassPriorityNormal,
-                meshOrder: OrderType.ascending,
-                depthStencilAttachment: depthStencilAttachment,
-                attachments: attachments,
-                clearAction: drawObjectPassClearAction
-            })
+            this.drawObjectPass
         ];
         this.setRenderPasses(renderPasses);
         if (postProcessingEnabled) {
@@ -10785,216 +10827,15 @@ var seed$6 = 1;
    * 根据 Mesh 优先级添加到 RenderPass
    * @param mesh - 要添加的 Mesh 对象
    */ _proto.addMeshToDefaultRenderPass = function addMeshToDefaultRenderPass(mesh) {
-        if (!mesh) {
-            return;
-        }
-        this.renderPasses[0].addMesh(mesh);
-    // const renderPasses = this.renderPasses;
-    // const infoMap = this.renderPassInfoMap;
-    // const { priority } = mesh;
-    // for (let i = 1; i < renderPasses.length; i++) {
-    //   const renderPass = renderPasses[i - 1];
-    //   const info = infoMap.get(renderPasses[i])!;
-    //   if (info && info.listStart > priority && (priority > infoMap.get(renderPass)!.listEnd || i === 1)) {
-    //     return this.addToRenderPass(renderPass, mesh);
-    //   }
-    // }
-    // // TODO: diff逻辑待优化，有时会添加进找不到的元素
-    // let last = renderPasses[renderPasses.length - 1];
-    // // TODO: 是否添加mesh到pass的判断方式需要优化，先通过长度判断是否有postprocess
-    // for (const pass of renderPasses) {
-    //   if (!(pass instanceof HQGaussianDownSamplePass
-    //     || pass instanceof BloomThresholdPass
-    //     || pass instanceof ToneMappingPass
-    //     || pass instanceof HQGaussianUpSamplePass
-    //     || pass.name === 'mars-final-copy')) {
-    //     last = pass;
-    //   }
-    // }
-    // // if (priority > infoMap.get(last)!.listStart || renderPasses.length === 1) {
-    // //   return this.addToRenderPass(last, mesh);
-    // // }
-    // return this.addToRenderPass(last, mesh);
-    // if (false) {
-    //   throw Error('render pass not found');
-    // }
+        this.drawObjectPass.addMesh(mesh);
     };
     /**
    * 把 Mesh 从 RenderPass 中移除，
    * 如果 renderPass 中没有 mesh，此 renderPass 会被删除
    * @param mesh - 要删除的 Mesh 对象
    */ _proto.removeMeshFromDefaultRenderPass = function removeMeshFromDefaultRenderPass(mesh) {
-    // const renderPasses = this.renderPasses;
-    // const infoMap = this.renderPassInfoMap;
-    // for (let i = renderPasses.length - 1; i >= 0; i--) {
-    //   const renderPass = renderPasses[i];
-    //   const info = infoMap.get(renderPass)!;
-    //   // 只有渲染场景物体的pass才有 info
-    //   if (!info) {
-    //     continue;
-    //   }
-    //   if (info.listStart <= mesh.priority && info.listEnd >= mesh.priority) {
-    //     const idx = renderPass.meshes.indexOf(mesh);
-    //     if (idx === -1) {
-    //       return;
-    //     }
-    //     // TODO hack: 现在的除了rp1和finalcopy pass，所有renderpass的meshes是一个copy加上一个filter mesh，这里的判断当filter mesh被删除后当前pass需不需要删除，
-    //     // 判断需要更鲁棒。
-    //     const shouldRestoreRenderPass = idx === 1 && renderPass.meshes[0].name === MARS_COPY_MESH_NAME;
-    //     renderPass.removeMesh(mesh);
-    //     if (shouldRestoreRenderPass) {
-    //       const nextRenderPass = renderPasses[i + 1];
-    //       const meshes = renderPass.meshes;
-    //       if (!info.intermedia) {
-    //         info.preRenderPass?.resetColorAttachments([]);
-    //         //this.renderer.extension.resetColorAttachments?.(info.preRenderPass, []);
-    //       }
-    //       for (let j = 1; j < meshes.length; j++) {
-    //         info.preRenderPass?.addMesh(meshes[j]);
-    //       }
-    //       const cp = renderPass.attachments[0]?.texture;
-    //       const keepColor = cp === this.resource.color_a || cp === this.resource.color_b;
-    //       renderPass.dispose({
-    //         meshes: DestroyOptions.keep,
-    //         colorAttachment: keepColor ? RenderPassDestroyAttachmentType.keep : RenderPassDestroyAttachmentType.destroy,
-    //         depthStencilAttachment: RenderPassDestroyAttachmentType.keep,
-    //       });
-    //       removeItem(renderPasses, renderPass);
-    //       this.removeRenderPass(renderPass);
-    //       infoMap.delete(renderPass);
-    //       if (nextRenderPass) {
-    //         this.updateRenderInfo(nextRenderPass);
-    //       }
-    //       if (info.preRenderPass) {
-    //         this.updateRenderInfo(info.preRenderPass);
-    //       }
-    //       if (info.prePasses) {
-    //         info.prePasses.forEach(rp => {
-    //           this.removeRenderPass(rp.pass);
-    //           if (rp?.destroyOptions !== false) {
-    //             rp.pass.attachments.forEach(c => {
-    //               if (c.texture !== this.resource.color_b || c.texture !== this.resource.color_a) {
-    //                 c.texture.dispose();
-    //               }
-    //             });
-    //             const options: RenderPassDestroyOptions = {
-    //               ...(rp?.destroyOptions ? rp.destroyOptions as RenderPassDestroyOptions : {}),
-    //               depthStencilAttachment: RenderPassDestroyAttachmentType.keep,
-    //             };
-    //             rp.pass.dispose(options);
-    //           }
-    //         });
-    //       }
-    //       this.resetRenderPassDefaultAttachment(renderPasses, Math.max(i - 1, 0));
-    //       if (renderPasses.length === 1) {
-    //         renderPasses[0].resetColorAttachments([]);
-    //         //this.renderer.extension.resetColorAttachments?.(renderPasses[0], []);
-    //         this.removeRenderPass(this.resource.finalCopyRP);
-    //       }
-    //     }
-    //     return this.resetClearActions();
-    //   }
-    // }
+        this.drawObjectPass.removeMesh(mesh);
     };
-    // /**
-    //  * 将 Mesh 所有在 RenderPass 进行切分
-    //  * @param mesh - 目标 Mesh 对象
-    //  * @param options - 切分选项，包含 RenderPass 相关的 Attachment 等数据
-    //  */
-    // splitDefaultRenderPassByMesh (mesh: Mesh, options: RenderPassSplitOptions): RenderPass {
-    //   const index = this.findMeshRenderPassIndex(mesh);
-    //   const renderPass = this.renderPasses[index];
-    //   if (false) {
-    //     if (!renderPass) {
-    //       throw Error('RenderPassNotFound');
-    //     }
-    //   }
-    //   this.createResource();
-    //   const meshIndex = renderPass.meshes.indexOf(mesh);
-    //   const ms0 = renderPass.meshes.slice(0, meshIndex);
-    //   const ms1 = renderPass.meshes.slice(meshIndex);
-    //   const infoMap = this.renderPassInfoMap;
-    //   // TODO 为什么要加这个判断？
-    //   // if (renderPass.attachments[0] && this.renderPasses[index + 1] !== this.resource.finalCopyRP) {
-    //   //   throw Error('not implement');
-    //   // } else {
-    //   if (!options.attachments?.length) {
-    //     throw Error('should include at least one color attachment');
-    //   }
-    //   const defRPS = this.renderPasses;
-    //   const defIndex = defRPS.indexOf(renderPass);
-    //   const lastDefRP = defRPS[defIndex - 1];
-    //   removeItem(defRPS, renderPass);
-    //   const lastInfo = infoMap.get(renderPass);
-    //   infoMap.delete(renderPass);
-    //   const filter = GPUCapability.getInstance().level === 2 ? glContext.LINEAR : glContext.NEAREST;
-    //   const rp0 = new RenderPass({
-    //     name: RENDER_PASS_NAME_PREFIX + defIndex,
-    //     priority: renderPass.priority,
-    //     attachments: [{
-    //       texture: {
-    //         sourceType: TextureSourceType.framebuffer,
-    //         format: glContext.RGBA,
-    //         name: 'frame_a',
-    //         minFilter: filter,
-    //         magFilter: filter,
-    //       },
-    //     }],
-    //     clearAction: renderPass.clearAction || { colorAction: TextureLoadAction.clear },
-    //     storeAction: renderPass.storeAction,
-    //     depthStencilAttachment: this.resource.depthStencil,
-    //     meshes: ms0,
-    //     meshOrder: OrderType.ascending,
-    //   });
-    //   ms1.unshift(this.createCopyMesh());
-    //   const renderPasses = this.renderPasses;
-    //   renderPasses[index] = rp0;
-    //   const prePasses: RenderPass[] = [];
-    //   const restMeshes = ms1.slice();
-    //   if (options.prePasses) {
-    //     options.prePasses.forEach((pass, i) => {
-    //       pass.priority = renderPass.priority + 1 + i;
-    //       pass.setMeshes(ms1);
-    //       prePasses.push(pass);
-    //     });
-    //     renderPasses.splice(index + 1, 0, ...prePasses);
-    //     restMeshes.splice(0, 2);
-    //   }
-    //   const copyRP = this.resource.finalCopyRP;
-    //   if (!renderPasses.includes(copyRP)) {
-    //     renderPasses.push(copyRP);
-    //   }
-    //   // let sourcePass = (prePasses.length && !options.useLastDefaultPassColor) ? prePasses[prePasses.length - 1] : rp0;
-    //   const finalFilterPass = prePasses[prePasses.length - 1];
-    //   finalFilterPass.initialize(this.renderer);
-    //   // 不切RT，接着上一个pass的渲染结果渲染
-    //   const rp1 = new RenderPass({
-    //     name: RENDER_PASS_NAME_PREFIX + (defIndex + 1),
-    //     priority: renderPass.priority + 1 + (options.prePasses?.length || 0),
-    //     meshes: restMeshes,
-    //     meshOrder: OrderType.ascending,
-    //     depthStencilAttachment: this.resource.depthStencil,
-    //     storeAction: options.storeAction,
-    //     clearAction: {
-    //       depthAction: TextureLoadAction.whatever,
-    //       stencilAction: TextureLoadAction.whatever,
-    //       colorAction: TextureLoadAction.whatever,
-    //     },
-    //   });
-    //   renderPasses.splice(index + 1 + (options.prePasses?.length || 0), 0, rp1);
-    //   this.setRenderPasses(renderPasses);
-    //   this.updateRenderInfo(finalFilterPass);
-    //   this.updateRenderInfo(rp0);
-    //   this.updateRenderInfo(rp1);
-    //   // 目的是删除滤镜元素后，把之前滤镜用到的prePass给删除，逻辑有些复杂，考虑优化
-    //   infoMap.get(rp0)!.prePasses = lastInfo!.prePasses;
-    //   prePasses.pop();
-    //   infoMap.get(finalFilterPass)!.prePasses = prePasses.map((pass, i) => {
-    //     return { pass, destroyOptions: false };
-    //   });
-    //   this.resetClearActions();
-    //   return finalFilterPass;
-    // }
     /**
    * 销毁 RenderFrame
    * @param options - 可以有选择销毁一些对象
@@ -11114,45 +10955,6 @@ var seed$6 = 1;
             this.clearAction.colorAction = TextureLoadAction.whatever;
         }
     };
-    // protected updateRenderInfo (renderPass: RenderPass): RenderPassInfo {
-    //   const map = this.renderPassInfoMap;
-    //   const passes = this.renderPasses;
-    //   let info: RenderPassInfo;
-    //   if (!map.has(renderPass)) {
-    //     info = {
-    //       intermedia: false,
-    //       renderPass: renderPass,
-    //       listStart: 0,
-    //       listEnd: 0,
-    //     };
-    //     map.set(renderPass, info);
-    //   } else {
-    //     info = map.get(renderPass)!;
-    //   }
-    //   info.intermedia = renderPass.attachments.length > 0;
-    //   const meshes = renderPass.meshes;
-    //   if (meshes[0]) {
-    //     info.listStart = (meshes[0].name === MARS_COPY_MESH_NAME ? meshes[1] : meshes[0]).priority;
-    //     info.listEnd = meshes[meshes.length - 1].priority;
-    //   } else {
-    //     info.listStart = 0;
-    //     info.listEnd = 0;
-    //   }
-    //   const index = passes.indexOf(renderPass);
-    //   const depthStencilActon = index === 0 ? TextureLoadAction.clear : TextureLoadAction.whatever;
-    //   if (index === 0) {
-    //     renderPass.clearAction.colorAction = TextureLoadAction.clear;
-    //   }
-    //   renderPass.clearAction.depthAction = depthStencilActon;
-    //   renderPass.clearAction.stencilAction = depthStencilActon;
-    //   if (index > -1) {
-    //     renderPass.semantics.setSemantic('EDITOR_TRANSFORM', () => this.editorTransform);
-    //   } else {
-    //     renderPass.semantics.setSemantic('EDITOR_TRANSFORM', undefined);
-    //   }
-    //   info.preRenderPass = passes[index - 1];
-    //   return info;
-    // }
     /**
    * 设置 RenderPass 数组，直接修改内部的 RenderPass 数组
    * @param passes - RenderPass 数组
@@ -11353,7 +11155,7 @@ var FinalCopyRP = /*#__PURE__*/ function(RenderPass) {
 var GlobalUniforms = function GlobalUniforms() {
     this.floats = {};
     this.ints = {};
-    // vector3s: Record<string, vec3> = {};
+    this.vector3s = {};
     this.vector4s = {};
     this.matrices = {};
     //...
@@ -11594,6 +11396,9 @@ var Renderer = /*#__PURE__*/ function() {
     _proto.setGlobalVector4 = function setGlobalVector4(name, value) {
     // OVERRIDE
     };
+    _proto.setGlobalVector3 = function setGlobalVector3(name, value) {
+    // OVERRIDE
+    };
     _proto.setGlobalMatrix = function setGlobalMatrix(name, value) {
     // OVERRIDE
     };
@@ -13259,10 +13064,10 @@ var Vector4Curve = /*#__PURE__*/ function(ValueGetter) {
     }
     var _proto = Vector4Curve.prototype;
     _proto.onCreate = function onCreate(arg) {
-        this.xCurve = createValueGetter(arg.x);
-        this.yCurve = createValueGetter(arg.y);
-        this.zCurve = createValueGetter(arg.z);
-        this.wCurve = createValueGetter(arg.w);
+        this.xCurve = createValueGetter(arg[0]);
+        this.yCurve = createValueGetter(arg[1]);
+        this.zCurve = createValueGetter(arg[2]);
+        this.wCurve = createValueGetter(arg[3]);
     };
     _proto.getValue = function getValue(t) {
         var x = this.xCurve.getValue(t);
@@ -13282,8 +13087,8 @@ var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = "PRE_MAIN_COLOR_0";
 var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0 = "PRE_MAIN_COLOR_SIZE_0";
 var PLAYER_OPTIONS_ENV_EDITOR = "editor";
 var HELP_LINK = {
-    "Item duration can't be less than 0": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#AOnQS",
-    "ValueType: 21/22 is not supported": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#smO1b"
+    "Item duration can't be less than 0": "https://www.galacean.com/effects/user/gasrv4ka5sacrwpg#AOnQS",
+    "ValueType: 21/22 is not supported": "https://www.galacean.com/effects/user/gasrv4ka5sacrwpg#smO1b"
 };
 
 var _obj$4;
@@ -13362,10 +13167,10 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
     }
     var _proto = ColorCurve.prototype;
     _proto.onCreate = function onCreate(arg) {
-        this.rCurve = createValueGetter(arg.r);
-        this.gCurve = createValueGetter(arg.g);
-        this.bCurve = createValueGetter(arg.b);
-        this.aCurve = createValueGetter(arg.a);
+        this.rCurve = createValueGetter(arg[0]);
+        this.gCurve = createValueGetter(arg[1]);
+        this.bCurve = createValueGetter(arg[2]);
+        this.aCurve = createValueGetter(arg[3]);
     };
     _proto.getValue = function getValue(t) {
         var r = this.rCurve.getValue(t);
@@ -15404,7 +15209,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
 
 // const tempPoints = [new Point(), new Point(), new Point(), new Point()];
 /**
- * The `Rectangle` object is an area defined by its position, as indicated by its top-left corner
+ * The `Rectangle` object is an area defined by its position, as indicated by its upper-left corner
  * point (`x`, `y`) and by its `width` and its `height`.
  */ var Rectangle$1 = /*#__PURE__*/ function(ShapePrimitive) {
     _inherits(Rectangle, ShapePrimitive);
@@ -15812,8 +15617,8 @@ var ShapePath = /*#__PURE__*/ function() {
     };
     /**
    * Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
-   * @param x - The x-coordinate of the top-left corner of the rectangle.
-   * @param y - The y-coordinate of the top-left corner of the rectangle.
+   * @param x - The x-coordinate of the upper-left corner of the rectangle.
+   * @param y - The y-coordinate of the upper-left corner of the rectangle.
    * @param w - The width of the rectangle.
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
@@ -15958,8 +15763,8 @@ var GraphicsPath = /*#__PURE__*/ function() {
     };
     /**
    * Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
-   * @param x - The x-coordinate of the top-left corner of the rectangle.
-   * @param y - The y-coordinate of the top-left corner of the rectangle.
+   * @param x - The x-coordinate of the upper-left corner of the rectangle.
+   * @param y - The y-coordinate of the upper-left corner of the rectangle.
    * @param w - The width of the rectangle.
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
@@ -16029,7 +15834,7 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         _this.curveValues = [];
         _this.animated = true;
         _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
-        _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  gl_FragColor = color;\n}\n";
+        _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  color.rgb *= color.a;\n  gl_FragColor = color;\n}\n";
         if (!_this.geometry) {
             _this.geometry = Geometry.create(engine, {
                 attributes: {
@@ -16138,7 +15943,7 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.path.clear();
         var shapeData = data;
         switch(shapeData.type){
-            case 0:
+            case ShapePrimitiveType.Custom:
                 {
                     var customData = shapeData;
                     var points = customData.points;
@@ -16175,28 +15980,28 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     }
                     break;
                 }
-            case 2:
+            case ShapePrimitiveType.Ellipse:
                 {
                     var ellipseData = shapeData;
                     this.path.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
                     this.setFillColor(ellipseData.fill);
                     break;
                 }
-            case 1:
+            case ShapePrimitiveType.Rectangle:
                 {
                     var rectangleData = shapeData;
-                    this.path.rect(-rectangleData.width / 2, rectangleData.height / 2, rectangleData.width, rectangleData.height);
+                    this.path.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
                     this.setFillColor(rectangleData.fill);
                     break;
                 }
-            case 4:
+            case ShapePrimitiveType.Star:
                 {
                     var starData = shapeData;
                     this.path.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
                     this.setFillColor(starData.fill);
                     break;
                 }
-            case 3:
+            case ShapePrimitiveType.Polygon:
                 {
                     var polygonData = shapeData;
                     this.path.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
@@ -16228,28 +16033,6 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
 ShapeComponent = __decorate([
     effectsClass("ShapeComponent")
 ], ShapeComponent);
-var ShapePrimitiveType;
-(function(ShapePrimitiveType) {
-    /**
-   * 自定义图形
-   */ ShapePrimitiveType[ShapePrimitiveType["Custom"] = 0] = "Custom";
-    /**
-   * 矩形
-   */ ShapePrimitiveType[ShapePrimitiveType["Rectangle"] = 1] = "Rectangle";
-    /**
-   * 椭圆
-   */ ShapePrimitiveType[ShapePrimitiveType["Ellipse"] = 2] = "Ellipse";
-    /**
-   * 多边形
-   */ ShapePrimitiveType[ShapePrimitiveType["Polygon"] = 3] = "Polygon";
-    /**
-   * 星形
-   */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
-})(ShapePrimitiveType || (ShapePrimitiveType = {}));
-var ShapeConnectType;
-(function(ShapeConnectType) {})(ShapeConnectType || (ShapeConnectType = {}));
-var ShapePointType;
-(function(ShapePointType) {})(ShapePointType || (ShapePointType = {}));
 
 var Fake3DComponent = /*#__PURE__*/ function(Component) {
     _inherits(Fake3DComponent, Component);
@@ -16810,6 +16593,7 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.onDisable = function onDisable() {
+        RendererComponent.prototype.onDisable.call(this);
         if (this.item && this.item.composition) {
             var _this_previewContent;
             if (this.duringPlay && !this.item.transform.getValid()) {
@@ -16822,6 +16606,7 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         }
     };
     _proto.onEnable = function onEnable() {
+        RendererComponent.prototype.onEnable.call(this);
         var type = this.interactData.options.type;
         if (type === InteractType.CLICK) {
             this.clickable = true;
@@ -18435,7 +18220,7 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 options: {}
             };
         }
-        if (duration <= 0) {
+        if (duration < 0) {
             throw new Error("Item duration can't be less than 0, see " + HELP_LINK["Item duration can't be less than 0"] + ".");
         }
         this.rendererComponents.length = 0;
@@ -18796,6 +18581,16 @@ var SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         }
         var life = Math.min(Math.max(time / duration, 0.0), 1.0);
         var ta = this.textureSheetAnimation;
+        var video = this.renderer.texture.source.video;
+        if (video) {
+            if (time === 0) {
+                video.pause();
+            } else {
+                video.play().catch(function(e) {
+                    _this.engine.renderErrors.add(e);
+                });
+            }
+        }
         if (ta) {
             var _this_material_getVector4;
             var total = ta.total || ta.row * ta.col;
@@ -18850,21 +18645,20 @@ var SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
                 dy
             ]);
         }
-        var video = this.renderer.texture.source.video;
-        if (video) {
-            if (time === 0 || time === this.item.duration) {
-                video.pause();
-            } else {
-                video.play().catch(function(e) {
-                    _this.engine.renderErrors.add(e);
-                });
-            }
-        }
     };
     _proto.onDestroy = function onDestroy() {
+        var textures = this.getTextures();
         if (this.item && this.item.composition) {
-            this.item.composition.destroyTextures(this.getTextures());
+            this.item.composition.destroyTextures(textures);
         }
+        textures.forEach(function(texture) {
+            var source = texture.source;
+            if (source.sourceType === TextureSourceType.video && (source == null ? void 0 : source.video)) {
+                source.video.pause();
+                source.video.src = "";
+                source.video.load();
+            }
+        });
     };
     _proto.createGeometry = function createGeometry(mode) {
         var maxVertex = 12 * this.splits.length;
@@ -19303,7 +19097,7 @@ var ShapeNone = /*#__PURE__*/ function() {
     return ShapeNone;
 }();
 var _obj$3;
-var map = (_obj$3 = {}, _obj$3[ShapeType.NONE] = ShapeNone, _obj$3[ShapeType.CONE] = Cone, _obj$3[ShapeType.SPHERE] = Sphere, _obj$3[ShapeType.HEMISPHERE] = Hemisphere, _obj$3[ShapeType.CIRCLE] = Circle, _obj$3[ShapeType.DONUT] = Donut, _obj$3[ShapeType.RECTANGLE] = Rectangle, _obj$3[ShapeType.EDGE] = Edge, _obj$3[ShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$3[ShapeType.TEXTURE] = TextureShape, _obj$3);
+var map = (_obj$3 = {}, _obj$3[ParticleEmitterShapeType.NONE] = ShapeNone, _obj$3[ParticleEmitterShapeType.CONE] = Cone, _obj$3[ParticleEmitterShapeType.SPHERE] = Sphere, _obj$3[ParticleEmitterShapeType.HEMISPHERE] = Hemisphere, _obj$3[ParticleEmitterShapeType.CIRCLE] = Circle, _obj$3[ParticleEmitterShapeType.DONUT] = Donut, _obj$3[ParticleEmitterShapeType.RECTANGLE] = Rectangle, _obj$3[ParticleEmitterShapeType.EDGE] = Edge, _obj$3[ParticleEmitterShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$3[ParticleEmitterShapeType.TEXTURE] = TextureShape, _obj$3);
 function createShape(shapeOptions) {
     if (!shapeOptions) {
         return new ShapeNone();
@@ -19320,7 +19114,7 @@ function createShape(shapeOptions) {
         throw new Error("Invalid shape: " + type + ".");
     }
     var ctrl = new Ctrl(options);
-    if (type !== ShapeType.NONE) {
+    if (type !== ParticleEmitterShapeType.NONE) {
         var alignSpeedDirection = shapeOptions.alignSpeedDirection, _shapeOptions_upDirection = shapeOptions.upDirection, upDirection = _shapeOptions_upDirection === void 0 ? [
             0,
             0,
@@ -24250,9 +24044,9 @@ var SerializationHelper = /*#__PURE__*/ function() {
             var sceneBinding = _step.value;
             sceneBinding.key.boundObject = sceneBinding.value;
         }
-        // 未了通过帧对比，需要保证和原有的 update 时机一致。
+        // 为了通过帧对比，需要保证和原有的 update 时机一致。
         // 因此这边更新一次对象绑定，后续 timeline playable 中 sort tracks 的排序才能和原先的版本对上。
-        // 如果不需要严格保证和之前的 updata 时机一致，这边的更新和 timeline playable 中的 sortTracks 都能去掉。
+        // 如果不需要严格保证和之前的 updata 时机一致，这边的更新和 timeline asset 中的 sortTracks 都能去掉。
         for(var _iterator1 = _create_for_of_iterator_helper_loose(this.timelineAsset.tracks), _step1; !(_step1 = _iterator1()).done;){
             var masterTrack = _step1.value;
             this.updateTrackAnimatedObject(masterTrack);
@@ -24356,6 +24150,51 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
     return Vector4PropertyMixerPlayable;
 }(Playable);
 
+var ColorPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(ColorPropertyMixerPlayable, Playable);
+    function ColorPropertyMixerPlayable() {
+        var _this;
+        _this = Playable.apply(this, arguments) || this;
+        _this.propertyName = "";
+        return _this;
+    }
+    var _proto = ColorPropertyMixerPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        var boundObject = context.output.getUserData();
+        if (!boundObject) {
+            return;
+        }
+        var hasInput = false;
+        var value = boundObject[this.propertyName];
+        if (!_instanceof1(value, Color)) {
+            return;
+        }
+        value.setZero();
+        // evaluate the curve
+        for(var i = 0; i < this.getInputCount(); i++){
+            var weight = this.getInputWeight(i);
+            if (weight > 0) {
+                var propertyClipPlayable = this.getInput(i);
+                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
+                    console.error("ColorPropertyMixerPlayable received incompatible input");
+                    continue;
+                }
+                var curveValue = propertyClipPlayable.value;
+                value.r += curveValue.r * weight;
+                value.g += curveValue.g * weight;
+                value.b += curveValue.b * weight;
+                value.a += curveValue.a * weight;
+                hasInput = true;
+            }
+        }
+        // set value
+        if (hasInput) {
+            boundObject[this.propertyName] = value;
+        }
+    };
+    return ColorPropertyMixerPlayable;
+}(Playable);
+
 var PropertyTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(PropertyTrack, TrackAsset);
     function PropertyTrack() {
@@ -24515,7 +24354,7 @@ var ColorPropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     }
     var _proto = ColorPropertyTrack.prototype;
     _proto.createTrackMixer = function createTrackMixer(graph) {
-        var mixer = new FloatPropertyMixerPlayable(graph);
+        var mixer = new ColorPropertyMixerPlayable(graph);
         var propertyNames = this.propertyNames;
         if (propertyNames.length > 0) {
             var propertyName = propertyNames[propertyNames.length - 1];
@@ -24529,6 +24368,27 @@ ColorPropertyTrack = __decorate([
     effectsClass(DataType.ColorPropertyTrack)
 ], ColorPropertyTrack);
 
+var ColorPropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(ColorPropertyPlayableAsset, PlayableAsset);
+    function ColorPropertyPlayableAsset() {
+        return PlayableAsset.apply(this, arguments);
+    }
+    var _proto = ColorPropertyPlayableAsset.prototype;
+    _proto.createPlayable = function createPlayable(graph) {
+        var clipPlayable = new PropertyClipPlayable(graph);
+        clipPlayable.curve = createValueGetter(this.curveData);
+        clipPlayable.value = clipPlayable.curve.getValue(0);
+        return clipPlayable;
+    };
+    return ColorPropertyPlayableAsset;
+}(PlayableAsset);
+__decorate([
+    serialize()
+], ColorPropertyPlayableAsset.prototype, "curveData", void 0);
+ColorPropertyPlayableAsset = __decorate([
+    effectsClass(DataType.ColorPropertyPlayableAsset)
+], ColorPropertyPlayableAsset);
+
 var FloatPropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(FloatPropertyPlayableAsset, PlayableAsset);
     function FloatPropertyPlayableAsset() {
@@ -24588,6 +24448,7 @@ var TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
         var _this;
         _this = PlayableAsset.apply(this, arguments) || this;
         _this.tracks = [];
+        _this.cacheFlattenedTracks = null;
         return _this;
     }
     var _proto = TimelineAsset.prototype;
@@ -24600,16 +24461,62 @@ var TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
                 track.create(this);
             }
         }
-        timelinePlayable.compileTracks(graph, this.tracks);
+        this.sortTracks(this.tracks);
+        timelinePlayable.compileTracks(graph, this.flattenedTracks);
         return timelinePlayable;
     };
     _proto.createTrack = function createTrack(classConstructor, parent, name) {
         var newTrack = new classConstructor(this.engine);
         newTrack.name = name ? name : classConstructor.name;
         parent.addChild(newTrack);
+        this.invalidate();
         return newTrack;
     };
+    /**
+   * Invalidates the asset, called when tracks data changed
+   */ _proto.invalidate = function invalidate() {
+        this.cacheFlattenedTracks = null;
+    };
+    _proto.addSubTracksRecursive = function addSubTracksRecursive(track, allTracks) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step; !(_step = _iterator()).done;){
+            var subTrack = _step.value;
+            allTracks.push(subTrack);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step1; !(_step1 = _iterator1()).done;){
+            var subTrack1 = _step1.value;
+            this.addSubTracksRecursive(subTrack1, allTracks);
+        }
+    };
+    _proto.sortTracks = function sortTracks(tracks) {
+        var sortedTracks = [];
+        for(var i = 0; i < tracks.length; i++){
+            sortedTracks.push(new TrackSortWrapper(tracks[i], i));
+        }
+        sortedTracks.sort(compareTracks);
+        tracks.length = 0;
+        for(var _iterator = _create_for_of_iterator_helper_loose(sortedTracks), _step; !(_step = _iterator()).done;){
+            var trackWrapper = _step.value;
+            tracks.push(trackWrapper.track);
+        }
+    };
     _proto.fromData = function fromData(data) {};
+    _create_class(TimelineAsset, [
+        {
+            key: "flattenedTracks",
+            get: function get() {
+                if (!this.cacheFlattenedTracks) {
+                    this.cacheFlattenedTracks = [];
+                    // flatten track tree
+                    for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
+                        var masterTrack = _step.value;
+                        this.cacheFlattenedTracks.push(masterTrack);
+                        this.addSubTracksRecursive(masterTrack, this.cacheFlattenedTracks);
+                    }
+                }
+                return this.cacheFlattenedTracks;
+            }
+        }
+    ]);
     return TimelineAsset;
 }(PlayableAsset);
 __decorate([
@@ -24642,18 +24549,11 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     _proto.compileTracks = function compileTracks(graph, tracks) {
-        this.sortTracks(tracks);
-        var outputTrack = [];
-        // flatten track tree
-        for(var _iterator = _create_for_of_iterator_helper_loose(tracks), _step; !(_step = _iterator()).done;){
-            var masterTrack = _step.value;
-            outputTrack.push(masterTrack);
-            this.addSubTracksRecursive(masterTrack, outputTrack);
-        }
+        var outputTrack = tracks;
         // map for searching track instance with track asset guid
         var trackInstanceMap = {};
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(outputTrack), _step1; !(_step1 = _iterator1()).done;){
-            var track = _step1.value;
+        for(var _iterator = _create_for_of_iterator_helper_loose(outputTrack), _step; !(_step = _iterator()).done;){
+            var track = _step.value;
             // create track mixer and track output
             var trackMixPlayable = track.createPlayableGraph(graph, this.clips);
             this.addInput(trackMixPlayable, 0);
@@ -24669,11 +24569,11 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
             }
         }
         // build trackInstance tree
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(outputTrack), _step2; !(_step2 = _iterator2()).done;){
-            var track1 = _step2.value;
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(outputTrack), _step1; !(_step1 = _iterator1()).done;){
+            var track1 = _step1.value;
             var trackInstance1 = trackInstanceMap[track1.getInstanceId()];
-            for(var _iterator3 = _create_for_of_iterator_helper_loose(track1.getChildTracks()), _step3; !(_step3 = _iterator3()).done;){
-                var child = _step3.value;
+            for(var _iterator2 = _create_for_of_iterator_helper_loose(track1.getChildTracks()), _step2; !(_step2 = _iterator2()).done;){
+                var child = _step2.value;
                 var childTrackInstance = trackInstanceMap[child.getInstanceId()];
                 trackInstance1.addChild(childTrackInstance);
             }
@@ -24690,28 +24590,6 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
             this.updateTrackAnimatedObject(trackInstance.children);
         }
     };
-    _proto.sortTracks = function sortTracks(tracks) {
-        var sortedTracks = [];
-        for(var i = 0; i < tracks.length; i++){
-            sortedTracks.push(new TrackSortWrapper(tracks[i], i));
-        }
-        sortedTracks.sort(compareTracks);
-        tracks.length = 0;
-        for(var _iterator = _create_for_of_iterator_helper_loose(sortedTracks), _step; !(_step = _iterator()).done;){
-            var trackWrapper = _step.value;
-            tracks.push(trackWrapper.track);
-        }
-    };
-    _proto.addSubTracksRecursive = function addSubTracksRecursive(track, allTracks) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step; !(_step = _iterator()).done;){
-            var subTrack = _step.value;
-            allTracks.push(subTrack);
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step1; !(_step1 = _iterator1()).done;){
-            var subTrack1 = _step1.value;
-            this.addSubTracksRecursive(subTrack1, allTracks);
-        }
-    };
     return TimelinePlayable;
 }(Playable);
 var TrackSortWrapper = function TrackSortWrapper(track, originalIndex) {
@@ -24733,6 +24611,27 @@ function compareTracks(a, b) {
     }
 }
 
+var Vector4PropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(Vector4PropertyPlayableAsset, PlayableAsset);
+    function Vector4PropertyPlayableAsset() {
+        return PlayableAsset.apply(this, arguments);
+    }
+    var _proto = Vector4PropertyPlayableAsset.prototype;
+    _proto.createPlayable = function createPlayable(graph) {
+        var clipPlayable = new PropertyClipPlayable(graph);
+        clipPlayable.curve = createValueGetter(this.curveData);
+        clipPlayable.value = clipPlayable.curve.getValue(0);
+        return clipPlayable;
+    };
+    return Vector4PropertyPlayableAsset;
+}(PlayableAsset);
+__decorate([
+    serialize()
+], Vector4PropertyPlayableAsset.prototype, "curveData", void 0);
+Vector4PropertyPlayableAsset = __decorate([
+    effectsClass("Vector4PropertyPlayableAsset")
+], Vector4PropertyPlayableAsset);
+
 var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
     _inherits(ObjectBindingTrack, TrackAsset1);
     function ObjectBindingTrack() {
@@ -24770,7 +24669,7 @@ var TextLayout = /*#__PURE__*/ function() {
     function TextLayout(options) {
         this.width = 0;
         this.height = 0;
-        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, text = options.text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
+        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
         var tempWidth = fontSize + letterSpace;
         this.autoWidth = autoWidth;
         this.maxTextWidth = text.length * tempWidth;
@@ -26665,13 +26564,13 @@ function getStandardParticleContent(particle) {
     var options = particle.options;
     var transform = particle.transform;
     var shape = {
-        type: ShapeType.NONE
+        type: ParticleEmitterShapeType.NONE
     };
     if (particle.shape) {
         var _particle_shape_shape;
         var shapeType = (_particle_shape_shape = particle.shape.shape) == null ? void 0 : _particle_shape_shape.replace(/([A-Z])/g, "_$1").toUpperCase().replace(/^_/, "");
         shape = _extends({}, particle.shape, {
-            type: ShapeType[shapeType]
+            type: ParticleEmitterShapeType[shapeType]
         });
         if (particle.shape.upDirection) {
             var _particle_shape_upDirection = particle.shape.upDirection, x = _particle_shape_upDirection[0], y = _particle_shape_upDirection[1], z = _particle_shape_upDirection[2];
@@ -28535,7 +28434,8 @@ var listOrder = 0;
             var itemProps = sourceItemData;
             if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
                 itemProps.listIndex = listOrder++;
-                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle || itemProps.type === ItemType.spine) {
+                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle || itemProps.type === ItemType.spine || //@ts-expect-error
+                itemProps.type === ItemType.shape) {
                     for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
                         var componentPath = _step2.value;
                         var componentData = componentMap[componentPath.id];
@@ -28575,8 +28475,10 @@ var listOrder = 0;
                 shapeData = shape;
             }
             if (shapeData !== undefined) {
-                // @ts-expect-error 类型转换问题
-                renderContent.renderer.shape = getGeometryByShape(shapeData, split);
+                if (!("aPoint" in shapeData && "index" in shapeData)) {
+                    // @ts-expect-error 类型转换问题
+                    renderContent.renderer.shape = getGeometryByShape(shapeData, split);
+                }
             }
         }
         if ("trails" in renderContent && renderContent.trails !== undefined) {
@@ -28943,16 +28845,15 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         if (pause) {
             this.resume();
         }
-        if (!this.rootComposition.isStartCalled) {
-            this.rootComposition.onStart();
-            this.rootComposition.isStartCalled = true;
-        }
         this.setSpeed(1);
         this.forwardTime(time + this.startTime);
         this.setSpeed(speed);
         if (pause) {
             this.pause();
         }
+        this.emit("goto", {
+            time: time
+        });
     };
     _proto.addItem = function addItem(item) {
         this.items.push(item);
@@ -28984,30 +28885,16 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     _proto.prepareRender = function prepareRender() {
         var _this = this;
         var frame = this.renderFrame;
-        frame._renderPasses[0].meshes.length = 0;
         this.postLoaders.length = 0;
         this.pluginSystem.plugins.forEach(function(loader) {
             if (loader.prepareRenderFrame(_this, frame)) {
                 _this.postLoaders.push(loader);
             }
         });
-        this.gatherRendererComponent(this.rootItem, frame);
         this.postLoaders.forEach(function(loader) {
             return loader.postProcessFrame(_this, frame);
         });
     };
-    _proto.gatherRendererComponent = function gatherRendererComponent(vfxItem, renderFrame) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(vfxItem.rendererComponents), _step; !(_step = _iterator()).done;){
-            var rendererComponent = _step.value;
-            if (rendererComponent.isActiveAndEnabled) {
-                renderFrame.addMeshToDefaultRenderPass(rendererComponent);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(vfxItem.children), _step1; !(_step1 = _iterator1()).done;){
-            var item = _step1.value;
-            this.gatherRendererComponent(item, renderFrame);
-        }
-    };
     /**
    * 合成更新，针对所有 item 的更新
    * @param deltaTime - 更新的时间步长
@@ -31492,7 +31379,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, VFXItem, true);
-var version$1 = "2.1.0-beta.0";
+var version$1 = "2.1.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33119,8 +33006,8 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.1.0-beta.0";
+var version = "2.1.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
-export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, 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, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, ShapeConnectType, ShapePointType, ShapePrimitiveType, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector4Curve, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
+export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, 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, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map