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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.1.0-alpha.9
+ * Version: v2.1.0-beta.0
  */
 
 'use strict';
@@ -1244,6 +1244,12 @@ function _inherits(subClass, superClass) {
     /**
      * 特效元素
      */ ItemType["effect"] = "effect";
+    /**
+     * 形状元素
+     */ ItemType["shape"] = "shape";
+    /**
+     * 后处理元素
+     */ ItemType["postProcessVolume"] = "postProcessVolume";
     /**
      * 节点元素
      */ ItemType["node"] = "node";
@@ -1253,6 +1259,9 @@ function _inherits(subClass, superClass) {
     /**
      * 音频元素
      */ ItemType["audio"] = "audio";
+    /**
+     * 富文本元素
+     */ ItemType["richtext"] = "richtext";
 })(ItemType || (ItemType = {}));
 /**
  * 渲染模式
@@ -1628,6 +1637,30 @@ var TextAlignment;
      */ FontStyle["oblique"] = "oblique";
 })(FontStyle || (FontStyle = {}));
 
+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 DataType;
 (function(DataType) {
     DataType["VFXItemData"] = "VFXItemData";
@@ -1638,6 +1671,7 @@ var DataType;
     DataType["ParticleSystem"] = "ParticleSystem";
     DataType["InteractComponent"] = "InteractComponent";
     DataType["CameraController"] = "CameraController";
+    DataType["PostProcessVolume"] = "PostProcessVolume";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
     DataType["AnimationClip"] = "AnimationClip";
@@ -1660,7 +1694,6 @@ var DataType;
     DataType["SubCompositionPlayableAsset"] = "SubCompositionPlayableAsset";
     DataType["FloatPropertyPlayableAsset"] = "FloatPropertyPlayableAsset";
     DataType["ColorPropertyPlayableAsset"] = "ColorPropertyPlayableAsset";
-    // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
     DataType["LightComponent"] = "LightComponent";
@@ -1671,9 +1704,11 @@ var DataType;
     DataType["SpineComponent"] = "SpineComponent";
     DataType["VideoComponent"] = "VideoComponent";
     DataType["AudioComponent"] = "AudioComponent";
+    DataType["RichTextComponent"] = "RichTextComponent";
     // Non-EffectObject
     DataType["TimelineClip"] = "TimelineClip";
 })(DataType || (DataType = {}));
+
 var GeometryType;
 (function(GeometryType) {
     /**
@@ -1758,30 +1793,6 @@ 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; },
@@ -1826,14 +1837,14 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get TextAlignment () { return TextAlignment; },
     get TextWeight () { return TextWeight; },
     get FontStyle () { return FontStyle; },
+    BuiltinObjectGUID: BuiltinObjectGUID,
+    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) {
@@ -1921,15 +1932,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() {};
     /**
    * 反序列化函数
    *
@@ -1939,8 +1958,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;
@@ -2020,7 +2045,7 @@ function getDirectStore(target) {
                 this.onAwake();
                 this.isAwakeCalled = true;
             }
-            if (item.getVisible() && this.enabled) {
+            if (item.isActive && this.enabled) {
                 this.start();
                 this.enable();
             }
@@ -2065,7 +2090,7 @@ function getDirectStore(target) {
             get: /**
    * 组件是否可以更新，true 更新，false 不更新
    */ function get() {
-                return this.item.getVisible() && this.enabled;
+                return this.item.isActive && this.enabled;
             }
         },
         {
@@ -3694,7 +3719,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;
@@ -3704,7 +3731,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,
@@ -3724,8 +3753,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);
@@ -3763,24 +3792,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;
@@ -3794,36 +3828,18 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
 }(Behaviour);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "bloomEnabled", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "threshold", void 0);
+], exports.PostProcessVolume.prototype, "bloom", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "bloomIntensity", void 0);
+], exports.PostProcessVolume.prototype, "vignette", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "brightness", void 0);
+], exports.PostProcessVolume.prototype, "tonemapping", 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);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "vignetteSmoothness", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "vignetteRoundness", 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) {
@@ -6910,6 +6926,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$9++ : _props_name, _props_renderType = props.renderType, renderType = _props_renderType === void 0 ? 0 : _props_renderType, shader = props.shader, uniformSemantics = props.uniformSemantics;
             _this.name = name;
@@ -6937,6 +6954,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 中会调用 引擎必须实现 ***********************/ /**
@@ -10073,7 +10125,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";
 
@@ -10304,15 +10356,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
@@ -10525,25 +10577,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
         ]);
@@ -10583,6 +10654,9 @@ var seed$6 = 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 = [
@@ -13328,7 +13402,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;
@@ -13415,7 +13491,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
@@ -13494,51 +13570,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, {
@@ -13603,7 +13688,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));
         }
@@ -15171,30 +15256,497 @@ function recursive(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, le
             centerX += points[i];
             centerY += points[i + 1];
         }
-        centerX /= points.length / 2;
-        centerY /= points.length / 2;
-        // Set center vertex
-        var count = verticesOffset;
-        vertices[count * 2] = centerX;
-        vertices[count * 2 + 1] = centerY;
-        var centerIndex = count++;
-        // Set edge vertices and indices
-        for(var i1 = 0; i1 < points.length; i1 += 2){
-            vertices[count * 2] = points[i1];
-            vertices[count * 2 + 1] = points[i1 + 1];
-            if (i1 > 0) {
-                indices[indicesOffset++] = count;
-                indices[indicesOffset++] = centerIndex;
-                indices[indicesOffset++] = count - 1;
+        centerX /= points.length / 2;
+        centerY /= points.length / 2;
+        // Set center vertex
+        var count = verticesOffset;
+        vertices[count * 2] = centerX;
+        vertices[count * 2 + 1] = centerY;
+        var centerIndex = count++;
+        // Set edge vertices and indices
+        for(var i1 = 0; i1 < points.length; i1 += 2){
+            vertices[count * 2] = points[i1];
+            vertices[count * 2 + 1] = points[i1 + 1];
+            if (i1 > 0) {
+                indices[indicesOffset++] = count;
+                indices[indicesOffset++] = centerIndex;
+                indices[indicesOffset++] = count - 1;
+            }
+            count++;
+        }
+        // Connect last point to the first edge point
+        indices[indicesOffset++] = centerIndex + 1;
+        indices[indicesOffset++] = centerIndex;
+        indices[indicesOffset++] = count - 1;
+    };
+    return Ellipse;
+}(ShapePrimitive);
+
+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 = 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 top-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);
             }
-            count++;
         }
-        // Connect last point to the first edge point
-        indices[indicesOffset++] = centerIndex + 1;
-        indices[indicesOffset++] = centerIndex;
-        indices[indicesOffset++] = count - 1;
-    };
-    return Ellipse;
+    ]);
+    return Rectangle;
 }(ShapePrimitive);
 
 var ShapePath = /*#__PURE__*/ function() {
@@ -15228,6 +15780,16 @@ var ShapePath = /*#__PURE__*/ function() {
                         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;
+                    }
             }
         }
         this.endPoly();
@@ -15268,6 +15830,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 top-left corner of the rectangle.
+   * @param y - The y-coordinate of the top-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.
@@ -15424,6 +16002,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;
@@ -15501,7 +16095,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;
         }
@@ -15566,16 +16160,18 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.buildPath = function buildPath(data) {
         this.path.clear();
-        switch(data.type){
+        var shapeData = data;
+        switch(shapeData.type){
             case 0:
                 {
-                    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];
@@ -15605,45 +16201,206 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 }
             case 2:
                 {
-                    var ellipseData = data;
-                    var ellipseParam = ellipseData.param;
-                    this.path.ellipse(0, 0, ellipseParam.xRadius, ellipseParam.yRadius);
+                    var ellipseData = shapeData;
+                    this.path.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
+                    this.setFillColor(ellipseData.fill);
+                    break;
+                }
+            case 1:
+                {
+                    var rectangleData = shapeData;
+                    this.path.rect(-rectangleData.width / 2, rectangleData.height / 2, rectangleData.width, rectangleData.height);
+                    this.setFillColor(rectangleData.fill);
+                    break;
+                }
+            case 4:
+                {
+                    var starData = shapeData;
+                    this.path.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
+                    this.setFillColor(starData.fill);
+                    break;
+                }
+            case 3:
+                {
+                    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) {
+exports.ShapePrimitiveType = void 0;
+(function(ShapePrimitiveType) {
     /**
    * 自定义图形
-   */ ComponentShapeType[ComponentShapeType["CUSTOM"] = 0] = "CUSTOM";
+   */ ShapePrimitiveType[ShapePrimitiveType["Custom"] = 0] = "Custom";
     /**
    * 矩形
-   */ ComponentShapeType[ComponentShapeType["RECTANGLE"] = 1] = "RECTANGLE";
+   */ ShapePrimitiveType[ShapePrimitiveType["Rectangle"] = 1] = "Rectangle";
     /**
    * 椭圆
-   */ ComponentShapeType[ComponentShapeType["ELLIPSE"] = 2] = "ELLIPSE";
+   */ ShapePrimitiveType[ShapePrimitiveType["Ellipse"] = 2] = "Ellipse";
     /**
    * 多边形
-   */ ComponentShapeType[ComponentShapeType["POLYGON"] = 3] = "POLYGON";
+   */ ShapePrimitiveType[ShapePrimitiveType["Polygon"] = 3] = "Polygon";
     /**
    * 星形
-   */ ComponentShapeType[ComponentShapeType["STAR"] = 4] = "STAR";
-})(exports.ComponentShapeType || (exports.ComponentShapeType = {}));
+   */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
+})(exports.ShapePrimitiveType || (exports.ShapePrimitiveType = {}));
 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);
     function CameraController(engine, props) {
@@ -16014,8 +16771,8 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
                 0
             ]
         };
+        _this.duringPlay = false;
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
-        _this.hasBeenAddedToComposition = false;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -16052,7 +16809,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;
@@ -16076,32 +16832,35 @@ 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() {
+        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() {
+        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;
         }
@@ -16269,7 +17028,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 = [];
     }
@@ -16277,6 +17038,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);
@@ -16481,6 +17274,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 = [];
@@ -16573,6 +17367,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;
     };
@@ -16724,7 +17524,9 @@ var PlayableTraversalMode;
 var tempQuat$1 = new Quaternion();
 var seed$4 = 1;
 // TODO 继承 Component
-var Transform = /*#__PURE__*/ function() {
+/**
+ *
+ */ var Transform = /*#__PURE__*/ function() {
     function Transform(props, parent) {
         if (props === void 0) props = {};
         this.taggedProperties = {};
@@ -17189,7 +17991,11 @@ var Transform = /*#__PURE__*/ function() {
     return Transform;
 }();
 
-var EventEmitter = function EventEmitter() {
+/**
+ *
+ */ /**
+ * 事件监听器
+ */ var EventEmitter = function EventEmitter() {
     var _this = this;
     var _this1 = this;
     this.listeners = {};
@@ -17283,17 +18089,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;
         /**
    * 元素动画的速度
@@ -17424,12 +18228,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         }
     };
     /**
-   * 元素动画结束播放时回调函数
-   * @override
-   */ _proto.onEnd = function onEnd() {
-    // OVERRIDE
-    };
-    /**
    * 通过指定 r、g、b、a 值设置元素的颜色
    * @param {number} r
    * @param {number} g
@@ -17442,17 +18240,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;
     };
     /**
    * 获取元素变换包括位置、旋转、缩放
@@ -17534,14 +18342,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) {
@@ -17565,7 +18365,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;){
@@ -17749,25 +18549,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) {
@@ -17812,6 +18641,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;
@@ -22576,6 +23421,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);
@@ -22679,14 +23525,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();
             }
@@ -22729,26 +23567,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;
@@ -22776,7 +23598,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);
@@ -23294,9 +24116,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);
@@ -23341,16 +24160,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() {
@@ -23366,7 +24185,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;
@@ -23508,9 +24327,9 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
             }
         }
         if (hasInput) {
-            compositionComponent.showItems();
+            compositionComponent.item.setActive(true);
         } else {
-            compositionComponent.hideItems();
+            compositionComponent.item.setActive(false);
         }
     };
     return SubCompositionMixerPlayable;
@@ -24175,6 +24994,8 @@ exports.TextComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         /**
    * 文本行数
    */ _this.lineCount = 0;
+        _this.SCALE_FACTOR = 0.1;
+        _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MText" + seed$2++;
         _this.geometry = _this.createGeometry(glContext.TRIANGLES);
         if (props) {
@@ -24540,7 +25361,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
@@ -27738,7 +28559,7 @@ 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) {
                     for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
                         var componentPath = _step2.value;
                         var componentData = componentMap[componentPath.id];
@@ -27834,13 +28655,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);
         }
@@ -27848,7 +28674,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);
         }
@@ -27856,7 +28685,9 @@ var SceneTicking = /*#__PURE__*/ function() {
             this.lateUpdate.removeComponent(obj);
         }
     };
-    _proto.clear = function clear() {
+    /**
+   *
+   */ _proto.clear = function clear() {
         this.update.clear();
         this.lateUpdate.clear();
     };
@@ -27947,11 +28778,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 = {};
         /**
@@ -27973,6 +28809,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) {
@@ -28062,7 +28899,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * @param visible - 是否可见
    */ _proto.setVisible = function setVisible(visible) {
         this.items.forEach(function(item) {
-            item.setVisible(visible);
+            item.setActive(visible);
         });
     };
     /**
@@ -28072,7 +28909,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) {
@@ -28163,7 +29000,8 @@ 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);
     };
@@ -28215,12 +29053,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;
@@ -28311,11 +29155,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:
                         {
@@ -28339,11 +29183,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;
+                }
             }
         }
     };
@@ -30669,7 +31516,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$1 = "2.1.0-alpha.9";
+var version$1 = "2.1.0-beta.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -30705,22 +31552,7 @@ var _obj3;
  * 必须初始化的 uniform 的 map 对象（THREE 必须在初始化的时候赋值）
  */ var TEXTURE_UNIFORM_MAP = [
     "uMaskTex",
-    "uSampler0",
-    "uSampler1",
-    "uSampler2",
-    "uSampler3",
-    "uSampler4",
-    "uSampler5",
-    "uSampler6",
-    "uSampler7",
-    "uSampler8",
-    "uSampler9",
-    "uSampler10",
-    "uSampler11",
-    "uSampler12",
-    "uSampler13",
-    "uSampler14",
-    "uSampler15",
+    "_MainTex",
     "uColorOverLifetime",
     "uColorOverTrail"
 ];
@@ -30751,9 +31583,7 @@ var _obj3;
             vertex: (_shader_vertex = shader == null ? void 0 : shader.vertex) != null ? _shader_vertex : "",
             fragment: (_shader_fragment = shader == null ? void 0 : shader.fragment) != null ? _shader_fragment : ""
         });
-        for(var i = 0; i < exports.maxSpriteMeshItemCount; i++){
-            _this.uniforms["uSampler" + i] = new THREE__namespace.Uniform(null);
-        }
+        _this.uniforms["_MainTex"] = new THREE__namespace.Uniform(null);
         _this.uniforms["uEditorTransform"] = new THREE__namespace.Uniform([
             1,
             1,
@@ -32313,7 +33143,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.1.0-alpha.9";
+var version = "2.1.0-beta.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;