@galacean/effects-threejs 2.0.0-alpha.14 → 2.0.0-alpha.16

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.0.0-alpha.14
+ * Version: v2.0.0-alpha.16
  */
 
 'use strict';
@@ -765,6 +765,11 @@ function noop() {}
  */ function isObject(obj) {
     return Object.prototype.toString.call(obj) === "[object Object]";
 }
+function isCanvas(canvas) {
+    var _canvas_tagName;
+    // 小程序 Canvas 无法使用 instanceof HTMLCanvasElement 判断
+    return typeof canvas === "object" && canvas !== null && ((_canvas_tagName = canvas.tagName) == null ? void 0 : _canvas_tagName.toUpperCase()) === "CANVAS";
+}
 function deepClone(obj) {
     if (isArray(obj)) {
         return obj.map(deepClone);
@@ -792,6 +797,37 @@ function throwDestroyedError() {
 function generateGUID() {
     return v4().replace(/-/g, "");
 }
+function base64ToFile(base64, filename, contentType) {
+    if (filename === void 0) filename = "base64File";
+    if (contentType === void 0) contentType = "";
+    // 去掉 Base64 字符串的 Data URL 部分（如果存在）
+    var base64WithoutPrefix = base64.split(",")[1] || base64;
+    // 将 base64 编码的字符串转换为二进制字符串
+    var byteCharacters = atob(base64WithoutPrefix);
+    // 创建一个 8 位无符号整数值的数组，即“字节数组”
+    var byteArrays = [];
+    // 切割二进制字符串为多个片段，并将每个片段转换成一个字节数组
+    for(var offset = 0; offset < byteCharacters.length; offset += 512){
+        var slice = byteCharacters.slice(offset, offset + 512);
+        var byteNumbers = new Array(slice.length);
+        for(var i = 0; i < slice.length; i++){
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        var byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    // 使用字节数组创建 Blob 对象
+    var blob = new Blob(byteArrays, {
+        type: contentType
+    });
+    // 创建 File 对象
+    var file = new File([
+        blob
+    ], filename, {
+        type: contentType
+    });
+    return file;
+}
 
 function _defineProperties(target, props) {
     for(var i = 0; i < props.length; i++){
@@ -13677,13 +13713,16 @@ var SpriteColorPlayable = /*#__PURE__*/ function(Playable) {
     }
     var _proto = SpriteColorPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
-        var boundItem = context.output.getUserData();
+        var boundObject = context.output.getUserData();
+        if (!_instanceof1(boundObject, exports.VFXItem)) {
+            return;
+        }
         if (!this.spriteMaterial) {
-            this.spriteMaterial = boundItem.getComponent(exports.SpriteComponent).material;
+            this.spriteMaterial = boundObject.getComponent(exports.SpriteComponent).material;
         }
         var colorInc = vecFill(tempColor, 1);
         var colorChanged;
-        var life = this.time / boundItem.duration;
+        var life = this.time / boundObject.duration;
         var opacityOverLifetime = this.opacityOverLifetime;
         var colorOverLifetime = this.colorOverLifetime;
         if (colorOverLifetime) {
@@ -13813,7 +13852,6 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         renderer.drawGeometry(geo, material);
     };
     _proto.start = function start() {
-        this.priority = this.item.listIndex;
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.update = function update(dt) {
@@ -16217,7 +16255,7 @@ function getTrailMeshShader(trails, particleMaxCount, name, env, gpuCapability)
     }
     var _proto = ParticleSystemRenderer.prototype;
     _proto.start = function start() {
-        this._priority = this.item.listIndex;
+        this._priority = this.item.renderOrder;
         this.particleMesh.gravityModifier.scaleXCoord(this.item.duration);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
@@ -17267,13 +17305,13 @@ function randomArrItem(arr, keepArr) {
     }
     var _proto = ParticleBehaviourPlayable.prototype;
     _proto.start = function start(context) {
-        var binding = context.output.getUserData();
-        if (this.particleSystem) {
+        var boundObject = context.output.getUserData();
+        if (this.particleSystem || !_instanceof1(boundObject, exports.VFXItem)) {
             return;
         }
-        this.particleSystem = binding.getComponent(exports.ParticleSystem);
+        this.particleSystem = boundObject.getComponent(exports.ParticleSystem);
         if (this.particleSystem) {
-            this.particleSystem.name = binding.name;
+            this.particleSystem.name = boundObject.name;
             this.particleSystem.start();
             this.particleSystem.initEmitterTransform();
         }
@@ -18431,10 +18469,13 @@ var tempPos = new Vector3();
     };
     _proto.processFrame = function processFrame(context) {
         if (!this.binding) {
-            this.binding = context.output.getUserData();
-            this.start();
+            var boundObject = context.output.getUserData();
+            if (_instanceof1(boundObject, exports.VFXItem)) {
+                this.binding = boundObject;
+                this.start();
+            }
         }
-        if (this.binding.composition) {
+        if (this.binding && this.binding.composition) {
             this.sampleAnimation();
         }
     };
@@ -18643,9 +18684,12 @@ var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
     }
     var _proto = AnimationClipPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
-        var boundItem = context.output.getUserData();
-        if (boundItem.composition) {
-            this.clip.sampleAnimation(boundItem, this.time);
+        var boundObject = context.output.getUserData();
+        if (!_instanceof1(boundObject, exports.VFXItem)) {
+            return;
+        }
+        if (boundObject.composition) {
+            this.clip.sampleAnimation(boundObject, this.time);
         }
     };
     return AnimationClipPlayable;
@@ -18663,17 +18707,15 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
         return _this;
     }
     var _proto = TrackAsset.prototype;
-    _proto.initializeBinding = function initializeBinding(parentBinding) {
-        this.binding = parentBinding;
+    /**
+   * 重写该方法以获取自定义对象绑定
+   */ _proto.resolveBinding = function resolveBinding(parentBinding) {
+        return parentBinding;
     };
     /**
-   * @internal
-   */ _proto.initializeBindingRecursive = function initializeBindingRecursive(parentBinding) {
-        this.initializeBinding(parentBinding);
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
-            var subTrack = _step.value;
-            subTrack.initializeBindingRecursive(this.binding);
-        }
+   * 重写该方法以创建自定义混合器
+   */ _proto.createTrackMixer = function createTrackMixer(graph) {
+        return new Playable(graph);
     };
     _proto.createOutput = function createOutput() {
         var output = new PlayableOutput();
@@ -18704,11 +18746,6 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
         }
         return mixer;
     };
-    /**
-   * 重写该方法以创建自定义混合器
-   */ _proto.createTrackMixer = function createTrackMixer(graph) {
-        return new Playable(graph);
-    };
     _proto.createPlayable = function createPlayable(graph) {
         return new Playable(graph);
     };
@@ -18858,13 +18895,6 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
     var _proto = ObjectBindingTrack.prototype;
     _proto.create = function create(timelineAsset) {
         var boundItem = this.binding;
-        this.options = {
-            start: boundItem.start,
-            duration: boundItem.duration,
-            looping: boundItem.endBehavior === ItemEndBehavior.loop,
-            endBehavior: boundItem.endBehavior || ItemEndBehavior.destroy
-        };
-        this.name = boundItem.name;
         // 添加粒子动画 clip
         if (boundItem.getComponent(exports.ParticleSystem)) {
             var particleTrack = timelineAsset.createTrack(exports.TrackAsset, this, "ParticleTrack");
@@ -18875,18 +18905,6 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
             particleClip.endBehaviour = boundItem.endBehavior;
         }
     };
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.options.start;
-        var duration = this.options.duration;
-        if (localTime - duration > 0.001) {
-            if (this.options.endBehavior === END_BEHAVIOR_RESTART) {
-                localTime = localTime % duration;
-            } else if (this.options.endBehavior === END_BEHAVIOR_FREEZE) {
-                localTime = Math.min(duration, localTime);
-            }
-        }
-        return localTime;
-    };
     _proto.fromData = function fromData(data) {
         TrackAsset1.prototype.fromData.call(this, data);
         this.data = data;
@@ -18915,13 +18933,11 @@ var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
     }
     var _proto = ActivationMixerPlayable.prototype;
     _proto.processFrame = function processFrame(context) {
-        if (!this.bindingItem) {
-            this.bindingItem = context.output.getUserData();
-        }
-        if (!this.bindingItem) {
+        var boundObject = context.output.getUserData();
+        if (!_instanceof1(boundObject, exports.VFXItem)) {
             return;
         }
-        var bindingItem = this.bindingItem;
+        var boundItem = boundObject;
         var hasInput = false;
         for(var i = 0; i < this.getInputCount(); i++){
             if (this.getInputWeight(i) > 0) {
@@ -18930,11 +18946,11 @@ var ActivationMixerPlayable = /*#__PURE__*/ function(Playable) {
             }
         }
         if (hasInput) {
-            bindingItem.transform.setValid(true);
-            this.showRendererComponents(bindingItem);
+            boundItem.transform.setValid(true);
+            this.showRendererComponents(boundItem);
         } else {
-            bindingItem.transform.setValid(false);
-            this.hideRendererComponents(bindingItem);
+            boundItem.transform.setValid(false);
+            this.hideRendererComponents(boundItem);
         }
     };
     _proto.hideRendererComponents = function hideRendererComponents(item) {
@@ -18962,9 +18978,6 @@ exports.ActivationTrack = /*#__PURE__*/ function(TrackAsset) {
         return TrackAsset.apply(this, arguments);
     }
     var _proto = ActivationTrack.prototype;
-    _proto.initializeBinding = function initializeBinding(parentBinding) {
-        this.binding = parentBinding;
-    };
     _proto.createTrackMixer = function createTrackMixer(graph) {
         return new ActivationMixerPlayable(graph);
     };
@@ -18995,7 +19008,6 @@ exports.TimelineAsset = /*#__PURE__*/ function(PlayableAsset) {
     }
     var _proto = TimelineAsset.prototype;
     _proto.createPlayable = function createPlayable(graph) {
-        this.graph = 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;){
@@ -19113,172 +19125,446 @@ function compareTracks(a, b) {
     }
 }
 
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) return call;
-    return _assert_this_initialized(self);
-}
-
-var TextLayout = /*#__PURE__*/ function() {
-    function TextLayout(options) {
-        this.width = 0;
-        this.height = 0;
-        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, text = options.text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
-        var tempWidth = fontSize + letterSpace;
-        this.autoWidth = autoWidth;
-        this.maxTextWidth = text.length * tempWidth;
-        // if (autoWidth) {
-        //   this.width = this.maxTextWidth + this.lineWidth;
-        //   this.height = fontSize + this.lineHeight;
-        // } else {
-        //   if (textWidth) {
-        //     this.maxCharCount = Math.floor((textWidth - this.lineWidth) / (tempWidth));
-        //     this.width = textWidth;
-        //   } else {
-        //     this.width = basicScale[0] * 100;
-        //   }
-        //   this.height = basicScale[1] * 100;
-        // }
-        this.width = textWidth;
-        this.height = textHeight;
-        this.letterSpace = letterSpace;
-        this.overFlow = textOverflow;
-        this.textBaseline = textBaseline;
-        this.textAlign = textAlign;
-        this.lineHeight = lineHeight;
+/**
+ * @since 2.0.0
+ * @internal
+ */ var CompositionComponent = /*#__PURE__*/ function(ItemBehaviour) {
+    _inherits(CompositionComponent, ItemBehaviour);
+    function CompositionComponent() {
+        var _this;
+        _this = ItemBehaviour.apply(this, arguments) || this;
+        _this.time = 0;
+        _this.startTime = 0;
+        _this.items = [] // 场景的所有元素
+        ;
+        _this.reusable = false;
+        _this.sceneBindings = [];
+        _this.graph = new PlayableGraph();
+        return _this;
     }
-    var _proto = TextLayout.prototype;
-    _proto.getOffsetY = function getOffsetY(style) {
-        var offsetY = 0;
-        var offset = (style.fontSize + style.outlineWidth) * style.fontScale;
-        switch(this.textBaseline){
-            case TextBaseline.top:
-                offsetY = offset;
-                break;
-            case TextBaseline.middle:
-                offsetY = (this.height + offset) / 2; // fonSize;
-                break;
-            case TextBaseline.bottom:
-                offsetY = this.height - offset / 2;
-                break;
+    var _proto = CompositionComponent.prototype;
+    _proto.start = function start() {
+        var _this_item_props = this.item.props, _this_item_props_startTime = _this_item_props.startTime, startTime = _this_item_props_startTime === void 0 ? 0 : _this_item_props_startTime;
+        this.startTime = startTime;
+        this.resolveBindings();
+        this.timelinePlayable = this.timelineAsset.createPlayable(this.graph);
+        this.timelinePlayable.play();
+        // 重播不销毁元素
+        if (this.item.endBehavior !== ItemEndBehavior.destroy) {
+            this.setReusable(true);
         }
-        return offsetY;
     };
-    _proto.getOffsetX = function getOffsetX(style, maxWidth) {
-        var offsetX = 0;
-        switch(this.textAlign){
-            case TextAlignment.left:
-                offsetX = style.outlineWidth * style.fontScale;
-                break;
-            case TextAlignment.middle:
-                offsetX = (this.width * style.fontScale - maxWidth) / 2;
-                break;
-            case TextAlignment.right:
-                offsetX = this.width * style.fontScale - maxWidth;
-                break;
+    _proto.setReusable = function setReusable(value) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.timelineAsset.tracks), _step; !(_step = _iterator()).done;){
+            var track = _step.value;
+            var binding = track.binding;
+            if (_instanceof1(binding, exports.VFXItem)) {
+                if (_instanceof1(track, exports.ObjectBindingTrack)) {
+                    binding.reusable = value;
+                }
+                var subCompositionComponent = binding.getComponent(CompositionComponent);
+                if (subCompositionComponent) {
+                    subCompositionComponent.setReusable(value);
+                }
+            }
         }
-        return offsetX;
-    };
-    /**
-   * 设置文本框的宽度和高度
-   * @param width 文本框宽度
-   * @param height 文本框高度
-   */ _proto.setSize = function setSize(width, height) {
-        this.width = width;
-        this.height = height;
     };
-    return TextLayout;
-}();
-
-var TextStyle = function TextStyle(options) {
-    /**
-   * 是否有下划线（暂时无效）
-   */ this.isUnderline = false // ttf
-    ;
-    /**
-   * 下划线高度（暂时无效）
-   */ this.underlineHeight = 1 // ttf
-    ;
-    /**
-   * 是否有外描边
-   */ this.isOutlined = false // both // ttf & char
-    ;
-    /**
-   * 外描边宽度
-   */ this.outlineWidth = 0 // both // ttf & char
-    ;
-    /**
-   * 是否有阴影
-   */ this.hasShadow = false // ttf
-    ;
-    this.fontDesc = "" // both
-    ;
-    /**
-   * 字体倍数
-   */ this.fontScale = 2;
-    this.fontOffset = 0;
-    var _options_textColor = options.textColor, textColor = _options_textColor === void 0 ? [
-        1,
-        1,
-        1,
-        1
-    ] : _options_textColor, _options_fontSize = options.fontSize, fontSize = _options_fontSize === void 0 ? 40 : _options_fontSize, outline = options.outline, shadow = options.shadow, _options_fontWeight = options.fontWeight, fontWeight = _options_fontWeight === void 0 ? "normal" : _options_fontWeight, _options_fontStyle = options.fontStyle, fontStyle = _options_fontStyle === void 0 ? "normal" : _options_fontStyle, _options_fontFamily = options.fontFamily, fontFamily = _options_fontFamily === void 0 ? "sans-serif" : _options_fontFamily;
-    this.textColor = textColor;
-    //@ts-expect-error
-    this.textWeight = fontWeight;
-    //@ts-expect-error
-    this.fontStyle = fontStyle;
-    this.fontFamily = fontFamily;
-    this.fontSize = fontSize; // 暂时取消字号限制 Math.min(fontSize, this.maxFontSize);
-    if (outline) {
-        this.isOutlined = true;
-        var _outline_outlineColor;
-        this.outlineColor = (_outline_outlineColor = outline.outlineColor) != null ? _outline_outlineColor : [
-            1,
-            1,
-            1,
-            1
-        ];
-        var _outline_outlineWidth;
-        this.outlineWidth = (_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 1;
-        this.fontOffset += this.outlineWidth;
-    }
-    if (shadow) {
-        this.hasShadow = true;
-        var _shadow_shadowBlur;
-        this.shadowBlur = (_shadow_shadowBlur = shadow.shadowBlur) != null ? _shadow_shadowBlur : 2;
-        var _shadow_shadowColor;
-        this.shadowColor = (_shadow_shadowColor = shadow.shadowColor) != null ? _shadow_shadowColor : [
-            0,
-            0,
-            0,
-            1
-        ];
-        var _shadow_shadowOffsetX;
-        this.shadowOffsetX = (_shadow_shadowOffsetX = shadow.shadowOffsetX) != null ? _shadow_shadowOffsetX : 0;
-        var _shadow_shadowOffsetY;
-        this.shadowOffsetY = (_shadow_shadowOffsetY = shadow.shadowOffsetY) != null ? _shadow_shadowOffsetY : 0;
-    }
-    if (this.fontStyle !== FontStyle.normal) {
-        // 0.0174532925 = 3.141592653 / 180
-        this.fontOffset += this.fontSize * Math.tan(12 * 0.0174532925);
-    }
-};
-
-var CanvasPool = /*#__PURE__*/ function() {
-    function CanvasPool() {
-        this.elements = [];
-    }
-    var _proto = CanvasPool.prototype;
-    _proto.dispose = function dispose() {
-        this.elements.forEach(function(e) {
-            return e.remove();
-        });
-        // clearing the array
-        this.elements.length = 0;
+    _proto.getReusable = function getReusable() {
+        return this.reusable;
     };
-    _proto.getCanvas = function getCanvas() {
-        if (this.elements.length !== 0) {
-            return this.elements.shift();
+    _proto.update = function update(dt) {
+        var time = this.time;
+        // 主合成 rootItem 没有绑定轨道，增加结束行为判断。
+        if (this.item.isEnded(this.time) && !this.item.parent) {
+            this.item.ended = true;
+        }
+        this.timelinePlayable.setTime(time);
+        this.graph.evaluate(dt);
+    };
+    _proto.createContent = function createContent() {
+        var sceneBindings = [];
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.data.sceneBindings), _step; !(_step = _iterator()).done;){
+            var sceneBindingData = _step.value;
+            sceneBindings.push({
+                key: this.engine.assetLoader.loadGUID(sceneBindingData.key.id),
+                value: this.engine.assetLoader.loadGUID(sceneBindingData.value.id)
+            });
+        }
+        this.sceneBindings = sceneBindings;
+        var timelineAsset = this.data.timelineAsset ? this.engine.assetLoader.loadGUID(this.data.timelineAsset.id) : new exports.TimelineAsset(this.engine);
+        this.timelineAsset = timelineAsset;
+        var items = this.items;
+        this.items.length = 0;
+        if (this.item.composition) {
+            var assetLoader = this.item.engine.assetLoader;
+            var itemProps = this.item.props.items ? this.item.props.items : [];
+            for(var i = 0; i < itemProps.length; i++){
+                var item = void 0;
+                var itemData = itemProps[i];
+                // 设置预合成作为元素时的时长、结束行为和渲染延时
+                if (exports.Item.isComposition(itemData)) {
+                    var refId = itemData.content.options.refId;
+                    var props = this.item.composition.refCompositionProps.get(refId);
+                    if (!props) {
+                        throw new Error("引用的Id: " + refId + " 的预合成不存在");
+                    }
+                    // endBehaviour 类型需优化
+                    props.content = itemData.content;
+                    item = assetLoader.loadGUID(itemData.id);
+                    item.composition = this.item.composition;
+                    var compositionComponent = item.addComponent(CompositionComponent);
+                    compositionComponent.data = props;
+                    compositionComponent.refId = refId;
+                    item.transform.parentTransform = this.transform;
+                    this.item.composition.refContent.push(item);
+                    if (item.endBehavior === ItemEndBehavior.loop) {
+                        this.item.composition.autoRefTex = false;
+                    }
+                    compositionComponent.createContent();
+                    for(var _iterator1 = _create_for_of_iterator_helper_loose(compositionComponent.items), _step1; !(_step1 = _iterator1()).done;){
+                        var vfxItem = _step1.value;
+                        vfxItem.setInstanceId(generateGUID());
+                        for(var _iterator2 = _create_for_of_iterator_helper_loose(vfxItem.components), _step2; !(_step2 = _iterator2()).done;){
+                            var component = _step2.value;
+                            component.setInstanceId(generateGUID());
+                        }
+                    }
+                } else {
+                    item = assetLoader.loadGUID(itemData.id);
+                    item.composition = this.item.composition;
+                }
+                item.parent = this.item;
+                // 相机不跟随合成移动
+                item.transform.parentTransform = itemData.type === ItemType.camera ? new Transform() : this.transform;
+                if (exports.VFXItem.isExtraCamera(item)) {
+                    this.item.composition.extraCamera = item;
+                }
+                items.push(item);
+            }
+        }
+    };
+    _proto.onDestroy = function onDestroy() {
+        if (this.item.composition) {
+            if (this.items) {
+                this.items.forEach(function(item) {
+                    return item.dispose();
+                });
+                this.items.length = 0;
+            }
+        }
+    };
+    _proto.hitTest = function hitTest(ray, x, y, regions, force, options) {
+        var _this, _loop = function(i) {
+            var item = _this.items[i];
+            if (item.getVisible() && !item.ended && !exports.VFXItem.isComposition(item) && !skip(item)) {
+                var hitParams = item.getHitTestParams(force);
+                if (hitParams) {
+                    var success = false;
+                    var intersectPoint = new Vector3();
+                    if (hitParams.type === exports.HitTestType.triangle) {
+                        var triangles = hitParams.triangles, backfaceCulling = hitParams.backfaceCulling;
+                        for(var j = 0; j < triangles.length; j++){
+                            var triangle = triangles[j];
+                            if (ray.intersectTriangle(triangle, intersectPoint, backfaceCulling)) {
+                                success = true;
+                                hitPositions.push(intersectPoint);
+                                break;
+                            }
+                        }
+                    } else if (hitParams.type === exports.HitTestType.box) {
+                        var center = hitParams.center, size = hitParams.size;
+                        var boxMin = center.clone().addScaledVector(size, 0.5);
+                        var boxMax = center.clone().addScaledVector(size, -0.5);
+                        if (ray.intersectBox({
+                            min: boxMin,
+                            max: boxMax
+                        }, intersectPoint)) {
+                            success = true;
+                            hitPositions.push(intersectPoint);
+                        }
+                    } else if (hitParams.type === exports.HitTestType.sphere) {
+                        var center1 = hitParams.center, radius = hitParams.radius;
+                        if (ray.intersectSphere({
+                            center: center1,
+                            radius: radius
+                        }, intersectPoint)) {
+                            success = true;
+                            hitPositions.push(intersectPoint);
+                        }
+                    } else if (hitParams.type === exports.HitTestType.custom) {
+                        var tempPosition = hitParams.collect(ray, new Vector2(x, y));
+                        if (tempPosition && tempPosition.length > 0) {
+                            tempPosition.forEach(function(pos) {
+                                hitPositions.push(pos);
+                            });
+                            success = true;
+                        }
+                    }
+                    if (success) {
+                        var region = {
+                            compContent: _this.item,
+                            id: item.id,
+                            name: item.name,
+                            position: hitPositions[hitPositions.length - 1],
+                            parentId: item.parentId,
+                            hitPositions: hitPositions,
+                            behavior: hitParams.behavior
+                        };
+                        regions.push(region);
+                        if (stop(region)) {
+                            return {
+                                v: regions
+                            };
+                        }
+                    }
+                }
+            }
+        };
+        var hitPositions = [];
+        var stop = (options == null ? void 0 : options.stop) || noop;
+        var skip = (options == null ? void 0 : options.skip) || noop;
+        var maxCount = (options == null ? void 0 : options.maxCount) || this.items.length;
+        for(var i = 0; i < this.items.length && regions.length < maxCount; i++){
+            var _ret = (_this = this, _loop(i));
+            if (_type_of(_ret) === "object") return _ret.v;
+        }
+        return regions;
+    };
+    _proto.fromData = function fromData(data) {};
+    _proto.resolveBindings = function resolveBindings() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.sceneBindings), _step; !(_step = _iterator()).done;){
+            var sceneBinding = _step.value;
+            sceneBinding.key.binding = sceneBinding.value;
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.timelineAsset.tracks), _step1; !(_step1 = _iterator1()).done;){
+            var masterTrack = _step1.value;
+            this.resolveTrackBindingsWithRoot(masterTrack);
+        }
+    };
+    _proto.resolveTrackBindingsWithRoot = function resolveTrackBindingsWithRoot(track) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(track.getChildTracks()), _step; !(_step = _iterator()).done;){
+            var subTrack = _step.value;
+            subTrack.binding = subTrack.resolveBinding(track.binding);
+            this.resolveTrackBindingsWithRoot(subTrack);
+        }
+    };
+    return CompositionComponent;
+}(ItemBehaviour);
+
+exports.SubCompositionTrack = /*#__PURE__*/ function(TrackAsset) {
+    _inherits(SubCompositionTrack, TrackAsset);
+    function SubCompositionTrack() {
+        return TrackAsset.apply(this, arguments);
+    }
+    var _proto = SubCompositionTrack.prototype;
+    _proto.resolveBinding = function resolveBinding(parentBinding) {
+        if (!_instanceof1(parentBinding, exports.VFXItem)) {
+            throw new Error("SubCompositionTrack needs to be set under the VFXItem track");
+        }
+        return parentBinding.getComponent(CompositionComponent);
+    };
+    return SubCompositionTrack;
+}(exports.TrackAsset);
+exports.SubCompositionTrack = __decorate([
+    effectsClass("SubCompositionTrack")
+], exports.SubCompositionTrack);
+
+var SubCompositionClipPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(SubCompositionClipPlayable, Playable);
+    function SubCompositionClipPlayable() {
+        return Playable.apply(this, arguments);
+    }
+    var _proto = SubCompositionClipPlayable.prototype;
+    _proto.processFrame = function processFrame(context) {
+        var boundObject = context.output.getUserData();
+        if (_instanceof1(boundObject, CompositionComponent)) {
+            boundObject.time = this.getTime();
+        }
+    };
+    return SubCompositionClipPlayable;
+}(Playable);
+
+exports.SubCompositionPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(SubCompositionPlayableAsset, PlayableAsset);
+    function SubCompositionPlayableAsset() {
+        return PlayableAsset.apply(this, arguments);
+    }
+    var _proto = SubCompositionPlayableAsset.prototype;
+    _proto.createPlayable = function createPlayable(graph) {
+        return new SubCompositionClipPlayable(graph);
+    };
+    return SubCompositionPlayableAsset;
+}(PlayableAsset);
+exports.SubCompositionPlayableAsset = __decorate([
+    effectsClass("SubCompositionPlayableAsset")
+], exports.SubCompositionPlayableAsset);
+
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) return call;
+    return _assert_this_initialized(self);
+}
+
+var TextLayout = /*#__PURE__*/ function() {
+    function TextLayout(options) {
+        this.width = 0;
+        this.height = 0;
+        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.display : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, text = options.text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
+        var tempWidth = fontSize + letterSpace;
+        this.autoWidth = autoWidth;
+        this.maxTextWidth = text.length * tempWidth;
+        // if (autoWidth) {
+        //   this.width = this.maxTextWidth + this.lineWidth;
+        //   this.height = fontSize + this.lineHeight;
+        // } else {
+        //   if (textWidth) {
+        //     this.maxCharCount = Math.floor((textWidth - this.lineWidth) / (tempWidth));
+        //     this.width = textWidth;
+        //   } else {
+        //     this.width = basicScale[0] * 100;
+        //   }
+        //   this.height = basicScale[1] * 100;
+        // }
+        this.width = textWidth;
+        this.height = textHeight;
+        this.letterSpace = letterSpace;
+        this.overFlow = textOverflow;
+        this.textBaseline = textBaseline;
+        this.textAlign = textAlign;
+        this.lineHeight = lineHeight;
+    }
+    var _proto = TextLayout.prototype;
+    _proto.getOffsetY = function getOffsetY(style) {
+        var offsetY = 0;
+        var offset = (style.fontSize + style.outlineWidth) * style.fontScale;
+        switch(this.textBaseline){
+            case TextBaseline.top:
+                offsetY = offset;
+                break;
+            case TextBaseline.middle:
+                offsetY = (this.height + offset) / 2; // fonSize;
+                break;
+            case TextBaseline.bottom:
+                offsetY = this.height - offset / 2;
+                break;
+        }
+        return offsetY;
+    };
+    _proto.getOffsetX = function getOffsetX(style, maxWidth) {
+        var offsetX = 0;
+        switch(this.textAlign){
+            case TextAlignment.left:
+                offsetX = style.outlineWidth * style.fontScale;
+                break;
+            case TextAlignment.middle:
+                offsetX = (this.width * style.fontScale - maxWidth) / 2;
+                break;
+            case TextAlignment.right:
+                offsetX = this.width * style.fontScale - maxWidth;
+                break;
+        }
+        return offsetX;
+    };
+    /**
+   * 设置文本框的宽度和高度
+   * @param width 文本框宽度
+   * @param height 文本框高度
+   */ _proto.setSize = function setSize(width, height) {
+        this.width = width;
+        this.height = height;
+    };
+    return TextLayout;
+}();
+
+var TextStyle = function TextStyle(options) {
+    /**
+   * 是否有下划线（暂时无效）
+   */ this.isUnderline = false // ttf
+    ;
+    /**
+   * 下划线高度（暂时无效）
+   */ this.underlineHeight = 1 // ttf
+    ;
+    /**
+   * 是否有外描边
+   */ this.isOutlined = false // both // ttf & char
+    ;
+    /**
+   * 外描边宽度
+   */ this.outlineWidth = 0 // both // ttf & char
+    ;
+    /**
+   * 是否有阴影
+   */ this.hasShadow = false // ttf
+    ;
+    this.fontDesc = "" // both
+    ;
+    /**
+   * 字体倍数
+   */ this.fontScale = 2;
+    this.fontOffset = 0;
+    var _options_textColor = options.textColor, textColor = _options_textColor === void 0 ? [
+        1,
+        1,
+        1,
+        1
+    ] : _options_textColor, _options_fontSize = options.fontSize, fontSize = _options_fontSize === void 0 ? 40 : _options_fontSize, outline = options.outline, shadow = options.shadow, _options_fontWeight = options.fontWeight, fontWeight = _options_fontWeight === void 0 ? "normal" : _options_fontWeight, _options_fontStyle = options.fontStyle, fontStyle = _options_fontStyle === void 0 ? "normal" : _options_fontStyle, _options_fontFamily = options.fontFamily, fontFamily = _options_fontFamily === void 0 ? "sans-serif" : _options_fontFamily;
+    this.textColor = textColor;
+    //@ts-expect-error
+    this.textWeight = fontWeight;
+    //@ts-expect-error
+    this.fontStyle = fontStyle;
+    this.fontFamily = fontFamily;
+    this.fontSize = fontSize; // 暂时取消字号限制 Math.min(fontSize, this.maxFontSize);
+    if (outline) {
+        this.isOutlined = true;
+        var _outline_outlineColor;
+        this.outlineColor = (_outline_outlineColor = outline.outlineColor) != null ? _outline_outlineColor : [
+            1,
+            1,
+            1,
+            1
+        ];
+        var _outline_outlineWidth;
+        this.outlineWidth = (_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 1;
+        this.fontOffset += this.outlineWidth;
+    }
+    if (shadow) {
+        this.hasShadow = true;
+        var _shadow_shadowBlur;
+        this.shadowBlur = (_shadow_shadowBlur = shadow.shadowBlur) != null ? _shadow_shadowBlur : 2;
+        var _shadow_shadowColor;
+        this.shadowColor = (_shadow_shadowColor = shadow.shadowColor) != null ? _shadow_shadowColor : [
+            0,
+            0,
+            0,
+            1
+        ];
+        var _shadow_shadowOffsetX;
+        this.shadowOffsetX = (_shadow_shadowOffsetX = shadow.shadowOffsetX) != null ? _shadow_shadowOffsetX : 0;
+        var _shadow_shadowOffsetY;
+        this.shadowOffsetY = (_shadow_shadowOffsetY = shadow.shadowOffsetY) != null ? _shadow_shadowOffsetY : 0;
+    }
+    if (this.fontStyle !== FontStyle.normal) {
+        // 0.0174532925 = 3.141592653 / 180
+        this.fontOffset += this.fontSize * Math.tan(12 * 0.0174532925);
+    }
+};
+
+var CanvasPool = /*#__PURE__*/ function() {
+    function CanvasPool() {
+        this.elements = [];
+    }
+    var _proto = CanvasPool.prototype;
+    _proto.dispose = function dispose() {
+        this.elements.forEach(function(e) {
+            return e.remove();
+        });
+        // clearing the array
+        this.elements.length = 0;
+    };
+    _proto.getCanvas = function getCanvas() {
+        if (this.elements.length !== 0) {
+            return this.elements.shift();
         }
         if (getConfig(TEMPLATE_USE_OFFSCREEN_CANVAS)) {
             // @ts-expect-error
@@ -20120,7 +20406,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         this.parentId = parentId;
         this.duration = duration;
         this.endBehavior = endBehavior;
-        this.listIndex = listIndex;
+        this.renderOrder = listIndex;
         //@ts-expect-error
         this.oldId = data.oldId;
         if (!data.content) {
@@ -20252,6 +20538,23 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 var _this_composition_reusable;
                 return (_this_composition_reusable = (_this_composition = this.composition) == null ? void 0 : _this_composition.reusable) != null ? _this_composition_reusable : false;
             }
+        },
+        {
+            key: "renderOrder",
+            get: /**
+   * 元素在合成中的索引
+   */ function get() {
+                return this.listIndex;
+            },
+            set: function set(value) {
+                if (this.listIndex !== value) {
+                    this.listIndex = value;
+                    for(var _iterator = _create_for_of_iterator_helper_loose(this.rendererComponents), _step; !(_step = _iterator()).done;){
+                        var rendererComponent = _step.value;
+                        rendererComponent.priority = value;
+                    }
+                }
+            }
         }
     ]);
     return VFXItem;
@@ -20692,14 +20995,16 @@ var SerializationHelper = /*#__PURE__*/ function() {
     SerializationHelper.checkGLTFNode = function checkGLTFNode(value) {
         return _instanceof1(value, Object) && value.nodeIndex !== undefined && value.isJoint !== undefined;
     };
+    SerializationHelper.checkImageSource = function checkImageSource(value) {
+        return isCanvas(value) || _instanceof1(value, HTMLImageElement);
+    };
     SerializationHelper.deserializeProperty = function deserializeProperty(property, engine, level, type) {
         if (level > 14) {
             console.error("序列化数据的内嵌对象层数大于上限");
             return;
         }
-        if (typeof property === "number" || typeof property === "string" || typeof property === "boolean") {
-            return property;
-        } else if (_instanceof1(property, Array)) {
+        // 加载并链接 DataPath 字段表示的 EffectsObject 引用。Class 对象 copy [key, value] 会丢失对象信息，因此只递归数组对象和普通 js Object 结构对象。
+        if (_instanceof1(property, Array)) {
             var res = [];
             for(var _iterator = _create_for_of_iterator_helper_loose(property), _step; !(_step = _iterator()).done;){
                 var value = _step.value;
@@ -20709,9 +21014,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
         // TODO json 数据避免传 typedArray
         } else if (SerializationHelper.checkDataPath(property)) {
             return engine.assetLoader.loadGUID(property.id);
-        } else if (_instanceof1(property, EffectsObject) || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
-            return property;
-        } else if (_instanceof1(property, Object)) {
+        } else if (_instanceof1(property, Object) && property.constructor === Object) {
             var res1;
             if (type) {
                 var classConstructor = effectsClassStore[type];
@@ -20725,6 +21028,8 @@ var SerializationHelper = /*#__PURE__*/ function() {
                 res1[key] = SerializationHelper.deserializeProperty(property[key], engine, level + 1);
             }
             return res1;
+        } else {
+            return property;
         }
     };
     SerializationHelper.deserializePropertyAsync = function deserializePropertyAsync(property, engine, level, type) {
@@ -20739,26 +21044,17 @@ var SerializationHelper = /*#__PURE__*/ function() {
                                 2
                             ];
                         }
-                        if (!(typeof property === "number" || typeof property === "string" || typeof property === "boolean")) return [
-                            3,
-                            1
-                        ];
-                        return [
-                            2,
-                            property
-                        ];
-                    case 1:
                         if (!_instanceof1(property, Array)) return [
                             3,
-                            6
+                            5
                         ];
                         res = [];
                         _iterator = _create_for_of_iterator_helper_loose(property);
-                        _state.label = 2;
-                    case 2:
+                        _state.label = 1;
+                    case 1:
                         if (!!(_step = _iterator()).done) return [
                             3,
-                            5
+                            4
                         ];
                         value = _step.value;
                         _ = res.push;
@@ -20766,43 +21062,38 @@ var SerializationHelper = /*#__PURE__*/ function() {
                             4,
                             SerializationHelper.deserializePropertyAsync(value, engine, level + 1, type)
                         ];
-                    case 3:
+                    case 2:
                         _.apply(res, [
                             _state.sent()
                         ]);
-                        _state.label = 4;
-                    case 4:
+                        _state.label = 3;
+                    case 3:
                         return [
                             3,
-                            2
+                            1
                         ];
-                    case 5:
+                    case 4:
                         return [
                             2,
                             res
                         ];
-                    case 6:
+                    case 5:
                         if (!SerializationHelper.checkDataPath(property)) return [
                             3,
-                            8
+                            7
                         ];
                         return [
                             4,
                             engine.assetLoader.loadGUIDAsync(property.id)
                         ];
-                    case 7:
+                    case 6:
                         res1 = _state.sent();
                         return [
                             2,
                             res1
                         ];
-                    case 8:
-                        if (_instanceof1(property, EffectsObject) || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
-                            return [
-                                2,
-                                property
-                            ];
-                        } else if (_instanceof1(property, Object)) {
+                    case 7:
+                        if (_instanceof1(property, Object) && property.constructor === Object) {
                             if (type) {
                                 classConstructor = effectsClassStore[type];
                                 res2 = new classConstructor();
@@ -20818,9 +21109,13 @@ var SerializationHelper = /*#__PURE__*/ function() {
                                 2,
                                 res2
                             ];
+                        } else {
+                            return [
+                                2,
+                                property
+                            ];
                         }
-                        _state.label = 9;
-                    case 9:
+                    case 8:
                         return [
                             2
                         ];
@@ -20920,9 +21215,8 @@ var SerializationHelper = /*#__PURE__*/ function() {
                 effectsObject = Geometry.create(this.engine);
                 break;
             case DataType.Texture:
-                // @ts-expect-error
-                effectsObject = Texture.create(this.engine, effectsObjectData);
-                return effectsObject;
+                effectsObject = Texture.create(this.engine);
+                break;
             default:
                 {
                     var classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
@@ -20993,12 +21287,8 @@ var SerializationHelper = /*#__PURE__*/ function() {
                                 effectsObject = Geometry.create(_this.engine);
                                 break;
                             case DataType.Texture:
-                                // @ts-expect-error
-                                effectsObject = Texture.create(_this.engine, effectsObjectData);
-                                return [
-                                    2,
-                                    effectsObject
-                                ];
+                                effectsObject = Texture.create(_this.engine);
+                                break;
                             default:
                                 {
                                     classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
@@ -21918,8 +22208,15 @@ function getStandardCameraContent(model) {
                 id: item.id
             };
         });
+        var compositionData = _extends({}, composition, {
+            timelineAsset: {
+                id: ""
+            },
+            sceneBindings: []
+        });
+        result.compositions.push(compositionData);
         // 生成时间轴数据
-        convertTimelineAsset(composition, guidToItemMap, result);
+        convertTimelineAsset(compositionData, guidToItemMap, result);
     };
     var // 更正 spine 数据中的 images 属性
     _json_spines;
@@ -21927,6 +22224,7 @@ function getStandardCameraContent(model) {
     _result;
     var result = _extends({}, json, {
         items: [],
+        compositions: [],
         components: [],
         materials: [],
         shaders: [],
@@ -22136,10 +22434,7 @@ function getStandardCameraContent(model) {
             item.type = "orientation-transformer";
         }
         // item 的 content 转为 component data 加入 JSONScene.components
-        if (item.type === ItemType.sprite || item.type === ItemType.particle || item.type === ItemType.mesh || item.type === ItemType.skybox || item.type === ItemType.light || // @ts-expect-error
-        item.type === "camera" || item.type === ItemType.tree || item.type === ItemType.interact || item.type === ItemType.camera || item.type === ItemType.text || item.type === ItemType.spine || // @ts-expect-error
-        item.type === "editor-gizmo" || // @ts-expect-error
-        item.type === "orientation-transformer") {
+        if (item.type === ItemType.sprite || item.type === ItemType.particle || item.type === ItemType.mesh || item.type === ItemType.skybox || item.type === ItemType.light || item.type === "camera" || item.type === ItemType.tree || item.type === ItemType.interact || item.type === ItemType.camera || item.type === ItemType.text || item.type === ItemType.spine || item.type === "editor-gizmo" || item.type === "orientation-transformer") {
             item.components = [];
             result.components.push(item.content);
             item.content.id = generateGUID();
@@ -22171,15 +22466,12 @@ function getStandardCameraContent(model) {
             case ItemType.light:
                 item.content.dataType = DataType.LightComponent;
                 break;
-            // @ts-expect-error
             case "camera":
                 item.content.dataType = DataType.CameraComponent;
                 break;
-            // @ts-expect-error
             case "editor-gizmo":
                 item.content.dataType = "GizmoComponent";
                 break;
-            // @ts-expect-error
             case "orientation-transformer":
                 item.content.dataType = "OrientationComponent";
                 break;
@@ -22332,6 +22624,32 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
             });
             trackDatas.push(newTrackData1);
         }
+        if (item.type === ItemType.composition) {
+            var newSubCompositionPlayableAssetData = {
+                id: generateGUID(),
+                dataType: "SubCompositionPlayableAsset"
+            };
+            playableAssetDatas.push(newSubCompositionPlayableAssetData);
+            var newTrackData2 = {
+                id: generateGUID(),
+                dataType: "SubCompositionTrack",
+                children: [],
+                clips: [
+                    {
+                        start: item.delay,
+                        duration: item.duration,
+                        endBehaviour: item.endBehavior,
+                        asset: {
+                            id: newSubCompositionPlayableAssetData.id
+                        }
+                    }
+                ]
+            };
+            subTrackDatas.push({
+                id: newTrackData2.id
+            });
+            trackDatas.push(newTrackData2);
+        }
         var bindingTrackData = {
             id: generateGUID(),
             dataType: "ObjectBindingTrack",
@@ -22358,11 +22676,9 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
             id: trackData.id
         });
     }
-    //@ts-expect-error
     composition.timelineAsset = {
         id: timelineAssetData.id
     };
-    //@ts-expect-error
     composition.sceneBindings = sceneBindings;
     if (!jsonScene.animations) {
         jsonScene.animations = [];
@@ -22693,7 +23009,17 @@ function getStandardItem(item, opt) {
 }
 
 var _obj$1;
-var renderLevelPassSet = (_obj$1 = {}, _obj$1[RenderLevel.S] = [
+/**
+ * 机型和渲染等级对应表
+ *
+ * 机型：B-低端机、A-中端机、S-高端机
+ * 渲染等级：B-低、A-中、S-高、A+-中高、B+-全部
+ *
+ * - S（高端机）：高、全部、中高
+ * - A（中端机）：中、全部、中高
+ * - B（低端机）：低、全部
+ * - undefined（全部机型）
+ */ var renderLevelPassSet = (_obj$1 = {}, _obj$1[RenderLevel.S] = [
     RenderLevel.S,
     RenderLevel.BPlus,
     RenderLevel.APlus
@@ -23607,42 +23933,6 @@ function createTextureOptionsBySource(image, sourceFrom) {
     }
     throw new Error("Invalid texture options");
 }
-function base64ToFile(base64, filename, contentType) {
-    if (filename === void 0) filename = "base64File";
-    if (contentType === void 0) contentType = "";
-    // 去掉 Base64 字符串的 Data URL 部分（如果存在）
-    var base64WithoutPrefix = base64.split(",")[1] || base64;
-    // 将 base64 编码的字符串转换为二进制字符串
-    var byteCharacters = atob(base64WithoutPrefix);
-    // 创建一个 8 位无符号整数值的数组，即“字节数组”
-    var byteArrays = [];
-    // 切割二进制字符串为多个片段，并将每个片段转换成一个字节数组
-    for(var offset = 0; offset < byteCharacters.length; offset += 512){
-        var slice = byteCharacters.slice(offset, offset + 512);
-        var byteNumbers = new Array(slice.length);
-        for(var i = 0; i < slice.length; i++){
-            byteNumbers[i] = slice.charCodeAt(i);
-        }
-        var byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
-    }
-    // 使用字节数组创建 Blob 对象
-    var blob = new Blob(byteArrays, {
-        type: contentType
-    });
-    // 创建 File 对象
-    var file = new File([
-        blob
-    ], filename, {
-        type: contentType
-    });
-    return file;
-}
-function isCanvas(canvas) {
-    var _canvas_tagName;
-    // 小程序 Canvas 无法使用 instanceof HTMLCanvasElement 判断
-    return typeof canvas === "object" && canvas !== null && ((_canvas_tagName = canvas.tagName) == null ? void 0 : _canvas_tagName.toUpperCase()) === "CANVAS";
-}
 
 var tmpScale = new Vector3(1, 1, 1);
 /**
@@ -23920,283 +24210,229 @@ var tmpScale = new Vector3(1, 1, 1);
     return Camera;
 }();
 
+var listOrder = 0;
 /**
- * @since 2.0.0
- * @internal
- */ var CompositionComponent = /*#__PURE__*/ function(ItemBehaviour) {
-    _inherits(CompositionComponent, ItemBehaviour);
-    function CompositionComponent() {
-        var _this;
-        _this = ItemBehaviour.apply(this, arguments) || this;
-        _this.time = 0;
-        _this.startTime = 0;
-        _this.items = [] // 场景的所有元素
-        ;
-        _this.reusable = false;
-        _this.sceneBindings = [];
-        _this.masterTracks = [];
-        _this.graph = new PlayableGraph();
-        return _this;
+ * 合成资源管理
+ */ var CompositionSourceManager = /*#__PURE__*/ function() {
+    function CompositionSourceManager(scene, engine) {
+        this.refCompositions = new Map();
+        this.refCompositionProps = new Map();
+        this.mask = 0;
+        this.engine = engine;
+        // 资源
+        var jsonScene = scene.jsonScene, renderLevel = scene.renderLevel, textureOptions = scene.textureOptions, pluginSystem = scene.pluginSystem, totalTime = scene.totalTime;
+        var compositions = jsonScene.compositions, imgUsage = jsonScene.imgUsage, compositionId = jsonScene.compositionId;
+        if (!textureOptions) {
+            throw new Error("scene.textures expected");
+        }
+        var cachedTextures = textureOptions;
+        for(var _iterator = _create_for_of_iterator_helper_loose(compositions), _step; !(_step = _iterator()).done;){
+            var comp = _step.value;
+            if (comp.id === compositionId) {
+                this.composition = comp;
+            } else {
+                this.refCompositions.set(comp.id, comp);
+            }
+        }
+        if (!this.composition) {
+            throw new Error("Invalid composition id: " + compositionId);
+        }
+        this.jsonScene = jsonScene;
+        this.renderLevel = renderLevel;
+        this.pluginSystem = pluginSystem;
+        this.totalTime = totalTime != null ? totalTime : 0;
+        this.imgUsage = imgUsage != null ? imgUsage : {};
+        this.textures = cachedTextures;
+        listOrder = 0;
+        this.sourceContent = this.getContent(this.composition);
     }
-    var _proto = CompositionComponent.prototype;
-    _proto.start = function start() {
-        var _this_item_props = this.item.props, _this_item_props_startTime = _this_item_props.startTime, startTime = _this_item_props_startTime === void 0 ? 0 : _this_item_props_startTime;
-        this.startTime = startTime;
-        this.masterTracks = [];
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.sceneBindings), _step; !(_step = _iterator()).done;){
-            var sceneBinding = _step.value;
-            sceneBinding.key.binding = sceneBinding.value;
+    var _proto = CompositionSourceManager.prototype;
+    _proto.getContent = function getContent(composition) {
+        // TODO: specification 中补充 globalVolume 类型
+        // @ts-expect-error
+        var id = composition.id, duration = composition.duration, name = composition.name, endBehavior = composition.endBehavior, camera = composition.camera, globalVolume = composition.globalVolume, _composition_startTime = composition.startTime, startTime = _composition_startTime === void 0 ? 0 : _composition_startTime;
+        var items = this.assembleItems(composition);
+        return _extends({}, composition, {
+            id: id,
+            duration: duration,
+            name: name,
+            endBehavior: isNaN(endBehavior) ? END_BEHAVIOR_PAUSE : endBehavior,
+            // looping,
+            items: items,
+            camera: camera,
+            startTime: startTime,
+            globalVolume: globalVolume
+        });
+    };
+    _proto.assembleItems = function assembleItems(composition) {
+        var _this = this;
+        var items = [];
+        this.mask++;
+        var componentMap = {};
+        //@ts-expect-error
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.jsonScene.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            componentMap[component.id] = component;
         }
-        this.initializeTrackBindings(this.timelineAsset.tracks);
-        this.timelinePlayable = this.timelineAsset.createPlayable(this.graph);
-        this.timelinePlayable.play();
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.timelineAsset.tracks), _step1; !(_step1 = _iterator1()).done;){
-            var track = _step1.value;
-            var binding = track.binding;
-            if (_instanceof1(binding, exports.VFXItem)) {
-                // 重播不销毁元素
-                if (this.item.endBehavior !== ItemEndBehavior.destroy || this.reusable) {
-                    if (_instanceof1(track, exports.ObjectBindingTrack)) {
-                        binding.reusable = true;
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(composition.items), _step1; !(_step1 = _iterator1()).done;){
+            var itemDataPath = _step1.value;
+            //@ts-expect-error
+            var sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
+            var itemProps = sourceItemData;
+            if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
+                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle) {
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
+                        var componentPath = _step2.value;
+                        var componentData = componentMap[componentPath.id];
+                        this.preProcessItemContent(componentData);
+                    }
+                } else {
+                    var renderContent = itemProps.content;
+                    if (renderContent) {
+                        this.preProcessItemContent(renderContent);
+                    }
+                }
+                itemProps.listIndex = listOrder++;
+                // 处理预合成的渲染顺序
+                if (itemProps.type === ItemType.composition) {
+                    var refId = sourceItemData.content.options.refId;
+                    if (!this.refCompositions.get(refId)) {
+                        throw new Error("Invalid Ref Composition id: " + refId);
                     }
-                    var subCompositionComponent = binding.getComponent(CompositionComponent);
-                    if (subCompositionComponent) {
-                        subCompositionComponent.reusable = true;
+                    var ref = this.getContent(this.refCompositions.get(refId));
+                    if (!this.refCompositionProps.has(refId)) {
+                        this.refCompositionProps.set(refId, ref);
                     }
+                    ref.items.forEach(function(item) {
+                        _this.processMask(item.content);
+                    });
+                    itemProps.items = ref.items;
                 }
+                items.push(itemProps);
             }
-            this.masterTracks.push(track);
-        }
-    };
-    _proto.initializeTrackBindings = function initializeTrackBindings(masterTracks) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(masterTracks), _step; !(_step = _iterator()).done;){
-            var track = _step.value;
-            track.initializeBindingRecursive(track.binding);
         }
+        return items;
     };
-    _proto.update = function update(dt) {
-        var time = this.time;
-        // 主合成 rootItem 没有绑定轨道，增加结束行为判断。
-        if (this.item.isEnded(this.time) && !this.item.parent) {
-            this.item.ended = true;
-        }
-        this.timelinePlayable.setTime(time);
-        this.graph.evaluate(dt);
-        for(var i = 0; i < this.items.length; i++){
-            var item = this.items[i];
-            var subCompostionComponent = item.getComponent(CompositionComponent);
-            if (subCompostionComponent) {
-                var subCompositionTrack = this.masterTracks[i];
-                subCompostionComponent.time = subCompositionTrack.toLocalTime(time);
+    _proto.preProcessItemContent = function preProcessItemContent(renderContent) {
+        if (renderContent.renderer) {
+            renderContent.renderer = this.changeTex(renderContent.renderer);
+            if (!renderContent.renderer.mask) {
+                this.processMask(renderContent.renderer);
+            }
+            var split = renderContent.splits && !renderContent.textureSheetAnimation && renderContent.splits[0];
+            if (Number.isInteger(renderContent.renderer.shape)) {
+                var _this_jsonScene;
+                // TODO: scene.shapes 类型问题？
+                renderContent.renderer.shape = getGeometryByShape((_this_jsonScene = this.jsonScene) == null ? void 0 : _this_jsonScene.shapes[renderContent.renderer.shape], split);
+            } else if (renderContent.renderer.shape && isObject(renderContent.renderer.shape)) {
+                renderContent.renderer.shape = getGeometryByShape(renderContent.renderer.shape, split);
             }
         }
+        if (renderContent.trails) {
+            renderContent.trails = this.changeTex(renderContent.trails);
+        }
     };
-    /**
-   * 重置元素状态属性
-   */ _proto.resetStatus = function resetStatus() {
-        this.item.ended = false;
-    };
-    _proto.createContent = function createContent() {
-        var sceneBindings = [];
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.data.sceneBindings), _step; !(_step = _iterator()).done;){
-            var sceneBindingData = _step.value;
-            sceneBindings.push({
-                key: this.engine.assetLoader.loadGUID(sceneBindingData.key.id),
-                value: this.engine.assetLoader.loadGUID(sceneBindingData.value.id)
-            });
+    _proto.changeTex = function changeTex(renderer) {
+        if (!renderer.texture) {
+            return renderer;
         }
-        this.sceneBindings = sceneBindings;
-        var timelineAsset = this.data.timelineAsset ? this.engine.assetLoader.loadGUID(this.data.timelineAsset.id) : new exports.TimelineAsset(this.engine);
-        this.timelineAsset = timelineAsset;
-        var items = this.items;
-        this.items.length = 0;
-        if (this.item.composition) {
-            var assetLoader = this.item.engine.assetLoader;
-            var itemProps = this.item.props.items ? this.item.props.items : [];
-            for(var i = 0; i < itemProps.length; i++){
-                var item = void 0;
-                var itemData = itemProps[i];
-                // 设置预合成作为元素时的时长、结束行为和渲染延时
-                if (exports.Item.isComposition(itemData)) {
-                    var refId = itemData.content.options.refId;
-                    var props = this.item.composition.refCompositionProps.get(refId);
-                    if (!props) {
-                        throw new Error("引用的Id: " + refId + " 的预合成不存在");
-                    }
-                    // endBehaviour 类型需优化
-                    props.content = itemData.content;
-                    item = assetLoader.loadGUID(itemData.id);
-                    item.composition = this.item.composition;
-                    var compositionComponent = item.addComponent(CompositionComponent);
-                    compositionComponent.data = props;
-                    compositionComponent.refId = refId;
-                    item.transform.parentTransform = this.transform;
-                    this.item.composition.refContent.push(item);
-                    if (item.endBehavior === ItemEndBehavior.loop) {
-                        this.item.composition.autoRefTex = false;
-                    }
-                    compositionComponent.createContent();
-                    for(var _iterator1 = _create_for_of_iterator_helper_loose(compositionComponent.items), _step1; !(_step1 = _iterator1()).done;){
-                        var vfxItem = _step1.value;
-                        vfxItem.setInstanceId(generateGUID());
-                        for(var _iterator2 = _create_for_of_iterator_helper_loose(vfxItem.components), _step2; !(_step2 = _iterator2()).done;){
-                            var component = _step2.value;
-                            component.setInstanceId(generateGUID());
-                        }
-                    }
-                } else {
-                    item = assetLoader.loadGUID(itemData.id);
-                    item.composition = this.item.composition;
-                }
-                item.parent = this.item;
-                // 相机不跟随合成移动
-                item.transform.parentTransform = itemData.type === ItemType.camera ? new Transform() : this.transform;
-                if (exports.VFXItem.isExtraCamera(item)) {
-                    this.item.composition.extraCamera = item;
-                }
-                items.push(item);
-            }
+        //@ts-expect-error
+        var texIdx = renderer.texture.id;
+        if (texIdx !== undefined) {
+            //@ts-expect-error
+            this.addTextureUsage(texIdx) || texIdx;
         }
+        return renderer;
     };
-    _proto.onDestroy = function onDestroy() {
-        if (this.item.composition) {
-            if (this.items) {
-                this.items.forEach(function(item) {
-                    return item.dispose();
-                });
-                this.items.length = 0;
+    _proto.addTextureUsage = function addTextureUsage(texIdx) {
+        var texId = texIdx;
+        var _this_imgUsage;
+        // FIXME: imageUsage 取自 scene.imgUsage，类型为 Record<string, number[]>，这里给的 number，类型对不上
+        var imageUsage = (_this_imgUsage = this.imgUsage) != null ? _this_imgUsage : {};
+        if (texId && imageUsage) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (!imageUsage.hasOwnProperty(texId)) {
+                imageUsage[texId] = 0;
             }
+            imageUsage[texId]++;
         }
     };
-    _proto.hitTest = function hitTest(ray, x, y, regions, force, options) {
-        var _this, _loop = function(i) {
-            var item = _this.items[i];
-            if (item.getVisible() && !item.ended && !exports.VFXItem.isComposition(item) && !skip(item)) {
-                var hitParams = item.getHitTestParams(force);
-                if (hitParams) {
-                    var success = false;
-                    var intersectPoint = new Vector3();
-                    if (hitParams.type === exports.HitTestType.triangle) {
-                        var triangles = hitParams.triangles, backfaceCulling = hitParams.backfaceCulling;
-                        for(var j = 0; j < triangles.length; j++){
-                            var triangle = triangles[j];
-                            if (ray.intersectTriangle(triangle, intersectPoint, backfaceCulling)) {
-                                success = true;
-                                hitPositions.push(intersectPoint);
-                                break;
-                            }
-                        }
-                    } else if (hitParams.type === exports.HitTestType.box) {
-                        var center = hitParams.center, size = hitParams.size;
-                        var boxMin = center.clone().addScaledVector(size, 0.5);
-                        var boxMax = center.clone().addScaledVector(size, -0.5);
-                        if (ray.intersectBox({
-                            min: boxMin,
-                            max: boxMax
-                        }, intersectPoint)) {
-                            success = true;
-                            hitPositions.push(intersectPoint);
-                        }
-                    } else if (hitParams.type === exports.HitTestType.sphere) {
-                        var center1 = hitParams.center, radius = hitParams.radius;
-                        if (ray.intersectSphere({
-                            center: center1,
-                            radius: radius
-                        }, intersectPoint)) {
-                            success = true;
-                            hitPositions.push(intersectPoint);
-                        }
-                    } else if (hitParams.type === exports.HitTestType.custom) {
-                        var tempPosition = hitParams.collect(ray, new Vector2(x, y));
-                        if (tempPosition && tempPosition.length > 0) {
-                            tempPosition.forEach(function(pos) {
-                                hitPositions.push(pos);
-                            });
-                            success = true;
-                        }
-                    }
-                    if (success) {
-                        var region = {
-                            compContent: _this.item,
-                            id: item.id,
-                            name: item.name,
-                            position: hitPositions[hitPositions.length - 1],
-                            parentId: item.parentId,
-                            hitPositions: hitPositions,
-                            behavior: hitParams.behavior
-                        };
-                        regions.push(region);
-                        if (stop(region)) {
-                            return {
-                                v: regions
-                            };
-                        }
-                    }
-                }
+    /**
+   * 处理蒙版和遮挡关系写入 stencil 的 ref 值
+   */ _proto.processMask = function processMask(renderer) {
+        var maskMode = renderer.maskMode;
+        if (maskMode === MaskMode.NONE) {
+            return;
+        }
+        if (!renderer.mask) {
+            if (maskMode === MaskMode.MASK) {
+                renderer.mask = ++this.mask;
+            } else if (maskMode === MaskMode.OBSCURED || maskMode === MaskMode.REVERSE_OBSCURED) {
+                renderer.mask = this.mask;
             }
-        };
-        var hitPositions = [];
-        var stop = (options == null ? void 0 : options.stop) || noop;
-        var skip = (options == null ? void 0 : options.skip) || noop;
-        var maxCount = (options == null ? void 0 : options.maxCount) || this.items.length;
-        for(var i = 0; i < this.items.length && regions.length < maxCount; i++){
-            var _ret = (_this = this, _loop(i));
-            if (_type_of(_ret) === "object") return _ret.v;
         }
-        return regions;
     };
-    _proto.fromData = function fromData(data) {
-    // this.timelineAsset = data.timelineAsset;
+    _proto.dispose = function dispose() {
+        this.textures = [];
+        this.composition = undefined;
+        this.jsonScene = undefined;
+        this.totalTime = 0;
+        this.pluginSystem = undefined;
+        this.sourceContent = undefined;
+        this.refCompositions.clear();
+        this.refCompositionProps.clear();
     };
-    return CompositionComponent;
-}(ItemBehaviour);
+    return CompositionSourceManager;
+}();
 
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
  * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
  */ var Composition = /*#__PURE__*/ function() {
-    function Composition(props, scene, compositionSourceManager) {
+    function Composition(props, scene) {
         var _this = this;
-        this.compositionSourceManager = compositionSourceManager;
-        this./**
+        /**
    * 动画播放速度
-   */ speed = 1;
-        this.loaderData = {};
-        this.refContent = [];
-        this./**
+   */ this.speed = 1;
+        /**
+   * 用于保存与当前合成相关的插件数据
+   */ this.loaderData = {};
+        /**
+   * 预合成数组
+   */ this.refContent = [];
+        /**
    * 预合成的合成属性，在 content 中会被其元素属性覆盖
-   */ refCompositionProps = new Map();
+   */ this.refCompositionProps = new Map();
         this.editorScaleRatio = 1.0;
+        // TODO: 待优化
         this.assigned = false;
-        this.destroyed = false;
-        this.paused = false;
+        /**
+   * 销毁状态位
+   */ this.destroyed = false;
+        /**
+   * 合成暂停/播放 标识
+   */ this.paused = false;
         this.lastVideoUpdateTime = 0;
         this.postLoaders = [];
         var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
+        this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
         if (reusable) {
             this.keepResource = true;
             scene.textures = undefined;
             scene.consumed = true;
         }
-        var _this_compositionSourceManager = this.compositionSourceManager, sourceContent = _this_compositionSourceManager.sourceContent, pluginSystem = _this_compositionSourceManager.pluginSystem, imgUsage = _this_compositionSourceManager.imgUsage, totalTime = _this_compositionSourceManager.totalTime, renderLevel = _this_compositionSourceManager.renderLevel, refCompositionProps = _this_compositionSourceManager.refCompositionProps;
+        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;
         assertExist(sourceContent);
         this.renderer = renderer;
         this.refCompositionProps = refCompositionProps;
-        var vfxItem = new exports.VFXItem(this.getEngine(), sourceContent);
-        vfxItem.name = "rootItem";
-        // TODO 编辑器数据传入 composition type 后移除
-        vfxItem.type = ItemType.composition;
-        vfxItem.composition = this;
-        this.rootComposition = vfxItem.addComponent(CompositionComponent);
+        this.rootItem = new exports.VFXItem(this.getEngine(), sourceContent);
+        this.rootItem.name = "rootItem";
+        this.rootItem.composition = this;
+        this.rootComposition = this.rootItem.addComponent(CompositionComponent);
         this.rootComposition.data = sourceContent;
         var imageUsage = !reusable && imgUsage;
-        this.transform = new Transform({
-            name: this.name
-        });
-        this.transform.engine = this.getEngine();
-        vfxItem.transform = this.transform;
         this.globalVolume = sourceContent.globalVolume;
         this.width = width;
         this.height = height;
@@ -24213,9 +24449,7 @@ var tmpScale = new Vector3(1, 1, 1);
         };
         this.reusable = reusable;
         this.speed = speed;
-        this.renderLevel = renderLevel;
-        this.autoRefTex = !this.keepResource && imageUsage && vfxItem.endBehavior !== ItemEndBehavior.loop;
-        this.rootItem = vfxItem;
+        this.autoRefTex = !this.keepResource && imageUsage && this.rootItem.endBehavior !== ItemEndBehavior.loop;
         this.name = sourceContent.name;
         this.pluginSystem = pluginSystem;
         this.pluginSystem.initializeComposition(this, scene);
@@ -24248,16 +24482,8 @@ var tmpScale = new Vector3(1, 1, 1);
     /**
    * 重新开始合成
    */ _proto.restart = function restart() {
-        // const contentItems = this.rootComposition.items;
-        // contentItems.forEach(item => item.dispose());
-        // contentItems.length = 0;
-        this.prepareRender();
         this.reset();
-        this.transform.setValid(true);
-        this.rootComposition.resetStatus();
         this.forwardTime(this.startTime);
-    // this.content.onUpdate(0);
-    // this.loaderData.spriteGroup.onUpdate(0);
     };
     /**
    * 设置当前合成的渲染顺序
@@ -24385,28 +24611,9 @@ var tmpScale = new Vector3(1, 1, 1);
     /**
    * 重置状态函数
    */ _proto.reset = function reset() {
-        var _this = this;
-        var vfxItem = new exports.VFXItem(this.getEngine(), this.compositionSourceManager.sourceContent);
-        // TODO 编辑器数据传入 composition type 后移除
-        vfxItem.type = ItemType.composition;
-        vfxItem.composition = this;
-        this.rootComposition = vfxItem.addComponent(CompositionComponent);
-        this.rootComposition.data = this.compositionSourceManager.sourceContent;
-        this.transform = new Transform({
-            name: this.name
-        });
-        this.transform.engine = this.getEngine();
-        vfxItem.transform = this.transform;
-        this.rootItem = vfxItem;
         this.rendererOptions = null;
         this.globalTime = 0;
-        this.rootComposition.createContent();
-        this.buildItemTree(this.rootItem);
-        this.rootItem.onEnd = function() {
-            window.setTimeout(function() {
-                _this.onEnd == null ? void 0 : _this.onEnd.call(_this, _this);
-            }, 0);
-        };
+        this.rootItem.ended = false;
         this.pluginSystem.resetComposition(this, this.renderFrame);
     };
     _proto.prepareRender = function prepareRender() {
@@ -24452,7 +24659,6 @@ var tmpScale = new Vector3(1, 1, 1);
         }
         var _this_rootItem = this.rootItem, ended = _this_rootItem.ended, endBehavior = _this_rootItem.endBehavior;
         // TODO: 合成结束行为
-        // @ts-expect-error
         return ended && (!endBehavior || endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY);
     };
     /**
@@ -24548,7 +24754,7 @@ var tmpScale = new Vector3(1, 1, 1);
             var child = _step2.value;
             if (exports.VFXItem.isComposition(child)) {
                 if (child.ended && child.endBehavior === ItemEndBehavior.loop) {
-                    child.getComponent(CompositionComponent).resetStatus();
+                    child.ended = false;
                     // TODO K帧动画在元素重建后需要 tick ，否则会导致元素位置和 k 帧第一帧位置不一致
                     this.callUpdate(child, 0);
                 } else {
@@ -24955,6 +25161,14 @@ var tmpScale = new Vector3(1, 1, 1);
         })();
     };
     _create_class(Composition, [
+        {
+            key: "transform",
+            get: /**
+   * 所有合成 Item 的根变换
+   */ function get() {
+                return this.rootItem.transform;
+            }
+        },
         {
             key: "textures",
             get: /**
@@ -25000,189 +25214,6 @@ var tmpScale = new Vector3(1, 1, 1);
     return Composition;
 }();
 
-var listOrder = 0;
-/**
- * 合成资源管理
- */ var CompositionSourceManager = /*#__PURE__*/ function() {
-    function CompositionSourceManager(scene, engine) {
-        this.refCompositions = new Map();
-        this.refCompositionProps = new Map();
-        this.mask = 0;
-        this.engine = engine;
-        // 资源
-        var jsonScene = scene.jsonScene, renderLevel = scene.renderLevel, textureOptions = scene.textureOptions, pluginSystem = scene.pluginSystem, totalTime = scene.totalTime;
-        var compositions = jsonScene.compositions, imgUsage = jsonScene.imgUsage, compositionId = jsonScene.compositionId;
-        if (!textureOptions) {
-            throw new Error("scene.textures expected");
-        }
-        var cachedTextures = textureOptions;
-        for(var _iterator = _create_for_of_iterator_helper_loose(compositions), _step; !(_step = _iterator()).done;){
-            var comp = _step.value;
-            if (comp.id === compositionId) {
-                this.composition = comp;
-            } else {
-                this.refCompositions.set(comp.id, comp);
-            }
-        }
-        if (!this.composition) {
-            throw new Error("Invalid composition id: " + compositionId);
-        }
-        this.jsonScene = jsonScene;
-        this.renderLevel = renderLevel;
-        this.pluginSystem = pluginSystem;
-        this.totalTime = totalTime != null ? totalTime : 0;
-        this.imgUsage = imgUsage != null ? imgUsage : {};
-        this.textures = cachedTextures;
-        listOrder = 0;
-        this.sourceContent = this.getContent(this.composition);
-    }
-    var _proto = CompositionSourceManager.prototype;
-    _proto.getContent = function getContent(composition) {
-        // TODO: specification 中补充 globalVolume 类型
-        // @ts-expect-error
-        var id = composition.id, duration = composition.duration, name = composition.name, endBehavior = composition.endBehavior, camera = composition.camera, globalVolume = composition.globalVolume, _composition_startTime = composition.startTime, startTime = _composition_startTime === void 0 ? 0 : _composition_startTime, timelineAsset = composition.timelineAsset;
-        var items = this.assembleItems(composition);
-        //@ts-expect-error
-        if (!composition.sceneBindings) {
-            //@ts-expect-error
-            composition.sceneBindings = [];
-        }
-        return {
-            id: id,
-            duration: duration,
-            name: name,
-            endBehavior: isNaN(endBehavior) ? END_BEHAVIOR_PAUSE : endBehavior,
-            // looping,
-            items: items,
-            camera: camera,
-            startTime: startTime,
-            globalVolume: globalVolume,
-            timelineAsset: timelineAsset,
-            //@ts-expect-error
-            sceneBindings: composition.sceneBindings
-        };
-    };
-    _proto.assembleItems = function assembleItems(composition) {
-        var _this = this;
-        var items = [];
-        this.mask++;
-        var componentMap = {};
-        //@ts-expect-error
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.jsonScene.components), _step; !(_step = _iterator()).done;){
-            var component = _step.value;
-            componentMap[component.id] = component;
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(composition.items), _step1; !(_step1 = _iterator1()).done;){
-            var itemDataPath = _step1.value;
-            //@ts-expect-error
-            var sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
-            var itemProps = sourceItemData;
-            if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
-                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle) {
-                    for(var _iterator2 = _create_for_of_iterator_helper_loose(itemProps.components), _step2; !(_step2 = _iterator2()).done;){
-                        var componentPath = _step2.value;
-                        var componentData = componentMap[componentPath.id];
-                        this.preProcessItemContent(componentData);
-                    }
-                } else {
-                    var renderContent = itemProps.content;
-                    if (renderContent) {
-                        this.preProcessItemContent(renderContent);
-                    }
-                }
-                itemProps.listIndex = listOrder++;
-                // 处理预合成的渲染顺序
-                if (itemProps.type === ItemType.composition) {
-                    var refId = sourceItemData.content.options.refId;
-                    if (!this.refCompositions.get(refId)) {
-                        throw new Error("Invalid Ref Composition id: " + refId);
-                    }
-                    var ref = this.getContent(this.refCompositions.get(refId));
-                    if (!this.refCompositionProps.has(refId)) {
-                        this.refCompositionProps.set(refId, ref);
-                    }
-                    ref.items.forEach(function(item) {
-                        _this.processMask(item.content);
-                    });
-                    itemProps.items = ref.items;
-                }
-                items.push(itemProps);
-            }
-        }
-        return items;
-    };
-    _proto.preProcessItemContent = function preProcessItemContent(renderContent) {
-        if (renderContent.renderer) {
-            renderContent.renderer = this.changeTex(renderContent.renderer);
-            if (!renderContent.renderer.mask) {
-                this.processMask(renderContent.renderer);
-            }
-            var split = renderContent.splits && !renderContent.textureSheetAnimation && renderContent.splits[0];
-            if (Number.isInteger(renderContent.renderer.shape)) {
-                var _this_jsonScene;
-                // TODO: scene.shapes 类型问题？
-                renderContent.renderer.shape = getGeometryByShape((_this_jsonScene = this.jsonScene) == null ? void 0 : _this_jsonScene.shapes[renderContent.renderer.shape], split);
-            } else if (renderContent.renderer.shape && isObject(renderContent.renderer.shape)) {
-                renderContent.renderer.shape = getGeometryByShape(renderContent.renderer.shape, split);
-            }
-        }
-        if (renderContent.trails) {
-            renderContent.trails = this.changeTex(renderContent.trails);
-        }
-    };
-    _proto.changeTex = function changeTex(renderer) {
-        if (!renderer.texture) {
-            return renderer;
-        }
-        //@ts-expect-error
-        var texIdx = renderer.texture.id;
-        if (texIdx !== undefined) {
-            //@ts-expect-error
-            this.addTextureUsage(texIdx) || texIdx;
-        }
-        return renderer;
-    };
-    _proto.addTextureUsage = function addTextureUsage(texIdx) {
-        var texId = texIdx;
-        var _this_imgUsage;
-        // FIXME: imageUsage 取自 scene.imgUsage，类型为 Record<string, number[]>，这里给的 number，类型对不上
-        var imageUsage = (_this_imgUsage = this.imgUsage) != null ? _this_imgUsage : {};
-        if (texId && imageUsage) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (!imageUsage.hasOwnProperty(texId)) {
-                imageUsage[texId] = 0;
-            }
-            imageUsage[texId]++;
-        }
-    };
-    /**
-   * 处理蒙版和遮挡关系写入 stencil 的 ref 值
-   */ _proto.processMask = function processMask(renderer) {
-        var maskMode = renderer.maskMode;
-        if (maskMode === MaskMode.NONE) {
-            return;
-        }
-        if (!renderer.mask) {
-            if (maskMode === MaskMode.MASK) {
-                renderer.mask = ++this.mask;
-            } else if (maskMode === MaskMode.OBSCURED || maskMode === MaskMode.REVERSE_OBSCURED) {
-                renderer.mask = this.mask;
-            }
-        }
-    };
-    _proto.dispose = function dispose() {
-        this.textures = [];
-        this.composition = undefined;
-        this.jsonScene = undefined;
-        this.totalTime = 0;
-        this.pluginSystem = undefined;
-        this.sourceContent = undefined;
-        this.refCompositions.clear();
-        this.refCompositionProps.clear();
-    };
-    return CompositionSourceManager;
-}();
-
 /**
  * Engine 基类，负责维护所有 GPU 资源的管理及销毁
  */ var Engine = /*#__PURE__*/ function() {
@@ -25223,61 +25254,46 @@ var listOrder = 0;
         delete this.objectInstance[id];
     };
     _proto.addPackageDatas = function addPackageDatas(scene) {
-        var jsonScene = scene.jsonScene;
-        if (jsonScene.items) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(jsonScene.items), _step; !(_step = _iterator()).done;){
-                var vfxItemData = _step.value;
-                this.addEffectsObjectData(vfxItemData);
-            }
-        }
-        if (jsonScene.materials) {
-            for(var _iterator1 = _create_for_of_iterator_helper_loose(jsonScene.materials), _step1; !(_step1 = _iterator1()).done;){
-                var materialData = _step1.value;
-                this.addEffectsObjectData(materialData);
-            }
-        }
-        if (jsonScene.shaders) {
-            for(var _iterator2 = _create_for_of_iterator_helper_loose(jsonScene.shaders), _step2; !(_step2 = _iterator2()).done;){
-                var shaderData = _step2.value;
-                this.addEffectsObjectData(shaderData);
-            }
-        }
-        if (jsonScene.geometries) {
-            for(var _iterator3 = _create_for_of_iterator_helper_loose(jsonScene.geometries), _step3; !(_step3 = _iterator3()).done;){
-                var geometryData = _step3.value;
-                this.addEffectsObjectData(geometryData);
-            }
-        }
-        if (jsonScene.components) {
-            for(var _iterator4 = _create_for_of_iterator_helper_loose(jsonScene.components), _step4; !(_step4 = _iterator4()).done;){
-                var componentData = _step4.value;
-                this.addEffectsObjectData(componentData);
-            }
-        }
-        if (jsonScene.animations) {
-            for(var _iterator5 = _create_for_of_iterator_helper_loose(jsonScene.animations), _step5; !(_step5 = _iterator5()).done;){
-                var animationData = _step5.value;
-                this.addEffectsObjectData(animationData);
-            }
-        }
-        if (jsonScene.bins) {
-            for(var i = 0; i < jsonScene.bins.length; i++){
-                var binaryData = jsonScene.bins[i];
-                var binaryBuffer = scene.bins[i];
-                //@ts-expect-error
-                binaryData.buffer = binaryBuffer;
+        var jsonScene = scene.jsonScene, _scene_textureOptions = scene.textureOptions, textureOptions = _scene_textureOptions === void 0 ? [] : _scene_textureOptions;
+        var _jsonScene_items = jsonScene.items, items = _jsonScene_items === void 0 ? [] : _jsonScene_items, _jsonScene_materials = jsonScene.materials, materials = _jsonScene_materials === void 0 ? [] : _jsonScene_materials, _jsonScene_shaders = jsonScene.shaders, shaders = _jsonScene_shaders === void 0 ? [] : _jsonScene_shaders, _jsonScene_geometries = jsonScene.geometries, geometries = _jsonScene_geometries === void 0 ? [] : _jsonScene_geometries, _jsonScene_components = jsonScene.components, components = _jsonScene_components === void 0 ? [] : _jsonScene_components, _jsonScene_animations = jsonScene.animations, animations = _jsonScene_animations === void 0 ? [] : _jsonScene_animations, _jsonScene_bins = jsonScene.bins, bins = _jsonScene_bins === void 0 ? [] : _jsonScene_bins;
+        for(var _iterator = _create_for_of_iterator_helper_loose(items), _step; !(_step = _iterator()).done;){
+            var vfxItemData = _step.value;
+            this.addEffectsObjectData(vfxItemData);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(materials), _step1; !(_step1 = _iterator1()).done;){
+            var materialData = _step1.value;
+            this.addEffectsObjectData(materialData);
+        }
+        for(var _iterator2 = _create_for_of_iterator_helper_loose(shaders), _step2; !(_step2 = _iterator2()).done;){
+            var shaderData = _step2.value;
+            this.addEffectsObjectData(shaderData);
+        }
+        for(var _iterator3 = _create_for_of_iterator_helper_loose(geometries), _step3; !(_step3 = _iterator3()).done;){
+            var geometryData = _step3.value;
+            this.addEffectsObjectData(geometryData);
+        }
+        for(var _iterator4 = _create_for_of_iterator_helper_loose(components), _step4; !(_step4 = _iterator4()).done;){
+            var componentData = _step4.value;
+            this.addEffectsObjectData(componentData);
+        }
+        for(var _iterator5 = _create_for_of_iterator_helper_loose(animations), _step5; !(_step5 = _iterator5()).done;){
+            var animationData = _step5.value;
+            this.addEffectsObjectData(animationData);
+        }
+        for(var i = 0; i < bins.length; i++){
+            var binaryData = bins[i];
+            var binaryBuffer = scene.bins[i];
+            //@ts-expect-error
+            binaryData.buffer = binaryBuffer;
+            //@ts-expect-error
+            if (binaryData.id) {
                 //@ts-expect-error
-                if (binaryData.id) {
-                    //@ts-expect-error
-                    this.addEffectsObjectData(binaryData);
-                }
+                this.addEffectsObjectData(binaryData);
             }
         }
-        if (scene.textureOptions) {
-            for(var _iterator6 = _create_for_of_iterator_helper_loose(scene.textureOptions), _step6; !(_step6 = _iterator6()).done;){
-                var textureData = _step6.value;
-                this.addEffectsObjectData(textureData);
-            }
+        for(var _iterator6 = _create_for_of_iterator_helper_loose(textureOptions), _step6; !(_step6 = _iterator6()).done;){
+            var textureData = _step6.value;
+            this.addEffectsObjectData(textureData);
         }
     };
     _proto.createVFXItems = function createVFXItems(scene) {
@@ -25297,9 +25313,7 @@ var listOrder = 0;
                         ];
                         itemData = _step.value;
                         itemType = itemData.type;
-                        if (!// @ts-expect-error
-                        (itemType === "ECS" || // @ts-expect-error
-                        itemType === "camera" || itemType === ItemType.sprite || itemType === ItemType.particle || itemType === ItemType.mesh || itemType === ItemType.skybox || itemType === ItemType.light || itemType === ItemType.tree || itemType === ItemType.interact || itemType === ItemType.camera)) {
+                        if (!(itemType === "ECS" || itemType === "camera" || itemType === ItemType.sprite || itemType === ItemType.particle || itemType === ItemType.mesh || itemType === ItemType.skybox || itemType === ItemType.light || itemType === ItemType.tree || itemType === ItemType.interact || itemType === ItemType.camera)) {
                             return [
                                 3,
                                 3
@@ -25416,19 +25430,19 @@ var listOrder = 0;
             logger.warn("Release GPU memory: " + info.join(", "));
         }
         this.renderPasses.forEach(function(pass) {
-            pass.dispose();
+            return pass.dispose();
         });
         this.meshes.forEach(function(mesh) {
-            mesh.dispose();
+            return mesh.dispose();
         });
         this.geometries.forEach(function(geo) {
-            geo.dispose();
+            return geo.dispose();
         });
         this.materials.forEach(function(mat) {
-            mat.dispose();
+            return mat.dispose();
         });
         this.textures.forEach(function(tex) {
-            tex.dispose();
+            return tex.dispose();
         });
         this.textures = [];
         this.materials = [];
@@ -26741,11 +26755,8 @@ var seed = 1;
  * composition 抽象类的实现
  */ var ThreeComposition = /*#__PURE__*/ function(Composition) {
     _inherits(ThreeComposition, Composition);
-    function ThreeComposition(props, scene, compositionSourceManager) {
-        var _this;
-        _this = Composition.call(this, props, scene, compositionSourceManager) || this;
-        _this.rootItem.getComponent(CompositionComponent).resetStatus();
-        return _this;
+    function ThreeComposition(props, scene) {
+        return Composition.call(this, props, scene);
     }
     var _proto = ThreeComposition.prototype;
     /**
@@ -26937,7 +26948,7 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
         if (options === void 0) options = {};
         var _this = this;
         return _async_to_generator(function() {
-            var last, opts, source, scene, engine, i, compositionSourceManager, composition, firstFrameTime;
+            var last, opts, source, scene, engine, i, composition, firstFrameTime;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -26974,7 +26985,6 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
                             scene.textureOptions[i] = engine.assetLoader.loadGUID(scene.textureOptions[i].id);
                             scene.textureOptions[i].initialize();
                         }
-                        compositionSourceManager = new CompositionSourceManager(scene, engine);
                         if (!engine.database) return [
                             3,
                             3
@@ -26991,7 +27001,7 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
                             width: _this.width,
                             height: _this.height,
                             renderer: _this.renderer
-                        }), scene, compositionSourceManager);
+                        }), scene);
                         _this.renderer.engine.setOptions({
                             threeCamera: _this.camera,
                             threeGroup: _this,
@@ -27170,7 +27180,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.14";
+var version = "2.0.0-alpha.16";
 logger.info("THREEJS plugin version: " + version);
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -27282,6 +27292,7 @@ exports.addItem = addItem;
 exports.addItemWithOrder = addItemWithOrder;
 exports.assertExist = assertExist;
 exports.asserts = asserts;
+exports.base64ToFile = base64ToFile;
 exports.blend = blend;
 exports.calculateTranslation = calculateTranslation;
 exports.canvasPool = canvasPool;
@@ -27350,6 +27361,7 @@ exports.interpolateColor = interpolateColor;
 exports.isAlipayMiniApp = isAlipayMiniApp;
 exports.isAndroid = isAndroid;
 exports.isArray = isArray;
+exports.isCanvas = isCanvas;
 exports.isFunction = isFunction;
 exports.isIOS = isIOS;
 exports.isObject = isObject;