@galacean/effects-threejs 2.1.5 → 2.2.0-alpha.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.1.5
+ * Version: v2.2.0-alpha.0
  */
 
 'use strict';
@@ -85,12 +85,8 @@ function __generator(thisArg, body) {
         },
         trys: [],
         ops: []
-    }, f, y, t, g;
-    return g = {
-        next: verb(0),
-        "throw": verb(1),
-        "return": verb(2)
-    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+    }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
         return this;
     }), g;
     function verb(n) {
@@ -5747,6 +5743,22 @@ exports.TextureSourceType = void 0;
     TextureSourceType[TextureSourceType["mipmaps"] = 7] = "mipmaps";
 })(exports.TextureSourceType || (exports.TextureSourceType = {}));
 
+var RUNTIME_ENV = "runtime_env";
+var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
+// 文本元素使用 offscreen canvas 绘制
+var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
+// 后处理配置相关
+var POST_PROCESS_SETTINGS = "post_process_settings";
+// 加载图片时是否使用 ImageBitmap
+var LOAD_PREFER_IMAGE_BITMAP = "load_image_bitmap";
+var config = {};
+function getConfig(name) {
+    return config[name];
+}
+function setConfig(name, value) {
+    return config[name] = value;
+}
+
 /**
  * 负责下载各种资源，并提供了一些异步加载和缓存管理的功能
  */ var Downloader = /*#__PURE__*/ function() {
@@ -5835,11 +5847,11 @@ var avifFailed = false;
  * 异步加载一个 WebP 图片文件，如果不支持 WebP，则加载 PNG 图片文件
  * @param png - PNG 图片文件的 URL
  * @param webp - WebP 图片文件的 URL
- */ function loadWebPOptional(png, webp) {
+ */ function loadWebPOptional(png, webp, options) {
     return _loadWebPOptional.apply(this, arguments);
 }
 function _loadWebPOptional() {
-    _loadWebPOptional = _async_to_generator(function(png, webp) {
+    _loadWebPOptional = _async_to_generator(function(png, webp, options) {
         var image, image1, image2;
         return __generator(this, function(_state) {
             switch(_state.label){
@@ -5850,7 +5862,7 @@ function _loadWebPOptional() {
                     ];
                     return [
                         4,
-                        loadImage(png)
+                        loadImageBitmap(png, options)
                     ];
                 case 1:
                     image = _state.sent();
@@ -5870,7 +5882,7 @@ function _loadWebPOptional() {
                     ]);
                     return [
                         4,
-                        loadImage(webp)
+                        loadImageBitmap(webp, options)
                     ];
                 case 3:
                     image1 = _state.sent();
@@ -5886,7 +5898,7 @@ function _loadWebPOptional() {
                     webPFailed = true;
                     return [
                         4,
-                        loadImage(png)
+                        loadImageBitmap(png, options)
                     ];
                 case 5:
                     image2 = _state.sent();
@@ -5910,11 +5922,11 @@ function _loadWebPOptional() {
  * 异步加载一个 AVIF 图片文件，如果不支持 AVIF，则加载 PNG 图片文件
  * @param png - PNG 图片文件的 URL
  * @param avif - AVIF 图片文件的 URL
- */ function loadAVIFOptional(png, avif) {
+ */ function loadAVIFOptional(png, avif, options) {
     return _loadAVIFOptional.apply(this, arguments);
 }
 function _loadAVIFOptional() {
-    _loadAVIFOptional = _async_to_generator(function(png, avif) {
+    _loadAVIFOptional = _async_to_generator(function(png, avif, options) {
         var image, image1, image2;
         return __generator(this, function(_state) {
             switch(_state.label){
@@ -5925,7 +5937,7 @@ function _loadAVIFOptional() {
                     ];
                     return [
                         4,
-                        loadImage(png)
+                        loadImageBitmap(png, options)
                     ];
                 case 1:
                     image = _state.sent();
@@ -5945,7 +5957,7 @@ function _loadAVIFOptional() {
                     ]);
                     return [
                         4,
-                        loadImage(avif)
+                        loadImageBitmap(avif, options)
                     ];
                 case 3:
                     image1 = _state.sent();
@@ -5961,7 +5973,7 @@ function _loadAVIFOptional() {
                     avifFailed = true;
                     return [
                         4,
-                        loadImage(png)
+                        loadImageBitmap(png, options)
                     ];
                 case 5:
                     image2 = _state.sent();
@@ -6176,6 +6188,80 @@ function _loadMedia() {
     });
     return _loadMedia.apply(this, arguments);
 }
+var imageBitMapAvailable = typeof createImageBitmap === "function";
+/**
+ * 异步加载一个图片文件，如果支持 ImageBitmap 则返回 ImageBitmap 对象
+ * @param source
+ * @param options
+ * @returns
+ */ function loadImageBitmap(source, options) {
+    return _loadImageBitmap.apply(this, arguments);
+}
+function _loadImageBitmap() {
+    _loadImageBitmap = _async_to_generator(function(source, options) {
+        var blob;
+        return __generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    if (!(imageBitMapAvailable && getConfig(LOAD_PREFER_IMAGE_BITMAP))) return [
+                        3,
+                        4
+                    ];
+                    if (!(typeof source === "string")) return [
+                        3,
+                        2
+                    ];
+                    return [
+                        4,
+                        loadBlob(source)
+                    ];
+                case 1:
+                    blob = _state.sent();
+                    return [
+                        3,
+                        3
+                    ];
+                case 2:
+                    if (_instanceof1(source, Blob)) {
+                        blob = source;
+                    } else {
+                        return [
+                            2,
+                            loadImage(source)
+                        ];
+                    }
+                    _state.label = 3;
+                case 3:
+                    return [
+                        2,
+                        createImageBitmap(blob, options)
+                    ];
+                case 4:
+                    return [
+                        2,
+                        loadImage(source)
+                    ];
+                case 5:
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return _loadImageBitmap.apply(this, arguments);
+}
+/**
+ * 关闭 ImageBitMap，释放内存
+ * @param imgs
+ */ function closeImageBitMap(imgs) {
+    if (imageBitMapAvailable) {
+        if (_instanceof1(imgs, ImageBitmap)) {
+            imgs.close();
+        } else if (_instanceof1(imgs, Array)) {
+            imgs.forEach(closeImageBitMap);
+        }
+    }
+}
 
 function deserializeMipmapTexture(textureOptions, bins, assets) {
     return _deserializeMipmapTexture.apply(this, arguments);
@@ -12778,8 +12864,8 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
         return data;
     };
     _proto.getMaxTime = function getMaxTime() {
-        var keyTimeData = Object.keys(this.curveMap);
-        return Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeData = this.keyTimeData;
+        return this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
     };
     return BezierCurve;
 }(ValueGetter);
@@ -12857,19 +12943,22 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
                 timeInterval: timeInterval,
                 valueInterval: valueInterval,
                 easingCurve: easingCurve,
-                pathCurve: pathCurve
+                pathCurve: pathCurve,
+                timeStart: Number(s.x),
+                timeEnd: Number(e.x)
             };
         }
+        this.keyTimeData = Object.keys(this.curveSegments);
     };
     _proto.getValue = function getValue(time) {
         var t = numberToFix(time, 5);
         var perc = 0, point = new Vector3();
-        var keyTimeData = Object.keys(this.curveSegments);
+        var keyTimeData = this.keyTimeData;
         if (!keyTimeData.length) {
             return point;
         }
-        var keyTimeStart = Number(keyTimeData[0].split("&")[0]);
-        var keyTimeEnd = Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeStart = this.curveSegments[keyTimeData[0]].timeStart;
+        var keyTimeEnd = this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
         if (t <= keyTimeStart) {
             var pathCurve = this.curveSegments[keyTimeData[0]].pathCurve;
             point = pathCurve.getPointInPercent(0);
@@ -12881,7 +12970,8 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
             return point;
         }
         for(var i = 0; i < keyTimeData.length; i++){
-            var _keyTimeData_i_split = keyTimeData[i].split("&"), xMin = _keyTimeData_i_split[0], xMax = _keyTimeData_i_split[1];
+            var xMin = this.curveSegments[keyTimeData[i]].timeStart;
+            var xMax = this.curveSegments[keyTimeData[i]].timeEnd;
             if (t >= Number(xMin) && t < Number(xMax)) {
                 var bezierPath = this.curveSegments[keyTimeData[i]].pathCurve;
                 perc = this.getPercValue(keyTimeData[i], t);
@@ -12900,8 +12990,8 @@ var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
         return clamp$1(value, 0, 1);
     };
     _proto.getMaxTime = function getMaxTime() {
-        var keyTimeData = Object.keys(this.curveSegments);
-        return Number(keyTimeData[keyTimeData.length - 1].split("&")[1]);
+        var keyTimeData = this.keyTimeData;
+        return this.curveSegments[keyTimeData[keyTimeData.length - 1]].timeEnd;
     };
     return BezierCurvePath;
 }(ValueGetter);
@@ -13054,15 +13144,18 @@ 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;
+    // Since Reflect.construct can't be properly polyfilled, some
+    // implementations (e.g. core-js@2) don't set the correct internal slots.
+    // Those polyfills don't allow us to subclass built-ins, so we need to
+    // use our fallback implementation.
     try {
-        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-        return true;
-    } catch (e) {
-        return false;
-    }
+        // If the internal slots aren't set, this throws an error similar to
+        //   TypeError: this is not a Boolean object.
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function _is_native_reflect_construct() {
+        return !!result;
+    })();
 }
 
 function _construct(Parent, args, Class) {
@@ -15926,6 +16019,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         if (this.animated) {
             this.buildPath(this.data);
             this.buildGeometryFromPath(this.path.shapePath);
+            this.animated = false;
         }
     };
     _proto.buildGeometryFromPath = function buildGeometryFromPath(shapePath) {
@@ -17033,14 +17127,10 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
             var playableOutput2 = _step2.value;
             this.processFrameWithRoot(playableOutput2);
         }
-        // 更新节点时间
-        for(var _iterator3 = _create_for_of_iterator_helper_loose(this.playables), _step3; !(_step3 = _iterator3()).done;){
-            var playable = _step3.value;
-            this.updatePlayableTime(playable, dt / 1000);
-        }
-    };
-    _proto.connect = function connect(source, sourceOutputPort, destination, destinationInputPort) {
-        destination.connectInput(destinationInputPort, source, sourceOutputPort);
+    // 更新节点时间
+    // for (const playable of this.playables) {
+    //   this.updatePlayableTime(playable, dt / 1000);
+    // }
     };
     _proto.addOutput = function addOutput(output) {
         this.playableOutputs.push(output);
@@ -17049,12 +17139,12 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         this.playables.push(playable);
     };
     _proto.processFrameWithRoot = function processFrameWithRoot(output) {
-        output.sourcePlayable.processFrameRecursive(output.context, output.getSourceOutputPort());
+        output.sourcePlayable.processFrame(output.context);
         output.processFrame();
     };
     _proto.prepareFrameWithRoot = function prepareFrameWithRoot(output) {
-        output.sourcePlayable.prepareFrameRecursive(output.context, output.getSourceOutputPort());
         output.prepareFrame();
+        output.sourcePlayable.prepareFrame(output.context);
     };
     _proto.updatePlayableTime = function updatePlayableTime(playable, deltaTime) {
         if (playable.getPlayState() !== 0) {
@@ -17069,24 +17159,15 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
  * @since 2.0.0
  */ var Playable = /*#__PURE__*/ function() {
     function Playable(graph, inputCount) {
-        if (inputCount === void 0) inputCount = 0;
         this.onPlayablePlayFlag = true;
         this.onPlayablePauseFlag = false;
         this.duration = 0;
         this.destroyed = false;
-        this.inputs = [];
-        this.inputOuputPorts = [];
-        this.inputWeight = [];
-        this.outputs = [];
         this.playState = 0;
-        this.traversalMode = 0;
         /**
    * 当前本地播放的时间
    */ this.time = 0;
         graph.addPlayable(this);
-        this.inputs = new Array(inputCount);
-        this.inputOuputPorts = new Array(inputCount);
-        this.inputWeight = new Array(inputCount);
     }
     var _proto = Playable.prototype;
     _proto.play = function play() {
@@ -17109,56 +17190,6 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
                 break;
         }
     };
-    _proto.connectInput = function connectInput(inputPort, sourcePlayable, sourceOutputPort, weight) {
-        if (weight === void 0) weight = 1.0;
-        this.setInput(sourcePlayable, inputPort);
-        this.setInputWeight(inputPort, weight);
-        sourcePlayable.setOutput(this, sourceOutputPort);
-        if (this.inputOuputPorts.length < inputPort + 1) {
-            this.inputOuputPorts.length = inputPort + 1;
-        }
-        this.inputOuputPorts[inputPort] = sourceOutputPort;
-    };
-    _proto.addInput = function addInput(sourcePlayable, sourceOutputPort, weight) {
-        if (weight === void 0) weight = 1.0;
-        this.connectInput(this.getInputCount(), sourcePlayable, sourceOutputPort, weight);
-    };
-    _proto.getInputCount = function getInputCount() {
-        return this.inputs.length;
-    };
-    _proto.getInputs = function getInputs() {
-        return this.inputs;
-    };
-    _proto.getInput = function getInput(index) {
-        return this.inputs[index];
-    };
-    _proto.getOutputCount = function getOutputCount() {
-        return this.outputs.length;
-    };
-    _proto.getOutputs = function getOutputs() {
-        return this.outputs;
-    };
-    _proto.getOutput = function getOutput(index) {
-        return this.outputs[index];
-    };
-    _proto.getInputWeight = function getInputWeight(inputIndex) {
-        return this.inputWeight[inputIndex];
-    };
-    _proto.setInputWeight = function setInputWeight(playableOrIndex, weight) {
-        if (_instanceof1(playableOrIndex, Playable)) {
-            for(var i = 0; i < this.inputs.length; i++){
-                if (this.inputs[i] === playableOrIndex) {
-                    this.inputWeight[i] = weight;
-                    return;
-                }
-            }
-        } else {
-            if (this.inputWeight.length < playableOrIndex + 1) {
-                this.inputWeight.length = playableOrIndex + 1;
-            }
-            this.inputWeight[playableOrIndex] = weight;
-        }
-    };
     _proto.setTime = function setTime(time) {
         this.time = time;
     };
@@ -17174,18 +17205,14 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
     _proto.getPlayState = function getPlayState() {
         return this.playState;
     };
-    _proto.setTraversalMode = function setTraversalMode(mode) {
-        this.traversalMode = mode;
-    };
-    _proto.getTraversalMode = function getTraversalMode() {
-        return this.traversalMode;
-    };
     // onGraphStart () {
     // }
     // onGraphStop () {
     // }
-    _proto.onPlayablePlay = function onPlayablePlay(context) {};
-    _proto.onPlayablePause = function onPlayablePause(context) {};
+    // onPlayablePlay (context: FrameContext) {
+    // }
+    // onPlayablePause (context: FrameContext) {
+    // }
     _proto.prepareFrame = function prepareFrame(context) {};
     _proto.processFrame = function processFrame(context) {};
     _proto.onPlayableDestroy = function onPlayableDestroy() {};
@@ -17197,76 +17224,6 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
         // TODO 将节点从动画图中移除
         this.destroyed = true;
     };
-    /**
-   * @internal
-   */ _proto.prepareFrameRecursive = function prepareFrameRecursive(context, passthroughPort) {
-        if (this.destroyed || this.playState !== 0) {
-            return;
-        }
-        if (this.onPlayablePlayFlag) {
-            this.onPlayablePlay(context);
-            this.onPlayablePlayFlag = false;
-        }
-        if (this.onPlayablePauseFlag) {
-            this.onPlayablePause(context);
-            this.onPlayablePauseFlag = false;
-        }
-        if (passthroughPort === 0) {
-            this.prepareFrame(context);
-        }
-        // 前序遍历，用于设置节点的初始状态，weight etc.
-        switch(this.getTraversalMode()){
-            case 0:
-                for(var i = 0; i < this.getInputCount(); i++){
-                    var input = this.getInput(i);
-                    input.prepareFrameRecursive(context, this.inputOuputPorts[i]);
-                }
-                break;
-            case 1:
-                {
-                    var input1 = this.getInput(passthroughPort);
-                    input1.prepareFrameRecursive(context, this.inputOuputPorts[passthroughPort]);
-                    break;
-                }
-        }
-    };
-    /**
-   * @internal
-   */ _proto.processFrameRecursive = function processFrameRecursive(context, passthroughPort) {
-        if (this.destroyed || this.playState !== 0) {
-            return;
-        }
-        // 后序遍历，保证 playable 拿到的 input 节点的估计数据是最新的
-        switch(this.getTraversalMode()){
-            case 0:
-                {
-                    for(var i = 0; i < this.getInputCount(); i++){
-                        var input = this.getInput(i);
-                        input.processFrameRecursive(context, this.inputOuputPorts[i]);
-                    }
-                    break;
-                }
-            case 1:
-                {
-                    var input1 = this.getInput(passthroughPort);
-                    input1.processFrameRecursive(context, this.inputOuputPorts[passthroughPort]);
-                    break;
-                }
-        }
-        this.processFrame(context);
-    };
-    _proto.setOutput = function setOutput(outputPlayable, outputPort) {
-        if (this.outputs.length < outputPort + 1) {
-            this.outputs.length = outputPort + 1;
-        }
-        this.outputs[outputPort] = outputPlayable;
-    };
-    _proto.setInput = function setInput(inputPlayable, inputPort) {
-        if (this.inputs.length < inputPort + 1) {
-            this.inputs.length = inputPort + 1;
-        }
-        this.inputs[inputPort] = inputPlayable;
-    };
     return Playable;
 }();
 /**
@@ -17274,20 +17231,14 @@ var SpriteLoader = /*#__PURE__*/ function(AbstractPlugin) {
  * @since 2.0.0
  */ var PlayableOutput = /*#__PURE__*/ function() {
     function PlayableOutput() {
-        this.sourceOutputPort = 0;
         this.context = {
             deltaTime: 0,
             output: this
         };
     }
     var _proto = PlayableOutput.prototype;
-    _proto.setSourcePlayable = function setSourcePlayable(playable, port) {
-        if (port === void 0) port = 0;
+    _proto.setSourcePlayable = function setSourcePlayable(playable) {
         this.sourcePlayable = playable;
-        this.sourceOutputPort = port;
-    };
-    _proto.getSourceOutputPort = function getSourceOutputPort() {
-        return this.sourceOutputPort;
     };
     _proto.setUserData = function setUserData(value) {
         this.userData = value;
@@ -17313,11 +17264,6 @@ var PlayState;
     PlayState[PlayState["Playing"] = 0] = "Playing";
     PlayState[PlayState["Paused"] = 1] = "Paused";
 })(PlayState || (PlayState = {}));
-var PlayableTraversalMode;
-(function(PlayableTraversalMode) {
-    PlayableTraversalMode[PlayableTraversalMode["Mix"] = 0] = "Mix";
-    PlayableTraversalMode[PlayableTraversalMode["Passthrough"] = 1] = "Passthrough";
-})(PlayableTraversalMode || (PlayableTraversalMode = {}));
 
 var tempQuat$1 = new Quaternion();
 var seed$4 = 1;
@@ -18884,20 +18830,6 @@ exports.SpriteComponent = __decorate([
     effectsClass(DataType.SpriteComponent)
 ], exports.SpriteComponent);
 
-var RUNTIME_ENV = "runtime_env";
-var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
-// 文本元素使用 offscreen canvas 绘制
-var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
-// 后处理配置相关
-var POST_PROCESS_SETTINGS = "post_process_settings";
-var config = {};
-function getConfig(name) {
-    return config[name];
-}
-function setConfig(name, value) {
-    return config[name] = value;
-}
-
 var Cone = /*#__PURE__*/ function() {
     function Cone(props) {
         var _this = this;
@@ -22822,12 +22754,6 @@ var AnimationStream = /*#__PURE__*/ function() {
     _proto.findCurveValue = function findCurveValue(componentType, propertyName) {
         return this.curveValues[componentType + propertyName];
     };
-    _proto.getInputStream = function getInputStream(index) {
-        var inputPlayable = this.playable.getInput(index);
-        if (_instanceof1(inputPlayable, AnimationPlayable)) {
-            return inputPlayable.animationStream;
-        }
-    };
     return AnimationStream;
 }();
 
@@ -23162,214 +23088,65 @@ var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
     return AnimationClipPlayable;
 }(Playable);
 
-/**
- * @since 2.0.0
- */ var TimelineClip = /*#__PURE__*/ function() {
-    function TimelineClip() {
-        this.start = 0;
-        this.duration = 0;
-    }
-    var _proto = TimelineClip.prototype;
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.start;
-        var duration = this.duration;
-        if (localTime - duration > 0) {
-            if (this.endBehavior === EndBehavior.restart) {
-                localTime = localTime % duration;
-            } else if (this.endBehavior === EndBehavior.freeze) {
-                localTime = Math.min(duration, localTime);
-            }
-        }
-        return localTime;
-    };
-    return TimelineClip;
-}();
-exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
-    _inherits(TrackAsset, PlayableAsset);
-    function TrackAsset() {
+var TrackMixerPlayable = /*#__PURE__*/ function(Playable1) {
+    _inherits(TrackMixerPlayable, Playable1);
+    function TrackMixerPlayable() {
         var _this;
-        _this = PlayableAsset.apply(this, arguments) || this;
-        _this.trackType = 0;
-        _this.clipSeed = 0;
-        _this.clips = [];
-        _this.children = [];
+        _this = Playable1.apply(this, arguments) || this;
+        _this.clipPlayables = [];
+        _this.clipWeights = [];
         return _this;
     }
-    var _proto = TrackAsset.prototype;
-    /**
-   * 重写该方法以获取自定义对象绑定
-   */ _proto.updateAnimatedObject = function updateAnimatedObject() {
-        if (this.parent) {
-            this.boundObject = this.parent.boundObject;
-        }
-    };
-    /**
-   * 重写该方法以创建自定义混合器
-   */ _proto.createTrackMixer = function createTrackMixer(graph) {
-        return new Playable(graph);
-    };
-    _proto.createOutput = function createOutput() {
-        var output = new PlayableOutput();
-        return output;
-    };
-    _proto.createPlayableGraph = function createPlayableGraph(graph, runtimeClips) {
-        var mixerPlayable = this.createMixerPlayableGraph(graph, runtimeClips);
-        return mixerPlayable;
-    };
-    _proto.createMixerPlayableGraph = function createMixerPlayableGraph(graph, runtimeClips) {
-        var clips = [];
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            clips.push(clip);
-        }
-        var mixerPlayable = this.compileClips(graph, clips, runtimeClips);
-        return mixerPlayable;
-    };
-    _proto.compileClips = function compileClips(graph, timelineClips, runtimeClips) {
-        var mixer = this.createTrackMixer(graph);
-        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);
-            mixer.setInputWeight(clipPlayable, 0.0);
+    var _proto = TrackMixerPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clipPlayables), _step; !(_step = _iterator()).done;){
+            var clipPlayable = _step.value;
+            clipPlayable.processFrame(context);
         }
-        return mixer;
+        this.evaluate(context);
     };
-    _proto.createPlayable = function createPlayable(graph) {
-        return new Playable(graph);
-    };
-    _proto.getChildTracks = function getChildTracks() {
-        return this.children;
-    };
-    _proto.addChild = function addChild(child) {
-        this.children.push(child);
-        child.parent = this;
-    };
-    _proto.createClip = function createClip(classConstructor, name) {
-        var newClip = new TimelineClip();
-        newClip.asset = new classConstructor(this.engine);
-        newClip.name = name ? name : "TimelineClip" + newClip.id;
-        this.addClip(newClip);
-        return newClip;
-    };
-    _proto.getClips = function getClips() {
-        return this.clips;
-    };
-    _proto.findClip = function findClip(name) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            if (clip.name === name) {
-                return clip;
+    _proto.setClipWeight = function setClipWeight(playableOrIndex, weight) {
+        if (_instanceof1(playableOrIndex, Playable)) {
+            for(var i = 0; i < this.clipPlayables.length; i++){
+                if (this.clipPlayables[i] === playableOrIndex) {
+                    this.clipWeights[i] = weight;
+                    return;
+                }
+            }
+        } else {
+            if (this.clipWeights.length < playableOrIndex + 1) {
+                this.clipWeights.length = playableOrIndex + 1;
             }
+            this.clipWeights[playableOrIndex] = weight;
         }
     };
-    _proto.addClip = function addClip(clip) {
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
+    _proto.getClipWeight = function getClipWeight(inputIndex) {
+        return this.clipWeights[inputIndex];
     };
-    _proto.createClipPlayable = function createClipPlayable(graph, clip) {
-        return clip.asset.createPlayable(graph);
+    _proto.getClipPlayable = function getClipPlayable(index) {
+        return this.clipPlayables[index];
     };
-    _proto.fromData = function fromData(data) {
-        PlayableAsset.prototype.fromData.call(this, data);
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
-            var child = _step.value;
-            child.parent = this;
-        }
-    };
-    return TrackAsset;
-}(PlayableAsset);
-__decorate([
-    serialize(TimelineClip)
-], exports.TrackAsset.prototype, "clips", void 0);
-__decorate([
-    serialize()
-], exports.TrackAsset.prototype, "children", void 0);
-exports.TrackAsset = __decorate([
-    effectsClass(DataType.TrackAsset)
-], exports.TrackAsset);
-exports.TrackType = void 0;
-(function(TrackType) {
-    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
-    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
-})(exports.TrackType || (exports.TrackType = {}));
-var RuntimeClip = /*#__PURE__*/ function() {
-    function RuntimeClip(clip, clipPlayable, parentMixer, track) {
-        this.clip = clip;
-        this.playable = clipPlayable;
-        this.parentMixer = parentMixer;
-        this.track = track;
-        if (_instanceof1(this.track.boundObject, exports.VFXItem)) {
-            this.particleSystem = this.track.boundObject.getComponent(exports.ParticleSystem);
-        }
-    }
-    var _proto = RuntimeClip.prototype;
-    _proto.evaluateAt = function evaluateAt(localTime) {
-        var clip = this.clip;
-        var weight = 1.0;
-        var ended = false;
-        var started = false;
-        var boundObject = this.track.boundObject;
-        if (localTime >= clip.start + clip.duration && clip.endBehavior === EndBehavior.destroy) {
-            if (_instanceof1(boundObject, exports.VFXItem) && exports.VFXItem.isParticle(boundObject) && this.particleSystem && !this.particleSystem.destroyed) {
-                weight = 1.0;
-            } else {
-                weight = 0.0;
-                ended = true;
-            }
-        } else if (localTime - this.clip.start >= 0) {
-            weight = 1.0;
-            started = true;
-        } else if (localTime < clip.start) {
-            weight = 0.0;
-        }
-        if (started && this.playable.getPlayState() !== PlayState.Playing) {
-            this.playable.play();
-        }
-        this.parentMixer.setInputWeight(this.playable, weight);
-        var clipTime = parseFloat(clip.toLocalTime(localTime).toFixed(3));
-        this.playable.setTime(clipTime);
-        // 判断动画是否结束
-        if (ended) {
-            if (this.playable.getPlayState() === PlayState.Playing) {
-                this.playable.pause();
-            }
-        }
+    _proto.evaluate = function evaluate(context) {
+    // Override
     };
-    _create_class(RuntimeClip, [
-        {
-            key: "enable",
-            set: function set(value) {
-                if (value) {
-                    this.playable.play();
-                } else {
-                    this.parentMixer.setInputWeight(this.playable, 0);
-                    this.playable.pause();
-                }
-            }
-        }
-    ]);
-    return RuntimeClip;
-}();
+    return TrackMixerPlayable;
+}(Playable);
 
-var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(ActivationMixerPlayable, Playable);
+var ActivationMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ActivationMixerPlayable, TrackMixerPlayable);
     function ActivationMixerPlayable() {
-        return Playable.apply(this, arguments);
+        return TrackMixerPlayable.apply(this, arguments);
     }
     var _proto = ActivationMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!_instanceof1(boundObject, exports.VFXItem)) {
             return;
         }
         var boundItem = boundObject;
         var hasInput = false;
-        for(var i = 0; i < this.getInputCount(); i++){
-            if (this.getInputWeight(i) > 0) {
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            if (this.getClipWeight(i) > 0) {
                 hasInput = true;
                 break;
             }
@@ -23383,22 +23160,7 @@ var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return ActivationMixerPlayable;
-}(Playable);
-
-exports.ActivationTrack = /*#__PURE__*/ function(TrackAsset) {
-    _inherits(ActivationTrack, TrackAsset);
-    function ActivationTrack() {
-        return TrackAsset.apply(this, arguments);
-    }
-    var _proto = ActivationTrack.prototype;
-    _proto.createTrackMixer = function createTrackMixer(graph) {
-        return new ActivationMixerPlayable(graph);
-    };
-    return ActivationTrack;
-}(exports.TrackAsset);
-exports.ActivationTrack = __decorate([
-    effectsClass(DataType.ActivationTrack)
-], exports.ActivationTrack);
+}(TrackMixerPlayable);
 
 var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
     _inherits(PropertyClipPlayable, Playable);
@@ -23412,16 +23174,61 @@ var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
     return PropertyClipPlayable;
 }(Playable);
 
-var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(FloatPropertyMixerPlayable, Playable);
+var ColorPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ColorPropertyMixerPlayable, TrackMixerPlayable);
+    function ColorPropertyMixerPlayable() {
+        var _this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
+        _this.propertyName = "";
+        return _this;
+    }
+    var _proto = ColorPropertyMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {
+        var boundObject = context.output.getUserData();
+        if (!boundObject) {
+            return;
+        }
+        var hasInput = false;
+        var value = boundObject[this.propertyName];
+        if (!_instanceof1(value, Color)) {
+            return;
+        }
+        value.setZero();
+        // evaluate the curve
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
+            if (weight > 0) {
+                var propertyClipPlayable = this.getClipPlayable(i);
+                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
+                    console.error("ColorPropertyMixerPlayable received incompatible input");
+                    continue;
+                }
+                var curveValue = propertyClipPlayable.value;
+                value.r += curveValue.r * weight;
+                value.g += curveValue.g * weight;
+                value.b += curveValue.b * weight;
+                value.a += curveValue.a * weight;
+                hasInput = true;
+            }
+        }
+        // set value
+        if (hasInput) {
+            boundObject[this.propertyName] = value;
+        }
+    };
+    return ColorPropertyMixerPlayable;
+}(TrackMixerPlayable);
+
+var FloatPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(FloatPropertyMixerPlayable, TrackMixerPlayable);
     function FloatPropertyMixerPlayable() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
         _this.propertyName = "";
         return _this;
     }
     var _proto = FloatPropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!boundObject) {
             return;
@@ -23429,10 +23236,10 @@ var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         var hasInput = false;
         var value = 0;
         // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
             if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
+                var propertyClipPlayable = this.getClipPlayable(i);
                 if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
                     console.error("FloatPropertyTrack added non-FloatPropertyPlayableAsset");
                     continue;
@@ -23448,7 +23255,27 @@ var FloatPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return FloatPropertyMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
+
+var ParticleMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(ParticleMixerPlayable, TrackMixerPlayable);
+    function ParticleMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = ParticleMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return ParticleMixerPlayable;
+}(TrackMixerPlayable);
+
+var SpriteColorMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(SpriteColorMixerPlayable, TrackMixerPlayable);
+    function SpriteColorMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = SpriteColorMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return SpriteColorMixerPlayable;
+}(TrackMixerPlayable);
 
 var SerializationHelper = /*#__PURE__*/ function() {
     function SerializationHelper() {}
@@ -23940,7 +23767,8 @@ var SerializationHelper = /*#__PURE__*/ function() {
         this.timelinePlayable.setTime(time);
         // The properties of the object may change dynamically,
         // so reset the track binding to avoid invalidation of the previously obtained binding object.
-        this.resolveBindings();
+        // this.resolveBindings();
+        this.timelinePlayable.evaluate();
         this.graph.evaluate(dt);
     };
     _proto.createContent = function createContent() {
@@ -24119,21 +23947,21 @@ var SubCompositionClipPlayable = /*#__PURE__*/ function(Playable) {
     return SubCompositionClipPlayable;
 }(Playable);
 
-var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(SubCompositionMixerPlayable, Playable);
+var SubCompositionMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(SubCompositionMixerPlayable, TrackMixerPlayable);
     function SubCompositionMixerPlayable() {
-        return Playable.apply(this, arguments);
+        return TrackMixerPlayable.apply(this, arguments);
     }
     var _proto = SubCompositionMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!_instanceof1(boundObject, CompositionComponent)) {
             return;
         }
         var compositionComponent = boundObject;
         var hasInput = false;
-        for(var i = 0; i < this.getInputCount(); i++){
-            if (this.getInputWeight(i) > 0) {
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            if (this.getClipWeight(i) > 0) {
                 hasInput = true;
                 break;
             }
@@ -24145,18 +23973,28 @@ var SubCompositionMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return SubCompositionMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
 
-var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(Vector4PropertyMixerPlayable, Playable);
+var TransformMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(TransformMixerPlayable, TrackMixerPlayable);
+    function TransformMixerPlayable() {
+        return TrackMixerPlayable.apply(this, arguments);
+    }
+    var _proto = TransformMixerPlayable.prototype;
+    _proto.evaluate = function evaluate(context) {};
+    return TransformMixerPlayable;
+}(TrackMixerPlayable);
+
+var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(Vector4PropertyMixerPlayable, TrackMixerPlayable);
     function Vector4PropertyMixerPlayable() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
+        _this = TrackMixerPlayable.apply(this, arguments) || this;
         _this.propertyName = "";
         return _this;
     }
     var _proto = Vector4PropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
+    _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!boundObject) {
             return;
@@ -24168,10 +24006,10 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
         value.setZero();
         // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
+        for(var i = 0; i < this.clipPlayables.length; i++){
+            var weight = this.getClipWeight(i);
             if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
+                var propertyClipPlayable = this.getClipPlayable(i);
                 if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
                     console.error("Vector4PropertyTrack added non-Vector4PropertyPlayableAsset");
                     continue;
@@ -24190,52 +24028,215 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
         }
     };
     return Vector4PropertyMixerPlayable;
-}(Playable);
+}(TrackMixerPlayable);
 
-var ColorPropertyMixerPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(ColorPropertyMixerPlayable, Playable);
-    function ColorPropertyMixerPlayable() {
+/**
+ * @since 2.0.0
+ */ var TimelineClip = /*#__PURE__*/ function() {
+    function TimelineClip() {
+        this.start = 0;
+        this.duration = 0;
+    }
+    var _proto = TimelineClip.prototype;
+    _proto.toLocalTime = function toLocalTime(time) {
+        var localTime = time - this.start;
+        var duration = this.duration;
+        if (localTime - duration > 0) {
+            if (this.endBehavior === EndBehavior.restart) {
+                localTime = localTime % duration;
+            } else if (this.endBehavior === EndBehavior.freeze) {
+                localTime = Math.min(duration, localTime);
+            }
+        }
+        return localTime;
+    };
+    return TimelineClip;
+}();
+exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(TrackAsset, PlayableAsset);
+    function TrackAsset() {
         var _this;
-        _this = Playable.apply(this, arguments) || this;
-        _this.propertyName = "";
+        _this = PlayableAsset.apply(this, arguments) || this;
+        _this.trackType = 0;
+        _this.clipSeed = 0;
+        _this.clips = [];
+        _this.children = [];
         return _this;
     }
-    var _proto = ColorPropertyMixerPlayable.prototype;
-    _proto.processFrame = function processFrame(context) {
-        var boundObject = context.output.getUserData();
-        if (!boundObject) {
-            return;
+    var _proto = TrackAsset.prototype;
+    /**
+   * 重写该方法以获取自定义对象绑定
+   */ _proto.updateAnimatedObject = function updateAnimatedObject() {
+        if (this.parent) {
+            this.boundObject = this.parent.boundObject;
         }
-        var hasInput = false;
-        var value = boundObject[this.propertyName];
-        if (!_instanceof1(value, Color)) {
-            return;
+    };
+    /**
+   * 重写该方法以创建自定义混合器
+   */ _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new TrackMixerPlayable(graph);
+    };
+    _proto.createOutput = function createOutput() {
+        var output = new PlayableOutput();
+        return output;
+    };
+    _proto.createPlayableGraph = function createPlayableGraph(graph, runtimeClips) {
+        var mixerPlayable = this.createMixerPlayableGraph(graph, runtimeClips);
+        return mixerPlayable;
+    };
+    _proto.createMixerPlayableGraph = function createMixerPlayableGraph(graph, runtimeClips) {
+        var clips = [];
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            clips.push(clip);
         }
-        value.setZero();
-        // evaluate the curve
-        for(var i = 0; i < this.getInputCount(); i++){
-            var weight = this.getInputWeight(i);
-            if (weight > 0) {
-                var propertyClipPlayable = this.getInput(i);
-                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
-                    console.error("ColorPropertyMixerPlayable received incompatible input");
-                    continue;
-                }
-                var curveValue = propertyClipPlayable.value;
-                value.r += curveValue.r * weight;
-                value.g += curveValue.g * weight;
-                value.b += curveValue.b * weight;
-                value.a += curveValue.a * weight;
-                hasInput = true;
+        var mixerPlayable = this.compileClips(graph, clips, runtimeClips);
+        return mixerPlayable;
+    };
+    _proto.compileClips = function compileClips(graph, timelineClips, runtimeClips) {
+        var mixer = this.createTrackMixer(graph);
+        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.clipPlayables.push(clipPlayable);
+            mixer.setClipWeight(clipPlayable, 0.0);
+        }
+        return mixer;
+    };
+    _proto.createPlayable = function createPlayable(graph) {
+        return new Playable(graph);
+    };
+    _proto.getChildTracks = function getChildTracks() {
+        return this.children;
+    };
+    _proto.addChild = function addChild(child) {
+        this.children.push(child);
+        child.parent = this;
+    };
+    _proto.createClip = function createClip(classConstructor, name) {
+        var newClip = new TimelineClip();
+        newClip.asset = new classConstructor(this.engine);
+        newClip.name = name ? name : "TimelineClip" + newClip.id;
+        this.addClip(newClip);
+        return newClip;
+    };
+    _proto.getClips = function getClips() {
+        return this.clips;
+    };
+    _proto.findClip = function findClip(name) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            if (clip.name === name) {
+                return clip;
             }
         }
-        // set value
-        if (hasInput) {
-            boundObject[this.propertyName] = value;
+    };
+    _proto.addClip = function addClip(clip) {
+        clip.id = (this.clipSeed++).toString();
+        this.clips.push(clip);
+    };
+    _proto.createClipPlayable = function createClipPlayable(graph, clip) {
+        return clip.asset.createPlayable(graph);
+    };
+    _proto.fromData = function fromData(data) {
+        PlayableAsset.prototype.fromData.call(this, data);
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            child.parent = this;
         }
     };
-    return ColorPropertyMixerPlayable;
-}(Playable);
+    return TrackAsset;
+}(PlayableAsset);
+__decorate([
+    serialize(TimelineClip)
+], exports.TrackAsset.prototype, "clips", void 0);
+__decorate([
+    serialize()
+], exports.TrackAsset.prototype, "children", void 0);
+exports.TrackAsset = __decorate([
+    effectsClass(DataType.TrackAsset)
+], exports.TrackAsset);
+exports.TrackType = void 0;
+(function(TrackType) {
+    TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
+    TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
+})(exports.TrackType || (exports.TrackType = {}));
+var RuntimeClip = /*#__PURE__*/ function() {
+    function RuntimeClip(clip, clipPlayable, parentMixer, track) {
+        this.clip = clip;
+        this.playable = clipPlayable;
+        this.parentMixer = parentMixer;
+        this.track = track;
+        if (_instanceof1(this.track.boundObject, exports.VFXItem)) {
+            this.particleSystem = this.track.boundObject.getComponent(exports.ParticleSystem);
+        }
+    }
+    var _proto = RuntimeClip.prototype;
+    _proto.evaluateAt = function evaluateAt(localTime) {
+        var clip = this.clip;
+        var weight = 1.0;
+        var ended = false;
+        var started = false;
+        var boundObject = this.track.boundObject;
+        if (localTime >= clip.start + clip.duration && clip.endBehavior === EndBehavior.destroy) {
+            if (_instanceof1(boundObject, exports.VFXItem) && exports.VFXItem.isParticle(boundObject) && this.particleSystem && !this.particleSystem.destroyed) {
+                weight = 1.0;
+            } else {
+                weight = 0.0;
+                ended = true;
+            }
+        } else if (localTime - this.clip.start >= 0) {
+            weight = 1.0;
+            started = true;
+        } else if (localTime < clip.start) {
+            weight = 0.0;
+        }
+        if (started && this.playable.getPlayState() !== PlayState.Playing) {
+            this.playable.play();
+        }
+        this.parentMixer.setClipWeight(this.playable, weight);
+        var clipTime = parseFloat(clip.toLocalTime(localTime).toFixed(3));
+        this.playable.setTime(clipTime);
+        // 判断动画是否结束
+        if (ended) {
+            if (this.playable.getPlayState() === PlayState.Playing) {
+                this.playable.pause();
+            }
+        }
+    };
+    _create_class(RuntimeClip, [
+        {
+            key: "enable",
+            set: function set(value) {
+                if (value) {
+                    this.playable.play();
+                } else {
+                    this.parentMixer.setClipWeight(this.playable, 0);
+                    this.playable.pause();
+                }
+            }
+        }
+    ]);
+    return RuntimeClip;
+}();
+
+exports.ActivationTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ActivationTrack, TrackAsset);
+    function ActivationTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = ActivationTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new ActivationMixerPlayable(graph);
+    };
+    return ActivationTrack;
+}(exports.TrackAsset);
+exports.ActivationTrack = __decorate([
+    effectsClass(DataType.ActivationTrack)
+], exports.ActivationTrack);
 
 var PropertyTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(PropertyTrack, TrackAsset);
@@ -24308,6 +24309,10 @@ exports.SpriteColorTrack = /*#__PURE__*/ function(TrackAsset) {
     function SpriteColorTrack() {
         return TrackAsset.apply(this, arguments);
     }
+    var _proto = SpriteColorTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new SpriteColorMixerPlayable(graph);
+    };
     return SpriteColorTrack;
 }(exports.TrackAsset);
 exports.SpriteColorTrack = __decorate([
@@ -24340,6 +24345,10 @@ exports.TransformTrack = /*#__PURE__*/ function(TrackAsset) {
     function TransformTrack() {
         return TrackAsset.apply(this, arguments);
     }
+    var _proto = TransformTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new TransformMixerPlayable(graph);
+    };
     return TransformTrack;
 }(exports.TrackAsset);
 exports.TransformTrack = __decorate([
@@ -24368,6 +24377,18 @@ exports.MaterialTrack = __decorate([
     effectsClass("MaterialTrack")
 ], exports.MaterialTrack);
 
+var ParticleTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ParticleTrack, TrackAsset);
+    function ParticleTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = ParticleTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new ParticleMixerPlayable(graph);
+    };
+    return ParticleTrack;
+}(exports.TrackAsset);
+
 exports.Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     _inherits(Vector4PropertyTrack, PropertyTrack);
     function Vector4PropertyTrack() {
@@ -24496,7 +24517,6 @@ exports.TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
     var _proto = TimelineAsset.prototype;
     _proto.createPlayable = function createPlayable(graph) {
         var timelinePlayable = new TimelinePlayable(graph);
-        timelinePlayable.setTraversalMode(PlayableTraversalMode.Passthrough);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
             var track = _step.value;
             if (_instanceof1(track, exports.ObjectBindingTrack)) {
@@ -24577,9 +24597,7 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
         return _this;
     }
     var _proto = TimelinePlayable.prototype;
-    _proto.prepareFrame = function prepareFrame(context) {
-        this.evaluate();
-    };
+    _proto.prepareFrame = function prepareFrame(context) {};
     _proto.evaluate = function evaluate() {
         var time = this.getTime();
         // TODO search active clips
@@ -24596,11 +24614,10 @@ var TimelinePlayable = /*#__PURE__*/ function(Playable) {
             var track = _step.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.setSourcePlayable(this, this.getInputCount() - 1);
+            trackOutput.setSourcePlayable(trackMixPlayable);
             // create track instance
             var trackInstance = new TrackInstance(track, trackMixPlayable, trackOutput);
             trackInstanceMap[track.getInstanceId()] = trackInstance;
@@ -24661,10 +24678,10 @@ exports.Vector4PropertyPlayableAsset = __decorate([
     effectsClass("Vector4PropertyPlayableAsset")
 ], exports.Vector4PropertyPlayableAsset);
 
-exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
-    _inherits(ObjectBindingTrack, TrackAsset1);
+exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(ObjectBindingTrack, TrackAsset);
     function ObjectBindingTrack() {
-        return TrackAsset1.apply(this, arguments);
+        return TrackAsset.apply(this, arguments);
     }
     var _proto = ObjectBindingTrack.prototype;
     _proto.updateAnimatedObject = function updateAnimatedObject() {};
@@ -24675,7 +24692,7 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
         var boundItem = this.boundObject;
         // 添加粒子动画 clip // TODO 待移除
         if (boundItem.getComponent(exports.ParticleSystem)) {
-            var particleTrack = timelineAsset.createTrack(exports.TrackAsset, this, "ParticleTrack");
+            var particleTrack = timelineAsset.createTrack(ParticleTrack, this, "ParticleTrack");
             particleTrack.boundObject = this.boundObject;
             var particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
             particleClip.start = boundItem.start;
@@ -24705,7 +24722,7 @@ var TextLayout = /*#__PURE__*/ function() {
         this.width = textWidth;
         this.height = textHeight;
         this.letterSpace = letterSpace;
-        this.overFlow = textOverflow;
+        this.overflow = textOverflow;
         this.textBaseline = textBaseline;
         this.textAlign = textAlign;
         this.lineHeight = lineHeight;
@@ -27320,6 +27337,7 @@ var seed$1 = 1;
         this.downloader = downloader;
         this.assets = {};
         this.sourceFrom = {};
+        this.imageBitmapOptions = {};
         this.id = seed$1++;
         this.timers = [];
         this.updateOptions(options);
@@ -27577,12 +27595,12 @@ var seed$1 = 1;
     _proto.processJSON = function processJSON(json) {
         var _this = this;
         return _async_to_generator(function() {
-            var jsonScene, _jsonScene_plugins, plugins, pluginSystem;
+            var jsonScene, _jsonScene_plugins, plugins, textures, pluginSystem;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         jsonScene = getStandardJSON(json);
-                        _jsonScene_plugins = jsonScene.plugins, plugins = _jsonScene_plugins === void 0 ? [] : _jsonScene_plugins;
+                        _jsonScene_plugins = jsonScene.plugins, plugins = _jsonScene_plugins === void 0 ? [] : _jsonScene_plugins, textures = jsonScene.textures;
                         pluginSystem = new PluginSystem(plugins);
                         return [
                             4,
@@ -27590,6 +27608,7 @@ var seed$1 = 1;
                         ];
                     case 1:
                         _state.sent();
+                        _this.assignImageBitmapOptions(textures);
                         return [
                             2,
                             {
@@ -27695,11 +27714,11 @@ var seed$1 = 1;
         if (compressedTexture === void 0) compressedTexture = 0;
         var _this = this;
         return _async_to_generator(function() {
-            var _this_options, useCompressedTexture, variables, baseUrl, jobs, loadedImages;
+            var _this_options, useCompressedTexture, variables, disableWebP, disableAVIF, baseUrl, jobs, loadedImages;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        _this_options = _this.options, useCompressedTexture = _this_options.useCompressedTexture, variables = _this_options.variables;
+                        _this_options = _this.options, useCompressedTexture = _this_options.useCompressedTexture, variables = _this_options.variables, disableWebP = _this_options.disableWebP, disableAVIF = _this_options.disableAVIF;
                         baseUrl = _this.baseUrl;
                         jobs = images.map(/*#__PURE__*/ _async_to_generator(function(img, idx) {
                             var png, webp, avif, imageURL, webpURL, avifURL, id, template, background, url, isVideo, loadFn, resultImage, e, compressed, src, bufferURL, _ref, url1, image, _tmp;
@@ -27710,9 +27729,9 @@ var seed$1 = 1;
                                         // eslint-disable-next-line compat/compat
                                         imageURL = new URL(png, baseUrl).href;
                                         // eslint-disable-next-line compat/compat
-                                        webpURL = webp && new URL(webp, baseUrl).href;
+                                        webpURL = !disableWebP && webp ? new URL(webp, baseUrl).href : undefined;
                                         // eslint-disable-next-line compat/compat
-                                        avifURL = avif && new URL(avif, baseUrl).href;
+                                        avifURL = !disableAVIF && avif ? new URL(avif, baseUrl).href : undefined;
                                         id = img.id;
                                         if (!("template" in img)) return [
                                             3,
@@ -27821,7 +27840,7 @@ var seed$1 = 1;
                                         ];
                                         return [
                                             4,
-                                            loadAVIFOptional(imageURL, avifURL)
+                                            loadAVIFOptional(imageURL, avifURL, _this.imageBitmapOptions[id])
                                         ];
                                     case 10:
                                         _tmp = _state.sent();
@@ -27832,7 +27851,7 @@ var seed$1 = 1;
                                     case 11:
                                         return [
                                             4,
-                                            loadWebPOptional(imageURL, webpURL)
+                                            loadWebPOptional(imageURL, webpURL, _this.imageBitmapOptions[id])
                                         ];
                                     case 12:
                                         _tmp = _state.sent();
@@ -28044,6 +28063,21 @@ var seed$1 = 1;
             this.assets[images[i].id] = loadedImages[i];
         }
     };
+    _proto.assignImageBitmapOptions = function assignImageBitmapOptions(textures) {
+        var _this = this;
+        if (textures === void 0) textures = [];
+        textures.forEach(function(texture) {
+            if (!(_instanceof1(texture, Texture) || "mipmaps" in texture)) {
+                var source = texture.source;
+                if (isObject(source)) {
+                    _this.imageBitmapOptions[source.id] = {
+                        imageOrientation: texture.flipY ? "flipY" : "none",
+                        premultiplyAlpha: texture.premultiplyAlpha ? "premultiply" : "none"
+                    };
+                }
+            }
+        });
+    };
     _proto.removeTimer = function removeTimer(id) {
         var index = this.timers.indexOf(id);
         if (index !== -1) {
@@ -28053,11 +28087,15 @@ var seed$1 = 1;
     /**
    * 销毁方法
    */ _proto.dispose = function dispose() {
+        var _this = this;
         if (this.timers.length) {
             this.timers.map(function(id) {
                 return window.clearTimeout(id);
             });
         }
+        closeImageBitMap(Object.keys(this.assets).map(function(key) {
+            return _this.assets[key];
+        }));
         this.assets = {};
         this.sourceFrom = {};
         this.timers = [];
@@ -28074,7 +28112,7 @@ function createTextureOptionsBySource(image, sourceFrom, id) {
     };
     if (_instanceof1(image, Texture)) {
         return _extends({}, image.source, options);
-    } else if (_instanceof1(image, HTMLImageElement) || isCanvas(image)) {
+    } else if (_instanceof1(image, HTMLImageElement) || _instanceof1(image, ImageBitmap) || isCanvas(image)) {
         return _extends({
             image: image,
             sourceType: exports.TextureSourceType.image,
@@ -31407,7 +31445,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.5";
+var version$1 = "2.2.0-alpha.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33034,7 +33072,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.1.5";
+var version = "2.2.0-alpha.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -33088,6 +33126,7 @@ exports.HELP_LINK = HELP_LINK;
 exports.InteractLoader = InteractLoader;
 exports.InteractMesh = InteractMesh;
 exports.KTXTexture = KTXTexture;
+exports.LOAD_PREFER_IMAGE_BITMAP = LOAD_PREFER_IMAGE_BITMAP;
 exports.LineSegments = LineSegments;
 exports.LinearValue = LinearValue;
 exports.Material = Material;
@@ -33101,6 +33140,7 @@ exports.ParticleBehaviourPlayableAsset = ParticleBehaviourPlayableAsset;
 exports.ParticleLoader = ParticleLoader;
 exports.ParticleMesh = ParticleMesh;
 exports.ParticleSystemRenderer = ParticleSystemRenderer;
+exports.ParticleTrack = ParticleTrack;
 exports.PassTextureCache = PassTextureCache;
 exports.PathSegments = PathSegments;
 exports.PluginSystem = PluginSystem;
@@ -33163,6 +33203,7 @@ exports.base64ToFile = base64ToFile;
 exports.blend = blend;
 exports.calculateTranslation = calculateTranslation;
 exports.canvasPool = canvasPool;
+exports.closeImageBitMap = closeImageBitMap;
 exports.colorGradingFrag = colorGradingFrag;
 exports.colorStopsFromGradient = colorStopsFromGradient;
 exports.colorToArr = colorToArr$1;
@@ -33241,6 +33282,7 @@ exports.loadAVIFOptional = loadAVIFOptional;
 exports.loadBinary = loadBinary;
 exports.loadBlob = loadBlob;
 exports.loadImage = loadImage;
+exports.loadImageBitmap = loadImageBitmap;
 exports.loadMedia = loadMedia;
 exports.loadVideo = loadVideo;
 exports.loadWebPOptional = loadWebPOptional;