@galacean/effects-threejs 2.1.0-alpha.10 → 2.1.0-alpha.11

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.10
+ * Version: v2.1.0-alpha.11
  */
 
 'use strict';
@@ -2045,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();
             }
@@ -2090,7 +2090,7 @@ function getDirectStore(target) {
             get: /**
    * 组件是否可以更新，true 更新，false 不更新
    */ function get() {
-                return this.item.getVisible() && this.enabled;
+                return this.item.isActive && this.enabled;
             }
         },
         {
@@ -3792,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;
@@ -3823,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);
-__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) {
@@ -6939,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;
@@ -6966,6 +6954,19 @@ 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: "blending",
             set: /******** effects-core 中会调用 引擎必须实现 ***********************/ /**
@@ -10333,15 +10334,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
@@ -10554,25 +10555,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
         ]);
@@ -15783,70 +15803,79 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.buildPath = function buildPath(data) {
         this.path.clear();
-        for(var _iterator = _create_for_of_iterator_helper_loose(data.shapeDatas), _step; !(_step = _iterator()).done;){
-            var shapeData = _step.value;
-            switch(shapeData.type){
-                case 0:
-                    {
-                        var customData = shapeData;
-                        var points = customData.points;
-                        var easingIns = customData.easingIns;
-                        var easingOuts = customData.easingOuts;
-                        this.curveValues = [];
-                        for(var _iterator1 = _create_for_of_iterator_helper_loose(customData.shapes), _step1; !(_step1 = _iterator1()).done;){
-                            var shape = _step1.value;
-                            var indices = shape.indexes;
-                            for(var i = 1; i < indices.length; i++){
-                                var pointIndex = indices[i];
-                                var lastPointIndex = indices[i - 1];
-                                this.curveValues.push({
-                                    point: points[pointIndex.point],
-                                    controlPoint1: easingOuts[lastPointIndex.easingOut],
-                                    controlPoint2: easingIns[pointIndex.easingIn]
-                                });
-                            }
-                            // Push the last curve
+        var shapeData = data;
+        switch(shapeData.type){
+            case 0:
+                {
+                    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.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];
+                            var lastPointIndex = indices[i - 1];
                             this.curveValues.push({
-                                point: points[indices[0].point],
-                                controlPoint1: easingOuts[indices[indices.length - 1].easingOut],
-                                controlPoint2: easingIns[indices[0].easingIn]
+                                point: points[pointIndex.point],
+                                controlPoint1: easingOuts[lastPointIndex.easingOut],
+                                controlPoint2: easingIns[pointIndex.easingIn]
                             });
                         }
-                        this.path.moveTo(this.curveValues[this.curveValues.length - 1].point.x, this.curveValues[this.curveValues.length - 1].point.y);
-                        for(var _iterator2 = _create_for_of_iterator_helper_loose(this.curveValues), _step2; !(_step2 = _iterator2()).done;){
-                            var curveValue = _step2.value;
-                            var point = curveValue.point;
-                            var control1 = curveValue.controlPoint1;
-                            var control2 = curveValue.controlPoint2;
-                            this.path.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, point.x, point.y, 1);
-                        }
-                        break;
-                    }
-                case 2:
-                    {
-                        var ellipseData = shapeData;
-                        this.path.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
-                        break;
-                    }
-                case 1:
-                    {
-                        var rectangleData = shapeData;
-                        this.path.rect(-rectangleData.width / 2, rectangleData.height / 2, rectangleData.width, rectangleData.height);
-                        break;
-                    }
-                case 4:
-                    {
-                        var starData = shapeData;
-                        this.path.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
-                        break;
+                        // Push the last curve
+                        this.curveValues.push({
+                            point: points[indices[0].point],
+                            controlPoint1: easingOuts[indices[indices.length - 1].easingOut],
+                            controlPoint2: easingIns[indices[0].easingIn]
+                        });
                     }
-                case 3:
-                    {
-                        var polygonData = shapeData;
-                        this.path.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
-                        break;
+                    this.path.moveTo(this.curveValues[this.curveValues.length - 1].point.x, this.curveValues[this.curveValues.length - 1].point.y);
+                    for(var _iterator1 = _create_for_of_iterator_helper_loose(this.curveValues), _step1; !(_step1 = _iterator1()).done;){
+                        var curveValue = _step1.value;
+                        var point = curveValue.point;
+                        var control1 = curveValue.controlPoint1;
+                        var control2 = curveValue.controlPoint2;
+                        this.path.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, point.x, point.y, 1);
                     }
-            }
+                    break;
+                }
+            case 2:
+                {
+                    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) {
@@ -15866,26 +15895,24 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
 exports.ShapeComponent = __decorate([
     effectsClass("ShapeComponent")
 ], exports.ShapeComponent);
-exports.ShapeType = void 0;
-(function(ShapeType) {
+exports.ShapePrimitiveType = void 0;
+(function(ShapePrimitiveType) {
     /**
    * 自定义图形
-   */ ShapeType[ShapeType["Custom"] = 0] = "Custom";
+   */ ShapePrimitiveType[ShapePrimitiveType["Custom"] = 0] = "Custom";
     /**
    * 矩形
-   */ ShapeType[ShapeType["Rectangle"] = 1] = "Rectangle";
+   */ ShapePrimitiveType[ShapePrimitiveType["Rectangle"] = 1] = "Rectangle";
     /**
    * 椭圆
-   */ ShapeType[ShapeType["Ellipse"] = 2] = "Ellipse";
+   */ ShapePrimitiveType[ShapePrimitiveType["Ellipse"] = 2] = "Ellipse";
     /**
    * 多边形
-   */ ShapeType[ShapeType["Polygon"] = 3] = "Polygon";
+   */ ShapePrimitiveType[ShapePrimitiveType["Polygon"] = 3] = "Polygon";
     /**
    * 星形
-   */ ShapeType[ShapeType["Star"] = 4] = "Star";
-})(exports.ShapeType || (exports.ShapeType = {}));
-var ShapeData = function ShapeData() {
-};
+   */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
+})(exports.ShapePrimitiveType || (exports.ShapePrimitiveType = {}));
 exports.ShapeConnectType = void 0;
 (function(ShapeConnectType) {})(exports.ShapeConnectType || (exports.ShapeConnectType = {}));
 exports.ShapePointType = void 0;
@@ -16388,7 +16415,6 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             ]
         };
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
-        _this.hasBeenAddedToComposition = false;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -16425,7 +16451,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;
@@ -16449,16 +16474,25 @@ 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;
+            this.item.composition.removeInteractiveItem(this.item, this.item.props.content.options.type);
+            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;
+        }
+        var options = this.item.props.content.options;
+        if (this.item.composition) {
+            this.item.composition.addInteractiveItem(this.item, options.type);
+        }
     };
     _proto.onUpdate = function onUpdate(dt) {
         var _this_previewContent;
@@ -16466,15 +16500,6 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             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;
-            }
-            var options = this.item.props.content.options;
-            this.item.composition.addInteractiveItem(this.item, options.type);
-            this.hasBeenAddedToComposition = true;
-        }
         if (!this.dragEvent || !this.bouncingArg) {
             return;
         }
@@ -16888,6 +16913,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 = [];
@@ -16980,6 +17006,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;
     };
@@ -17696,17 +17728,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;
         /**
    * 元素动画的速度
@@ -17837,12 +17867,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         }
     };
     /**
-   * 元素动画结束播放时回调函数
-   * @override
-   */ _proto.onEnd = function onEnd() {
-    // OVERRIDE
-    };
-    /**
    * 通过指定 r、g、b、a 值设置元素的颜色
    * @param {number} r
    * @param {number} g
@@ -17855,17 +17879,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;
     };
     /**
    * 获取元素变换包括位置、旋转、缩放
@@ -17947,14 +17981,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) {
@@ -17978,7 +18004,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;){
@@ -18254,6 +18280,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;
@@ -23018,6 +23060,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);
@@ -23121,14 +23164,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();
             }
@@ -23171,26 +23206,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;
@@ -23218,7 +23237,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);
@@ -23736,9 +23755,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);
@@ -23783,16 +23799,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() {
@@ -23808,7 +23824,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;
@@ -23950,9 +23966,9 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
             }
         }
         if (hasInput) {
-            compositionComponent.showItems();
+            compositionComponent.item.setActive(true);
         } else {
-            compositionComponent.hideItems();
+            compositionComponent.item.setActive(false);
         }
     };
     return SubCompositionMixerPlayable;
@@ -28407,6 +28423,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 动画播放速度
    */ _this.speed = 1;
         /**
+   * 合成是否结束
+   */ _this.isEnded = false;
+        /**
    * 用于保存与当前合成相关的插件数据
    */ _this.loaderData = {};
         /**
@@ -28428,6 +28447,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) {
@@ -28517,7 +28537,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * @param visible - 是否可见
    */ _proto.setVisible = function setVisible(visible) {
         this.items.forEach(function(item) {
-            item.setVisible(visible);
+            item.setActive(visible);
         });
     };
     /**
@@ -28527,7 +28547,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) {
@@ -28618,7 +28638,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);
     };
@@ -28670,12 +28691,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;
@@ -28766,11 +28793,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:
                         {
@@ -28794,11 +28821,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;
+                }
             }
         }
     };
@@ -31124,7 +31154,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.10";
+var version$1 = "2.1.0-alpha.11";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -32768,7 +32798,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.1.0-alpha.10";
+var version = "2.1.0-alpha.11";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -32864,7 +32894,6 @@ exports.SemanticMap = SemanticMap;
 exports.SerializationHelper = SerializationHelper;
 exports.ShaderFactory = ShaderFactory;
 exports.ShaderVariant = ShaderVariant;
-exports.ShapeData = ShapeData;
 exports.SpriteLoader = SpriteLoader;
 exports.StaticValue = StaticValue;
 exports.TEMPLATE_USE_OFFSCREEN_CANVAS = TEMPLATE_USE_OFFSCREEN_CANVAS;