@galacean/effects-core 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.13
+ * Version: v2.0.0-alpha.15
  */
 
 'use strict';
@@ -597,6 +597,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);
@@ -624,6 +629,35 @@ function throwDestroyedError() {
 function generateGUID() {
     return v4().replace(/-/g, '');
 }
+function base64ToFile(base64, filename = 'base64File', contentType = '') {
+    // 去掉 Base64 字符串的 Data URL 部分（如果存在）
+    const base64WithoutPrefix = base64.split(',')[1] || base64;
+    // 将 base64 编码的字符串转换为二进制字符串
+    const byteCharacters = atob(base64WithoutPrefix);
+    // 创建一个 8 位无符号整数值的数组，即“字节数组”
+    const byteArrays = [];
+    // 切割二进制字符串为多个片段，并将每个片段转换成一个字节数组
+    for(let offset = 0; offset < byteCharacters.length; offset += 512){
+        const slice = byteCharacters.slice(offset, offset + 512);
+        const byteNumbers = new Array(slice.length);
+        for(let i = 0; i < slice.length; i++){
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    // 使用字节数组创建 Blob 对象
+    const blob = new Blob(byteArrays, {
+        type: contentType
+    });
+    // 创建 File 对象
+    const file = new File([
+        blob
+    ], filename, {
+        type: contentType
+    });
+    return file;
+}
 
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -17452,6 +17486,9 @@ class ActivationPlayableAsset extends PlayableAsset {
         return new ActivationPlayable(graph);
     }
 }
+ActivationPlayableAsset = __decorate([
+    effectsClass('ActivationPlayableAsset')
+], ActivationPlayableAsset);
 class AnimationClip extends EffectsObject {
     sampleAnimation(vfxItem, time) {
         const duration = vfxItem.duration;
@@ -17550,16 +17587,15 @@ class AnimationClipPlayable extends Playable {
 }
 
 class TrackAsset extends PlayableAsset {
-    initializeBinding(parentBinding) {
-        this.binding = parentBinding;
+    /**
+   * 重写该方法以获取自定义对象绑定
+   */ resolveBinding(parentBinding) {
+        return parentBinding;
     }
     /**
-   * @internal
-   */ initializeBindingRecursive(parentBinding) {
-        this.initializeBinding(parentBinding);
-        for (const subTrack of this.children){
-            subTrack.initializeBindingRecursive(this.binding);
-        }
+   * 重写该方法以创建自定义混合器
+   */ createTrackMixer(graph) {
+        return new Playable(graph);
     }
     createOutput() {
         const output = new PlayableOutput();
@@ -17588,17 +17624,15 @@ class TrackAsset extends PlayableAsset {
         }
         return mixer;
     }
-    /**
-   * 重写该方法以创建自定义混合器
-   */ createTrackMixer(graph) {
-        return new Playable(graph);
-    }
     createPlayable(graph) {
         return new Playable(graph);
     }
     getChildTracks() {
         return this.children;
     }
+    addChild(child) {
+        this.children.push(child);
+    }
     createClip(classConstructor, name) {
         const newClip = new TimelineClip();
         newClip.asset = new classConstructor(this.engine);
@@ -17680,9 +17714,10 @@ class RuntimeClip {
         let weight = 1.0;
         let ended = false;
         let started = false;
+        const boundItem = this.track.binding;
         if (localTime > clip.start + clip.duration + 0.001 && clip.endBehaviour === ItemEndBehavior.destroy) {
-            var _this_track_binding_getComponent;
-            if (VFXItem.isParticle(this.track.binding) && !((_this_track_binding_getComponent = this.track.binding.getComponent(ParticleSystem)) == null ? void 0 : _this_track_binding_getComponent.destroyed)) {
+            var _boundItem_getComponent;
+            if (VFXItem.isParticle(boundItem) && !((_boundItem_getComponent = boundItem.getComponent(ParticleSystem)) == null ? void 0 : _boundItem_getComponent.destroyed)) {
                 weight = 1.0;
             } else {
                 weight = 0.0;
@@ -17698,7 +17733,6 @@ class RuntimeClip {
             this.playable.play();
         }
         this.parentMixer.setInputWeight(this.playable, weight);
-        const boundItem = this.track.binding;
         // 判断动画是否结束
         if (ended && !boundItem.ended) {
             boundItem.ended = true;
@@ -17727,6 +17761,34 @@ class RuntimeClip {
     }
 }
 
+class ObjectBindingTrack extends TrackAsset {
+    create(timelineAsset) {
+        const boundItem = this.binding;
+        // 添加粒子动画 clip
+        if (boundItem.getComponent(ParticleSystem)) {
+            const particleTrack = timelineAsset.createTrack(TrackAsset, this, 'ParticleTrack');
+            particleTrack.binding = this.binding;
+            const particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
+            particleClip.start = boundItem.start;
+            particleClip.duration = boundItem.duration;
+            particleClip.endBehaviour = boundItem.endBehavior;
+        }
+    }
+    fromData(data) {
+        super.fromData(data);
+        this.data = data;
+    }
+}
+ObjectBindingTrack = __decorate([
+    effectsClass('ObjectBindingTrack')
+], ObjectBindingTrack);
+
+class TransformTrack extends TrackAsset {
+}
+TransformTrack = __decorate([
+    effectsClass('TransformTrack')
+], TransformTrack);
+
 class ActivationMixerPlayable extends Playable {
     processFrame(context) {
         if (!this.bindingItem) {
@@ -17776,73 +17838,6 @@ ActivationTrack = __decorate([
     effectsClass('ActivationTrack')
 ], ActivationTrack);
 
-class ObjectBindingTrack extends TrackAsset {
-    create() {
-        this.options = {
-            start: this.binding.start,
-            duration: this.binding.duration,
-            looping: this.binding.endBehavior === ItemEndBehavior.loop,
-            endBehavior: this.binding.endBehavior || ItemEndBehavior.destroy
-        };
-        this.id = this.binding.id;
-        this.name = this.binding.name;
-        const activationTrack = this.createTrack(ActivationTrack, 'ActivationTrack');
-        activationTrack.binding = this.binding;
-        activationTrack.createClip(ActivationPlayableAsset, 'ActivationTimelineClip');
-        // 添加粒子动画 clip
-        if (this.binding.getComponent(ParticleSystem)) {
-            const particleTrack = this.createTrack(TrackAsset, 'ParticleTrack');
-            particleTrack.binding = this.binding;
-            particleTrack.createClip(ParticleBehaviourPlayableAsset);
-        }
-        // TODO TimelineClip 需要传入 start 和 duration 数据
-        for (const track of this.children){
-            for (const clip of track.getClips()){
-                clip.start = this.binding.start;
-                clip.duration = this.binding.duration;
-                clip.endBehaviour = this.binding.endBehavior;
-            }
-        }
-    }
-    toLocalTime(time) {
-        let localTime = time - this.options.start;
-        const 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;
-    }
-    createTrack(classConstructor, name) {
-        const newTrack = new classConstructor(this.engine);
-        newTrack.binding = this.binding;
-        newTrack.id = (this.trackSeed++).toString();
-        newTrack.name = name ? name : 'Track' + newTrack.id;
-        this.children.push(newTrack);
-        return newTrack;
-    }
-    fromData(data) {
-        super.fromData(data);
-        this.data = data;
-    }
-    constructor(...args){
-        super(...args);
-        this.trackSeed = 0;
-    }
-}
-ObjectBindingTrack = __decorate([
-    effectsClass('ObjectBindingTrack')
-], ObjectBindingTrack);
-
-class TransformTrack extends TrackAsset {
-}
-TransformTrack = __decorate([
-    effectsClass('TransformTrack')
-], TransformTrack);
-
 class SpriteColorTrack extends TrackAsset {
 }
 SpriteColorTrack = __decorate([
@@ -17851,20 +17846,31 @@ SpriteColorTrack = __decorate([
 
 class TimelineAsset extends PlayableAsset {
     createPlayable(graph) {
-        this.graph = graph;
         const timelinePlayable = new TimelinePlayable(graph);
         timelinePlayable.setTraversalMode(PlayableTraversalMode.Passthrough);
+        for (const track of this.tracks){
+            if (track instanceof ObjectBindingTrack) {
+                track.create(this);
+            }
+        }
         timelinePlayable.compileTracks(graph, this.tracks);
         return timelinePlayable;
     }
-    fromData(data) {
-        this.tracks = data.tracks;
+    createTrack(classConstructor, parent, name) {
+        const newTrack = new classConstructor(this.engine);
+        newTrack.name = name ? name : classConstructor.name;
+        parent.addChild(newTrack);
+        return newTrack;
     }
+    fromData(data) {}
     constructor(...args){
         super(...args);
         this.tracks = [];
     }
 }
+__decorate([
+    serialize()
+], TimelineAsset.prototype, "tracks", void 0);
 TimelineAsset = __decorate([
     effectsClass('TimelineAsset')
 ], TimelineAsset);
@@ -17881,12 +17887,6 @@ class TimelinePlayable extends Playable {
     }
     compileTracks(graph, tracks) {
         this.sortTracks(tracks);
-        for (const track of tracks){
-            if (track instanceof ObjectBindingTrack) {
-                track.create();
-            }
-            this.masterTracks.push(track);
-        }
         const outputTrack = [];
         for (const masterTrack of tracks){
             outputTrack.push(masterTrack);
@@ -17923,7 +17923,6 @@ class TimelinePlayable extends Playable {
     constructor(...args){
         super(...args);
         this.clips = [];
-        this.masterTracks = [];
     }
 }
 class TrackSortWrapper {
@@ -17943,134 +17942,373 @@ function isAncestor(ancestorCandidate, descendantCandidate) {
     return false;
 }
 function compareTracks(a, b) {
-    if (isAncestor(a.track.binding, b.track.binding)) {
+    const bindingA = a.track.binding;
+    const bindingB = b.track.binding;
+    if (!(bindingA instanceof VFXItem) || !(bindingB instanceof VFXItem)) {
+        return a.originalIndex - b.originalIndex;
+    }
+    if (isAncestor(bindingA, bindingB)) {
         return -1;
-    } else if (isAncestor(b.track.binding, a.track.binding)) {
+    } else if (isAncestor(bindingB, bindingA)) {
         return 1;
     } else {
         return a.originalIndex - b.originalIndex; // 非父子关系的元素保持原始顺序
     }
 }
 
-class TextLayout {
-    getOffsetY(style) {
-        let offsetY = 0;
-        const 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;
+/**
+ * @since 2.0.0
+ * @internal
+ */ class CompositionComponent extends ItemBehaviour {
+    start() {
+        const { startTime = 0 } = this.item.props;
+        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;
     }
-    getOffsetX(style, maxWidth) {
-        let 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;
+    setReusable(value) {
+        for (const track of this.timelineAsset.tracks){
+            const binding = track.binding;
+            if (binding instanceof VFXItem) {
+                if (track instanceof ObjectBindingTrack) {
+                    binding.reusable = value;
+                }
+                const subCompositionComponent = binding.getComponent(CompositionComponent);
+                if (subCompositionComponent) {
+                    subCompositionComponent.setReusable(value);
+                }
+            }
         }
-        return offsetX;
     }
-    /**
-   * 设置文本框的宽度和高度
-   * @param width 文本框宽度
-   * @param height 文本框高度
-   */ setSize(width, height) {
-        this.width = width;
-        this.height = height;
+    getReusable() {
+        return this.reusable;
     }
-    constructor(options){
-        this.width = 0;
-        this.height = 0;
-        const { textHeight = 100, textWidth = 100, textOverflow = TextOverflow.display, textBaseline = TextBaseline.top, textAlign = TextAlignment.left, text, letterSpace = 0, autoWidth = false, fontSize, lineHeight = fontSize } = options;
-        const 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;
+    update(dt) {
+        const 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);
     }
-}
-
-class TextStyle {
-    constructor(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;
-        const { textColor = [
-            1,
-            1,
-            1,
-            1
-        ], fontSize = 40, outline, shadow, fontWeight = 'normal', fontStyle = 'normal', fontFamily = 'sans-serif' } = options;
-        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
-            ];
+    createContent() {
+        const sceneBindings = [];
+        for (const sceneBindingData of this.data.sceneBindings){
+            sceneBindings.push({
+                key: this.engine.assetLoader.loadGUID(sceneBindingData.key.id),
+                value: this.engine.assetLoader.loadGUID(sceneBindingData.value.id)
+            });
+        }
+        this.sceneBindings = sceneBindings;
+        const timelineAsset = this.data.timelineAsset ? this.engine.assetLoader.loadGUID(this.data.timelineAsset.id) : new TimelineAsset(this.engine);
+        this.timelineAsset = timelineAsset;
+        const items = this.items;
+        this.items.length = 0;
+        if (this.item.composition) {
+            const assetLoader = this.item.engine.assetLoader;
+            const itemProps = this.item.props.items ? this.item.props.items : [];
+            for(let i = 0; i < itemProps.length; i++){
+                let item;
+                const itemData = itemProps[i];
+                // 设置预合成作为元素时的时长、结束行为和渲染延时
+                if (exports.Item.isComposition(itemData)) {
+                    const refId = itemData.content.options.refId;
+                    const 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;
+                    const 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 (const vfxItem of compositionComponent.items){
+                        vfxItem.setInstanceId(generateGUID());
+                        for (const component of vfxItem.components){
+                            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 (VFXItem.isExtraCamera(item)) {
+                    this.item.composition.extraCamera = item;
+                }
+                items.push(item);
+            }
+        }
+    }
+    onDestroy() {
+        if (this.item.composition) {
+            if (this.items) {
+                this.items.forEach((item)=>item.dispose());
+                this.items.length = 0;
+            }
+        }
+    }
+    hitTest(ray, x, y, regions, force, options) {
+        const hitPositions = [];
+        const stop = (options == null ? void 0 : options.stop) || noop;
+        const skip = (options == null ? void 0 : options.skip) || noop;
+        const maxCount = (options == null ? void 0 : options.maxCount) || this.items.length;
+        for(let i = 0; i < this.items.length && regions.length < maxCount; i++){
+            const item = this.items[i];
+            if (item.getVisible() && !item.ended && !VFXItem.isComposition(item) && !skip(item)) {
+                const hitParams = item.getHitTestParams(force);
+                if (hitParams) {
+                    let success = false;
+                    const intersectPoint = new Vector3();
+                    if (hitParams.type === exports.HitTestType.triangle) {
+                        const { triangles, backfaceCulling } = hitParams;
+                        for(let j = 0; j < triangles.length; j++){
+                            const triangle = triangles[j];
+                            if (ray.intersectTriangle(triangle, intersectPoint, backfaceCulling)) {
+                                success = true;
+                                hitPositions.push(intersectPoint);
+                                break;
+                            }
+                        }
+                    } else if (hitParams.type === exports.HitTestType.box) {
+                        const { center, size } = hitParams;
+                        const boxMin = center.clone().addScaledVector(size, 0.5);
+                        const 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) {
+                        const { center, radius } = hitParams;
+                        if (ray.intersectSphere({
+                            center,
+                            radius
+                        }, intersectPoint)) {
+                            success = true;
+                            hitPositions.push(intersectPoint);
+                        }
+                    } else if (hitParams.type === exports.HitTestType.custom) {
+                        const tempPosition = hitParams.collect(ray, new Vector2(x, y));
+                        if (tempPosition && tempPosition.length > 0) {
+                            tempPosition.forEach((pos)=>{
+                                hitPositions.push(pos);
+                            });
+                            success = true;
+                        }
+                    }
+                    if (success) {
+                        const region = {
+                            compContent: this.item,
+                            id: item.id,
+                            name: item.name,
+                            position: hitPositions[hitPositions.length - 1],
+                            parentId: item.parentId,
+                            hitPositions,
+                            behavior: hitParams.behavior
+                        };
+                        regions.push(region);
+                        if (stop(region)) {
+                            return regions;
+                        }
+                    }
+                }
+            }
+        }
+        return regions;
+    }
+    fromData(data) {}
+    resolveBindings() {
+        for (const sceneBinding of this.sceneBindings){
+            sceneBinding.key.binding = sceneBinding.value;
+        }
+        for (const masterTrack of this.timelineAsset.tracks){
+            this.resolveTrackBindingsWithRoot(masterTrack);
+        }
+    }
+    resolveTrackBindingsWithRoot(track) {
+        for (const subTrack of track.getChildTracks()){
+            subTrack.binding = subTrack.resolveBinding(track.binding);
+            this.resolveTrackBindingsWithRoot(subTrack);
+        }
+    }
+    constructor(...args){
+        super(...args);
+        this.time = 0;
+        this.startTime = 0;
+        this.items = [] // 场景的所有元素
+        ;
+        this.reusable = false;
+        this.sceneBindings = [];
+        this.graph = new PlayableGraph();
+    }
+}
+
+class SubCompositionTrack extends TrackAsset {
+    resolveBinding(parentBinding) {
+        if (!(parentBinding instanceof VFXItem)) {
+            throw new Error('SubCompositionTrack needs to be set under the VFXItem track');
+        }
+        return parentBinding.getComponent(CompositionComponent);
+    }
+}
+SubCompositionTrack = __decorate([
+    effectsClass('SubCompositionTrack')
+], SubCompositionTrack);
+
+class SubCompositionClipPlayable extends Playable {
+    processFrame(context) {
+        const boundObject = context.output.getUserData();
+        boundObject.time = this.getTime();
+    }
+}
+
+class SubCompositionPlayableAsset extends PlayableAsset {
+    createPlayable(graph) {
+        return new SubCompositionClipPlayable(graph);
+    }
+}
+SubCompositionPlayableAsset = __decorate([
+    effectsClass('SubCompositionPlayableAsset')
+], SubCompositionPlayableAsset);
+
+class TextLayout {
+    getOffsetY(style) {
+        let offsetY = 0;
+        const 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;
+    }
+    getOffsetX(style, maxWidth) {
+        let 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 文本框高度
+   */ setSize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    constructor(options){
+        this.width = 0;
+        this.height = 0;
+        const { textHeight = 100, textWidth = 100, textOverflow = TextOverflow.display, textBaseline = TextBaseline.top, textAlign = TextAlignment.left, text, letterSpace = 0, autoWidth = false, fontSize, lineHeight = fontSize } = options;
+        const 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;
+    }
+}
+
+class TextStyle {
+    constructor(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;
+        const { textColor = [
+            1,
+            1,
+            1,
+            1
+        ], fontSize = 40, outline, shadow, fontWeight = 'normal', fontStyle = 'normal', fontFamily = 'sans-serif' } = options;
+        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;
@@ -19388,6 +19626,9 @@ class SerializationHelper {
     static checkGLTFNode(value) {
         return value instanceof Object && value.nodeIndex !== undefined && value.isJoint !== undefined;
     }
+    static checkImageSource(value) {
+        return isCanvas(value) || value instanceof HTMLImageElement;
+    }
     static deserializeProperty(property, engine, level, type) {
         if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
@@ -19404,7 +19645,7 @@ class SerializationHelper {
         // TODO json 数据避免传 typedArray
         } else if (SerializationHelper.checkDataPath(property)) {
             return engine.assetLoader.loadGUID(property.id);
-        } else if (property instanceof EffectsObject || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
+        } else if (property instanceof EffectsObject || SerializationHelper.checkImageSource(property) || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
             return property;
         } else if (property instanceof Object) {
             let res;
@@ -19439,7 +19680,7 @@ class SerializationHelper {
             } else if (SerializationHelper.checkDataPath(property)) {
                 const res = yield engine.assetLoader.loadGUIDAsync(property.id);
                 return res;
-            } else if (property instanceof EffectsObject || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
+            } else if (property instanceof EffectsObject || SerializationHelper.checkImageSource(property) || SerializationHelper.checkTypedArray(property) || SerializationHelper.checkGLTFNode(property)) {
                 return property;
             } else if (property instanceof Object) {
                 let res;
@@ -19543,9 +19784,8 @@ class SerializationHelper {
                 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:
                 {
                     const classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
@@ -19593,9 +19833,8 @@ class SerializationHelper {
                     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:
                     {
                         const classConstructor = AssetLoader.getClass(effectsObjectData.dataType);
@@ -20450,6 +20689,7 @@ function getStandardCameraContent(model) {
     _result;
     const result = _extends({}, json, {
         items: [],
+        compositions: [],
         components: [],
         materials: [],
         shaders: [],
@@ -20540,8 +20780,15 @@ function getStandardCameraContent(model) {
                 id: item.id
             };
         });
+        const compositionData = _extends({}, composition, {
+            timelineAsset: {
+                id: ''
+            },
+            sceneBindings: []
+        });
+        result.compositions.push(compositionData);
         // 生成时间轴数据
-        convertTimelineAsset(composition, guidToItemMap, result);
+        convertTimelineAsset(compositionData, guidToItemMap, result);
     }
     for (const item of result.items){
         // 原 texture 索引转为统一 guid 索引
@@ -20655,7 +20902,7 @@ function getStandardCameraContent(model) {
             content.renderer.anchor = convertAnchor(renderer.anchor, renderer.particleOrigin);
         }
         // 修复相机K帧缺失 asMovement 参数
-        if (item.type === ItemType.camera) {
+        if (item.type === ItemType.camera && item.content.positionOverLifetime && Object.keys(item.content.positionOverLifetime).length !== 0) {
             item.content.positionOverLifetime.asMovement = true;
         }
         // 动画数据转化 TODO: 动画数据移到 TimelineComponentData
@@ -20708,10 +20955,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();
@@ -20743,15 +20987,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;
@@ -20817,8 +21058,32 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
     for (const itemDataPath of composition.items){
         const item = guidToItemMap[itemDataPath.id];
         const subTrackDatas = [];
+        const newActivationPlayableAsset = {
+            id: generateGUID(),
+            dataType: 'ActivationPlayableAsset'
+        };
+        playableAssetDatas.push(newActivationPlayableAsset);
+        const newActivationTrackData = {
+            id: generateGUID(),
+            dataType: 'ActivationTrack',
+            children: [],
+            clips: [
+                {
+                    start: item.delay,
+                    duration: item.duration,
+                    endBehaviour: item.endBehavior,
+                    asset: {
+                        id: newActivationPlayableAsset.id
+                    }
+                }
+            ]
+        };
+        subTrackDatas.push({
+            id: newActivationTrackData.id
+        });
+        trackDatas.push(newActivationTrackData);
         if (item.type !== ItemType.particle) {
-            const newPlayableAssetData = {
+            const newTransformPlayableAssetData = {
                 id: generateGUID(),
                 dataType: 'TransformPlayableAsset',
                 //@ts-expect-error
@@ -20828,15 +21093,18 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
                 //@ts-expect-error
                 positionOverLifetime: item.content.positionOverLifetime
             };
-            playableAssetDatas.push(newPlayableAssetData);
+            playableAssetDatas.push(newTransformPlayableAssetData);
             const newTrackData = {
                 id: generateGUID(),
                 dataType: 'TransformTrack',
                 children: [],
                 clips: [
                     {
+                        start: item.delay,
+                        duration: item.duration,
+                        endBehaviour: item.endBehavior,
                         asset: {
-                            id: newPlayableAssetData.id
+                            id: newTransformPlayableAssetData.id
                         }
                     }
                 ]
@@ -20847,21 +21115,50 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
             trackDatas.push(newTrackData);
         }
         if (item.type === ItemType.sprite) {
-            const newPlayableAssetData = {
+            const newSpriteColorPlayableAssetData = {
                 id: generateGUID(),
                 dataType: 'SpriteColorPlayableAsset',
                 colorOverLifetime: item.content.colorOverLifetime,
                 startColor: item.content.options.startColor
             };
-            playableAssetDatas.push(newPlayableAssetData);
+            playableAssetDatas.push(newSpriteColorPlayableAssetData);
             const newTrackData = {
                 id: generateGUID(),
                 dataType: 'SpriteColorTrack',
                 children: [],
                 clips: [
                     {
+                        start: item.delay,
+                        duration: item.duration,
+                        endBehaviour: item.endBehavior,
+                        asset: {
+                            id: newSpriteColorPlayableAssetData.id
+                        }
+                    }
+                ]
+            };
+            subTrackDatas.push({
+                id: newTrackData.id
+            });
+            trackDatas.push(newTrackData);
+        }
+        if (item.type === ItemType.composition) {
+            const newSubCompositionPlayableAssetData = {
+                id: generateGUID(),
+                dataType: 'SubCompositionPlayableAsset'
+            };
+            playableAssetDatas.push(newSubCompositionPlayableAssetData);
+            const newTrackData = {
+                id: generateGUID(),
+                dataType: 'SubCompositionTrack',
+                children: [],
+                clips: [
+                    {
+                        start: item.delay,
+                        duration: item.duration,
+                        endBehaviour: item.endBehavior,
                         asset: {
-                            id: newPlayableAssetData.id
+                            id: newSubCompositionPlayableAssetData.id
                         }
                     }
                 ]
@@ -20896,11 +21193,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 = [];
@@ -21767,40 +22062,6 @@ function createTextureOptionsBySource(image, sourceFrom) {
     }
     throw new Error('Invalid texture options');
 }
-function base64ToFile(base64, filename = 'base64File', contentType = '') {
-    // 去掉 Base64 字符串的 Data URL 部分（如果存在）
-    const base64WithoutPrefix = base64.split(',')[1] || base64;
-    // 将 base64 编码的字符串转换为二进制字符串
-    const byteCharacters = atob(base64WithoutPrefix);
-    // 创建一个 8 位无符号整数值的数组，即“字节数组”
-    const byteArrays = [];
-    // 切割二进制字符串为多个片段，并将每个片段转换成一个字节数组
-    for(let offset = 0; offset < byteCharacters.length; offset += 512){
-        const slice = byteCharacters.slice(offset, offset + 512);
-        const byteNumbers = new Array(slice.length);
-        for(let i = 0; i < slice.length; i++){
-            byteNumbers[i] = slice.charCodeAt(i);
-        }
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
-    }
-    // 使用字节数组创建 Blob 对象
-    const blob = new Blob(byteArrays, {
-        type: contentType
-    });
-    // 创建 File 对象
-    const 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';
-}
 
 const tmpScale = new Vector3(1, 1, 1);
 /**
@@ -22054,214 +22315,173 @@ const tmpScale = new Vector3(1, 1, 1);
         this.dirty = true;
         this.updateMatrix();
     }
-}
-
-/**
- * @since 2.0.0
- * @internal
- */ class CompositionComponent extends ItemBehaviour {
-    start() {
-        const { startTime = 0 } = this.item.props;
-        this.startTime = startTime;
-        this.masterTracks = [];
-        for (const sceneBinding of this.sceneBindings){
-            sceneBinding.key.binding = sceneBinding.value;
+}
+
+let listOrder = 0;
+/**
+ * 合成资源管理
+ */ class CompositionSourceManager {
+    getContent(composition) {
+        // TODO: specification 中补充 globalVolume 类型
+        // @ts-expect-error
+        const { id, duration, name, endBehavior, camera, globalVolume, startTime = 0 } = composition;
+        const items = this.assembleItems(composition);
+        return _extends({}, composition, {
+            id,
+            duration,
+            name,
+            endBehavior: isNaN(endBehavior) ? END_BEHAVIOR_PAUSE : endBehavior,
+            // looping,
+            items,
+            camera,
+            startTime,
+            globalVolume
+        });
+    }
+    assembleItems(composition) {
+        const items = [];
+        this.mask++;
+        const componentMap = {};
+        //@ts-expect-error
+        for (const component of this.jsonScene.components){
+            componentMap[component.id] = component;
         }
-        this.initializeTrackBindings(this.timelineAsset.tracks);
-        this.timelinePlayable = this.timelineAsset.createPlayable(this.graph);
-        this.timelinePlayable.play();
-        for (const track of this.timelineAsset.tracks){
-            // 重播不销毁元素
-            if (this.item.endBehavior !== ItemEndBehavior.destroy || this.reusable) {
-                if (track instanceof ObjectBindingTrack) {
-                    track.binding.reusable = true;
+        for (const itemDataPath of composition.items){
+            //@ts-expect-error
+            const sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
+            const itemProps = sourceItemData;
+            if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
+                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle) {
+                    for (const componentPath of itemProps.components){
+                        const componentData = componentMap[componentPath.id];
+                        this.preProcessItemContent(componentData);
+                    }
+                } else {
+                    const renderContent = itemProps.content;
+                    if (renderContent) {
+                        this.preProcessItemContent(renderContent);
+                    }
                 }
-                const subCompositionComponent = track.binding.getComponent(CompositionComponent);
-                if (subCompositionComponent) {
-                    subCompositionComponent.reusable = true;
+                itemProps.listIndex = listOrder++;
+                // 处理预合成的渲染顺序
+                if (itemProps.type === ItemType.composition) {
+                    const refId = sourceItemData.content.options.refId;
+                    if (!this.refCompositions.get(refId)) {
+                        throw new Error('Invalid Ref Composition id: ' + refId);
+                    }
+                    const ref = this.getContent(this.refCompositions.get(refId));
+                    if (!this.refCompositionProps.has(refId)) {
+                        this.refCompositionProps.set(refId, ref);
+                    }
+                    ref.items.forEach((item)=>{
+                        this.processMask(item.content);
+                    });
+                    itemProps.items = ref.items;
                 }
+                items.push(itemProps);
             }
-            this.masterTracks.push(track);
         }
+        return items;
     }
-    initializeTrackBindings(masterTracks) {
-        for (const track of masterTracks){
-            track.initializeBindingRecursive(track.binding);
+    preProcessItemContent(renderContent) {
+        if (renderContent.renderer) {
+            renderContent.renderer = this.changeTex(renderContent.renderer);
+            if (!renderContent.renderer.mask) {
+                this.processMask(renderContent.renderer);
+            }
+            const 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);
         }
     }
-    update(dt) {
-        const time = this.time;
-        // 主合成 rootItem 没有绑定轨道，增加结束行为判断。
-        if (this.item.isEnded(this.time) && !this.item.parent) {
-            this.item.ended = true;
+    changeTex(renderer) {
+        if (!renderer.texture) {
+            return renderer;
         }
-        this.timelinePlayable.setTime(time);
-        this.graph.evaluate(dt);
-        for(let i = 0; i < this.items.length; i++){
-            const item = this.items[i];
-            const subCompostionComponent = item.getComponent(CompositionComponent);
-            if (subCompostionComponent) {
-                const subCompositionTrack = this.masterTracks[i];
-                subCompostionComponent.time = subCompositionTrack.toLocalTime(time);
-            }
+        //@ts-expect-error
+        const texIdx = renderer.texture.id;
+        if (texIdx !== undefined) {
+            //@ts-expect-error
+            this.addTextureUsage(texIdx) || texIdx;
         }
+        return renderer;
     }
-    /**
-   * 重置元素状态属性
-   */ resetStatus() {
-        this.item.ended = false;
-    }
-    createContent() {
-        const sceneBindings = [];
-        for (const sceneBindingData of this.data.sceneBindings){
-            sceneBindings.push({
-                key: this.engine.assetLoader.loadGUID(sceneBindingData.key.id),
-                value: this.engine.assetLoader.loadGUID(sceneBindingData.value.id)
-            });
-        }
-        this.sceneBindings = sceneBindings;
-        const timelineAsset = this.data.timelineAsset ? this.engine.assetLoader.loadGUID(this.data.timelineAsset.id) : new TimelineAsset(this.engine);
-        this.timelineAsset = timelineAsset;
-        const items = this.items;
-        this.items.length = 0;
-        if (this.item.composition) {
-            const assetLoader = this.item.engine.assetLoader;
-            const itemProps = this.item.props.items ? this.item.props.items : [];
-            for(let i = 0; i < itemProps.length; i++){
-                let item;
-                const itemData = itemProps[i];
-                // 设置预合成作为元素时的时长、结束行为和渲染延时
-                if (exports.Item.isComposition(itemData)) {
-                    const refId = itemData.content.options.refId;
-                    const 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;
-                    const 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 (const vfxItem of compositionComponent.items){
-                        vfxItem.setInstanceId(generateGUID());
-                        for (const component of vfxItem.components){
-                            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 (VFXItem.isExtraCamera(item)) {
-                    this.item.composition.extraCamera = item;
-                }
-                items.push(item);
+    addTextureUsage(texIdx) {
+        const texId = texIdx;
+        var _this_imgUsage;
+        // FIXME: imageUsage 取自 scene.imgUsage，类型为 Record<string, number[]>，这里给的 number，类型对不上
+        const 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]++;
         }
     }
-    onDestroy() {
-        if (this.item.composition) {
-            if (this.items) {
-                this.items.forEach((item)=>item.dispose());
-                this.items.length = 0;
+    /**
+   * 处理蒙版和遮挡关系写入 stencil 的 ref 值
+   */ processMask(renderer) {
+        const 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;
             }
         }
     }
-    hitTest(ray, x, y, regions, force, options) {
-        const hitPositions = [];
-        const stop = (options == null ? void 0 : options.stop) || noop;
-        const skip = (options == null ? void 0 : options.skip) || noop;
-        const maxCount = (options == null ? void 0 : options.maxCount) || this.items.length;
-        for(let i = 0; i < this.items.length && regions.length < maxCount; i++){
-            const item = this.items[i];
-            if (item.getVisible() && !item.ended && !VFXItem.isComposition(item) && !skip(item)) {
-                const hitParams = item.getHitTestParams(force);
-                if (hitParams) {
-                    let success = false;
-                    const intersectPoint = new Vector3();
-                    if (hitParams.type === exports.HitTestType.triangle) {
-                        const { triangles, backfaceCulling } = hitParams;
-                        for(let j = 0; j < triangles.length; j++){
-                            const triangle = triangles[j];
-                            if (ray.intersectTriangle(triangle, intersectPoint, backfaceCulling)) {
-                                success = true;
-                                hitPositions.push(intersectPoint);
-                                break;
-                            }
-                        }
-                    } else if (hitParams.type === exports.HitTestType.box) {
-                        const { center, size } = hitParams;
-                        const boxMin = center.clone().addScaledVector(size, 0.5);
-                        const 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) {
-                        const { center, radius } = hitParams;
-                        if (ray.intersectSphere({
-                            center,
-                            radius
-                        }, intersectPoint)) {
-                            success = true;
-                            hitPositions.push(intersectPoint);
-                        }
-                    } else if (hitParams.type === exports.HitTestType.custom) {
-                        const tempPosition = hitParams.collect(ray, new Vector2(x, y));
-                        if (tempPosition && tempPosition.length > 0) {
-                            tempPosition.forEach((pos)=>{
-                                hitPositions.push(pos);
-                            });
-                            success = true;
-                        }
-                    }
-                    if (success) {
-                        const region = {
-                            compContent: this.item,
-                            id: item.id,
-                            name: item.name,
-                            position: hitPositions[hitPositions.length - 1],
-                            parentId: item.parentId,
-                            hitPositions,
-                            behavior: hitParams.behavior
-                        };
-                        regions.push(region);
-                        if (stop(region)) {
-                            return regions;
-                        }
-                    }
-                }
+    dispose() {
+        this.textures = [];
+        this.composition = undefined;
+        this.jsonScene = undefined;
+        this.totalTime = 0;
+        this.pluginSystem = undefined;
+        this.sourceContent = undefined;
+        this.refCompositions.clear();
+        this.refCompositionProps.clear();
+    }
+    constructor(scene, engine){
+        this.refCompositions = new Map();
+        this.refCompositionProps = new Map();
+        this.mask = 0;
+        this.engine = engine;
+        // 资源
+        const { jsonScene, renderLevel, textureOptions, pluginSystem, totalTime } = scene;
+        const { compositions, imgUsage, compositionId } = jsonScene;
+        if (!textureOptions) {
+            throw new Error('scene.textures expected');
+        }
+        const cachedTextures = textureOptions;
+        for (const comp of compositions){
+            if (comp.id === compositionId) {
+                this.composition = comp;
+            } else {
+                this.refCompositions.set(comp.id, comp);
             }
         }
-        return regions;
-    }
-    fromData(data) {
-    // this.timelineAsset = data.timelineAsset;
-    }
-    constructor(...args){
-        super(...args);
-        this.time = 0;
-        this.startTime = 0;
-        this.items = [] // 场景的所有元素
-        ;
-        this.reusable = false;
-        this.sceneBindings = [];
-        this.masterTracks = [];
-        this.graph = new PlayableGraph();
+        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);
     }
 }
 
@@ -22271,6 +22491,11 @@ const tmpScale = new Vector3(1, 1, 1);
  * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
  */ class Composition {
     /**
+   * 所有合成 Item 的根变换
+   */ get transform() {
+        return this.rootItem.transform;
+    }
+    /**
    * 获取场景中的纹理数组
    */ get textures() {
         return this.compositionSourceManager.textures;
@@ -22304,16 +22529,8 @@ const tmpScale = new Vector3(1, 1, 1);
     /**
    * 重新开始合成
    */ 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);
     }
     /**
    * 设置当前合成的渲染顺序
@@ -22440,27 +22657,9 @@ const tmpScale = new Vector3(1, 1, 1);
     /**
    * 重置状态函数
    */ reset() {
-        const vfxItem = new 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 = ()=>{
-            window.setTimeout(()=>{
-                this.onEnd == null ? void 0 : this.onEnd.call(this, this);
-            }, 0);
-        };
+        this.rootItem.ended = false;
         this.pluginSystem.resetComposition(this, this.renderFrame);
     }
     prepareRender() {
@@ -22501,7 +22700,6 @@ const tmpScale = new Vector3(1, 1, 1);
         }
         const { ended, endBehavior } = this.rootItem;
         // TODO: 合成结束行为
-        // @ts-expect-error
         return ended && (!endBehavior || endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY);
     }
     /**
@@ -22590,7 +22788,7 @@ const tmpScale = new Vector3(1, 1, 1);
         for (const child of item.children){
             if (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 {
@@ -22957,23 +23155,32 @@ const tmpScale = new Vector3(1, 1, 1);
    * @param props - composition 的创建参数
    * @param scene
    * @param compositionSourceManager
-   */ constructor(props, scene, compositionSourceManager){
-        this.compositionSourceManager = compositionSourceManager;
-        this./**
+   */ constructor(props, scene){
+        /**
    * 动画播放速度
-   */ 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 = [];
         const { reusable = false, speed = 1, baseRenderOrder = 0, renderer, onPlayerPause, onMessageItem, onEnd, event, width, height } = props;
+        this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
         if (reusable) {
             this.keepResource = true;
@@ -22984,19 +23191,12 @@ const tmpScale = new Vector3(1, 1, 1);
         assertExist(sourceContent);
         this.renderer = renderer;
         this.refCompositionProps = refCompositionProps;
-        const vfxItem = new 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 VFXItem(this.getEngine(), sourceContent);
+        this.rootItem.name = 'rootItem';
+        this.rootItem.composition = this;
+        this.rootComposition = this.rootItem.addComponent(CompositionComponent);
         this.rootComposition.data = sourceContent;
         const 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;
@@ -23014,8 +23214,7 @@ const 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);
@@ -23041,182 +23240,6 @@ const tmpScale = new Vector3(1, 1, 1);
     }
 }
 
-let listOrder = 0;
-/**
- * 合成资源管理
- */ class CompositionSourceManager {
-    getContent(composition) {
-        // TODO: specification 中补充 globalVolume 类型
-        // @ts-expect-error
-        const { id, duration, name, endBehavior, camera, globalVolume, startTime = 0, timelineAsset } = composition;
-        const items = this.assembleItems(composition);
-        //@ts-expect-error
-        if (!composition.sceneBindings) {
-            //@ts-expect-error
-            composition.sceneBindings = [];
-        }
-        return {
-            id,
-            duration,
-            name,
-            endBehavior: isNaN(endBehavior) ? END_BEHAVIOR_PAUSE : endBehavior,
-            // looping,
-            items,
-            camera,
-            startTime,
-            globalVolume,
-            timelineAsset: timelineAsset,
-            //@ts-expect-error
-            sceneBindings: composition.sceneBindings
-        };
-    }
-    assembleItems(composition) {
-        const items = [];
-        this.mask++;
-        const componentMap = {};
-        //@ts-expect-error
-        for (const component of this.jsonScene.components){
-            componentMap[component.id] = component;
-        }
-        for (const itemDataPath of composition.items){
-            //@ts-expect-error
-            const sourceItemData = this.engine.jsonSceneData[itemDataPath.id];
-            const itemProps = sourceItemData;
-            if (passRenderLevel(sourceItemData.renderLevel, this.renderLevel)) {
-                if (itemProps.type === ItemType.sprite || itemProps.type === ItemType.particle) {
-                    for (const componentPath of itemProps.components){
-                        const componentData = componentMap[componentPath.id];
-                        this.preProcessItemContent(componentData);
-                    }
-                } else {
-                    const renderContent = itemProps.content;
-                    if (renderContent) {
-                        this.preProcessItemContent(renderContent);
-                    }
-                }
-                itemProps.listIndex = listOrder++;
-                // 处理预合成的渲染顺序
-                if (itemProps.type === ItemType.composition) {
-                    const refId = sourceItemData.content.options.refId;
-                    if (!this.refCompositions.get(refId)) {
-                        throw new Error('Invalid Ref Composition id: ' + refId);
-                    }
-                    const ref = this.getContent(this.refCompositions.get(refId));
-                    if (!this.refCompositionProps.has(refId)) {
-                        this.refCompositionProps.set(refId, ref);
-                    }
-                    ref.items.forEach((item)=>{
-                        this.processMask(item.content);
-                    });
-                    itemProps.items = ref.items;
-                }
-                items.push(itemProps);
-            }
-        }
-        return items;
-    }
-    preProcessItemContent(renderContent) {
-        if (renderContent.renderer) {
-            renderContent.renderer = this.changeTex(renderContent.renderer);
-            if (!renderContent.renderer.mask) {
-                this.processMask(renderContent.renderer);
-            }
-            const 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);
-        }
-    }
-    changeTex(renderer) {
-        if (!renderer.texture) {
-            return renderer;
-        }
-        //@ts-expect-error
-        const texIdx = renderer.texture.id;
-        if (texIdx !== undefined) {
-            //@ts-expect-error
-            this.addTextureUsage(texIdx) || texIdx;
-        }
-        return renderer;
-    }
-    addTextureUsage(texIdx) {
-        const texId = texIdx;
-        var _this_imgUsage;
-        // FIXME: imageUsage 取自 scene.imgUsage，类型为 Record<string, number[]>，这里给的 number，类型对不上
-        const 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 值
-   */ processMask(renderer) {
-        const 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;
-            }
-        }
-    }
-    dispose() {
-        this.textures = [];
-        this.composition = undefined;
-        this.jsonScene = undefined;
-        this.totalTime = 0;
-        this.pluginSystem = undefined;
-        this.sourceContent = undefined;
-        this.refCompositions.clear();
-        this.refCompositionProps.clear();
-    }
-    constructor(scene, engine){
-        this.refCompositions = new Map();
-        this.refCompositionProps = new Map();
-        this.mask = 0;
-        this.engine = engine;
-        // 资源
-        const { jsonScene, renderLevel, textureOptions, pluginSystem, totalTime } = scene;
-        const { compositions, imgUsage, compositionId } = jsonScene;
-        if (!textureOptions) {
-            throw new Error('scene.textures expected');
-        }
-        const cachedTextures = textureOptions;
-        for (const comp of compositions){
-            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);
-    }
-}
-
 /**
  * Engine 基类，负责维护所有 GPU 资源的管理及销毁
  */ class Engine {
@@ -23240,65 +23263,48 @@ let listOrder = 0;
         delete this.objectInstance[id];
     }
     addPackageDatas(scene) {
-        const jsonScene = scene.jsonScene;
-        if (jsonScene.items) {
-            for (const vfxItemData of jsonScene.items){
-                this.addEffectsObjectData(vfxItemData);
-            }
+        const { jsonScene, textureOptions = [] } = scene;
+        const { items = [], materials = [], shaders = [], geometries = [], components = [], animations = [], bins = [] } = jsonScene;
+        for (const vfxItemData of items){
+            this.addEffectsObjectData(vfxItemData);
         }
-        if (jsonScene.materials) {
-            for (const materialData of jsonScene.materials){
-                this.addEffectsObjectData(materialData);
-            }
+        for (const materialData of materials){
+            this.addEffectsObjectData(materialData);
         }
-        if (jsonScene.shaders) {
-            for (const shaderData of jsonScene.shaders){
-                this.addEffectsObjectData(shaderData);
-            }
+        for (const shaderData of shaders){
+            this.addEffectsObjectData(shaderData);
         }
-        if (jsonScene.geometries) {
-            for (const geometryData of jsonScene.geometries){
-                this.addEffectsObjectData(geometryData);
-            }
+        for (const geometryData of geometries){
+            this.addEffectsObjectData(geometryData);
         }
-        if (jsonScene.components) {
-            for (const componentData of jsonScene.components){
-                this.addEffectsObjectData(componentData);
-            }
+        for (const componentData of components){
+            this.addEffectsObjectData(componentData);
         }
-        if (jsonScene.animations) {
-            for (const animationData of jsonScene.animations){
-                this.addEffectsObjectData(animationData);
-            }
+        for (const animationData of animations){
+            this.addEffectsObjectData(animationData);
         }
-        if (jsonScene.bins) {
-            for(let i = 0; i < jsonScene.bins.length; i++){
-                const binaryData = jsonScene.bins[i];
-                const binaryBuffer = scene.bins[i];
-                //@ts-expect-error
-                binaryData.buffer = binaryBuffer;
+        for(let i = 0; i < bins.length; i++){
+            const binaryData = bins[i];
+            const 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 (const textureData of scene.textureOptions){
-                this.addEffectsObjectData(textureData);
-            }
+        for (const textureData of textureOptions){
+            this.addEffectsObjectData(textureData);
         }
     }
     createVFXItems(scene) {
         var _this = this;
         return _async_to_generator(function*() {
-            const jsonScene = scene.jsonScene;
+            const { jsonScene } = scene;
             for (const itemData of jsonScene.items){
                 const 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)) {
                     continue;
                 }
                 if (_this.database) {
@@ -23396,21 +23402,11 @@ let listOrder = 0;
         if (info.length > 0) {
             logger.warn(`Release GPU memory: ${info.join(', ')}`);
         }
-        this.renderPasses.forEach((pass)=>{
-            pass.dispose();
-        });
-        this.meshes.forEach((mesh)=>{
-            mesh.dispose();
-        });
-        this.geometries.forEach((geo)=>{
-            geo.dispose();
-        });
-        this.materials.forEach((mat)=>{
-            mat.dispose();
-        });
-        this.textures.forEach((tex)=>{
-            tex.dispose();
-        });
+        this.renderPasses.forEach((pass)=>pass.dispose());
+        this.meshes.forEach((mesh)=>mesh.dispose());
+        this.geometries.forEach((geo)=>geo.dispose());
+        this.materials.forEach((mat)=>mat.dispose());
+        this.textures.forEach((tex)=>tex.dispose());
         this.textures = [];
         this.materials = [];
         this.geometries = [];
@@ -23657,6 +23653,8 @@ exports.SpriteColorTrack = SpriteColorTrack;
 exports.SpriteComponent = SpriteComponent;
 exports.SpriteLoader = SpriteLoader;
 exports.StaticValue = StaticValue;
+exports.SubCompositionPlayableAsset = SubCompositionPlayableAsset;
+exports.SubCompositionTrack = SubCompositionTrack;
 exports.TEMPLATE_USE_OFFSCREEN_CANVAS = TEMPLATE_USE_OFFSCREEN_CANVAS;
 exports.TextComponent = TextComponent;
 exports.TextLoader = TextLoader;
@@ -23679,6 +23677,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;
@@ -23747,6 +23746,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;