@galacean/effects-core 2.1.0-alpha.9 → 2.1.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.1.0-alpha.9
+ * Version: v2.1.0
  */
 
 'use strict';
@@ -1094,39 +1094,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;
@@ -1222,6 +1222,12 @@ function _inherits(subClass, superClass) {
     /**
      * 特效元素
      */ ItemType["effect"] = "effect";
+    /**
+     * 形状元素
+     */ ItemType["shape"] = "shape";
+    /**
+     * 后处理元素
+     */ ItemType["postProcessVolume"] = "postProcessVolume";
     /**
      * 节点元素
      */ ItemType["node"] = "node";
@@ -1231,6 +1237,9 @@ function _inherits(subClass, superClass) {
     /**
      * 音频元素
      */ ItemType["audio"] = "audio";
+    /**
+     * 富文本元素
+     */ ItemType["richtext"] = "richtext";
 })(ItemType || (ItemType = {}));
 /**
  * 渲染模式
@@ -1606,6 +1615,58 @@ var TextAlignment;
      */ FontStyle["oblique"] = "oblique";
 })(FontStyle || (FontStyle = {}));
 
+var BuiltinObjectGUID = {
+    WhiteTexture: "whitetexture00000000000000000000",
+    TransparentTexture: "transparenttexture00000000000000000000",
+    PBRShader: "pbr00000000000000000000000000000",
+    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
+ */ var BackgroundType;
+(function(BackgroundType) {
+    BackgroundType["video"] = "video";
+    BackgroundType["image"] = "image";
+})(BackgroundType || (BackgroundType = {}));
+/**
+ * 多媒体资源类型
+ * @since 2.1.0
+ */ var MultimediaType;
+(function(MultimediaType) {
+    MultimediaType["video"] = "video";
+    MultimediaType["audio"] = "audio";
+})(MultimediaType || (MultimediaType = {}));
+
 var DataType;
 (function(DataType) {
     DataType["VFXItemData"] = "VFXItemData";
@@ -1616,8 +1677,10 @@ var DataType;
     DataType["ParticleSystem"] = "ParticleSystem";
     DataType["InteractComponent"] = "InteractComponent";
     DataType["CameraController"] = "CameraController";
+    DataType["PostProcessVolume"] = "PostProcessVolume";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["Image"] = "Image";
     DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     DataType["BinaryAsset"] = "BinaryAsset";
@@ -1638,7 +1701,6 @@ var DataType;
     DataType["SubCompositionPlayableAsset"] = "SubCompositionPlayableAsset";
     DataType["FloatPropertyPlayableAsset"] = "FloatPropertyPlayableAsset";
     DataType["ColorPropertyPlayableAsset"] = "ColorPropertyPlayableAsset";
-    // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
     DataType["LightComponent"] = "LightComponent";
@@ -1649,9 +1711,13 @@ var DataType;
     DataType["SpineComponent"] = "SpineComponent";
     DataType["VideoComponent"] = "VideoComponent";
     DataType["AudioComponent"] = "AudioComponent";
+    DataType["RichTextComponent"] = "RichTextComponent";
+    DataType["OrientationComponent"] = "OrientationComponent";
+    DataType["ShapeComponent"] = "ShapeComponent";
     // Non-EffectObject
     DataType["TimelineClip"] = "TimelineClip";
 })(DataType || (DataType = {}));
+
 var GeometryType;
 (function(GeometryType) {
     /**
@@ -1736,37 +1802,13 @@ var VertexBufferSemantic;
     VertexBufferSemantic["TangentBS3"] = "TANGENT_BS3";
 })(VertexBufferSemantic || (VertexBufferSemantic = {}));
 
-var BuiltinObjectGUID = {
-    WhiteTexture: "whitetexture00000000000000000000",
-    TransparentTexture: "transparenttexture00000000000000000000",
-    PBRShader: "pbr00000000000000000000000000000",
-    UnlitShader: "unlit000000000000000000000000000"
-};
-
-/**
- * 动态换图类型
- * @since 1.1.0
- */ var BackgroundType;
-(function(BackgroundType) {
-    BackgroundType["video"] = "video";
-    BackgroundType["image"] = "image";
-})(BackgroundType || (BackgroundType = {}));
-/**
- * 多媒体资源类型
- * @since 2.1.0
- */ var MultimediaType;
-(function(MultimediaType) {
-    MultimediaType["video"] = "video";
-    MultimediaType["audio"] = "audio";
-})(MultimediaType || (MultimediaType = {}));
-
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get RenderLevel () { return RenderLevel; },
     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; },
@@ -1804,14 +1846,17 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get TextAlignment () { return TextAlignment; },
     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; },
     get GeometryType () { return GeometryType; },
     get VertexFormatType () { return VertexFormatType; },
     get IndexFormatType () { return IndexFormatType; },
-    get VertexBufferSemantic () { return VertexBufferSemantic; },
-    BuiltinObjectGUID: BuiltinObjectGUID,
-    get BackgroundType () { return BackgroundType; },
-    get MultimediaType () { return MultimediaType; }
+    get VertexBufferSemantic () { return VertexBufferSemantic; }
 });
 
 function _defineProperties(target, props) {
@@ -1899,15 +1944,23 @@ function getDirectStore(target) {
         this.engine.addInstance(this);
     }
     var _proto = EffectsObject.prototype;
-    _proto.getInstanceId = function getInstanceId() {
+    /**
+   *
+   * @returns
+   */ _proto.getInstanceId = function getInstanceId() {
         return this.guid;
     };
-    _proto.setInstanceId = function setInstanceId(guid) {
+    /**
+   *
+   * @param guid
+   */ _proto.setInstanceId = function setInstanceId(guid) {
         this.engine.removeInstance(this.guid);
         this.guid = guid;
         this.engine.addInstance(this);
     };
-    _proto.toData = function toData() {};
+    /**
+   *
+   */ _proto.toData = function toData() {};
     /**
    * 反序列化函数
    *
@@ -1917,8 +1970,14 @@ function getDirectStore(target) {
             this.setInstanceId(data.id);
         }
     };
-    _proto.dispose = function dispose() {};
-    EffectsObject.is = function is(obj) {
+    /**
+   *
+   */ _proto.dispose = function dispose() {};
+    /**
+   *
+   * @param obj
+   * @returns
+   */ EffectsObject.is = function is(obj) {
         return _instanceof1(obj, EffectsObject) && "guid" in obj;
     };
     return EffectsObject;
@@ -1998,7 +2057,7 @@ function getDirectStore(target) {
                 this.onAwake();
                 this.isAwakeCalled = true;
             }
-            if (item.getVisible() && this.enabled) {
+            if (item.isActive && this.enabled) {
                 this.start();
                 this.enable();
             }
@@ -2043,7 +2102,7 @@ function getDirectStore(target) {
             get: /**
    * 组件是否可以更新，true 更新，false 不更新
    */ function get() {
-                return this.item.getVisible() && this.enabled;
+                return this.item.isActive && this.enabled;
             }
         },
         {
@@ -2111,6 +2170,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);
     };
@@ -3672,7 +3739,9 @@ Vector3.ZERO = new Vector3(0.0, 0.0, 0.0);
      */ Vector4.ONE = new Vector4(1.0, 1.0, 1.0, 1.0);
 Vector4.ZERO = new Vector4(0.0, 0.0, 0.0, 0.0);
 
-var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
+/**
+ * Mesh 组件
+ */ var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
     _inherits(MeshComponent, RendererComponent);
     function MeshComponent() {
         var _this;
@@ -3682,7 +3751,9 @@ var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
    */ _this.meshCollider = new MeshCollider();
         // TODO 点击测试后续抽象一个 Collider 组件
         _this.getHitTestParams = function(force) {
-            var area = _this.getBoundingBox();
+            var worldMatrix = _this.transform.getWorldMatrix();
+            _this.meshCollider.setGeometry(_this.geometry, worldMatrix);
+            var area = _this.meshCollider.getBoundingBoxData();
             if (area) {
                 return {
                     type: area.type,
@@ -3702,8 +3773,8 @@ var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
     _proto.getBoundingBox = function getBoundingBox() {
         var worldMatrix = this.transform.getWorldMatrix();
         this.meshCollider.setGeometry(this.geometry, worldMatrix);
-        var boundingBoxData = this.meshCollider.getBoundingBoxData();
-        return boundingBoxData;
+        var boundingBox = this.meshCollider.getBoundingBox();
+        return boundingBox;
     };
     return MeshComponent;
 }(RendererComponent);
@@ -3741,24 +3812,29 @@ exports.EffectComponent = __decorate([
 
 exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
     _inherits(PostProcessVolume, Behaviour);
-    function PostProcessVolume() {
+    function PostProcessVolume(engine) {
         var _this;
-        _this = Behaviour.apply(this, arguments) || this;
-        // Bloom
-        _this.bloomEnabled = true;
-        _this.threshold = 1.0;
-        _this.bloomIntensity = 1.0;
-        // ColorAdjustments
-        _this.brightness = 1.0;
-        _this.saturation = 1.0;
-        _this.contrast = 1.0;
-        // Vignette
-        _this.vignetteIntensity = 0.2;
-        _this.vignetteSmoothness = 0.4;
-        _this.vignetteRoundness = 1.0;
-        // ToneMapping
-        _this.toneMappingEnabled = true // 1: true, 0: false
-        ;
+        _this = Behaviour.call(this, engine) || this;
+        _this.bloom = {
+            threshold: 0,
+            intensity: 0,
+            active: false
+        };
+        _this.vignette = {
+            intensity: 0,
+            smoothness: 0,
+            roundness: 0,
+            active: false
+        };
+        _this.tonemapping = {
+            active: false
+        };
+        _this.colorAdjustments = {
+            brightness: 0,
+            saturation: 0,
+            contrast: 0,
+            active: false
+        };
         return _this;
     }
     var _proto = PostProcessVolume.prototype;
@@ -3772,36 +3848,18 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
 }(Behaviour);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "bloomEnabled", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "threshold", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "bloomIntensity", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "brightness", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "saturation", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "contrast", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "vignetteIntensity", void 0);
+], exports.PostProcessVolume.prototype, "bloom", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "vignetteSmoothness", void 0);
+], exports.PostProcessVolume.prototype, "vignette", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "vignetteRoundness", void 0);
+], exports.PostProcessVolume.prototype, "tonemapping", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "toneMappingEnabled", void 0);
+], exports.PostProcessVolume.prototype, "colorAdjustments", void 0);
 exports.PostProcessVolume = __decorate([
-    effectsClass("PostProcessVolume")
+    effectsClass(DataType.PostProcessVolume)
 ], exports.PostProcessVolume);
 
 function _assert_this_initialized(self) {
@@ -6888,6 +6946,7 @@ exports.MaterialRenderType = void 0;
         _this.enabledMacros = {};
         _this.destroyed = false;
         _this.initialized = false;
+        _this.shaderDirty = true;
         if (props) {
             var _props_name = props.name, name = _props_name === void 0 ? "Material" + seed$8++ : _props_name, _props_renderType = props.renderType, renderType = _props_renderType === void 0 ? 0 : _props_renderType, shader = props.shader, uniformSemantics = props.uniformSemantics;
             _this.name = name;
@@ -6915,6 +6974,41 @@ exports.MaterialRenderType = void 0;
     // OVERRIDE
     };
     _create_class(Material, [
+        {
+            key: "shader",
+            get: function get() {
+                return this._shader;
+            },
+            set: function set(value) {
+                if (this._shader === value) {
+                    return;
+                }
+                this._shader = value;
+                this.shaderDirty = true;
+            }
+        },
+        {
+            key: "mainTexture",
+            get: /**
+   * 材质的主纹理
+   */ function get() {
+                return this.getTexture("_MainTex");
+            },
+            set: function set(value) {
+                this.setTexture("_MainTex", value);
+            }
+        },
+        {
+            key: "color",
+            get: /**
+   * 材质的主颜色
+   */ function get() {
+                return this.getColor("_Color");
+            },
+            set: function set(value) {
+                this.setColor("_Color", value);
+            }
+        },
         {
             key: "blending",
             set: /******** effects-core 中会调用 引擎必须实现 ***********************/ /**
@@ -10051,7 +10145,7 @@ var integrate = "float calculateMovement(float t,vec2 p1,vec2 p2,vec2 p3,vec2 p4
 
 var itemVert = "precision highp float;attribute vec2 atlasOffset;attribute vec3 aPos;varying vec2 vTexCoord;varying vec3 vParams;varying vec4 vColor;uniform vec2 _Size;uniform vec4 _Color;uniform vec4 _TexParams;uniform vec4 _TexOffset;uniform mat4 effects_MatrixVP;uniform mat4 effects_MatrixInvV;uniform mat4 effects_ObjectToWorld;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 texParams=_TexParams;vTexCoord=vec2(atlasOffset.xy*_TexOffset.zw+_TexOffset.xy);vColor=_Color;vParams=vec3(0.0,texParams.y,texParams.x);vec4 pos=vec4(aPos.xy*_Size,aPos.z,1.0);gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}";
 
-var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D uSampler0;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);vec4 texColor=texture2D(uSampler0,vTexCoord.xy);color=blendColor(texColor,vColor,floor(0.5+vParams.y));if(vParams.z==0.&&color.a<0.04){discard;}color.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
+var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);vec4 texColor=texture2D(_MainTex,vTexCoord.xy);color=blendColor(texColor,vColor,floor(0.5+vParams.y));if(vParams.z==0.&&color.a<0.04){discard;}color.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
 
 var particleFrag = "#version 100\nprecision mediump float;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}\n#define PATICLE_SHADER 1\nvarying float vLife;varying vec2 vTexCoord;varying vec4 vColor;uniform vec3 emissionColor;uniform float emissionIntensity;uniform sampler2D uMaskTex;uniform vec4 uColorParams;uniform vec2 uTexOffset;\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\n#ifdef USE_SPRITE\nvarying vec4 vTexCoordBlend;\n#endif\nvarying float vSeed;\n#ifdef PREVIEW_BORDER\nuniform vec4 uPreviewColor;\n#endif\n#ifdef USE_SPRITE\nvec4 getTextureColor(sampler2D tex,vec2 texCoord){if(vTexCoordBlend.w>0.){return mix(texture2D(tex,texCoord),texture2D(tex,vTexCoordBlend.xy+texCoord),vTexCoordBlend.z);}return texture2D(tex,texCoord);}\n#else\n#define getTextureColor texture2D\n#endif\n#ifndef WEBGL2\n#define round(a) floor(0.5+a)\n#endif\n#ifdef PREVIEW_BORDER\nvoid main(){gl_FragColor=uPreviewColor;}\n#else\nvoid main(){vec4 color=vec4(1.0);vec4 tempColor=vColor;vec2 texOffset=uTexOffset;if(vLife<0.){discard;}if(uColorParams.x>0.0){color=getTextureColor(uMaskTex,vTexCoord);}\n#ifdef COLOR_OVER_LIFETIME\n#ifndef ENABLE_VERTEX_TEXTURE\ntempColor*=texture2D(uColorOverLifetime,vec2(vLife,0.));\n#endif\n#endif\ncolor=blendColor(color,tempColor,round(uColorParams.y));if(color.a<=0.01&&uColorParams.w>0.){float _at=texture2D(uMaskTex,vTexCoord+texOffset).a+texture2D(uMaskTex,vTexCoord+texOffset*-1.).a;if(_at<=0.02){discard;}}vec3 emission=emissionColor*pow(2.0,emissionIntensity);color=vec4(pow(pow(color.rgb,vec3(2.2))+emission,vec3(1.0/2.2)),color.a);gl_FragColor=color;}\n#endif\n";
 
@@ -10282,15 +10376,15 @@ var BloomThresholdPass = /*#__PURE__*/ function(RenderPass) {
         renderer.setFramebuffer(this.framebuffer);
     };
     _proto.execute = function execute(renderer) {
-        var _renderer_renderingData_currentFrame_globalVolume;
+        var _renderer_renderingData_currentFrame_globalVolume_bloom, _renderer_renderingData_currentFrame_globalVolume;
         renderer.clear({
             colorAction: exports.TextureStoreAction.clear,
             depthAction: exports.TextureStoreAction.clear,
             stencilAction: exports.TextureStoreAction.clear
         });
         this.screenMesh.material.setTexture("_MainTex", this.mainTexture);
-        var _renderer_renderingData_currentFrame_globalVolume_threshold;
-        var threshold = (_renderer_renderingData_currentFrame_globalVolume_threshold = (_renderer_renderingData_currentFrame_globalVolume = renderer.renderingData.currentFrame.globalVolume) == null ? void 0 : _renderer_renderingData_currentFrame_globalVolume.threshold) != null ? _renderer_renderingData_currentFrame_globalVolume_threshold : 1.0;
+        var _renderer_renderingData_currentFrame_globalVolume_bloom_threshold;
+        var threshold = (_renderer_renderingData_currentFrame_globalVolume_bloom_threshold = (_renderer_renderingData_currentFrame_globalVolume = renderer.renderingData.currentFrame.globalVolume) == null ? void 0 : (_renderer_renderingData_currentFrame_globalVolume_bloom = _renderer_renderingData_currentFrame_globalVolume.bloom) == null ? void 0 : _renderer_renderingData_currentFrame_globalVolume_bloom.threshold) != null ? _renderer_renderingData_currentFrame_globalVolume_bloom_threshold : 1.0;
         this.screenMesh.material.setFloat("_Threshold", threshold);
         renderer.renderMeshes([
             this.screenMesh
@@ -10503,25 +10597,44 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
             depthAction: exports.TextureStoreAction.clear,
             stencilAction: exports.TextureStoreAction.clear
         });
-        var _renderer_renderingData_currentFrame_globalVolume;
-        var _ref = (_renderer_renderingData_currentFrame_globalVolume = renderer.renderingData.currentFrame.globalVolume) != null ? _renderer_renderingData_currentFrame_globalVolume : {}, _ref_bloomEnabled = _ref.bloomEnabled, bloomEnabled = _ref_bloomEnabled === void 0 ? false : _ref_bloomEnabled, _ref_bloomIntensity = _ref.bloomIntensity, bloomIntensity = _ref_bloomIntensity === void 0 ? 1.0 : _ref_bloomIntensity, _ref_brightness = _ref.brightness, brightness = _ref_brightness === void 0 ? 1.0 : _ref_brightness, _ref_saturation = _ref.saturation, saturation = _ref_saturation === void 0 ? 1.0 : _ref_saturation, _ref_contrast = _ref.contrast, contrast = _ref_contrast === void 0 ? 1.0 : _ref_contrast, _ref_toneMappingEnabled = _ref.toneMappingEnabled, toneMappingEnabled = _ref_toneMappingEnabled === void 0 ? true : _ref_toneMappingEnabled, _ref_vignetteIntensity = _ref.vignetteIntensity, vignetteIntensity = _ref_vignetteIntensity === void 0 ? 0.2 : _ref_vignetteIntensity, _ref_vignetteSmoothness = _ref.vignetteSmoothness, vignetteSmoothness = _ref_vignetteSmoothness === void 0 ? 0.4 : _ref_vignetteSmoothness, _ref_vignetteRoundness = _ref.vignetteRoundness, vignetteRoundness = _ref_vignetteRoundness === void 0 ? 1.0 : _ref_vignetteRoundness;
+        var globalVolume = renderer.renderingData.currentFrame.globalVolume;
+        var bloom = _extends({
+            threshold: 0,
+            intensity: 0,
+            active: false
+        }, globalVolume == null ? void 0 : globalVolume.bloom);
+        var vignette = _extends({
+            intensity: 0,
+            smoothness: 0,
+            roundness: 0,
+            active: false
+        }, globalVolume == null ? void 0 : globalVolume.vignette);
+        var colorAdjustments = _extends({
+            brightness: 0,
+            saturation: 0,
+            contrast: 0,
+            active: false
+        }, globalVolume == null ? void 0 : globalVolume.colorAdjustments);
+        var tonemapping = _extends({
+            active: false
+        }, globalVolume == null ? void 0 : globalVolume.tonemapping);
         this.screenMesh.material.setTexture("_SceneTex", this.sceneTextureHandle.texture);
-        this.screenMesh.material.setFloat("_Brightness", brightness);
-        this.screenMesh.material.setFloat("_Saturation", saturation);
-        this.screenMesh.material.setFloat("_Contrast", contrast);
-        this.screenMesh.material.setInt("_UseBloom", Number(bloomEnabled));
-        if (bloomEnabled) {
+        this.screenMesh.material.setFloat("_Brightness", Math.pow(2, colorAdjustments.brightness));
+        this.screenMesh.material.setFloat("_Saturation", colorAdjustments.saturation * 0.01 + 1);
+        this.screenMesh.material.setFloat("_Contrast", colorAdjustments.contrast * 0.01 + 1);
+        this.screenMesh.material.setInt("_UseBloom", Number(bloom.active));
+        if (bloom.active) {
             this.screenMesh.material.setTexture("_GaussianTex", this.mainTexture);
-            this.screenMesh.material.setFloat("_BloomIntensity", bloomIntensity);
+            this.screenMesh.material.setFloat("_BloomIntensity", bloom.intensity);
         }
-        if (vignetteIntensity > 0) {
-            this.screenMesh.material.setFloat("_VignetteIntensity", vignetteIntensity);
-            this.screenMesh.material.setFloat("_VignetteSmoothness", vignetteSmoothness);
-            this.screenMesh.material.setFloat("_VignetteRoundness", vignetteRoundness);
+        if (vignette.intensity > 0) {
+            this.screenMesh.material.setFloat("_VignetteIntensity", vignette.intensity);
+            this.screenMesh.material.setFloat("_VignetteSmoothness", vignette.smoothness);
+            this.screenMesh.material.setFloat("_VignetteRoundness", vignette.roundness);
             this.screenMesh.material.setVector2("_VignetteCenter", new Vector2(0.5, 0.5));
             this.screenMesh.material.setVector3("_VignetteColor", new Vector3(0.0, 0.0, 0.0));
         }
-        this.screenMesh.material.setInt("_UseToneMapping", Number(toneMappingEnabled));
+        this.screenMesh.material.setInt("_UseToneMapping", Number(tonemapping.active));
         renderer.renderMeshes([
             this.screenMesh
         ]);
@@ -10561,6 +10674,9 @@ var seed$5 = 1;
         this.renderer = renderer;
         if (postProcessingEnabled) {
             var enableHDR = true;
+            if (!this.renderer.engine.gpuCapability.detail.halfFloatTexture) {
+                throw new Error("Half float texture is not supported.");
+            }
             // 使用HDR浮点纹理，FLOAT在IOS上报错，使用HALF_FLOAT
             var textureType = enableHDR ? glContext.HALF_FLOAT : glContext.UNSIGNED_BYTE;
             attachments = [
@@ -10582,16 +10698,16 @@ var seed$5 = 1;
                 depthAction: exports.TextureLoadAction.clear
             };
         }
-        // 创建 drawObjectPass
+        this.drawObjectPass = new RenderPass(renderer, {
+            name: RENDER_PASS_NAME_PREFIX,
+            priority: RenderPassPriorityNormal,
+            meshOrder: exports.OrderType.ascending,
+            depthStencilAttachment: depthStencilAttachment,
+            attachments: attachments,
+            clearAction: drawObjectPassClearAction
+        });
         var renderPasses = [
-            new RenderPass(renderer, {
-                name: RENDER_PASS_NAME_PREFIX,
-                priority: RenderPassPriorityNormal,
-                meshOrder: exports.OrderType.ascending,
-                depthStencilAttachment: depthStencilAttachment,
-                attachments: attachments,
-                clearAction: drawObjectPassClearAction
-            })
+            this.drawObjectPass
         ];
         this.setRenderPasses(renderPasses);
         if (postProcessingEnabled) {
@@ -10713,216 +10829,15 @@ var seed$5 = 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 - 可以有选择销毁一些对象
@@ -11042,45 +10957,6 @@ var seed$5 = 1;
             this.clearAction.colorAction = exports.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 数组
@@ -11281,7 +11157,7 @@ var FinalCopyRP = /*#__PURE__*/ function(RenderPass) {
 var GlobalUniforms = function GlobalUniforms() {
     this.floats = {};
     this.ints = {};
-    // vector3s: Record<string, vec3> = {};
+    this.vector3s = {};
     this.vector4s = {};
     this.matrices = {};
     //...
@@ -11522,6 +11398,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
     };
@@ -13187,10 +13066,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);
@@ -13210,8 +13089,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$3;
@@ -13290,10 +13169,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);
@@ -13306,7 +13185,9 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
     return ColorCurve;
 }(ValueGetter);
 
-var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
+/**
+ * @since 2.1.0
+ */ var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
     _inherits(BaseRenderComponent, RendererComponent);
     function BaseRenderComponent(engine) {
         var _this;
@@ -13393,7 +13274,7 @@ var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
    * @param texture - 纹理对象
    */ _proto.setTexture = function setTexture(texture) {
         this.renderer.texture = texture;
-        this.material.setTexture("uSampler0", texture);
+        this.material.setTexture("_MainTex", texture);
     };
     /**
    * @internal
@@ -13472,51 +13353,60 @@ var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
         geometry.setIndexData(indexData);
         geometry.setAttributeData("atlasOffset", attributes.atlasOffset);
         geometry.setDrawCount(data.index.length);
-        for(var i = 0; i < textures.length; i++){
-            var texture1 = textures[i];
-            material.setTexture("uSampler" + i, texture1);
-        }
-        // FIXME: 内存泄漏的临时方案，后面再调整
-        var emptyTexture = this.emptyTexture;
-        for(var k = textures.length; k < exports.maxSpriteMeshItemCount; k++){
-            material.setTexture("uSampler" + k, emptyTexture);
-        }
+        material.setTexture("_MainTex", texture);
     };
     _proto.getItemGeometryData = function getItemGeometryData() {
-        this.geometry.setAttributeData("aPos", new Float32Array([
-            -0.5,
-            0.5,
-            0,
-            -0.5,
-            -0.5,
-            0,
-            0.5,
-            0.5,
-            0,
-            0.5,
-            -0.5,
-            0
-        ]));
-        return {
-            index: [
-                0,
-                1,
-                2,
-                2,
-                1,
-                3
-            ],
-            atlasOffset: [
+        var renderer = this.renderer;
+        if (renderer.shape) {
+            var _renderer_shape = renderer.shape, _renderer_shape_index = _renderer_shape.index, index = _renderer_shape_index === void 0 ? [] : _renderer_shape_index, _renderer_shape_aPoint = _renderer_shape.aPoint, aPoint = _renderer_shape_aPoint === void 0 ? [] : _renderer_shape_aPoint;
+            var point = new Float32Array(aPoint);
+            var position = [];
+            var atlasOffset = [];
+            for(var i = 0; i < point.length; i += 6){
+                atlasOffset.push(aPoint[i + 2], aPoint[i + 3]);
+                position.push(point[i], point[i + 1], 0.0);
+            }
+            this.geometry.setAttributeData("aPos", new Float32Array(position));
+            return {
+                index: index,
+                atlasOffset: atlasOffset
+            };
+        } else {
+            this.geometry.setAttributeData("aPos", new Float32Array([
+                -0.5,
+                0.5,
                 0,
-                1,
+                -0.5,
+                -0.5,
                 0,
+                0.5,
+                0.5,
                 0,
-                1,
-                1,
-                1,
+                0.5,
+                -0.5,
                 0
-            ]
-        };
+            ]));
+            return {
+                index: [
+                    0,
+                    1,
+                    2,
+                    2,
+                    1,
+                    3
+                ],
+                atlasOffset: [
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ]
+            };
+        }
     };
     _proto.createGeometry = function createGeometry(mode) {
         return Geometry.create(this.engine, {
@@ -13581,7 +13471,7 @@ var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
         setBlendMode(material, states.blendMode);
         setMaskMode(material, states.maskMode);
         setSideMode(material, states.side);
-        material.shader.shaderData.properties = 'uSampler0("uSampler0",2D) = "white" {}';
+        material.shader.shaderData.properties = '_MainTex("_MainTex",2D) = "white" {}';
         if (!material.hasUniform("_Color")) {
             material.setVector4("_Color", new Vector4(0, 0, 0, 1));
         }
@@ -15175,36 +15065,513 @@ function recursive(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, le
     return Ellipse;
 }(ShapePrimitive);
 
-var ShapePath = /*#__PURE__*/ function() {
-    function ShapePath(graphicsPath) {
-        this.graphicsPath = graphicsPath;
-        this.currentPoly = null;
-        this.shapePrimitives = [];
+var StarType;
+(function(StarType) {
+    StarType[StarType["Star"] = 0] = "Star";
+    StarType[StarType["Polygon"] = 1] = "Polygon";
+})(StarType || (StarType = {}));
+var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
+    _inherits(PolyStar, ShapePrimitive);
+    function PolyStar(pointCount, outerRadius, innerRadius, outerRoundness, innerRoundness, starType) {
+        if (pointCount === void 0) pointCount = 0;
+        if (outerRadius === void 0) outerRadius = 0;
+        if (innerRadius === void 0) innerRadius = 0;
+        if (outerRoundness === void 0) outerRoundness = 0;
+        if (innerRoundness === void 0) innerRoundness = 0;
+        if (starType === void 0) starType = 0;
+        var _this;
+        _this = ShapePrimitive.call(this) || this;
+        _this.pointCount = pointCount;
+        _this.outerRadius = outerRadius;
+        _this.innerRadius = innerRadius;
+        _this.outerRoundness = outerRoundness;
+        _this.innerRoundness = innerRoundness;
+        _this.starType = starType;
+        _this.v = [];
+        _this.in = [];
+        _this.out = [];
+        return _this;
     }
-    var _proto = ShapePath.prototype;
-    /** Builds the path. */ _proto.buildPath = function buildPath() {
-        this.currentPoly = null;
-        this.shapePrimitives.length = 0;
-        var path = this.graphicsPath;
-        for(var _iterator = _create_for_of_iterator_helper_loose(path.instructions), _step; !(_step = _iterator()).done;){
-            var instruction = _step.value;
-            var action = instruction.action;
-            var data = instruction.data;
-            switch(action){
-                case "bezierCurveTo":
-                    {
-                        this.bezierCurveTo(data[0], data[1], data[2], data[3], data[4], data[5], data[6]);
-                        break;
-                    }
-                case "moveTo":
-                    {
-                        this.moveTo(data[0], data[1]);
-                        break;
-                    }
-                case "ellipse":
-                    {
-                        this.ellipse(data[0], data[1], data[2], data[3], data[4]);
-                        break;
+    var _proto = PolyStar.prototype;
+    _proto.clone = function clone() {
+        var polyStar = new PolyStar(this.pointCount, this.outerRadius, this.innerRadius, this.outerRoundness, this.innerRoundness, this.starType);
+        return polyStar;
+    };
+    _proto.copyFrom = function copyFrom(source) {
+        this.pointCount = source.pointCount;
+        this.outerRadius = source.outerRadius;
+        this.innerRadius = source.innerRadius;
+        this.outerRoundness = source.outerRoundness;
+        this.innerRoundness = source.innerRoundness;
+        this.starType = source.starType;
+    };
+    _proto.copyTo = function copyTo(destination) {
+        destination.copyFrom(this);
+    };
+    _proto.build = function build(points) {
+        switch(this.starType){
+            case 0:
+                {
+                    this.buildStarPath();
+                    break;
+                }
+            case 1:
+                {
+                    this.buildPolygonPath();
+                    break;
+                }
+        }
+        var smoothness = 1;
+        for(var i = 0; i < this.v.length - 2; i += 2){
+            buildAdaptiveBezier(points, this.v[i], this.v[i + 1], this.out[i], this.out[i + 1], this.in[i + 2], this.in[i + 3], this.v[i + 2], this.v[i + 3], smoothness);
+        }
+        // draw last curve
+        var lastIndex = this.v.length - 1;
+        buildAdaptiveBezier(points, this.v[lastIndex - 1], this.v[lastIndex], this.out[lastIndex - 1], this.out[lastIndex], this.in[0], this.in[1], this.v[0], this.v[1], smoothness);
+    };
+    _proto.triangulate = function triangulate1(points, vertices, verticesOffset, indices, indicesOffset) {
+        var triangles = triangulate([
+            points
+        ]);
+        for(var i = 0; i < triangles.length; i++){
+            vertices[verticesOffset + i] = triangles[i];
+        }
+        var vertexCount = triangles.length / 2;
+        for(var i1 = 0; i1 < vertexCount; i1++){
+            indices[indicesOffset + i1] = i1;
+        }
+    };
+    _proto.buildStarPath = function buildStarPath() {
+        this.v = [];
+        this.in = [];
+        this.out = [];
+        var numPts = Math.floor(this.pointCount) * 2;
+        var angle = Math.PI * 2 / numPts;
+        var longFlag = true;
+        var longRad = this.outerRadius;
+        var shortRad = this.innerRadius;
+        var longRound = this.outerRoundness / 100;
+        var shortRound = this.innerRoundness / 100;
+        var longPerimSegment = 2 * Math.PI * longRad / (numPts * 2);
+        var shortPerimSegment = 2 * Math.PI * shortRad / (numPts * 2);
+        var i;
+        var rad;
+        var roundness;
+        var perimSegment;
+        var currentAng = -Math.PI / 2;
+        var dir = 1;
+        for(i = 0; i < numPts; i++){
+            rad = longFlag ? longRad : shortRad;
+            roundness = longFlag ? longRound : shortRound;
+            perimSegment = longFlag ? longPerimSegment : shortPerimSegment;
+            var x = rad * Math.cos(currentAng);
+            var y = rad * Math.sin(currentAng);
+            var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
+            var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
+            var offset = i * 2;
+            this.v[offset] = x;
+            this.v[offset + 1] = y;
+            this.in[offset] = x + ox * perimSegment * roundness * dir;
+            this.in[offset + 1] = y + oy * perimSegment * roundness * dir;
+            this.out[offset] = x - ox * perimSegment * roundness * dir;
+            this.out[offset + 1] = y - oy * perimSegment * roundness * dir;
+            longFlag = !longFlag;
+            currentAng += angle * dir;
+        }
+    };
+    _proto.buildPolygonPath = function buildPolygonPath() {
+        this.v = [];
+        this.in = [];
+        this.out = [];
+        var numPts = Math.floor(this.pointCount);
+        var angle = Math.PI * 2 / numPts;
+        var rad = this.outerRadius;
+        var roundness = this.outerRoundness / 100;
+        var perimSegment = 2 * Math.PI * rad / (numPts * 4);
+        var i;
+        var currentAng = -Math.PI * 0.5;
+        var dir = 1;
+        for(i = 0; i < numPts; i++){
+            var x = rad * Math.cos(currentAng);
+            var y = rad * Math.sin(currentAng);
+            var ox = x === 0 && y === 0 ? 0 : y / Math.sqrt(x * x + y * y);
+            var oy = x === 0 && y === 0 ? 0 : -x / Math.sqrt(x * x + y * y);
+            var offset = i * 2;
+            this.v[offset] = x;
+            this.v[offset + 1] = y;
+            this.in[offset] = x + ox * perimSegment * roundness * dir;
+            this.in[offset + 1] = y + oy * perimSegment * roundness * dir;
+            this.out[offset] = x - ox * perimSegment * roundness * dir;
+            this.out[offset + 1] = y - oy * perimSegment * roundness * dir;
+            currentAng += angle * dir;
+        }
+    };
+    return PolyStar;
+}(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 upper-left corner
+ * point (`x`, `y`) and by its `width` and its `height`.
+ */ var Rectangle$1 = /*#__PURE__*/ function(ShapePrimitive) {
+    _inherits(Rectangle, ShapePrimitive);
+    function Rectangle(x, y, width, height) {
+        if (x === void 0) x = 0;
+        if (y === void 0) y = 0;
+        if (width === void 0) width = 0;
+        if (height === void 0) height = 0;
+        var _this;
+        _this = ShapePrimitive.call(this) || this;
+        _this.x = Number(x);
+        _this.y = Number(y);
+        _this.width = Number(width);
+        _this.height = Number(height);
+        return _this;
+    }
+    var _proto = Rectangle.prototype;
+    /** Determines whether the Rectangle is empty. */ _proto.isEmpty = function isEmpty() {
+        return this.left === this.right || this.top === this.bottom;
+    };
+    /**
+   * Creates a clone of this Rectangle
+   * @returns a copy of the rectangle
+   */ _proto.clone = function clone() {
+        return new Rectangle(this.x, this.y, this.width, this.height);
+    };
+    /**
+   * Converts a Bounds object to a Rectangle object.
+   * @param bounds - The bounds to copy and convert to a rectangle.
+   * @returns Returns itself.
+   */ //   copyFromBounds (bounds: Bounds): this {
+    //     this.x = bounds.minX;
+    //     this.y = bounds.minY;
+    //     this.width = bounds.maxX - bounds.minX;
+    //     this.height = bounds.maxY - bounds.minY;
+    //     return this;
+    //   }
+    /**
+   * Copies another rectangle to this one.
+   * @param rectangle - The rectangle to copy from.
+   * @returns Returns itself.
+   */ _proto.copyFrom = function copyFrom(rectangle) {
+        this.x = rectangle.x;
+        this.y = rectangle.y;
+        this.width = rectangle.width;
+        this.height = rectangle.height;
+        return this;
+    };
+    /**
+   * Copies this rectangle to another one.
+   * @param rectangle - The rectangle to copy to.
+   * @returns Returns given parameter.
+   */ _proto.copyTo = function copyTo(rectangle) {
+        rectangle.copyFrom(this);
+        return rectangle;
+    };
+    /**
+   * Checks whether the x and y coordinates given are contained within this Rectangle
+   * @param x - The X coordinate of the point to test
+   * @param y - The Y coordinate of the point to test
+   * @returns Whether the x/y coordinates are within this Rectangle
+   */ _proto.contains = function contains(x, y) {
+        if (this.width <= 0 || this.height <= 0) {
+            return false;
+        }
+        if (x >= this.x && x < this.x + this.width) {
+            if (y >= this.y && y < this.y + this.height) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
+   * Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
+   * @param x - The X coordinate of the point to test
+   * @param y - The Y coordinate of the point to test
+   * @param strokeWidth - The width of the line to check
+   * @returns Whether the x/y coordinates are within this rectangle
+   */ _proto.strokeContains = function strokeContains(x, y, strokeWidth) {
+        var _this = this, width = _this.width, height = _this.height;
+        if (width <= 0 || height <= 0) {
+            return false;
+        }
+        var _x = this.x;
+        var _y = this.y;
+        var outerLeft = _x - strokeWidth / 2;
+        var outerRight = _x + width + strokeWidth / 2;
+        var outerTop = _y - strokeWidth / 2;
+        var outerBottom = _y + height + strokeWidth / 2;
+        var innerLeft = _x + strokeWidth / 2;
+        var innerRight = _x + width - strokeWidth / 2;
+        var innerTop = _y + strokeWidth / 2;
+        var innerBottom = _y + height - strokeWidth / 2;
+        return x >= outerLeft && x <= outerRight && y >= outerTop && y <= outerBottom && !(x > innerLeft && x < innerRight && y > innerTop && y < innerBottom);
+    };
+    /**
+   * Determines whether the `other` Rectangle transformed by `transform` intersects with `this` Rectangle object.
+   * Returns true only if the area of the intersection is >0, this means that Rectangles
+   * sharing a side are not overlapping. Another side effect is that an arealess rectangle
+   * (width or height equal to zero) can't intersect any other rectangle.
+   * @param {Rectangle} other - The Rectangle to intersect with `this`.
+   * @param {Matrix} transform - The transformation matrix of `other`.
+   * @returns {boolean} A value of `true` if the transformed `other` Rectangle intersects with `this`; otherwise `false`.
+   */ //   intersects (other: Rectangle, transform?: Matrix4): boolean {
+    //     if (!transform) {
+    //       const x0 = this.x < other.x ? other.x : this.x;
+    //       const x1 = this.right > other.right ? other.right : this.right;
+    //       if (x1 <= x0) {
+    //         return false;
+    //       }
+    //       const y0 = this.y < other.y ? other.y : this.y;
+    //       const y1 = this.bottom > other.bottom ? other.bottom : this.bottom;
+    //       return y1 > y0;
+    //     }
+    //     const x0 = this.left;
+    //     const x1 = this.right;
+    //     const y0 = this.top;
+    //     const y1 = this.bottom;
+    //     if (x1 <= x0 || y1 <= y0) {
+    //       return false;
+    //     }
+    //     const lt = tempPoints[0].set(other.left, other.top);
+    //     const lb = tempPoints[1].set(other.left, other.bottom);
+    //     const rt = tempPoints[2].set(other.right, other.top);
+    //     const rb = tempPoints[3].set(other.right, other.bottom);
+    //     if (rt.x <= lt.x || lb.y <= lt.y) {
+    //       return false;
+    //     }
+    //     const s = Math.sign((transform.a * transform.d) - (transform.b * transform.c));
+    //     if (s === 0) {
+    //       return false;
+    //     }
+    //     transform.apply(lt, lt);
+    //     transform.apply(lb, lb);
+    //     transform.apply(rt, rt);
+    //     transform.apply(rb, rb);
+    //     if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0
+    //             || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1
+    //             || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0
+    //             || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
+    //       return false;
+    //     }
+    //     const nx = s * (lb.y - lt.y);
+    //     const ny = s * (lt.x - lb.x);
+    //     const n00 = (nx * x0) + (ny * y0);
+    //     const n10 = (nx * x1) + (ny * y0);
+    //     const n01 = (nx * x0) + (ny * y1);
+    //     const n11 = (nx * x1) + (ny * y1);
+    //     if (Math.max(n00, n10, n01, n11) <= (nx * lt.x) + (ny * lt.y)
+    //             || Math.min(n00, n10, n01, n11) >= (nx * rb.x) + (ny * rb.y)) {
+    //       return false;
+    //     }
+    //     const mx = s * (lt.y - rt.y);
+    //     const my = s * (rt.x - lt.x);
+    //     const m00 = (mx * x0) + (my * y0);
+    //     const m10 = (mx * x1) + (my * y0);
+    //     const m01 = (mx * x0) + (my * y1);
+    //     const m11 = (mx * x1) + (my * y1);
+    //     if (Math.max(m00, m10, m01, m11) <= (mx * lt.x) + (my * lt.y)
+    //             || Math.min(m00, m10, m01, m11) >= (mx * rb.x) + (my * rb.y)) {
+    //       return false;
+    //     }
+    //     return true;
+    //   }
+    /**
+   * Pads the rectangle making it grow in all directions.
+   * If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
+   * @param paddingX - The horizontal padding amount.
+   * @param paddingY - The vertical padding amount.
+   * @returns Returns itself.
+   */ _proto.pad = function pad(paddingX, paddingY) {
+        if (paddingX === void 0) paddingX = 0;
+        if (paddingY === void 0) paddingY = paddingX;
+        this.x -= paddingX;
+        this.y -= paddingY;
+        this.width += paddingX * 2;
+        this.height += paddingY * 2;
+        return this;
+    };
+    /**
+   * Fits this rectangle around the passed one.
+   * @param rectangle - The rectangle to fit.
+   * @returns Returns itself.
+   */ _proto.fit = function fit(rectangle) {
+        var x1 = Math.max(this.x, rectangle.x);
+        var x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
+        var y1 = Math.max(this.y, rectangle.y);
+        var y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
+        this.x = x1;
+        this.width = Math.max(x2 - x1, 0);
+        this.y = y1;
+        this.height = Math.max(y2 - y1, 0);
+        return this;
+    };
+    /**
+   * Enlarges rectangle that way its corners lie on grid
+   * @param resolution - resolution
+   * @param eps - precision
+   * @returns Returns itself.
+   */ _proto.ceil = function ceil(resolution, eps) {
+        if (resolution === void 0) resolution = 1;
+        if (eps === void 0) eps = 0.001;
+        var x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
+        var y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
+        this.x = Math.floor((this.x + eps) * resolution) / resolution;
+        this.y = Math.floor((this.y + eps) * resolution) / resolution;
+        this.width = x2 - this.x;
+        this.height = y2 - this.y;
+        return this;
+    };
+    /**
+   * Enlarges this rectangle to include the passed rectangle.
+   * @param rectangle - The rectangle to include.
+   * @returns Returns itself.
+   */ _proto.enlarge = function enlarge(rectangle) {
+        var x1 = Math.min(this.x, rectangle.x);
+        var x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
+        var y1 = Math.min(this.y, rectangle.y);
+        var y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
+        this.x = x1;
+        this.width = x2 - x1;
+        this.y = y1;
+        this.height = y2 - y1;
+        return this;
+    };
+    /**
+   * Returns the framing rectangle of the rectangle as a Rectangle object
+   * @param out - optional rectangle to store the result
+   * @returns The framing rectangle
+   */ _proto.getBounds = function getBounds(out) {
+        out = out || new Rectangle();
+        out.copyFrom(this);
+        return out;
+    };
+    _proto.getX = function getX() {
+        return this.x;
+    };
+    _proto.getY = function getY() {
+        return this.y;
+    };
+    _proto.build = function build(points) {
+        var x = this.x;
+        var y = this.y;
+        var width = this.width;
+        var height = this.height;
+        if (!(width >= 0 && height >= 0)) {
+            return points;
+        }
+        points[0] = x;
+        points[1] = y;
+        points[2] = x + width;
+        points[3] = y;
+        points[4] = x + width;
+        points[5] = y + height;
+        points[6] = x;
+        points[7] = y + height;
+        return points;
+    };
+    _proto.triangulate = function triangulate(points, vertices, verticesOffset, indices, indicesOffset) {
+        var count = 0;
+        var verticesStride = 2;
+        verticesOffset *= verticesStride;
+        vertices[verticesOffset + count] = points[0];
+        vertices[verticesOffset + count + 1] = points[1];
+        count += verticesStride;
+        vertices[verticesOffset + count] = points[2];
+        vertices[verticesOffset + count + 1] = points[3];
+        count += verticesStride;
+        vertices[verticesOffset + count] = points[6];
+        vertices[verticesOffset + count + 1] = points[7];
+        count += verticesStride;
+        vertices[verticesOffset + count] = points[4];
+        vertices[verticesOffset + count + 1] = points[5];
+        count += verticesStride;
+        var verticesIndex = verticesOffset / verticesStride;
+        // triangle 1
+        indices[indicesOffset++] = verticesIndex;
+        indices[indicesOffset++] = verticesIndex + 1;
+        indices[indicesOffset++] = verticesIndex + 2;
+        // triangle 2
+        indices[indicesOffset++] = verticesIndex + 1;
+        indices[indicesOffset++] = verticesIndex + 3;
+        indices[indicesOffset++] = verticesIndex + 2;
+    };
+    _create_class(Rectangle, [
+        {
+            key: "left",
+            get: /** Returns the left edge of the rectangle. */ function get() {
+                return this.x;
+            }
+        },
+        {
+            key: "right",
+            get: /** Returns the right edge of the rectangle. */ function get() {
+                return this.x + this.width;
+            }
+        },
+        {
+            key: "top",
+            get: /** Returns the top edge of the rectangle. */ function get() {
+                return this.y;
+            }
+        },
+        {
+            key: "bottom",
+            get: /** Returns the bottom edge of the rectangle. */ function get() {
+                return this.y + this.height;
+            }
+        }
+    ], [
+        {
+            key: "EMPTY",
+            get: /** A constant empty rectangle. This is a new object every time the property is accessed */ function get() {
+                return new Rectangle(0, 0, 0, 0);
+            }
+        }
+    ]);
+    return Rectangle;
+}(ShapePrimitive);
+
+var ShapePath = /*#__PURE__*/ function() {
+    function ShapePath(graphicsPath) {
+        this.graphicsPath = graphicsPath;
+        this.currentPoly = null;
+        this.shapePrimitives = [];
+    }
+    var _proto = ShapePath.prototype;
+    /** Builds the path. */ _proto.buildPath = function buildPath() {
+        this.currentPoly = null;
+        this.shapePrimitives.length = 0;
+        var path = this.graphicsPath;
+        for(var _iterator = _create_for_of_iterator_helper_loose(path.instructions), _step; !(_step = _iterator()).done;){
+            var instruction = _step.value;
+            var action = instruction.action;
+            var data = instruction.data;
+            switch(action){
+                case "bezierCurveTo":
+                    {
+                        this.bezierCurveTo(data[0], data[1], data[2], data[3], data[4], data[5], data[6]);
+                        break;
+                    }
+                case "moveTo":
+                    {
+                        this.moveTo(data[0], data[1]);
+                        break;
+                    }
+                case "ellipse":
+                    {
+                        this.ellipse(data[0], data[1], data[2], data[3], data[4]);
+                        break;
+                    }
+                case "polyStar":
+                    {
+                        this.polyStar(data[0], data[1], data[2], data[3], data[4], data[5], data[6]);
+                        break;
+                    }
+                case "rect":
+                    {
+                        this.rect(data[0], data[1], data[2], data[3], data[4]);
+                        break;
                     }
             }
         }
@@ -15246,6 +15613,22 @@ var ShapePath = /*#__PURE__*/ function() {
         this.drawShape(new Ellipse(x, y, radiusX, radiusY), transform);
         return this;
     };
+    _proto.polyStar = function polyStar(pointCount, outerRadius, innerRadius, outerRoundness, innerRoundness, starType, transform) {
+        this.drawShape(new PolyStar(pointCount, outerRadius, innerRadius, outerRoundness, innerRoundness, starType), transform);
+        return this;
+    };
+    /**
+   * Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
+   * @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.
+   * @returns The instance of the current object for chaining.
+   */ _proto.rect = function rect(x, y, w, h, transform) {
+        this.drawShape(new Rectangle$1(x, y, w, h), transform);
+        return this;
+    };
     /**
    * Draws a given shape on the canvas.
    * This is a generic method that can draw any type of shape specified by the `ShapePrimitive` parameter.
@@ -15382,8 +15765,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.
@@ -15402,6 +15785,22 @@ var GraphicsPath = /*#__PURE__*/ function() {
         this.dirty = true;
         return this;
     };
+    _proto.polyStar = function polyStar(pointCount, outerRadius, innerRadius, outerRoundness, innerRoundness, starType, transform) {
+        this.instructions.push({
+            action: "polyStar",
+            data: [
+                pointCount,
+                outerRadius,
+                innerRadius,
+                outerRoundness,
+                innerRoundness,
+                starType,
+                transform
+            ]
+        });
+        this.dirty = true;
+        return this;
+    };
     _proto.clear = function clear() {
         this.instructions.length = 0;
         this.dirty = true;
@@ -15437,7 +15836,7 @@ exports.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: {
@@ -15479,7 +15878,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
             };
             _this.material = Material.create(engine, materialProps);
             _this.material.setColor("_Color", new Color(1, 1, 1, 1));
-            _this.material.depthMask = true;
+            _this.material.depthMask = false;
             _this.material.depthTest = true;
             _this.material.blending = true;
         }
@@ -15544,16 +15943,18 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.buildPath = function buildPath(data) {
         this.path.clear();
-        switch(data.type){
-            case 0:
+        var shapeData = data;
+        switch(shapeData.type){
+            case ShapePrimitiveType.Custom:
                 {
-                    var customData = data;
-                    var points = customData.param.points;
-                    var easingIns = customData.param.easingIn;
-                    var easingOuts = customData.param.easingOut;
+                    var customData = shapeData;
+                    var points = customData.points;
+                    var easingIns = customData.easingIns;
+                    var easingOuts = customData.easingOuts;
                     this.curveValues = [];
-                    for(var _iterator = _create_for_of_iterator_helper_loose(customData.param.shapes), _step; !(_step = _iterator()).done;){
+                    for(var _iterator = _create_for_of_iterator_helper_loose(customData.shapes), _step; !(_step = _iterator()).done;){
                         var shape = _step.value;
+                        this.setFillColor(shape.fill);
                         var indices = shape.indexes;
                         for(var i = 1; i < indices.length; i++){
                             var pointIndex = indices[i];
@@ -15581,46 +15982,185 @@ exports.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 ShapePrimitiveType.Rectangle:
+                {
+                    var rectangleData = shapeData;
+                    this.path.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
+                    this.setFillColor(rectangleData.fill);
+                    break;
+                }
+            case ShapePrimitiveType.Star:
                 {
-                    var ellipseData = data;
-                    var ellipseParam = ellipseData.param;
-                    this.path.ellipse(0, 0, ellipseParam.xRadius, ellipseParam.yRadius);
+                    var starData = shapeData;
+                    this.path.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
+                    this.setFillColor(starData.fill);
                     break;
                 }
+            case ShapePrimitiveType.Polygon:
+                {
+                    var polygonData = shapeData;
+                    this.path.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
+                    this.setFillColor(polygonData.fill);
+                    break;
+                }
+        }
+    };
+    _proto.setFillColor = function setFillColor(fill) {
+        if (fill) {
+            var color = fill.color;
+            this.material.setColor("_Color", new Color(color.r, color.g, color.b, color.a));
         }
     };
     _proto.fromData = function fromData(data) {
         MeshComponent.prototype.fromData.call(this, data);
         this.data = data;
+        var material = this.material;
+        //@ts-expect-error // TODO 新版蒙版上线后重构
+        material.stencilRef = data.renderer.mask !== undefined ? [
+            data.renderer.mask,
+            data.renderer.mask
+        ] : undefined;
+        //@ts-expect-error // TODO 新版蒙版上线后重构
+        setMaskMode(material, data.renderer.maskMode);
     };
     return ShapeComponent;
 }(MeshComponent);
 exports.ShapeComponent = __decorate([
     effectsClass("ShapeComponent")
 ], exports.ShapeComponent);
-exports.ComponentShapeType = void 0;
-(function(ComponentShapeType) {
-    /**
-   * 自定义图形
-   */ ComponentShapeType[ComponentShapeType["CUSTOM"] = 0] = "CUSTOM";
-    /**
-   * 矩形
-   */ ComponentShapeType[ComponentShapeType["RECTANGLE"] = 1] = "RECTANGLE";
-    /**
-   * 椭圆
-   */ ComponentShapeType[ComponentShapeType["ELLIPSE"] = 2] = "ELLIPSE";
-    /**
-   * 多边形
-   */ ComponentShapeType[ComponentShapeType["POLYGON"] = 3] = "POLYGON";
-    /**
-   * 星形
-   */ ComponentShapeType[ComponentShapeType["STAR"] = 4] = "STAR";
-})(exports.ComponentShapeType || (exports.ComponentShapeType = {}));
-exports.ShapeConnectType = void 0;
-(function(ShapeConnectType) {})(exports.ShapeConnectType || (exports.ShapeConnectType = {}));
-exports.ShapePointType = void 0;
-(function(ShapePointType) {})(exports.ShapePointType || (exports.ShapePointType = {}));
+
+exports.Fake3DComponent = /*#__PURE__*/ function(Component) {
+    _inherits(Fake3DComponent, Component);
+    function Fake3DComponent() {
+        var _this;
+        _this = Component.apply(this, arguments) || this;
+        _this.loop = false;
+        _this.amountOfMotion = 1.0;
+        _this.animationLength = 2.0;
+        _this.mode = 1;
+        _this.startPositionX = 0;
+        _this.startPositionY = 0;
+        _this.startPositionZ = 0;
+        _this.endPositionX = 0;
+        _this.endPositionY = 0;
+        _this.endPositionZ = 0;
+        _this.amplitudeX = 0;
+        _this.amplitudeY = 0;
+        _this.amplitudeZ = 0;
+        _this.phaseX = 0;
+        _this.phaseY = 0;
+        _this.phaseZ = 0;
+        return _this;
+    }
+    var _proto = Fake3DComponent.prototype;
+    _proto.onStart = function onStart() {
+        this.effectComponent = this.item.getComponent(exports.EffectComponent);
+    };
+    _proto.onUpdate = function onUpdate(dt) {
+        this.updateFake3D();
+    };
+    _proto.updateFake3D = function updateFake3D() {
+        if (!this.effectComponent) {
+            return;
+        }
+        var time = this.item.time % this.animationLength / this.animationLength;
+        var _PosX = 0;
+        var _PosY = 0;
+        var _PosZ = 0;
+        switch(this.mode){
+            case 0:
+                {
+                    var PI = Math.PI;
+                    _PosX = Math.sin(2.0 * PI * (time + this.phaseX)) * this.amplitudeX;
+                    _PosY = Math.sin(2.0 * PI * (time + this.phaseY)) * this.amplitudeY;
+                    _PosZ = Math.sin(2.0 * PI * (time + this.phaseZ)) * this.amplitudeZ;
+                    break;
+                }
+            case 1:
+                {
+                    var localTime = time;
+                    if (this.loop) {
+                        if (localTime > 0.5) {
+                            localTime = 1 - localTime;
+                        }
+                        localTime *= 2;
+                    }
+                    _PosX = this.startPositionX * (1 - localTime) + localTime * this.endPositionX;
+                    _PosY = this.startPositionY * (1 - localTime) + localTime * this.endPositionY;
+                    _PosZ = this.startPositionZ * (1 - localTime) + localTime * this.endPositionZ;
+                    break;
+                }
+        }
+        var material = this.effectComponent.material;
+        material.setFloat("_PosX", _PosX * this.amountOfMotion);
+        material.setFloat("_PosY", _PosY * this.amountOfMotion);
+        material.setFloat("_PosZ", _PosZ * this.amountOfMotion);
+    };
+    return Fake3DComponent;
+}(Component);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "loop", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "amountOfMotion", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "animationLength", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "mode", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "startPositionX", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "startPositionY", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "startPositionZ", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "endPositionX", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "endPositionY", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "endPositionZ", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "amplitudeX", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "amplitudeY", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "amplitudeZ", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "phaseX", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "phaseY", void 0);
+__decorate([
+    serialize()
+], exports.Fake3DComponent.prototype, "phaseZ", void 0);
+exports.Fake3DComponent = __decorate([
+    effectsClass("Fake3DComponent")
+], exports.Fake3DComponent);
+exports.Fake3DAnimationMode = void 0;
+(function(Fake3DAnimationMode) {
+    Fake3DAnimationMode[Fake3DAnimationMode["Circular"] = 0] = "Circular";
+    Fake3DAnimationMode[Fake3DAnimationMode["Linear"] = 1] = "Linear";
+})(exports.Fake3DAnimationMode || (exports.Fake3DAnimationMode = {}));
 
 exports.CameraController = /*#__PURE__*/ function(Behaviour) {
     _inherits(CameraController, Behaviour);
@@ -15992,8 +16532,8 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
                 0
             ]
         };
+        _this.duringPlay = false;
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
-        _this.hasBeenAddedToComposition = false;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -16030,7 +16570,6 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         ];
     };
     _proto.onStart = function onStart() {
-        var _this = this;
         var options = this.item.props.content.options;
         var env = this.item.engine.renderer.env;
         var composition = this.item.composition;
@@ -16054,32 +16593,37 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             this.materials = this.previewContent.mesh.materials;
         }
         this.item.getHitTestParams = this.getHitTestParams;
-        this.item.onEnd = function() {
-            if (_this.item && _this.item.composition) {
-                var _this_previewContent;
-                _this.item.composition.removeInteractiveItem(_this.item, _this.item.props.content.options.type);
-                _this.clickable = false;
-                _this.hasBeenAddedToComposition = false;
-                (_this_previewContent = _this.previewContent) == null ? void 0 : _this_previewContent.mesh.dispose();
-                _this.endDragTarget();
+    };
+    _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()) {
+                this.item.composition.removeInteractiveItem(this.item, this.item.props.content.options.type);
+                this.duringPlay = false;
             }
-        };
+            this.clickable = false;
+            (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.mesh.dispose();
+            this.endDragTarget();
+        }
+    };
+    _proto.onEnable = function onEnable() {
+        RendererComponent.prototype.onEnable.call(this);
+        var type = this.interactData.options.type;
+        if (type === InteractType.CLICK) {
+            this.clickable = true;
+        }
     };
     _proto.onUpdate = function onUpdate(dt) {
         var _this_previewContent;
-        if (!this.isActiveAndEnabled) {
-            return;
-        }
-        (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
-        if (!this.hasBeenAddedToComposition && this.item.composition) {
-            var type = this.interactData.options.type;
-            if (type === InteractType.CLICK) {
-                this.clickable = true;
-            }
+        this.duringPlay = true;
+        // trigger messageBegin when item enter
+        if (this.item.time > 0 && this.item.time - dt / 1000 <= 0) {
+            var _this_item_composition;
             var options = this.item.props.content.options;
-            this.item.composition.addInteractiveItem(this.item, options.type);
-            this.hasBeenAddedToComposition = true;
+            (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.addInteractiveItem(this.item, options.type);
         }
+        (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
         if (!this.dragEvent || !this.bouncingArg) {
             return;
         }
@@ -16247,7 +16791,9 @@ function shouldIgnoreBouncing(arg, mul) {
     return arg && Math.abs(arg.vx || 0) < threshold && Math.abs(arg.vy || 0) < threshold;
 }
 
-var MeshCollider = /*#__PURE__*/ function() {
+/**
+ *
+ */ var MeshCollider = /*#__PURE__*/ function() {
     function MeshCollider() {
         this.triangles = [];
     }
@@ -16255,6 +16801,38 @@ var MeshCollider = /*#__PURE__*/ function() {
     _proto.getBoundingBoxData = function getBoundingBoxData() {
         return this.boundingBoxData;
     };
+    _proto.getBoundingBox = function getBoundingBox() {
+        var maxX = -Number.MAX_VALUE;
+        var maxY = -Number.MAX_VALUE;
+        var minX = Number.MAX_VALUE;
+        var minY = Number.MAX_VALUE;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.boundingBoxData.area), _step; !(_step = _iterator()).done;){
+            var triangle = _step.value;
+            maxX = Math.max(triangle.p0.x, triangle.p1.x, triangle.p2.x, maxX);
+            maxY = Math.max(triangle.p0.y, triangle.p1.y, triangle.p2.y, maxY);
+            minX = Math.min(triangle.p0.x, triangle.p1.x, triangle.p2.x, minX);
+            minY = Math.min(triangle.p0.y, triangle.p1.y, triangle.p2.y, minY);
+        }
+        var area = [];
+        var point0 = new Vector3(minX, maxY, 0);
+        var point1 = new Vector3(maxX, maxY, 0);
+        var point2 = new Vector3(maxX, minY, 0);
+        var point3 = new Vector3(minX, minY, 0);
+        area.push({
+            p0: point0,
+            p1: point1,
+            p2: point2
+        });
+        area.push({
+            p0: point0,
+            p1: point2,
+            p2: point3
+        });
+        return {
+            type: exports.HitTestType.triangle,
+            area: area
+        };
+    };
     _proto.setGeometry = function setGeometry(geometry, worldMatrix) {
         if (this.geometry !== geometry) {
             this.triangles = this.geometryToTriangles(geometry);
@@ -16459,6 +17037,7 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         if (inputCount === void 0) inputCount = 0;
         this.onPlayablePlayFlag = true;
         this.onPlayablePauseFlag = false;
+        this.duration = 0;
         this.destroyed = false;
         this.inputs = [];
         this.inputOuputPorts = [];
@@ -16551,6 +17130,12 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
     _proto.getTime = function getTime() {
         return this.time;
     };
+    _proto.setDuration = function setDuration(duration) {
+        this.duration = duration;
+    };
+    _proto.getDuration = function getDuration() {
+        return this.duration;
+    };
     _proto.getPlayState = function getPlayState() {
         return this.playState;
     };
@@ -16702,7 +17287,9 @@ var PlayableTraversalMode;
 var tempQuat$1 = new Quaternion();
 var seed$3 = 1;
 // TODO 继承 Component
-var Transform = /*#__PURE__*/ function() {
+/**
+ *
+ */ var Transform = /*#__PURE__*/ function() {
     function Transform(props, parent) {
         if (props === void 0) props = {};
         this.taggedProperties = {};
@@ -17167,7 +17754,11 @@ var Transform = /*#__PURE__*/ function() {
     return Transform;
 }();
 
-var EventEmitter = function EventEmitter() {
+/**
+ *
+ */ /**
+ * 事件监听器
+ */ var EventEmitter = function EventEmitter() {
     var _this = this;
     var _this1 = this;
     this.listeners = {};
@@ -17261,17 +17852,15 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         /**
    * 元素动画结束时行为（如何处理元素）
    */ _this.endBehavior = EndBehavior.forward;
-        /**
-   * 元素是否可用
-   */ _this.ended = false;
-        _this.reusable = false;
         _this.type = ItemType.base;
         _this.isDuringPlay = false;
         _this.components = [];
         _this.rendererComponents = [];
         /**
-   * 元素可见性，该值的改变会触发 `handleVisibleChanged` 回调
-   * @protected
+   * 元素是否激活
+   */ _this.active = true;
+        /**
+   * 元素组件是否显示，用于批量开关元素组件
    */ _this.visible = true;
         /**
    * 元素动画的速度
@@ -17402,12 +17991,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         }
     };
     /**
-   * 元素动画结束播放时回调函数
-   * @override
-   */ _proto.onEnd = function onEnd() {
-    // OVERRIDE
-    };
-    /**
    * 通过指定 r、g、b、a 值设置元素的颜色
    * @param {number} r
    * @param {number} g
@@ -17420,17 +18003,27 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * @param opacity - 透明度值，范围 [0,1]
    */ _proto.setOpacity = function setOpacity(opacity) {};
     /**
-   * 获取元素显隐属性
-   */ _proto.getVisible = function getVisible() {
-        return this.visible;
+   * 激活或停用 VFXItem
+   */ _proto.setActive = function setActive(value) {
+        if (this.active !== value) {
+            this.active = !!value;
+            this.onActiveChanged();
+        }
     };
     /**
-   * 设置元素显隐属性 会触发 `handleVisibleChanged` 回调
+   * 设置元素的显隐，该设置会批量开关元素组件
    */ _proto.setVisible = function setVisible(visible) {
-        if (this.visible !== visible) {
-            this.visible = !!visible;
-            this.onActiveChanged();
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.enabled = visible;
         }
+        this.visible = visible;
+    };
+    /**
+   * 元素组件显隐状态
+   * @deprecated use isVisible instead
+   */ _proto.getVisible = function getVisible() {
+        return this.visible;
     };
     /**
    * 获取元素变换包括位置、旋转、缩放
@@ -17512,14 +18105,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         this.transform.assignWorldTRS(pos);
         return pos;
     };
-    /**
-   * 是否到达元素的结束时间
-   * @param now
-   * @returns
-   */ _proto.isEnded = function isEnded(now) {
-        // at least 1 ms
-        return now - this.duration > 0.001;
-    };
     _proto.find = function find(name) {
         var _queue;
         if (this.name === name) {
@@ -17543,7 +18128,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * @internal
    */ _proto.beginPlay = function beginPlay() {
         this.isDuringPlay = true;
-        if (this.composition && this.visible && !this.isEnabled) {
+        if (this.composition && this.active && !this.isEnabled) {
             this.onEnable();
         }
         for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
@@ -17637,7 +18222,7 @@ exports.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;
@@ -17727,25 +18312,54 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     // }
     // }
     };
-    VFXItem.isComposition = function isComposition(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isComposition = function isComposition(item) {
         return item.type === ItemType.composition;
     };
-    VFXItem.isSprite = function isSprite(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isSprite = function isSprite(item) {
         return item.type === ItemType.sprite;
     };
-    VFXItem.isParticle = function isParticle(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isParticle = function isParticle(item) {
         return item.type === ItemType.particle;
     };
-    VFXItem.isNull = function isNull(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isNull = function isNull(item) {
         return item.type === ItemType.null;
     };
-    VFXItem.isTree = function isTree(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isTree = function isTree(item) {
         return item.type === ItemType.tree;
     };
-    VFXItem.isCamera = function isCamera(item) {
+    /**
+   *
+   * @param item
+   * @returns
+   */ VFXItem.isCamera = function isCamera(item) {
         return item.type === ItemType.camera;
     };
-    VFXItem.isAncestor = function isAncestor(ancestorCandidate, descendantCandidate) {
+    /**
+   *
+   * @param ancestorCandidate
+   * @param descendantCandidate
+   * @returns
+   */ VFXItem.isAncestor = function isAncestor(ancestorCandidate, descendantCandidate) {
         var current = descendantCandidate.parent;
         while(current){
             if (current === ancestorCandidate) {
@@ -17790,6 +18404,22 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
                     }
                 }
             }
+        },
+        {
+            key: "isActive",
+            get: /**
+   * 当前 VFXItem 是否激活
+   */ function get() {
+                return this.active;
+            }
+        },
+        {
+            key: "isVisible",
+            get: /**
+   * 元素组件显隐状态
+   */ function get() {
+                return this.visible;
+            }
         }
     ]);
     return VFXItem;
@@ -17953,6 +18583,16 @@ exports.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;
@@ -18007,21 +18647,20 @@ exports.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 === exports.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;
@@ -18460,7 +19099,7 @@ var ShapeNone = /*#__PURE__*/ function() {
     return ShapeNone;
 }();
 var _obj$2;
-var map = (_obj$2 = {}, _obj$2[ShapeType.NONE] = ShapeNone, _obj$2[ShapeType.CONE] = Cone, _obj$2[ShapeType.SPHERE] = Sphere, _obj$2[ShapeType.HEMISPHERE] = Hemisphere, _obj$2[ShapeType.CIRCLE] = Circle, _obj$2[ShapeType.DONUT] = Donut, _obj$2[ShapeType.RECTANGLE] = Rectangle, _obj$2[ShapeType.EDGE] = Edge, _obj$2[ShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$2[ShapeType.TEXTURE] = TextureShape, _obj$2);
+var map = (_obj$2 = {}, _obj$2[ParticleEmitterShapeType.NONE] = ShapeNone, _obj$2[ParticleEmitterShapeType.CONE] = Cone, _obj$2[ParticleEmitterShapeType.SPHERE] = Sphere, _obj$2[ParticleEmitterShapeType.HEMISPHERE] = Hemisphere, _obj$2[ParticleEmitterShapeType.CIRCLE] = Circle, _obj$2[ParticleEmitterShapeType.DONUT] = Donut, _obj$2[ParticleEmitterShapeType.RECTANGLE] = Rectangle, _obj$2[ParticleEmitterShapeType.EDGE] = Edge, _obj$2[ParticleEmitterShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$2[ParticleEmitterShapeType.TEXTURE] = TextureShape, _obj$2);
 function createShape(shapeOptions) {
     if (!shapeOptions) {
         return new ShapeNone();
@@ -18477,7 +19116,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,
@@ -22554,6 +23193,7 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
         for(var _iterator = _create_for_of_iterator_helper_loose(timelineClips), _step; !(_step = _iterator()).done;){
             var timelineClip = _step.value;
             var clipPlayable = this.createClipPlayable(graph, timelineClip);
+            clipPlayable.setDuration(timelineClip.duration);
             var clip = new RuntimeClip(timelineClip, clipPlayable, mixer, this);
             runtimeClips.push(clip);
             mixer.addInput(clipPlayable, 0);
@@ -22657,14 +23297,6 @@ var RuntimeClip = /*#__PURE__*/ function() {
         this.playable.setTime(clipTime);
         // 判断动画是否结束
         if (ended) {
-            if (_instanceof1(boundObject, exports.VFXItem) && !boundObject.ended) {
-                boundObject.ended = true;
-                boundObject.onEnd();
-                if (!boundObject.compositionReusable && !boundObject.reusable) {
-                    boundObject.dispose();
-                    this.playable.dispose();
-                }
-            }
             if (this.playable.getPlayState() === PlayState.Playing) {
                 this.playable.pause();
             }
@@ -22707,26 +23339,10 @@ var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
         if (hasInput) {
             boundItem.transform.setValid(true);
-            this.showRendererComponents(boundItem);
+            boundItem.setActive(true);
         } else {
             boundItem.transform.setValid(false);
-            this.hideRendererComponents(boundItem);
-        }
-    };
-    _proto.hideRendererComponents = function hideRendererComponents(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.rendererComponents), _step; !(_step = _iterator()).done;){
-            var rendererComponent = _step.value;
-            if (rendererComponent.enabled) {
-                rendererComponent.enabled = false;
-            }
-        }
-    };
-    _proto.showRendererComponents = function showRendererComponents(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.rendererComponents), _step; !(_step = _iterator()).done;){
-            var rendererComponent = _step.value;
-            if (!rendererComponent.enabled) {
-                rendererComponent.enabled = true;
-            }
+            boundItem.setActive(false);
         }
     };
     return ActivationMixerPlayable;
@@ -22754,7 +23370,7 @@ var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
     }
     var _proto = PropertyClipPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
-        this.value = this.curve.getValue(this.time);
+        this.value = this.curve.getValue(this.time / this.getDuration());
     };
     return PropertyClipPlayable;
 }(Playable);
@@ -23272,9 +23888,6 @@ var SerializationHelper = /*#__PURE__*/ function() {
             var track = _step.value;
             var boundObject = track.boundObject;
             if (_instanceof1(boundObject, exports.VFXItem)) {
-                if (_instanceof1(track, exports.ObjectBindingTrack)) {
-                    boundObject.reusable = value;
-                }
                 var subCompositionComponent = boundObject.getComponent(CompositionComponent);
                 if (subCompositionComponent) {
                     subCompositionComponent.setReusable(value);
@@ -23319,16 +23932,16 @@ var SerializationHelper = /*#__PURE__*/ function() {
             }
         }
     };
-    _proto.showItems = function showItems() {
+    _proto.onEnable = function onEnable() {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.items), _step; !(_step = _iterator()).done;){
             var item = _step.value;
-            item.setVisible(true);
+            item.setActive(true);
         }
     };
-    _proto.hideItems = function hideItems() {
+    _proto.onDisable = function onDisable() {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.items), _step; !(_step = _iterator()).done;){
             var item = _step.value;
-            item.setVisible(false);
+            item.setActive(false);
         }
     };
     _proto.onDestroy = function onDestroy() {
@@ -23344,7 +23957,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
     _proto.hitTest = function hitTest(ray, x, y, regions, force, options) {
         var _this, _loop = function(i) {
             var item = _this.items[i];
-            if (item.getVisible() && item.transform.getValid() && !exports.VFXItem.isComposition(item) && !skip(item)) {
+            if (item.isActive && item.transform.getValid() && !exports.VFXItem.isComposition(item) && !skip(item)) {
                 var hitParams = item.getHitTestParams(force);
                 if (hitParams) {
                     var success = false;
@@ -23433,9 +24046,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);
@@ -23486,9 +24099,9 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
             }
         }
         if (hasInput) {
-            compositionComponent.showItems();
+            compositionComponent.item.setActive(true);
         } else {
-            compositionComponent.hideItems();
+            compositionComponent.item.setActive(false);
         }
     };
     return SubCompositionMixerPlayable;
@@ -23539,6 +24152,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() {
@@ -23698,7 +24356,7 @@ exports.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];
@@ -23712,6 +24370,27 @@ exports.ColorPropertyTrack = __decorate([
     effectsClass(DataType.ColorPropertyTrack)
 ], exports.ColorPropertyTrack);
 
+exports.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()
+], exports.ColorPropertyPlayableAsset.prototype, "curveData", void 0);
+exports.ColorPropertyPlayableAsset = __decorate([
+    effectsClass(DataType.ColorPropertyPlayableAsset)
+], exports.ColorPropertyPlayableAsset);
+
 exports.FloatPropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(FloatPropertyPlayableAsset, PlayableAsset);
     function FloatPropertyPlayableAsset() {
@@ -23771,6 +24450,7 @@ exports.TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
         var _this;
         _this = PlayableAsset.apply(this, arguments) || this;
         _this.tracks = [];
+        _this.cacheFlattenedTracks = null;
         return _this;
     }
     var _proto = TimelineAsset.prototype;
@@ -23783,16 +24463,62 @@ exports.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([
@@ -23825,18 +24551,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);
@@ -23852,11 +24571,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);
             }
@@ -23873,28 +24592,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) {
@@ -23916,6 +24613,27 @@ function compareTracks(a, b) {
     }
 }
 
+exports.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()
+], exports.Vector4PropertyPlayableAsset.prototype, "curveData", void 0);
+exports.Vector4PropertyPlayableAsset = __decorate([
+    effectsClass("Vector4PropertyPlayableAsset")
+], exports.Vector4PropertyPlayableAsset);
+
 exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
     _inherits(ObjectBindingTrack, TrackAsset1);
     function ObjectBindingTrack() {
@@ -23953,7 +24671,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;
@@ -24153,6 +24871,8 @@ exports.TextComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         /**
    * 文本行数
    */ _this.lineCount = 0;
+        _this.SCALE_FACTOR = 0.1;
+        _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MText" + seed$1++;
         _this.geometry = _this.createGeometry(glContext.TRIANGLES);
         if (props) {
@@ -24518,7 +25238,7 @@ var TextComponentBase = /*#__PURE__*/ function() {
         }
         //与 toDataURL() 两种方式都需要像素读取操作
         var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
-        this.material.setTexture("uSampler0", Texture.createWithData(this.engine, {
+        this.material.setTexture("_MainTex", Texture.createWithData(this.engine, {
             data: new Uint8Array(imageData.data),
             width: imageData.width,
             height: imageData.height
@@ -25846,13 +26566,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];
@@ -27716,7 +28436,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) {
+                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];
@@ -27756,8 +28477,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) {
@@ -27812,13 +28535,18 @@ var listOrder = 0;
     return CompositionSourceManager;
 }();
 
-var SceneTicking = /*#__PURE__*/ function() {
+/**
+ *
+ */ var SceneTicking = /*#__PURE__*/ function() {
     function SceneTicking() {
         this.update = new UpdateTickData();
         this.lateUpdate = new LateUpdateTickData();
     }
     var _proto = SceneTicking.prototype;
-    _proto.addComponent = function addComponent(obj) {
+    /**
+   *
+   * @param obj
+   */ _proto.addComponent = function addComponent(obj) {
         if (obj.onUpdate !== Component.prototype.onUpdate) {
             this.update.addComponent(obj);
         }
@@ -27826,7 +28554,10 @@ var SceneTicking = /*#__PURE__*/ function() {
             this.lateUpdate.addComponent(obj);
         }
     };
-    _proto.removeComponent = function removeComponent(obj) {
+    /**
+   *
+   * @param obj
+   */ _proto.removeComponent = function removeComponent(obj) {
         if (obj.onUpdate !== Component.prototype.onUpdate) {
             this.update.removeComponent(obj);
         }
@@ -27834,7 +28565,9 @@ var SceneTicking = /*#__PURE__*/ function() {
             this.lateUpdate.removeComponent(obj);
         }
     };
-    _proto.clear = function clear() {
+    /**
+   *
+   */ _proto.clear = function clear() {
         this.update.clear();
         this.lateUpdate.clear();
     };
@@ -27925,11 +28658,16 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         var _this;
         var _scene_jsonScene_renderSettings;
         _this = EventEmitter.call(this) || this;
-        _this.sceneTicking = new SceneTicking();
+        /**
+   *
+   */ _this.sceneTicking = new SceneTicking();
         /**
    * 动画播放速度
    */ _this.speed = 1;
         /**
+   * 合成是否结束
+   */ _this.isEnded = false;
+        /**
    * 用于保存与当前合成相关的插件数据
    */ _this.loaderData = {};
         /**
@@ -27951,6 +28689,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 合成暂停/播放 标识
    */ _this.paused = false;
         _this.lastVideoUpdateTime = 0;
+        _this.isEndCalled = false;
         var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, event = props.event, width = props.width, height = props.height, handleItemMessage = props.handleItemMessage;
         _this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         if (reusable) {
@@ -28040,7 +28779,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * @param visible - 是否可见
    */ _proto.setVisible = function setVisible(visible) {
         this.items.forEach(function(item) {
-            item.setVisible(visible);
+            item.setActive(visible);
         });
     };
     /**
@@ -28050,7 +28789,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         return this.speed;
     };
     _proto.play = function play() {
-        if (this.rootItem.ended && this.reusable) {
+        if (this.isEnded && this.reusable) {
             this.restart();
         }
         if (this.rootComposition.isStartCalled) {
@@ -28108,16 +28847,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);
@@ -28141,37 +28879,24 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 重置状态函数
    */ _proto.reset = function reset() {
         this.rendererOptions = null;
-        this.rootItem.ended = false;
+        this.isEnded = false;
+        this.isEndCalled = false;
         this.rootComposition.time = 0;
         this.pluginSystem.resetComposition(this, this.renderFrame);
     };
     _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 - 更新的时间步长
@@ -28193,12 +28918,18 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         this.sceneTicking.lateUpdate.tick(dt);
         this.updateCamera();
         this.prepareRender();
+        if (this.isEnded && !this.isEndCalled) {
+            this.isEndCalled = true;
+            this.emit("end", {
+                composition: this
+            });
+        }
         if (this.shouldDispose()) {
             this.dispose();
         }
     };
     _proto.shouldDispose = function shouldDispose() {
-        return this.rootItem.ended && this.rootItem.endBehavior === EndBehavior.destroy && !this.reusable;
+        return this.isEnded && this.rootItem.endBehavior === EndBehavior.destroy && !this.reusable;
     };
     _proto.getUpdateTime = function getUpdateTime(t) {
         var startTimeInMs = this.startTime * 1000;
@@ -28289,11 +29020,11 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    */ _proto.updateRootComposition = function updateRootComposition(deltaTime) {
         if (this.rootComposition.isActiveAndEnabled) {
             var localTime = this.time + deltaTime - this.rootItem.start;
-            var ended = false;
+            var isEnded = false;
             var duration = this.rootItem.duration;
             var endBehavior = this.rootItem.endBehavior;
             if (localTime - duration > 0.001) {
-                ended = true;
+                isEnded = true;
                 switch(endBehavior){
                     case EndBehavior.restart:
                         {
@@ -28317,11 +29048,14 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
                 }
             }
             this.rootComposition.time = localTime;
-            if (ended && !this.rootItem.ended) {
-                this.rootItem.ended = true;
-                this.emit("end", {
-                    composition: this
-                });
+            // end state changed, handle onEnd flags
+            if (this.isEnded !== isEnded) {
+                if (isEnded) {
+                    this.isEnded = true;
+                } else {
+                    this.isEnded = false;
+                    this.isEndCalled = false;
+                }
             }
         }
     };
@@ -30647,7 +31381,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version = "2.1.0-alpha.9";
+var version = "2.1.0";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;