@galacean/effects-threejs 2.1.0-alpha.7 → 2.1.0-alpha.8

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.7
+ * Version: v2.1.0-alpha.8
  */
 
 'use strict';
@@ -978,7 +978,6 @@ var PluginSystem = /*#__PURE__*/ function() {
 var pluginInfoMap = {
     "alipay-downgrade": "@galacean/effects-plugin-alipay-downgrade",
     "editor-gizmo": "@galacean/effects-plugin-editor-gizmo",
-    "tree": "@galacean/effects-plugin-model",
     "model": "@galacean/effects-plugin-model",
     "orientation-transformer": "@galacean/effects-plugin-orientation-transformer",
     "spine": "@galacean/effects-plugin-spine"
@@ -1410,6 +1409,12 @@ var CameraClipMode;
     /**
      * 贝塞尔曲线四元数
      */ ValueType[ValueType["BEZIER_CURVE_QUAT"] = 23] = "BEZIER_CURVE_QUAT";
+    /**
+     * 颜色曲线
+     */ ValueType[ValueType["COLOR_CURVE"] = 24] = "COLOR_CURVE";
+    /**
+     * Vector4 曲线
+     */ ValueType[ValueType["VECTOR4_CURVE"] = 25] = "VECTOR4_CURVE";
 })(ValueType || (ValueType = {}));
 /**
  * 关键帧类型
@@ -1646,10 +1651,15 @@ var DataType;
     DataType["SpriteColorTrack"] = "SpriteColorTrack";
     DataType["ActivationTrack"] = "ActivationTrack";
     DataType["SubCompositionTrack"] = "SubCompositionTrack";
+    DataType["FloatPropertyTrack"] = "FloatPropertyTrack";
+    DataType["ColorPropertyTrack"] = "ColorPropertyTrack";
+    DataType["Vector4PropertyTrack"] = "Vector4PropertyTrack";
     DataType["TransformPlayableAsset"] = "TransformPlayableAsset";
     DataType["SpriteColorPlayableAsset"] = "SpriteColorPlayableAsset";
     DataType["ActivationPlayableAsset"] = "ActivationPlayableAsset";
     DataType["SubCompositionPlayableAsset"] = "SubCompositionPlayableAsset";
+    DataType["FloatPropertyPlayableAsset"] = "FloatPropertyPlayableAsset";
+    DataType["ColorPropertyPlayableAsset"] = "ColorPropertyPlayableAsset";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
@@ -5269,9 +5279,8 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
     function PostProcessVolume() {
         var _this;
         _this = Behaviour.apply(this, arguments) || this;
-        _this.useHDR = true;
         // Bloom
-        _this.useBloom = true;
+        _this.bloomEnabled = true;
         _this.threshold = 1.0;
         _this.bloomIntensity = 1.0;
         // ColorAdjustments
@@ -5283,7 +5292,7 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
         _this.vignetteSmoothness = 0.4;
         _this.vignetteRoundness = 1.0;
         // ToneMapping
-        _this.useToneMapping = true // 1: true, 0: false
+        _this.toneMappingEnabled = true // 1: true, 0: false
         ;
         return _this;
     }
@@ -5291,18 +5300,14 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
     _proto.onStart = function onStart() {
         var composition = this.item.composition;
         if (composition) {
-            composition.globalVolume = this;
-            composition.createRenderFrame();
+            composition.renderFrame.globalVolume = this;
         }
     };
     return PostProcessVolume;
 }(Behaviour);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "useHDR", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "useBloom", void 0);
+], exports.PostProcessVolume.prototype, "bloomEnabled", void 0);
 __decorate([
     serialize()
 ], exports.PostProcessVolume.prototype, "threshold", void 0);
@@ -5329,7 +5334,7 @@ __decorate([
 ], exports.PostProcessVolume.prototype, "vignetteRoundness", void 0);
 __decorate([
     serialize()
-], exports.PostProcessVolume.prototype, "useToneMapping", void 0);
+], exports.PostProcessVolume.prototype, "toneMappingEnabled", void 0);
 exports.PostProcessVolume = __decorate([
     effectsClass("PostProcessVolume")
 ], exports.PostProcessVolume);
@@ -10366,13 +10371,15 @@ var BloomThresholdPass = /*#__PURE__*/ function(RenderPass) {
         renderer.setFramebuffer(this.framebuffer);
     };
     _proto.execute = function execute(renderer) {
+        var _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 threshold = renderer.renderingData.currentFrame.globalVolume.threshold;
+        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;
         this.screenMesh.material.setFloat("_Threshold", threshold);
         renderer.renderMeshes([
             this.screenMesh
@@ -10585,13 +10592,14 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
             depthAction: exports.TextureStoreAction.clear,
             stencilAction: exports.TextureStoreAction.clear
         });
-        var _renderer_renderingData_currentFrame_globalVolume = renderer.renderingData.currentFrame.globalVolume, useBloom = _renderer_renderingData_currentFrame_globalVolume.useBloom, bloomIntensity = _renderer_renderingData_currentFrame_globalVolume.bloomIntensity, brightness = _renderer_renderingData_currentFrame_globalVolume.brightness, saturation = _renderer_renderingData_currentFrame_globalVolume.saturation, contrast = _renderer_renderingData_currentFrame_globalVolume.contrast, useToneMapping = _renderer_renderingData_currentFrame_globalVolume.useToneMapping, vignetteIntensity = _renderer_renderingData_currentFrame_globalVolume.vignetteIntensity, vignetteSmoothness = _renderer_renderingData_currentFrame_globalVolume.vignetteSmoothness, vignetteRoundness = _renderer_renderingData_currentFrame_globalVolume.vignetteRoundness;
+        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;
         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(useBloom));
-        if (useBloom) {
+        this.screenMesh.material.setInt("_UseBloom", Number(bloomEnabled));
+        if (bloomEnabled) {
             this.screenMesh.material.setTexture("_GaussianTex", this.mainTexture);
             this.screenMesh.material.setFloat("_BloomIntensity", bloomIntensity);
         }
@@ -10602,7 +10610,7 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
             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(useToneMapping));
+        this.screenMesh.material.setInt("_UseToneMapping", Number(toneMappingEnabled));
         renderer.renderMeshes([
             this.screenMesh
         ]);
@@ -10626,7 +10634,7 @@ var seed$6 = 1;
             1,
             0,
             0
-        ] : _options_editorTransform, globalVolume = options.globalVolume, _options_clearAction = options.clearAction, clearAction = _options_clearAction === void 0 ? {
+        ] : _options_editorTransform, globalVolume = options.globalVolume, _options_postProcessingEnabled = options.postProcessingEnabled, postProcessingEnabled = _options_postProcessingEnabled === void 0 ? false : _options_postProcessingEnabled, _options_clearAction = options.clearAction, clearAction = _options_clearAction === void 0 ? {
             colorAction: exports.TextureLoadAction.whatever,
             stencilAction: exports.TextureLoadAction.clear,
             depthAction: exports.TextureLoadAction.whatever
@@ -10640,10 +10648,10 @@ var seed$6 = 1;
         var depthStencilAttachment;
         var drawObjectPassClearAction = {};
         this.renderer = renderer;
-        if (this.globalVolume) {
-            var useHDR = this.globalVolume.useHDR;
+        if (postProcessingEnabled) {
+            var enableHDR = true;
             // 使用HDR浮点纹理，FLOAT在IOS上报错，使用HALF_FLOAT
-            var textureType = useHDR ? glContext.HALF_FLOAT : glContext.UNSIGNED_BYTE;
+            var textureType = enableHDR ? glContext.HALF_FLOAT : glContext.UNSIGNED_BYTE;
             attachments = [
                 {
                     texture: {
@@ -10675,7 +10683,7 @@ var seed$6 = 1;
             })
         ];
         this.setRenderPasses(renderPasses);
-        if (this.globalVolume) {
+        if (postProcessingEnabled) {
             var sceneTextureHandle = new RenderTargetHandle(engine); //保存后处理前的屏幕图像
             var gaussianStep = 7; // 高斯模糊的迭代次数，次数越高模糊范围越大
             var viewport = [
@@ -10685,7 +10693,8 @@ var seed$6 = 1;
                 this.renderer.getHeight() / 2
             ];
             var gaussianDownResults = new Array(gaussianStep); //存放多个高斯Pass的模糊结果，用于Bloom
-            var textureType1 = this.globalVolume.useHDR ? glContext.HALF_FLOAT : glContext.UNSIGNED_BYTE;
+            var enableHDR1 = true;
+            var textureType1 = enableHDR1 ? glContext.HALF_FLOAT : glContext.UNSIGNED_BYTE;
             var bloomThresholdPass = new BloomThresholdPass(renderer, {
                 name: "BloomThresholdPass",
                 attachments: [
@@ -11681,28 +11690,6 @@ var Renderer = /*#__PURE__*/ function() {
     return Renderer;
 }();
 
-/**
- * 后处理配置
- */ var defaultGlobalVolume = {
-    useHDR: false,
-    /***** Material Uniform *****/ // Bloom
-    useBloom: true,
-    threshold: 1.0,
-    bloomIntensity: 1.0,
-    // ColorAdjustments
-    brightness: 1.0,
-    saturation: 1.0,
-    contrast: 1.0,
-    // Vignette
-    // vignetteColor: new math.Color(0, 0, 0, 1),
-    // vignetteCenter: new math.Vector2(0.5, 0.5),
-    vignetteIntensity: 0.2,
-    vignetteSmoothness: 0.4,
-    vignetteRoundness: 1.0,
-    // ToneMapping
-    useToneMapping: true
-};
-
 var toHalf = function() {
     var floatView = new Float32Array(1);
     var int32View = new Int32Array(floatView.buffer);
@@ -11941,35 +11928,6 @@ function numberToFix(a, fixed) {
     return Math.floor(a * base) / base;
 }
 
-function _is_native_reflect_construct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-    try {
-        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-        return true;
-    } catch (e) {
-        return false;
-    }
-}
-
-function _construct(Parent, args, Class) {
-    if (_is_native_reflect_construct()) _construct = Reflect.construct;
-    else {
-        _construct = function construct(Parent, args, Class) {
-            var a = [
-                null
-            ];
-            a.push.apply(a, args);
-            var Constructor = Function.bind.apply(Parent, a);
-            var instance = new Constructor();
-            if (Class) _set_prototype_of(instance, Class.prototype);
-            return instance;
-        };
-    }
-    return _construct.apply(null, arguments);
-}
-
 var keyframeInfo = {
     /**
    * 根据不同关键帧类型，获取位于曲线上的点
@@ -12513,17 +12471,6 @@ var QuaternionInner = /*#__PURE__*/ function() {
     return QuaternionInner;
 }();
 
-var SPRITE_VERTEX_STRIDE = 6;
-var SEMANTIC_PRE_COLOR_ATTACHMENT_0 = "PRE_COLOR_0";
-var SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0 = "PRE_COLOR_SIZE_0";
-var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = "PRE_MAIN_COLOR_0";
-var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0 = "PRE_MAIN_COLOR_SIZE_0";
-var PLAYER_OPTIONS_ENV_EDITOR = "editor";
-var HELP_LINK = {
-    "Item duration can't be less than 0": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#AOnQS",
-    "ValueType: 21/22 is not supported": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#smO1b"
-};
-
 var CURVE_PRO_TIME = 0;
 var CURVE_PRO_VALUE = 1;
 var CURVE_PRO_IN_TANGENT = 2;
@@ -13214,67 +13161,6 @@ var BezierCurveQuat = /*#__PURE__*/ function(ValueGetter) {
     };
     return BezierCurveQuat;
 }(ValueGetter);
-var _obj$4;
-var map$1 = (_obj$4 = {}, _obj$4[ValueType.RANDOM] = function(props) {
-    if (_instanceof1(props[0], Array)) {
-        return new RandomVectorValue(props);
-    }
-    return new RandomValue(props);
-}, _obj$4[ValueType.CONSTANT] = function(props) {
-    return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC2] = function(props) {
-    return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC3] = function(props) {
-    return new StaticValue(props);
-}, _obj$4[ValueType.CONSTANT_VEC4] = function(props) {
-    return new StaticValue(props);
-}, _obj$4[ValueType.RGBA_COLOR] = function(props) {
-    return new StaticValue(props);
-}, _obj$4[ValueType.COLORS] = function(props) {
-    return new RandomSetValue(props.map(function(c) {
-        return colorToArr$1(c, false);
-    }));
-}, _obj$4[ValueType.LINE] = function(props) {
-    if (props.length === 2 && props[0][0] === 0 && props[1][0] === 1) {
-        return new LinearValue([
-            props[0][1],
-            props[1][1]
-        ]);
-    }
-    return new LineSegments(props);
-}, _obj$4[ValueType.GRADIENT_COLOR] = function(props) {
-    return new GradientValue(props);
-}, _obj$4[ValueType.LINEAR_PATH] = function(pros) {
-    return new PathSegments(pros);
-}, _obj$4[ValueType.BEZIER_CURVE] = function(props) {
-    if (props.length === 1) {
-        return new StaticValue(props[0][1][1]);
-    }
-    return new BezierCurve(props);
-}, _obj$4[ValueType.BEZIER_CURVE_PATH] = function(props) {
-    if (props[0].length === 1) {
-        return new StaticValue(_construct(Vector3, [].concat(props[1][0])));
-    }
-    return new BezierCurvePath(props);
-}, _obj$4[ValueType.BEZIER_CURVE_QUAT] = function(props) {
-    if (props[0].length === 1) {
-        return new StaticValue(_construct(Quaternion, [].concat(props[1][0])));
-    }
-    return new BezierCurveQuat(props);
-}, _obj$4);
-function createValueGetter(args) {
-    if (!args || !isNaN(+args)) {
-        return new StaticValue(args || 0);
-    }
-    if (_instanceof1(args, ValueGetter)) {
-        return args;
-    }
-    if (isFunction(map$1[args[0]])) {
-        return map$1[args[0]](args[1]);
-    } else {
-        throw new Error("ValueType: " + args[0] + " is not supported, see " + HELP_LINK["ValueType: 21/22 is not supported"] + ".");
-    }
-}
 function lineSegIntegrate(t, t0, t1, y0, y1) {
     var h = t - t0;
     return (y0 + y0 + (y1 - y0) * h / (t1 - t0)) * h / 2;
@@ -13351,6 +13237,164 @@ function createKeyFrameMeta() {
     };
 }
 
+function _is_native_reflect_construct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
+
+function _construct(Parent, args, Class) {
+    if (_is_native_reflect_construct()) _construct = Reflect.construct;
+    else {
+        _construct = function construct(Parent, args, Class) {
+            var a = [
+                null
+            ];
+            a.push.apply(a, args);
+            var Constructor = Function.bind.apply(Parent, a);
+            var instance = new Constructor();
+            if (Class) _set_prototype_of(instance, Class.prototype);
+            return instance;
+        };
+    }
+    return _construct.apply(null, arguments);
+}
+
+var Vector4Curve = /*#__PURE__*/ function(ValueGetter) {
+    _inherits(Vector4Curve, ValueGetter);
+    function Vector4Curve() {
+        var _this;
+        _this = ValueGetter.apply(this, arguments) || this;
+        _this.value = new Vector4();
+        return _this;
+    }
+    var _proto = Vector4Curve.prototype;
+    _proto.onCreate = function onCreate(arg) {
+        this.xCurve = createValueGetter(arg.x);
+        this.yCurve = createValueGetter(arg.y);
+        this.zCurve = createValueGetter(arg.z);
+        this.wCurve = createValueGetter(arg.w);
+    };
+    _proto.getValue = function getValue(t) {
+        var x = this.xCurve.getValue(t);
+        var y = this.yCurve.getValue(t);
+        var z = this.zCurve.getValue(t);
+        var w = this.wCurve.getValue(t);
+        this.value.set(x, y, z, w);
+        return this.value;
+    };
+    return Vector4Curve;
+}(ValueGetter);
+
+var SPRITE_VERTEX_STRIDE = 6;
+var SEMANTIC_PRE_COLOR_ATTACHMENT_0 = "PRE_COLOR_0";
+var SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0 = "PRE_COLOR_SIZE_0";
+var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = "PRE_MAIN_COLOR_0";
+var SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0 = "PRE_MAIN_COLOR_SIZE_0";
+var PLAYER_OPTIONS_ENV_EDITOR = "editor";
+var HELP_LINK = {
+    "Item duration can't be less than 0": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#AOnQS",
+    "ValueType: 21/22 is not supported": "https://galacean.antgroup.com/effects/user/gasrv4ka5sacrwpg#smO1b"
+};
+
+var _obj$4;
+var map$1 = (_obj$4 = {}, _obj$4[ValueType.RANDOM] = function(props) {
+    if (_instanceof1(props[0], Array)) {
+        return new RandomVectorValue(props);
+    }
+    return new RandomValue(props);
+}, _obj$4[ValueType.CONSTANT] = function(props) {
+    return new StaticValue(props);
+}, _obj$4[ValueType.CONSTANT_VEC2] = function(props) {
+    return new StaticValue(props);
+}, _obj$4[ValueType.CONSTANT_VEC3] = function(props) {
+    return new StaticValue(props);
+}, _obj$4[ValueType.CONSTANT_VEC4] = function(props) {
+    return new StaticValue(props);
+}, _obj$4[ValueType.RGBA_COLOR] = function(props) {
+    return new StaticValue(props);
+}, _obj$4[ValueType.COLORS] = function(props) {
+    return new RandomSetValue(props.map(function(c) {
+        return colorToArr$1(c, false);
+    }));
+}, _obj$4[ValueType.LINE] = function(props) {
+    if (props.length === 2 && props[0][0] === 0 && props[1][0] === 1) {
+        return new LinearValue([
+            props[0][1],
+            props[1][1]
+        ]);
+    }
+    return new LineSegments(props);
+}, _obj$4[ValueType.GRADIENT_COLOR] = function(props) {
+    return new GradientValue(props);
+}, _obj$4[ValueType.LINEAR_PATH] = function(pros) {
+    return new PathSegments(pros);
+}, _obj$4[ValueType.BEZIER_CURVE] = function(props) {
+    if (props.length === 1) {
+        return new StaticValue(props[0][1][1]);
+    }
+    return new BezierCurve(props);
+}, _obj$4[ValueType.BEZIER_CURVE_PATH] = function(props) {
+    if (props[0].length === 1) {
+        return new StaticValue(_construct(Vector3, [].concat(props[1][0])));
+    }
+    return new BezierCurvePath(props);
+}, _obj$4[ValueType.BEZIER_CURVE_QUAT] = function(props) {
+    if (props[0].length === 1) {
+        return new StaticValue(_construct(Quaternion, [].concat(props[1][0])));
+    }
+    return new BezierCurveQuat(props);
+}, _obj$4[ValueType.COLOR_CURVE] = function(props) {
+    return new ColorCurve(props);
+}, _obj$4[ValueType.VECTOR4_CURVE] = function(props) {
+    return new Vector4Curve(props);
+}, _obj$4);
+function createValueGetter(args) {
+    if (!args || !isNaN(+args)) {
+        return new StaticValue(args || 0);
+    }
+    if (_instanceof1(args, ValueGetter)) {
+        return args;
+    }
+    if (isFunction(map$1[args[0]])) {
+        return map$1[args[0]](args[1]);
+    } else {
+        throw new Error("ValueType: " + args[0] + " is not supported, see " + HELP_LINK["ValueType: 21/22 is not supported"] + ".");
+    }
+}
+
+var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
+    _inherits(ColorCurve, ValueGetter);
+    function ColorCurve() {
+        var _this;
+        _this = ValueGetter.apply(this, arguments) || this;
+        _this.value = new Color();
+        return _this;
+    }
+    var _proto = ColorCurve.prototype;
+    _proto.onCreate = function onCreate(arg) {
+        this.rCurve = createValueGetter(arg.r);
+        this.gCurve = createValueGetter(arg.g);
+        this.bCurve = createValueGetter(arg.b);
+        this.aCurve = createValueGetter(arg.a);
+    };
+    _proto.getValue = function getValue(t) {
+        var r = this.rCurve.getValue(t);
+        var g = this.gCurve.getValue(t);
+        var b = this.bCurve.getValue(t);
+        var a = this.aCurve.getValue(t);
+        this.value.set(r, g, b, a);
+        return this.value;
+    };
+    return ColorCurve;
+}(ValueGetter);
+
 var BaseRenderComponent = /*#__PURE__*/ function(RendererComponent) {
     _inherits(BaseRenderComponent, RendererComponent);
     function BaseRenderComponent(engine) {
@@ -15386,7 +15430,12 @@ var GraphicsPath = /*#__PURE__*/ function() {
         this.dirty = true;
         return this;
     };
-    _proto.moveTo = function moveTo(x, y) {
+    /**
+   * Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.
+   * @param x - The x-coordinate for the starting point.
+   * @param y - The y-coordinate for the starting point.
+   * @returns The instance of the current object for chaining.
+   */ _proto.moveTo = function moveTo(x, y) {
         this.instructions.push({
             action: "moveTo",
             data: [
@@ -15397,7 +15446,16 @@ var GraphicsPath = /*#__PURE__*/ function() {
         this.dirty = true;
         return this;
     };
-    _proto.ellipse = function ellipse(x, y, radiusX, radiusY, matrix) {
+    /**
+   * Draws an ellipse at the specified location and with the given x and y radii.
+   * An optional transformation can be applied, allowing for rotation, scaling, and translation.
+   * @param x - The x-coordinate of the center of the ellipse.
+   * @param y - The y-coordinate of the center of the ellipse.
+   * @param radiusX - The horizontal radius of the ellipse.
+   * @param radiusY - The vertical radius of the ellipse.
+   * @param transform - An optional `Matrix` object to apply a transformation to the ellipse. This can include rotations.
+   * @returns The instance of the current object for chaining.
+   */ _proto.ellipse = function ellipse(x, y, radiusX, radiusY, transform) {
         this.instructions.push({
             action: "ellipse",
             data: [
@@ -15405,7 +15463,29 @@ var GraphicsPath = /*#__PURE__*/ function() {
                 y,
                 radiusX,
                 radiusY,
-                matrix
+                transform
+            ]
+        });
+        this.dirty = true;
+        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.instructions.push({
+            action: "rect",
+            data: [
+                x,
+                y,
+                w,
+                h,
+                transform
             ]
         });
         this.dirty = true;
@@ -15444,9 +15524,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         _this = RendererComponent.call(this, engine) || this;
         _this.path = new GraphicsPath();
         _this.curveValues = [];
-        _this.dirty = false;
-        _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nvarying vec4 vColor;\n\nuniform vec4 _Color;\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vColor = _Color;\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
-        _this.frag = "\nprecision highp float;\n\nvarying vec4 vColor;\n\nvoid main() {\n  vec4 color = vec4(1.0,1.0,1.0,1.0);\n  gl_FragColor = color;\n}\n";
+        _this.animated = false;
+        _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
+        _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  gl_FragColor = color;\n}\n";
         if (!_this.geometry) {
             _this.geometry = Geometry.create(engine, {
                 attributes: {
@@ -15496,10 +15576,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
     }
     var _proto = ShapeComponent.prototype;
     _proto.onUpdate = function onUpdate(dt) {
-        if (this.dirty) {
+        if (this.animated) {
             this.buildPath(this.data);
             this.buildGeometryFromPath(this.path.shapePath);
-        // this.dirty = false;
         }
     };
     _proto.render = function render(renderer) {
@@ -15606,7 +15685,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
         this.data = data;
-        this.dirty = true;
+        this.animated = true;
     };
     return ShapeComponent;
 }(RendererComponent);
@@ -15994,6 +16073,18 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             1,
             1
         ];
+        /**
+   * 拖拽X范围
+   */ _this.dragRange = {
+            dxRange: [
+                0,
+                0
+            ],
+            dyRange: [
+                0,
+                0
+            ]
+        };
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
         _this.hasBeenAddedToComposition = false;
         _this.getHitTestParams = function(force) {
@@ -16013,6 +16104,24 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = InteractComponent.prototype;
+    _proto.getDragRangeX = function getDragRangeX() {
+        return this.dragRange.dxRange;
+    };
+    _proto.setDragRangeX = function setDragRangeX(min, max) {
+        this.dragRange.dxRange = [
+            min,
+            max
+        ];
+    };
+    _proto.getDragRangeY = function getDragRangeY() {
+        return this.dragRange.dyRange;
+    };
+    _proto.setDragRangeY = function setDragRangeY(min, max) {
+        this.dragRange.dyRange = [
+            min,
+            max
+        ];
+    };
     _proto.onStart = function onStart() {
         var _this = this;
         var options = this.item.props.content.options;
@@ -16056,6 +16165,10 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         }
         (_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;
@@ -16087,7 +16200,6 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         if (!(evt == null ? void 0 : evt.cameraParam) || !this.canInteract() || !this.item.composition) {
             return;
         }
-        var options = this.item.props.content.options;
         var _evt_cameraParam = evt.cameraParam, position = _evt_cameraParam.position, fov = _evt_cameraParam.fov;
         var dy = event.dy;
         var dx = event.dx * event.width / event.height;
@@ -16095,23 +16207,20 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         var sp = Math.tan(fov * Math.PI / 180 / 2) * Math.abs(depth);
         var height = dy * sp;
         var width = dx * sp;
+        var _this_dragRange = this.dragRange, dxRange = _this_dragRange.dxRange, dyRange = _this_dragRange.dyRange;
         var nx = position[0] - this.dragRatio[0] * width;
         var ny = position[1] - this.dragRatio[1] * height;
-        if (options.dxRange) {
-            var _options_dxRange = options.dxRange, min = _options_dxRange[0], max = _options_dxRange[1];
-            nx = clamp$1(nx, min, max);
-            if (nx !== min && nx !== max && min !== max) {
-                var _event_origin;
-                (_event_origin = event.origin) == null ? void 0 : _event_origin.preventDefault();
-            }
-        }
-        if (options.dyRange) {
-            var _options_dyRange = options.dyRange, min1 = _options_dyRange[0], max1 = _options_dyRange[1];
-            ny = clamp$1(ny, min1, max1);
-            if (ny !== min1 && ny !== max1 && min1 !== max1) {
-                var _event_origin1;
-                (_event_origin1 = event.origin) == null ? void 0 : _event_origin1.preventDefault();
-            }
+        var xMin = dxRange[0], xMax = dxRange[1];
+        var yMin = dyRange[0], yMax = dyRange[1];
+        nx = clamp$1(nx, xMin, xMax);
+        ny = clamp$1(ny, yMin, yMax);
+        if (nx !== xMin && nx !== xMax && xMin !== xMax) {
+            var _event_origin;
+            (_event_origin = event.origin) == null ? void 0 : _event_origin.preventDefault();
+        }
+        if (ny !== yMin && ny !== yMax && yMin !== yMax) {
+            var _event_origin1;
+            (_event_origin1 = event.origin) == null ? void 0 : _event_origin1.preventDefault();
         }
         this.item.composition.camera.position = new Vector3(nx, ny, depth);
     };
@@ -16192,6 +16301,15 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
         this.interactData = data;
+        if (data.options.type === InteractType.DRAG) {
+            var options = data.options;
+            if (options.dxRange) {
+                this.dragRange.dxRange = options.dxRange;
+            }
+            if (options.dyRange) {
+                this.dragRange.dyRange = options.dyRange;
+            }
+        }
     };
     _proto.canInteract = function canInteract() {
         var _this_item_composition;
@@ -16566,7 +16684,7 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         };
     }
     var _proto = PlayableOutput.prototype;
-    _proto.setSourcePlayeble = function setSourcePlayeble(playable, port) {
+    _proto.setSourcePlayable = function setSourcePlayable(playable, port) {
         if (port === void 0) port = 0;
         this.sourcePlayable = playable;
         this.sourceOutputPort = port;
@@ -17349,21 +17467,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return tf;
     };
     /**
-   * 获取元素内部节点的变换，目前只有场景树元素在使用
-   * @param itemId 元素id信息，如果带^就返回内部节点变换，否则返回自己的变换
-   * @returns 元素变换或内部节点变换
-   */ _proto.getNodeTransform = function getNodeTransform(itemId) {
-        for(var i = 0; i < this.components.length; i++){
-            var comp = this.components[1];
-            // @ts-expect-error
-            if (comp.getNodeTransform) {
-                // @ts-expect-error
-                return comp.getNodeTransform(itemId);
-            }
-        }
-        return this.transform;
-    };
-    /**
    * 设置元素在 3D 坐标轴上相对移动
    */ _proto.translate = function translate(x, y, z) {
         this.transform.translate(x, y, z);
@@ -17842,7 +17945,7 @@ exports.SpriteColorPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     return SpriteColorPlayableAsset;
 }(PlayableAsset);
 exports.SpriteColorPlayableAsset = __decorate([
-    effectsClass("SpriteColorPlayableAsset")
+    effectsClass(DataType.SpriteColorPlayableAsset)
 ], exports.SpriteColorPlayableAsset);
 exports.SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
     _inherits(SpriteComponent, BaseRenderComponent);
@@ -17861,6 +17964,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
     }
     var _proto = SpriteComponent.prototype;
     _proto.onUpdate = function onUpdate(dt) {
+        var _this = this;
         if (!this.isManualTimeSet) {
             this.frameAnimationTime += dt / 1000;
             this.isManualTimeSet = false;
@@ -17926,6 +18030,16 @@ exports.SpriteComponent = /*#__PURE__*/ function(BaseRenderComponent) {
                 dy
             ]);
         }
+        var video = this.renderer.texture.source.video;
+        if (video) {
+            if (time === 0 || time === this.item.duration) {
+                video.pause();
+            } else {
+                video.play().catch(function(e) {
+                    _this.engine.renderErrors.add(e);
+                });
+            }
+        }
     };
     _proto.onDestroy = function onDestroy() {
         if (this.item && this.item.composition) {
@@ -22431,7 +22545,7 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
     var _proto = TrackAsset.prototype;
     /**
    * 重写该方法以获取自定义对象绑定
-   */ _proto.resolveBinding = function resolveBinding() {
+   */ _proto.updateAnimatedObject = function updateAnimatedObject() {
         if (this.parent) {
             this.boundObject = this.parent.boundObject;
         }
@@ -22562,6 +22676,8 @@ var RuntimeClip = /*#__PURE__*/ function() {
             this.playable.play();
         }
         this.parentMixer.setInputWeight(this.playable, weight);
+        var clipTime = clip.toLocalTime(localTime);
+        this.playable.setTime(clipTime);
         // 判断动画是否结束
         if (ended) {
             if (_instanceof1(boundObject, exports.VFXItem) && !boundObject.ended) {
@@ -22576,8 +22692,6 @@ var RuntimeClip = /*#__PURE__*/ function() {
                 this.playable.pause();
             }
         }
-        var clipTime = clip.toLocalTime(localTime);
-        this.playable.setTime(clipTime);
     };
     _create_class(RuntimeClip, [
         {
@@ -22656,16 +22770,16 @@ exports.ActivationTrack = __decorate([
     effectsClass(DataType.ActivationTrack)
 ], exports.ActivationTrack);
 
-var FloatPropertyClipPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(FloatPropertyClipPlayable, Playable);
-    function FloatPropertyClipPlayable() {
+var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(PropertyClipPlayable, Playable);
+    function PropertyClipPlayable() {
         return Playable.apply(this, arguments);
     }
-    var _proto = FloatPropertyClipPlayable.prototype;
+    var _proto = PropertyClipPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
         this.value = this.curve.getValue(this.time);
     };
-    return FloatPropertyClipPlayable;
+    return PropertyClipPlayable;
 }(Playable);
 
 var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
@@ -22689,7 +22803,7 @@ var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
             var weight = this.getInputWeight(i);
             if (weight > 0) {
                 var propertyClipPlayable = this.getInput(i);
-                if (!_instanceof1(propertyClipPlayable, FloatPropertyClipPlayable)) {
+                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
                     console.error("FloatPropertyTrack added non-FloatPropertyPlayableAsset");
                     continue;
                 }
@@ -23204,11 +23318,11 @@ var SerializationHelper = /*#__PURE__*/ function() {
             for(var _iterator = _create_for_of_iterator_helper_loose(this.items), _step; !(_step = _iterator()).done;){
                 var item = _step.value;
                 item.composition = this.item.composition;
-                var itemData = item.props;
                 // 设置预合成作为元素时的时长、结束行为和渲染延时
-                if (exports.Item.isComposition(itemData)) {
+                if (exports.VFXItem.isComposition(item)) {
                     this.item.composition.refContent.push(item);
-                    var refId = itemData.content.options.refId;
+                    var compositionContent = item.props.content;
+                    var refId = compositionContent.options.refId;
                     var props = this.item.composition.refCompositionProps.get(refId);
                     if (!props) {
                         throw new Error("Referenced precomposition with Id: " + refId + " does not exist.");
@@ -23253,7 +23367,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() && !item.ended && !exports.VFXItem.isComposition(item) && !skip(item)) {
+            if (item.getVisible() && item.transform.getValid() && !exports.VFXItem.isComposition(item) && !skip(item)) {
                 var hitParams = item.getHitTestParams(force);
                 if (hitParams) {
                     var success = false;
@@ -23342,16 +23456,19 @@ var SerializationHelper = /*#__PURE__*/ function() {
             var sceneBinding = _step.value;
             sceneBinding.key.boundObject = sceneBinding.value;
         }
+        // 未了通过帧对比，需要保证和原有的 update 时机一致。
+        // 因此这边更新一次对象绑定，后续 timeline playable 中 sort tracks 的排序才能和原先的版本对上。
+        // 如果不需要严格保证和之前的 updata 时机一致，这边的更新和 timeline playable 中的 sortTracks 都能去掉。
         for(var _iterator1 = _create_for_of_iterator_helper_loose(this.timelineAsset.tracks), _step1; !(_step1 = _iterator1()).done;){
             var masterTrack = _step1.value;
-            this.resolveTrackBindingsWithRoot(masterTrack);
+            this.updateTrackAnimatedObject(masterTrack);
         }
     };
-    _proto.resolveTrackBindingsWithRoot = function resolveTrackBindingsWithRoot(track) {
+    _proto.updateTrackAnimatedObject = function updateTrackAnimatedObject(track) {
         for(var _iterator = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step; !(_step = _iterator()).done;){
             var subTrack = _step.value;
-            subTrack.resolveBinding();
-            this.resolveTrackBindingsWithRoot(subTrack);
+            subTrack.updateAnimatedObject();
+            this.updateTrackAnimatedObject(subTrack);
         }
     };
     return CompositionComponent;
@@ -23400,23 +23517,101 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
     return SubCompositionMixerPlayable;
 }(Playable);
 
-exports.FloatPropertyTrack = /*#__PURE__*/ function(TrackAsset) {
-    _inherits(FloatPropertyTrack, TrackAsset);
-    function FloatPropertyTrack() {
+var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(Vector4PropertyMixerPlayable, Playable);
+    function Vector4PropertyMixerPlayable() {
+        var _this;
+        _this = Playable.apply(this, arguments) || this;
+        _this.propertyName = "";
+        return _this;
+    }
+    var _proto = Vector4PropertyMixerPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        var boundObject = context.output.getUserData();
+        if (!boundObject) {
+            return;
+        }
+        var hasInput = false;
+        var value = boundObject[this.propertyName];
+        if (!_instanceof1(value, Vector4)) {
+            return;
+        }
+        value.setZero();
+        // evaluate the curve
+        for(var i = 0; i < this.getInputCount(); i++){
+            var weight = this.getInputWeight(i);
+            if (weight > 0) {
+                var propertyClipPlayable = this.getInput(i);
+                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
+                    console.error("Vector4PropertyTrack added non-Vector4PropertyPlayableAsset");
+                    continue;
+                }
+                var curveValue = propertyClipPlayable.value;
+                value.x += curveValue.x * weight;
+                value.y += curveValue.y * weight;
+                value.z += curveValue.z * weight;
+                value.w += curveValue.w * weight;
+                hasInput = true;
+            }
+        }
+        // set value
+        if (hasInput) {
+            boundObject[this.propertyName] = value;
+        }
+    };
+    return Vector4PropertyMixerPlayable;
+}(Playable);
+
+var PropertyTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(PropertyTrack, TrackAsset);
+    function PropertyTrack() {
         var _this;
         _this = TrackAsset.apply(this, arguments) || this;
+        _this.propertyNames = [];
         _this.path = "";
-        _this.propertyName = "";
         return _this;
     }
+    var _proto = PropertyTrack.prototype;
+    _proto.updateAnimatedObject = function updateAnimatedObject() {
+        var propertyNames = this.propertyNames;
+        var target = this.parent.boundObject;
+        for(var i = 0; i < propertyNames.length - 1; i++){
+            var property = target[propertyNames[i]];
+            if (property === undefined) {
+                console.error("The " + propertyNames[i] + " property of " + target + " was not found");
+            }
+            target = property;
+        }
+        this.boundObject = target;
+    };
+    _proto.fromData = function fromData(data) {
+        TrackAsset.prototype.fromData.call(this, data);
+        var propertyNames = this.path.split(".");
+        this.propertyNames = propertyNames;
+    };
+    return PropertyTrack;
+}(exports.TrackAsset);
+__decorate([
+    serialize()
+], PropertyTrack.prototype, "path", void 0);
+
+exports.FloatPropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
+    _inherits(FloatPropertyTrack, PropertyTrack);
+    function FloatPropertyTrack() {
+        return PropertyTrack.apply(this, arguments);
+    }
     var _proto = FloatPropertyTrack.prototype;
     _proto.createTrackMixer = function createTrackMixer(graph) {
         var mixer = new FloatPropertyMixerPlayable(graph);
-        mixer.propertyName = this.propertyName;
+        var propertyNames = this.propertyNames;
+        if (propertyNames.length > 0) {
+            var propertyName = propertyNames[propertyNames.length - 1];
+            mixer.propertyName = propertyName;
+        }
         return mixer;
     };
-    _proto.resolveBinding = function resolveBinding() {
-        var propertyNames = this.path.split(".");
+    _proto.updateAnimatedObject = function updateAnimatedObject() {
+        var propertyNames = this.propertyNames;
         var target = this.parent.boundObject;
         for(var i = 0; i < propertyNames.length - 1; i++){
             var property = target[propertyNames[i]];
@@ -23425,18 +23620,12 @@ exports.FloatPropertyTrack = /*#__PURE__*/ function(TrackAsset) {
             }
             target = property;
         }
-        if (propertyNames.length > 0) {
-            this.propertyName = propertyNames[propertyNames.length - 1];
-        }
         this.boundObject = target;
     };
     return FloatPropertyTrack;
-}(exports.TrackAsset);
-__decorate([
-    serialize()
-], exports.FloatPropertyTrack.prototype, "path", void 0);
+}(PropertyTrack);
 exports.FloatPropertyTrack = __decorate([
-    effectsClass("FloatPropertyTrack")
+    effectsClass(DataType.FloatPropertyTrack)
 ], exports.FloatPropertyTrack);
 
 exports.SpriteColorTrack = /*#__PURE__*/ function(TrackAsset) {
@@ -23456,7 +23645,7 @@ exports.SubCompositionTrack = /*#__PURE__*/ function(TrackAsset) {
         return TrackAsset.apply(this, arguments);
     }
     var _proto = SubCompositionTrack.prototype;
-    _proto.resolveBinding = function resolveBinding() {
+    _proto.updateAnimatedObject = function updateAnimatedObject() {
         if (!this.parent || !_instanceof1(this.parent.boundObject, exports.VFXItem)) {
             throw new Error("SubCompositionTrack needs to be set under the VFXItem track.");
         }
@@ -23482,6 +23671,70 @@ exports.TransformTrack = __decorate([
     effectsClass(DataType.TransformTrack)
 ], exports.TransformTrack);
 
+exports.MaterialTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(MaterialTrack, TrackAsset);
+    function MaterialTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = MaterialTrack.prototype;
+    _proto.updateAnimatedObject = function updateAnimatedObject() {
+        if (!_instanceof1(this.parent.boundObject, RendererComponent)) {
+            return;
+        }
+        this.parent.boundObject;
+        this.boundObject = this.parent.boundObject.materials[this.index];
+    };
+    return MaterialTrack;
+}(exports.TrackAsset);
+__decorate([
+    serialize()
+], exports.MaterialTrack.prototype, "index", void 0);
+exports.MaterialTrack = __decorate([
+    effectsClass("MaterialTrack")
+], exports.MaterialTrack);
+
+exports.Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
+    _inherits(Vector4PropertyTrack, PropertyTrack);
+    function Vector4PropertyTrack() {
+        return PropertyTrack.apply(this, arguments);
+    }
+    var _proto = Vector4PropertyTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        var mixer = new Vector4PropertyMixerPlayable(graph);
+        var propertyNames = this.propertyNames;
+        if (propertyNames.length > 0) {
+            var propertyName = propertyNames[propertyNames.length - 1];
+            mixer.propertyName = propertyName;
+        }
+        return mixer;
+    };
+    return Vector4PropertyTrack;
+}(PropertyTrack);
+exports.Vector4PropertyTrack = __decorate([
+    effectsClass(DataType.Vector4PropertyTrack)
+], exports.Vector4PropertyTrack);
+
+exports.ColorPropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
+    _inherits(ColorPropertyTrack, PropertyTrack);
+    function ColorPropertyTrack() {
+        return PropertyTrack.apply(this, arguments);
+    }
+    var _proto = ColorPropertyTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        var mixer = new FloatPropertyMixerPlayable(graph);
+        var propertyNames = this.propertyNames;
+        if (propertyNames.length > 0) {
+            var propertyName = propertyNames[propertyNames.length - 1];
+            mixer.propertyName = propertyName;
+        }
+        return mixer;
+    };
+    return ColorPropertyTrack;
+}(PropertyTrack);
+exports.ColorPropertyTrack = __decorate([
+    effectsClass(DataType.ColorPropertyTrack)
+], exports.ColorPropertyTrack);
+
 exports.FloatPropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(FloatPropertyPlayableAsset, PlayableAsset);
     function FloatPropertyPlayableAsset() {
@@ -23489,7 +23742,7 @@ exports.FloatPropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     }
     var _proto = FloatPropertyPlayableAsset.prototype;
     _proto.createPlayable = function createPlayable(graph) {
-        var clipPlayable = new FloatPropertyClipPlayable(graph);
+        var clipPlayable = new PropertyClipPlayable(graph);
         clipPlayable.curve = createValueGetter(this.curveData);
         clipPlayable.value = clipPlayable.curve.getValue(0);
         return clipPlayable;
@@ -23500,7 +23753,7 @@ __decorate([
     serialize()
 ], exports.FloatPropertyPlayableAsset.prototype, "curveData", void 0);
 exports.FloatPropertyPlayableAsset = __decorate([
-    effectsClass("FloatPropertyPlayableAsset")
+    effectsClass(DataType.FloatPropertyPlayableAsset)
 ], exports.FloatPropertyPlayableAsset);
 
 exports.SubCompositionPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
@@ -23518,6 +23771,23 @@ exports.SubCompositionPlayableAsset = __decorate([
     effectsClass(DataType.SubCompositionPlayableAsset)
 ], exports.SubCompositionPlayableAsset);
 
+/**
+ * A class that stores track assets and the generated mixer playables and playable outputs.
+ * It is used to query the corresponding playable object based on the track asset.
+ */ var TrackInstance = /*#__PURE__*/ function() {
+    function TrackInstance(trackAsset, mixer, output) {
+        this.children = [];
+        this.trackAsset = trackAsset;
+        this.mixer = mixer;
+        this.output = output;
+    }
+    var _proto = TrackInstance.prototype;
+    _proto.addChild = function addChild(trackInstance) {
+        this.children.push(trackInstance);
+    };
+    return TrackInstance;
+}();
+
 exports.TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(TimelineAsset, PlayableAsset);
     function TimelineAsset() {
@@ -23560,6 +23830,7 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
         var _this;
         _this = Playable.apply(this, arguments) || this;
         _this.clips = [];
+        _this.masterTrackInstances = [];
         return _this;
     }
     var _proto = TimelinePlayable.prototype;
@@ -23568,6 +23839,8 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
     };
     _proto.evaluate = function evaluate() {
         var time = this.getTime();
+        // update all tracks binding
+        this.updateTrackAnimatedObject(this.masterTrackInstances);
         // TODO search active clips
         for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
             var clip = _step.value;
@@ -23577,19 +23850,50 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
     _proto.compileTracks = function compileTracks(graph, tracks) {
         this.sortTracks(tracks);
         var outputTrack = [];
+        // flatten track tree
         for(var _iterator = _create_for_of_iterator_helper_loose(tracks), _step; !(_step = _iterator()).done;){
             var masterTrack = _step.value;
             outputTrack.push(masterTrack);
             this.addSubTracksRecursive(masterTrack, outputTrack);
         }
+        // map for searching track instance with track asset guid
+        var trackInstanceMap = {};
         for(var _iterator1 = _create_for_of_iterator_helper_loose(outputTrack), _step1; !(_step1 = _iterator1()).done;){
             var track = _step1.value;
+            // create track mixer and track output
             var trackMixPlayable = track.createPlayableGraph(graph, this.clips);
             this.addInput(trackMixPlayable, 0);
             var trackOutput = track.createOutput();
             trackOutput.setUserData(track.boundObject);
             graph.addOutput(trackOutput);
-            trackOutput.setSourcePlayeble(this, this.getInputCount() - 1);
+            trackOutput.setSourcePlayable(this, this.getInputCount() - 1);
+            // create track instance
+            var trackInstance = new TrackInstance(track, trackMixPlayable, trackOutput);
+            trackInstanceMap[track.getInstanceId()] = trackInstance;
+            if (!track.parent) {
+                this.masterTrackInstances.push(trackInstance);
+            }
+        }
+        // build trackInstance tree
+        for(var _iterator2 = _create_for_of_iterator_helper_loose(outputTrack), _step2; !(_step2 = _iterator2()).done;){
+            var track1 = _step2.value;
+            var trackInstance1 = trackInstanceMap[track1.getInstanceId()];
+            for(var _iterator3 = _create_for_of_iterator_helper_loose(track1.getChildTracks()), _step3; !(_step3 = _iterator3()).done;){
+                var child = _step3.value;
+                var childTrackInstance = trackInstanceMap[child.getInstanceId()];
+                trackInstance1.addChild(childTrackInstance);
+            }
+        }
+    };
+    _proto.updateTrackAnimatedObject = function updateTrackAnimatedObject(trackInstances) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(trackInstances), _step; !(_step = _iterator()).done;){
+            var trackInstance = _step.value;
+            var trackAsset = trackInstance.trackAsset;
+            // update track binding use custom method
+            trackAsset.updateAnimatedObject();
+            trackInstance.output.setUserData(trackAsset.boundObject);
+            // update children tracks
+            this.updateTrackAnimatedObject(trackInstance.children);
         }
     };
     _proto.sortTracks = function sortTracks(tracks) {
@@ -23641,6 +23945,7 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
         return TrackAsset1.apply(this, arguments);
     }
     var _proto = ObjectBindingTrack.prototype;
+    _proto.updateAnimatedObject = function updateAnimatedObject() {};
     _proto.create = function create(timelineAsset) {
         if (!_instanceof1(this.boundObject, exports.VFXItem)) {
             return;
@@ -27641,6 +27946,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     _inherits(Composition, EventEmitter);
     function Composition(props, scene) {
         var _this;
+        var _scene_jsonScene_renderSettings;
         _this = EventEmitter.call(this) || this;
         _this.sceneTicking = new SceneTicking();
         /**
@@ -27655,6 +27961,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         /**
    * 预合成的合成属性，在 content 中会被其元素属性覆盖
    */ _this.refCompositionProps = new Map();
+        /**
+   * 是否开启后处理
+   */ _this.postProcessingEnabled = false;
         // TODO: 待优化
         _this.assigned = false;
         /**
@@ -27673,6 +27982,8 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             scene.consumed = true;
         }
         var _this_compositionSourceManager = _this.compositionSourceManager, sourceContent = _this_compositionSourceManager.sourceContent, pluginSystem = _this_compositionSourceManager.pluginSystem, imgUsage = _this_compositionSourceManager.imgUsage, totalTime = _this_compositionSourceManager.totalTime, refCompositionProps = _this_compositionSourceManager.refCompositionProps;
+        var _scene_jsonScene_renderSettings_postProcessingEnabled;
+        _this.postProcessingEnabled = (_scene_jsonScene_renderSettings_postProcessingEnabled = (_scene_jsonScene_renderSettings = scene.jsonScene.renderSettings) == null ? void 0 : _scene_jsonScene_renderSettings.postProcessingEnabled) != null ? _scene_jsonScene_renderSettings_postProcessingEnabled : false;
         assertExist(sourceContent);
         _this.renderer = renderer;
         _this.refCompositionProps = refCompositionProps;
@@ -27713,27 +28024,10 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         SerializationHelper.deserialize(sourceContent, _this.rootComposition);
         _this.rootComposition.createContent();
         _this.buildItemTree(_this.rootItem);
-        _this.rootItem.onEnd = function() {
-            window.setTimeout(function() {
-                _this.emit("end", {
-                    composition: _assert_this_initialized(_this)
-                });
-            }, 0);
-        };
         _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
         return _this;
     }
     var _proto = Composition.prototype;
-    _proto.initializeSceneTicking = function initializeSceneTicking(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
-            var component = _step.value;
-            this.sceneTicking.addComponent(component);
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
-            var child = _step1.value;
-            this.initializeSceneTicking(child);
-        }
-    };
     /**
    * 获取合成的时长
    */ _proto.getDuration = function getDuration() {
@@ -27822,7 +28116,8 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             camera: this.camera,
             renderer: this.renderer,
             keepColorBuffer: this.keepColorBuffer,
-            globalVolume: this.globalVolume
+            globalVolume: this.globalVolume,
+            postProcessingEnabled: this.postProcessingEnabled
         });
         // TODO 考虑放到构造函数
         this.renderFrame.cachedTextures = this.textures;
@@ -27925,40 +28220,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             this.dispose();
         }
     };
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.rootItem.start;
-        var duration = this.rootItem.duration;
-        if (localTime - duration > 0.001) {
-            if (!this.rootItem.ended) {
-                this.rootItem.ended = true;
-                this.emit("end", {
-                    composition: this
-                });
-            }
-            switch(this.rootItem.endBehavior){
-                case EndBehavior.restart:
-                    {
-                        localTime = localTime % duration;
-                        this.restart();
-                        break;
-                    }
-                case EndBehavior.freeze:
-                    {
-                        localTime = Math.min(duration, localTime);
-                        break;
-                    }
-                case EndBehavior.forward:
-                    {
-                        break;
-                    }
-                case EndBehavior.destroy:
-                    {
-                        break;
-                    }
-            }
-        }
-        return localTime;
-    };
     _proto.shouldDispose = function shouldDispose() {
         return this.rootItem.ended && this.rootItem.endBehavior === EndBehavior.destroy && !this.reusable;
     };
@@ -28050,8 +28311,41 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 更新主合成组件
    */ _proto.updateRootComposition = function updateRootComposition(deltaTime) {
         if (this.rootComposition.isActiveAndEnabled) {
-            var localTime = this.toLocalTime(this.time + deltaTime);
+            var localTime = this.time + deltaTime - this.rootItem.start;
+            var ended = false;
+            var duration = this.rootItem.duration;
+            var endBehavior = this.rootItem.endBehavior;
+            if (localTime - duration > 0.001) {
+                ended = true;
+                switch(endBehavior){
+                    case EndBehavior.restart:
+                        {
+                            localTime = localTime % duration;
+                            this.restart();
+                            break;
+                        }
+                    case EndBehavior.freeze:
+                        {
+                            localTime = Math.min(duration, localTime);
+                            break;
+                        }
+                    case EndBehavior.forward:
+                        {
+                            break;
+                        }
+                    case EndBehavior.destroy:
+                        {
+                            break;
+                        }
+                }
+            }
             this.rootComposition.time = localTime;
+            if (ended && !this.rootItem.ended) {
+                this.rootItem.ended = true;
+                this.emit("end", {
+                    composition: this
+                });
+            }
         }
     };
     /**
@@ -30376,7 +30670,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.7";
+var version$1 = "2.1.0-alpha.8";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -31069,6 +31363,7 @@ var seed = 1;
         if (data.length > attributeBuffer.array.length) {
             var buffer = new THREE__namespace.InterleavedBuffer(data, attributeBuffer.stride);
             attributeBuffer = this.attributes[name].attribute.data = buffer;
+            this.attributes[name].buffer = buffer;
             this.geometry.setAttribute(name, this.attributes[name].attribute);
         } else {
             attributeBuffer.set(data, 0);
@@ -31378,6 +31673,7 @@ var seed = 1;
             _this.texture = _this.createTextureByType(options);
         }
         _this.texture.needsUpdate = true;
+        _this.source = {};
         return _this;
     }
     var _proto = ThreeTexture.prototype;
@@ -31390,40 +31686,6 @@ var seed = 1;
         this.texture.needsUpdate = true;
     };
     /**
-   * 开始更新视频数据
-   *
-   */ _proto.startVideo = function startVideo() {
-        var _this = this;
-        return _async_to_generator(function() {
-            var video;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!(_this.sourceType === exports.TextureSourceType.video)) return [
-                            3,
-                            2
-                        ];
-                        video = _this.texture.source.data;
-                        if (!video.paused) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            video.play()
-                        ];
-                    case 1:
-                        _state.sent();
-                        _state.label = 2;
-                    case 2:
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
-    /**
    * 组装纹理选项
    * @param options - 纹理选项
    * @returns 组装后的纹理选项
@@ -31520,6 +31782,7 @@ var seed = 1;
             texture.wrapT = THREE__namespace.MirroredRepeatWrapping;
             this.width = this.height = 1;
         }
+        this.source = options;
         if (texture) {
             texture.flipY = !!flipY;
             return texture;
@@ -31563,13 +31826,6 @@ var seed = 1;
         return Composition.call(this, props, scene);
     }
     var _proto = ThreeComposition.prototype;
-    /**
-   * 更新 video texture 数据
-   */ _proto.updateVideo = function updateVideo() {
-        void this.textures.map(function(tex) {
-            return tex.startVideo();
-        });
-    };
     _proto.prepareRender = function prepareRender() {
         var render = this.renderer;
         var frame = this.renderFrame;
@@ -32058,7 +32314,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.1.0-alpha.7";
+var version = "2.1.0-alpha.8";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -32083,6 +32339,7 @@ exports.COPY_VERTEX_SHADER = COPY_VERTEX_SHADER;
 exports.CalculateLoader = CalculateLoader;
 exports.Camera = Camera;
 exports.CameraVFXItemLoader = CameraVFXItemLoader;
+exports.ColorCurve = ColorCurve;
 exports.Component = Component;
 exports.Composition = Composition;
 exports.CompositionComponent = CompositionComponent;
@@ -32126,6 +32383,7 @@ exports.ParticleSystemRenderer = ParticleSystemRenderer;
 exports.PassTextureCache = PassTextureCache;
 exports.PathSegments = PathSegments;
 exports.PluginSystem = PluginSystem;
+exports.PropertyTrack = PropertyTrack;
 exports.RENDER_PASS_NAME_PREFIX = RENDER_PASS_NAME_PREFIX;
 exports.RENDER_PREFER_LOOKUP_TEXTURE = RENDER_PREFER_LOOKUP_TEXTURE;
 exports.RUNTIME_ENV = RUNTIME_ENV;
@@ -32173,6 +32431,7 @@ exports.TrackSortWrapper = TrackSortWrapper;
 exports.Transform = Transform;
 exports.TransformAnimationPlayable = TransformAnimationPlayable;
 exports.ValueGetter = ValueGetter;
+exports.Vector4Curve = Vector4Curve;
 exports.addByOrder = addByOrder;
 exports.addItem = addItem;
 exports.addItemWithOrder = addItemWithOrder;
@@ -32193,7 +32452,6 @@ exports.createKeyFrameMeta = createKeyFrameMeta;
 exports.createShape = createShape;
 exports.createValueGetter = createValueGetter;
 exports.decimalEqual = decimalEqual;
-exports.defaultGlobalVolume = defaultGlobalVolume;
 exports.defaultPlugins = defaultPlugins;
 exports.deserializeMipmapTexture = deserializeMipmapTexture;
 exports.earcut = earcut;