@galacean/effects-core 2.0.0-alpha.11 → 2.0.0-alpha.12

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.11
+ * Version: v2.0.0-alpha.12
  */
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3698,6 +3698,17 @@ Euler.tempMat0 = new Matrix4();
      * 水平右侧 垂直底部
      */ ParticleOrigin[ParticleOrigin["PARTICLE_ORIGIN_RIGHT_BOTTOM"] = 8] = "PARTICLE_ORIGIN_RIGHT_BOTTOM";
 })(ParticleOrigin || (ParticleOrigin = {}));
+var RenderType;
+(function(RenderType) {
+    RenderType["Opaque"] = "Opaque";
+    RenderType["Transparent"] = "Transparent";
+})(RenderType || (RenderType = {}));
+var RenderFace;
+(function(RenderFace) {
+    RenderFace["Both"] = "Both";
+    RenderFace["Back"] = "Back";
+    RenderFace["Front"] = "Front";
+})(RenderFace || (RenderFace = {}));
 
 const END_BEHAVIOR_DESTROY = 0;
 const END_BEHAVIOR_PAUSE = 1;
@@ -4017,6 +4028,7 @@ var DataType;
     DataType["CameraController"] = "CameraController";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
@@ -4050,6 +4062,60 @@ var GeometryType;
      * Draw a connected group of triangles. Each vertex connects to the previous and the first vertex in the fan.
      */ GeometryType[GeometryType["TRIANGLE_FAN"] = 6] = "TRIANGLE_FAN";
 })(GeometryType || (GeometryType = {}));
+var VertexFormatType;
+(function(VertexFormatType) {
+    VertexFormatType[VertexFormatType["Float32"] = 0] = "Float32";
+    VertexFormatType[VertexFormatType["Int16"] = 1] = "Int16";
+    VertexFormatType[VertexFormatType["Int8"] = 2] = "Int8";
+    VertexFormatType[VertexFormatType["UInt16"] = 3] = "UInt16";
+    VertexFormatType[VertexFormatType["UInt8"] = 4] = "UInt8";
+})(VertexFormatType || (VertexFormatType = {}));
+var IndexFormatType;
+(function(IndexFormatType) {
+    IndexFormatType[IndexFormatType["UInt16"] = 0] = "UInt16";
+    IndexFormatType[IndexFormatType["UInt32"] = 1] = "UInt32";
+})(IndexFormatType || (IndexFormatType = {}));
+// BINORMAL[n]	Binormal	float4
+// BLENDINDICES[n]	混合索引	uint
+// BLENDWEIGHT[n]	混合权重	FLOAT
+// COLOR[n]	漫射和反射颜色	float4
+// NORMAL[n]	法向矢量	float4
+// POSITION[n]	对象空间中的顶点位置。	float4
+// POSITIONT	变换的顶点位置。	float4
+// PSIZE[n]	点大小	FLOAT
+// TANGENT[n]	正切	float4
+// TEXCOORD[n]	纹理坐标	float4
+// POSITION_BS[n]	Blend Shape 空间中的顶点位置	float4
+// NORMAL_BS[n]	Blend Shape 空间中的法向矢量	float4
+// TANGENT_BS[n]	Blend Shape 空间中的正切矢量	float4
+var VertexBufferSemantic;
+(function(VertexBufferSemantic) {
+    VertexBufferSemantic["Position"] = "POSITION";
+    VertexBufferSemantic["Uv"] = "TEXCOORD0";
+    VertexBufferSemantic["Uv2"] = "TEXCOORD1";
+    VertexBufferSemantic["Normal"] = "NORMAL";
+    VertexBufferSemantic["Tangent"] = "TANGENT";
+    VertexBufferSemantic["Color"] = "COLOR";
+    VertexBufferSemantic["Joints"] = "JOINTS";
+    VertexBufferSemantic["Weights"] = "WEIGHTS";
+    //
+    VertexBufferSemantic["PositionBS0"] = "POSITION_BS0";
+    VertexBufferSemantic["PositionBS1"] = "POSITION_BS1";
+    VertexBufferSemantic["PositionBS2"] = "POSITION_BS2";
+    VertexBufferSemantic["PositionBS3"] = "POSITION_BS3";
+    VertexBufferSemantic["PositionBS4"] = "POSITION_BS4";
+    VertexBufferSemantic["PositionBS5"] = "POSITION_BS5";
+    VertexBufferSemantic["PositionBS6"] = "POSITION_BS6";
+    VertexBufferSemantic["PositionBS7"] = "POSITION_BS7";
+    VertexBufferSemantic["NormalBS0"] = "NORMAL_BS0";
+    VertexBufferSemantic["NormalBS1"] = "NORMAL_BS1";
+    VertexBufferSemantic["NormalBS2"] = "NORMAL_BS2";
+    VertexBufferSemantic["NormalBS3"] = "NORMAL_BS3";
+    VertexBufferSemantic["TangentBS0"] = "TANGENT_BS0";
+    VertexBufferSemantic["TangentBS1"] = "TANGENT_BS1";
+    VertexBufferSemantic["TangentBS2"] = "TANGENT_BS2";
+    VertexBufferSemantic["TangentBS3"] = "TANGENT_BS3";
+})(VertexBufferSemantic || (VertexBufferSemantic = {}));
 
 class BuiltinObjectGUID {
 }
@@ -4070,6 +4136,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get ItemType () { return ItemType; },
     get RenderMode () { return RenderMode; },
     get ParticleOrigin () { return ParticleOrigin; },
+    get RenderType () { return RenderType; },
+    get RenderFace () { return RenderFace; },
     get CameraClipMode () { return CameraClipMode; },
     get CompositionEndBehavior () { return CompositionEndBehavior; },
     get BackgroundType () { return BackgroundType; },
@@ -4103,6 +4171,9 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get FontStyle () { return FontStyle; },
     get DataType () { return DataType; },
     get GeometryType () { return GeometryType; },
+    get VertexFormatType () { return VertexFormatType; },
+    get IndexFormatType () { return IndexFormatType; },
+    get VertexBufferSemantic () { return VertexBufferSemantic; },
     BuiltinObjectGUID: BuiltinObjectGUID
 });
 
@@ -7404,6 +7475,10 @@ function buildEasingCurve(leftKeyframe, rightKeyframe) {
     }
 }
 
+const CURVE_PRO_TIME = 0;
+const CURVE_PRO_VALUE = 1;
+const CURVE_PRO_IN_TANGENT = 2;
+const CURVE_PRO_OUT_TANGENT = 3;
 const NOT_IMPLEMENT = 'not_implement';
 class ValueGetter {
     static getAllData(meta, halfFloat) {
@@ -7820,6 +7895,48 @@ class BezierCurve extends ValueGetter {
         return data;
     }
 }
+class PathSegments extends ValueGetter {
+    onCreate(props) {
+        this.keys = props[0];
+        this.values = props[1];
+    }
+    getValue(time) {
+        const keys = this.keys;
+        const values = this.values;
+        for(let i = 0; i < keys.length - 1; i++){
+            const k0 = keys[i];
+            const k1 = keys[i + 1];
+            if (k0[0] <= time && k1[0] >= time) {
+                const dis = k1[1] - k0[1];
+                let dt;
+                if (dis === 0) {
+                    dt = (time - k0[0]) / (k1[0] - k0[0]);
+                } else {
+                    const val = curveValueEvaluate(time, k0, k1);
+                    dt = (val - k0[1]) / dis;
+                }
+                return this.calculateVec(i, dt);
+            }
+        }
+        if (time <= keys[0][0]) {
+            return values[0].slice();
+        }
+        return values[values.length - 1].slice();
+    }
+    calculateVec(i, dt) {
+        const vec0 = this.values[i];
+        const vec1 = this.values[i + 1];
+        const ret = [
+            0,
+            0,
+            0
+        ];
+        for(let j = 0; j < vec0.length; j++){
+            ret[j] = vec0[j] * (1 - dt) + vec1[j] * dt;
+        }
+        return ret;
+    }
+}
 class BezierCurvePath extends ValueGetter {
     onCreate(props) {
         const [keyframes, points, controlPoints] = props;
@@ -7921,9 +8038,9 @@ const map$1 = {
     [ValueType.GRADIENT_COLOR] (props) {
         return new GradientValue(props);
     },
-    // [spec.ValueType.LINEAR_PATH] (pros: number[][][]) {
-    //   return new PathSegments(pros);
-    // },
+    [ValueType.LINEAR_PATH] (pros) {
+        return new PathSegments(pros);
+    },
     [ValueType.BEZIER_CURVE] (props) {
         if (props.length === 1) {
             return new StaticValue(props[0][1][1]);
@@ -7961,6 +8078,20 @@ function lineSegIntegrateByTime(t, t0, t1, y0, y1) {
     const t03 = t02 * t0;
     return (2 * t3 * (y0 - y1) + 3 * t2 * (t0 * y1 - t1 * y0) - t03 * (2 * y0 + y1) + 3 * t02 * t1 * y0) / (6 * (t0 - t1));
 }
+function curveValueEvaluate(time, keyframe0, keyframe1) {
+    const dt = keyframe1[CURVE_PRO_TIME] - keyframe0[CURVE_PRO_TIME];
+    const m0 = keyframe0[CURVE_PRO_OUT_TANGENT] * dt;
+    const m1 = keyframe1[CURVE_PRO_IN_TANGENT] * dt;
+    const t = (time - keyframe0[CURVE_PRO_TIME]) / dt;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const a = 2 * t3 - 3 * t2 + 1;
+    const b = t3 - 2 * t2 + t;
+    const c = t3 - t2;
+    const d = -2 * t3 + 3 * t2;
+    //(2*v0+m0+m1-2*v1)*(t-t0)^3/k^3+(3*v1-3*v0-2*m0-m1)*(t-t0)^2/k^2+m0 *(t-t0)/k+v0
+    return a * keyframe0[CURVE_PRO_VALUE] + b * m0 + c * m1 + d * keyframe1[CURVE_PRO_VALUE];
+}
 function getKeyFrameMetaByRawValue(meta, value) {
     if (value) {
         const type = value[0];
@@ -8848,6 +8979,38 @@ function copy(target) {
         }
     }
 }
+function vertexFormatType2GLType(formatType) {
+    switch(formatType){
+        case VertexFormatType.Float32:
+            return WebGLRenderingContext['FLOAT'];
+        case VertexFormatType.Int16:
+            return WebGLRenderingContext['SHORT'];
+        case VertexFormatType.Int8:
+            return WebGLRenderingContext['BYTE'];
+        case VertexFormatType.UInt16:
+            return WebGLRenderingContext['UNSIGNED_SHORT'];
+        case VertexFormatType.UInt8:
+            return WebGLRenderingContext['UNSIGNED_BYTE'];
+        default:
+            return WebGLRenderingContext['FLOAT'];
+    }
+}
+function glType2VertexFormatType(webglType) {
+    switch(webglType){
+        case WebGLRenderingContext['FLOAT']:
+            return VertexFormatType.Float32;
+        case WebGLRenderingContext['SHORT']:
+            return VertexFormatType.Int16;
+        case WebGLRenderingContext['BYTE']:
+            return VertexFormatType.Int8;
+        case WebGLRenderingContext['UNSIGNED_SHORT']:
+            return VertexFormatType.UInt16;
+        case WebGLRenderingContext['UNSIGNED_BYTE']:
+            return VertexFormatType.UInt8;
+        default:
+            return VertexFormatType.Float32;
+    }
+}
 
 var ShaderType;
 (function(ShaderType) {
@@ -9529,6 +9692,29 @@ function generateHalfFloatTexture(engine, data, width, height) {
         wrapT: glContext.CLAMP_TO_EDGE
     });
 }
+function generateWhiteTexture(engine) {
+    return Texture.create(engine, {
+        id: 'whitetexture00000000000000000000',
+        data: {
+            width: 1,
+            height: 1,
+            data: new Uint8Array([
+                255,
+                255,
+                255,
+                255
+            ])
+        },
+        sourceType: TextureSourceType.data,
+        type: glContext.UNSIGNED_BYTE,
+        format: glContext.RGBA,
+        internalFormat: glContext.RGBA,
+        wrapS: glContext.MIRRORED_REPEAT,
+        wrapT: glContext.MIRRORED_REPEAT,
+        minFilter: glContext.NEAREST,
+        magFilter: glContext.NEAREST
+    });
+}
 
 const HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
 const COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
@@ -10447,8 +10633,8 @@ let seed$5 = 1;
     /**
    * 配置当前pass的RT，在每帧渲染前调用
    */ configure(renderer) {
-        if (this.frameBuffer) {
-            renderer.setFrameBuffer(this.frameBuffer);
+        if (this.framebuffer) {
+            renderer.setFramebuffer(this.framebuffer);
         } else {
             const [x, y, width, height] = this.getViewport();
             renderer.setViewport(x, y, width, height);
@@ -10490,9 +10676,9 @@ let seed$5 = 1;
             });
             this.attachments.forEach((att)=>!att.externalTexture && att.dispose());
             this.attachments = attachments;
-            if (this.frameBuffer) {
-                this.frameBuffer.bind();
-                this.frameBuffer.resetColorTextures(colors.map((color)=>color));
+            if (this.framebuffer) {
+                this.framebuffer.bind();
+                this.framebuffer.resetColorTextures(colors.map((color)=>color));
             }
         }
     }
@@ -10511,18 +10697,18 @@ let seed$5 = 1;
             this.isCustomViewport = true;
             this.viewportScale = 1;
             this.customViewport = options.viewport.slice(0, 4);
-            if (this.frameBuffer) {
+            if (this.framebuffer) {
                 const vp = this.customViewport;
                 // TODO 为什么framebuffer和renderpass的isCustomViewport不一样？
-                this.frameBuffer.isCustomViewport = false;
-                this.frameBuffer.resize(vp[0], vp[1], vp[2], vp[3]);
+                this.framebuffer.isCustomViewport = false;
+                this.framebuffer.resize(vp[0], vp[1], vp[2], vp[3]);
             }
         } else {
             this.isCustomViewport = false;
             this.viewportScale = options.viewportScale || 1;
-            if (this.frameBuffer) {
-                this.frameBuffer.isCustomViewport = true;
-                this.frameBuffer.viewportScale = this.viewportScale;
+            if (this.framebuffer) {
+                this.framebuffer.isCustomViewport = true;
+                this.framebuffer.viewportScale = this.viewportScale;
             }
         }
     }
@@ -10531,14 +10717,13 @@ let seed$5 = 1;
         const renderer = this.renderer;
         const options = this.options;
         if (this.attachments.length) {
-            var _this_frameBuffer;
+            var _this_framebuffer;
             this.attachments.forEach((att)=>!att.externalTexture && att.dispose());
             this.attachments.length = 0;
-            (_this_frameBuffer = this.frameBuffer) == null ? void 0 : _this_frameBuffer.dispose({
+            (_this_framebuffer = this.framebuffer) == null ? void 0 : _this_framebuffer.dispose({
                 depthStencilAttachment: 2
             });
-            // @ts-expect-error safe to assign
-            this.frameBuffer = null;
+            this.framebuffer = null;
         }
         const vs = this.viewportScale;
         // renderpass 的 viewport 相关参数都需要动态的修改
@@ -10563,7 +10748,7 @@ let seed$5 = 1;
                 return attachment;
             });
             this.attachments = attachments;
-            const framebuffer = FrameBuffer.create({
+            const framebuffer = Framebuffer.create({
                 storeAction: this.storeAction,
                 name,
                 viewport,
@@ -10576,7 +10761,7 @@ let seed$5 = 1;
             }, renderer);
             framebuffer.bind();
             framebuffer.unbind();
-            this.frameBuffer = framebuffer;
+            this.framebuffer = framebuffer;
         } else {
             this.attachments.length = 0;
         }
@@ -10584,8 +10769,8 @@ let seed$5 = 1;
     /**
    * 获取当前视口大小，格式：[x偏移，y偏移，宽度，高度]
    */ getViewport() {
-        var _this_frameBuffer;
-        const ret = ((_this_frameBuffer = this.frameBuffer) == null ? void 0 : _this_frameBuffer.viewport) || this.customViewport;
+        var _this_framebuffer;
+        const ret = ((_this_framebuffer = this.framebuffer) == null ? void 0 : _this_framebuffer.viewport) || this.customViewport;
         if (ret) {
             return ret;
         }
@@ -10606,24 +10791,24 @@ let seed$5 = 1;
     /**
    * 获取深度 Attachment，可能没有
    */ getDepthAttachment() {
-        const frameBuffer = this.frameBuffer;
-        if (frameBuffer) {
+        const framebuffer = this.framebuffer;
+        if (framebuffer) {
             return {
-                storageType: frameBuffer.depthStencilStorageType,
-                storage: frameBuffer.depthStorage,
-                texture: frameBuffer.getDepthTexture() ? this.getDepthTexture(frameBuffer.getDepthTexture(), frameBuffer.externalStorage) : undefined
+                storageType: framebuffer.depthStencilStorageType,
+                storage: framebuffer.depthStorage,
+                texture: framebuffer.getDepthTexture() ? this.getDepthTexture(framebuffer.getDepthTexture(), framebuffer.externalStorage) : undefined
             };
         }
     }
     /**
    * 获取蒙版 Attachment，可能没有
    */ getStencilAttachment() {
-        const frameBuffer = this.frameBuffer;
-        if (frameBuffer) {
+        const framebuffer = this.framebuffer;
+        if (framebuffer) {
             return {
-                storageType: frameBuffer.depthStencilStorageType,
-                storage: frameBuffer.stencilStorage,
-                texture: frameBuffer.getStencilTexture() ? this.getStencilTexture(frameBuffer.getStencilTexture(), frameBuffer.externalStorage) : undefined
+                storageType: framebuffer.depthStencilStorageType,
+                storage: framebuffer.stencilStorage,
+                texture: framebuffer.getStencilTexture() ? this.getStencilTexture(framebuffer.getStencilTexture(), framebuffer.externalStorage) : undefined
             };
         }
     }
@@ -10688,7 +10873,7 @@ let seed$5 = 1;
         }
         this.destroyed = true;
         const depthStencilOpt = (options == null ? void 0 : options.depthStencilAttachment) ? options.depthStencilAttachment : 0;
-        const fbo = this.frameBuffer;
+        const fbo = this.framebuffer;
         if (fbo) {
             fbo.dispose({
                 depthStencilAttachment: depthStencilOpt
@@ -10771,9 +10956,9 @@ var thresholdFrag = "precision highp float;varying vec2 uv;uniform sampler2D _Ma
 // Bloom 阈值 Pass
 class BloomThresholdPass extends RenderPass {
     configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
         this.sceneTextureHandle.texture = this.mainTexture;
-        renderer.setFrameBuffer(this.frameBuffer);
+        renderer.setFramebuffer(this.framebuffer);
     }
     execute(renderer) {
         renderer.clear({
@@ -10831,8 +11016,8 @@ class BloomThresholdPass extends RenderPass {
 }
 class HQGaussianDownSamplePass extends RenderPass {
     configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(this.frameBuffer);
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(this.framebuffer);
     }
     execute(renderer) {
         renderer.clear({
@@ -10846,7 +11031,7 @@ class HQGaussianDownSamplePass extends RenderPass {
             this.screenMesh
         ]);
         if (this.type === 'V') {
-            this.gaussianResult.texture = renderer.getFrameBuffer().getColorTextures()[0];
+            this.gaussianResult.texture = renderer.getFramebuffer().getColorTextures()[0];
         }
     }
     constructor(renderer, type, options){
@@ -10899,8 +11084,8 @@ class HQGaussianDownSamplePass extends RenderPass {
 }
 class HQGaussianUpSamplePass extends RenderPass {
     configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(this.frameBuffer);
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(this.framebuffer);
     }
     execute(renderer) {
         renderer.clear({
@@ -10963,11 +11148,11 @@ class HQGaussianUpSamplePass extends RenderPass {
 // 合并Bloom的高斯模糊结果，并应用ACES Tonemapping
 class ToneMappingPass extends RenderPass {
     configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
         if (!this.sceneTextureHandle.texture) {
             this.sceneTextureHandle.texture = this.mainTexture;
         }
-        renderer.setFrameBuffer(null);
+        renderer.setFramebuffer(null);
     }
     execute(renderer) {
         renderer.clear({
@@ -11322,7 +11507,7 @@ let seed$4 = 1;
         this.destroyed = true;
     }
     /**
-   * 重置 RenderPass ColorAttachment，解决 FrameBuffer 即读又写的问题
+   * 重置 RenderPass ColorAttachment，解决 Framebuffer 即读又写的问题
    * @param renderPasses - RenderPass 对象数组
    * @param startIndex - 开始重置的索引
    */ resetRenderPassDefaultAttachment(renderPasses, startIndex) {
@@ -11532,7 +11717,7 @@ let seed$4 = 1;
     // TODO tex和size没有地方用到。
     /**
    * 创建拷贝 RenderPass 用到的 Mesh 对象
-   * @param semantics - RenderPass 渲染时 FrameBuffer 的颜色和深度纹理、大小和是否混合
+   * @param semantics - RenderPass 渲染时 Framebuffer 的颜色和深度纹理、大小和是否混合
    */ createCopyMesh(semantics) {
         const name = EFFECTS_COPY_MESH_NAME;
         const engine = this.renderer.engine;
@@ -11817,8 +12002,8 @@ function findPreviousRenderPass(renderPasses, renderPass) {
 }
 class FinalCopyRP extends RenderPass {
     configure(renderer) {
-        this.prePassTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(null);
+        this.prePassTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(null);
     }
     execute(renderer) {
         renderer.clear(this.clearAction);
@@ -11844,7 +12029,7 @@ class GlobalUniforms {
     }
 }
 
-class RenderBuffer {
+class Renderbuffer {
     get isDestroyed() {
         return this.destroyed;
     }
@@ -12005,7 +12190,7 @@ var RenderTextureFormat;
 })(RenderTextureFormat || (RenderTextureFormat = {}));
 /**
  *
- */ class FrameBuffer {
+ */ class Framebuffer {
     resize(x, y, width, height) {
     // OVERRIDE
     }
@@ -12053,11 +12238,11 @@ class Renderer {
     setGlobalMatrix(name, value) {
     // OVERRIDE
     }
-    getFrameBuffer() {
+    getFramebuffer() {
         // OVERRIDE
         return null;
     }
-    setFrameBuffer(frameBuffer) {}
+    setFramebuffer(framebuffer) {}
     setViewport(x, y, width, height) {
     // OVERRIDE
     }
@@ -12114,7 +12299,7 @@ class Renderer {
     renderMeshes(meshes) {
     // OVERRIDE
     }
-    drawGeometry(geometry, material) {
+    drawGeometry(geometry, material, subMeshIndex = 0) {
     // OVERRIDE
     }
     getTemporaryRT(name, width, height, depthBuffer, filter, format) {
@@ -12430,7 +12615,7 @@ class InteractComponent extends RendererComponent {
     }
     getBoundingBox() {
         const worldMatrix = this.transform.getWorldMatrix();
-        const triangles = trianglesFromRect(Vector3.ZERO, 0.5, 0.5);
+        const triangles = trianglesFromRect(Vector3.ZERO, 0.5 * this.transform.size.x, 0.5 * this.transform.size.y);
         triangles.forEach((triangle)=>{
             worldMatrix.transformPoint(triangle.p0);
             worldMatrix.transformPoint(triangle.p1);
@@ -12662,1188 +12847,749 @@ class PlayableAsset {
     fromData(data) {}
 }
 
-/**
- * @since 2.0.0
- * @internal
- */ class Track extends PlayableAsset {
-    createOutput() {
-        const output = new PlayableOutput();
-        return output;
-    }
-    /**
-   * 重写该方法以创建自定义混合器
-   */ createMixerPlayable() {
-        return new Playable();
+const singleSplits = [
+    [
+        0,
+        0,
+        1,
+        1,
+        undefined
+    ]
+];
+const tempColor = [
+    1,
+    1,
+    1,
+    1
+];
+let seed$2 = 0;
+class SpriteColorPlayable extends Playable {
+    onPlayablePlay() {
+        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
     }
-    createPlayable() {
-        const defaultMixPlayable = this.createMixerPlayable();
-        for (const clip of this.clips){
-            defaultMixPlayable.connect(clip.playable);
+    processFrame(dt) {
+        let colorInc = vecFill(tempColor, 1);
+        let colorChanged;
+        const life = this.time / this.bindingItem.duration;
+        const opacityOverLifetime = this.opacityOverLifetime;
+        const colorOverLifetime = this.colorOverLifetime;
+        if (colorOverLifetime) {
+            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
+            colorChanged = true;
+        }
+        if (opacityOverLifetime) {
+            colorInc[3] *= opacityOverLifetime.getValue(life);
+            colorChanged = true;
+        }
+        if (colorChanged) {
+            vecMulCombine(this.renderColor, colorInc, this.startColor);
+            this.spriteMaterial.getVector4('_Color').setFromArray(this.renderColor);
         }
-        return defaultMixPlayable;
-    }
-    createClip(classConstructor, name) {
-        const newClip = new TimelineClip();
-        newClip.playable = new classConstructor();
-        newClip.name = name ? name : 'TimelineClip' + newClip.id;
-        this.addClip(newClip);
-        return newClip;
-    }
-    getClips() {
-        return this.clips;
     }
-    findClip(name) {
-        for (const clip of this.clips){
-            if (clip.name === name) {
-                return clip;
+    fromData(clipData) {
+        this.clipData = clipData;
+        const colorOverLifetime = clipData.colorOverLifetime;
+        if (colorOverLifetime) {
+            var _colorOverLifetime_opacity;
+            this.opacityOverLifetime = createValueGetter((_colorOverLifetime_opacity = colorOverLifetime.opacity) != null ? _colorOverLifetime_opacity : 1);
+            if (colorOverLifetime.color && colorOverLifetime.color[0] === ValueType.GRADIENT_COLOR) {
+                this.colorOverLifetime = colorStopsFromGradient(colorOverLifetime.color[1]);
             }
         }
-    }
-    addClip(clip) {
-        clip.playable.bindingItem = this.bindingItem;
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
+        this.startColor = clipData.startColor || [
+            1,
+            1,
+            1,
+            1
+        ];
+        return this;
     }
     constructor(...args){
         super(...args);
-        this.clips = [];
-        this.clipSeed = 0;
-    }
-}
-/**
- * @since 2.0.0
- * @internal
- */ class TimelineClip {
-    constructor(){
-        this.start = 0;
-        this.duration = 0;
+        this.renderColor = [
+            1,
+            1,
+            1,
+            1
+        ];
     }
 }
-
-class AnimationStream {
-    setCurveValue(componentType, propertyName, value) {
-        if (!this.findCurveValue(componentType, propertyName)) {
-            this.curveValues[componentType + propertyName] = {
-                componentType,
-                propertyName,
-                value
-            };
-        } else {
-            this.curveValues[componentType + propertyName].value = value;
-        }
-        return this.curveValues[componentType + propertyName];
-    }
-    findCurveValue(componentType, propertyName) {
-        return this.curveValues[componentType + propertyName];
+class SpriteComponent extends RendererComponent {
+    /**
+   * 设置当前 Mesh 的可见性。
+   * @param visible - true：可见，false：不可见
+   */ setVisible(visible) {
+        this.visible = visible;
     }
-    getInputStream(index) {
-        const inputPlayable = this.playable.getInput(index);
-        if (inputPlayable instanceof AnimationPlayable) {
-            return inputPlayable.animationStream;
-        }
+    /**
+   * 获取当前 Mesh 的可见性。
+   */ getVisible() {
+        return this.visible;
     }
-    constructor(playable){
-        this.curveValues = {};
-        this.playable = playable;
+    /**
+   * 设置当前图层的颜色
+   * > Tips: 透明度也属于颜色的一部分，当有透明度/颜色 K 帧变化时，该 API 会失效
+   * @since 2.0.0
+   * @param color - 颜色值
+   */ setColor(color) {
+        this.color = color;
+        this.material.setVector4('_Color', new Vector4().setFromArray(color));
     }
-}
-
-class AnimationPlayable extends Playable {
-    constructor(){
-        super();
-        this.animationStream = new AnimationStream(this);
+    /**
+   * 设置当前 Mesh 的纹理
+   * @since 2.0.0
+   * @param texture - 纹理对象
+   */ setTexture(texture) {
+        this.renderer.texture = texture;
+        this.material.setTexture('uSampler0', texture);
     }
-}
-
-const tempRot$1 = new Euler();
-const tempSize$1 = new Vector3(1, 1, 1);
-const tempPos = new Vector3();
-/**
- * @since 2.0.0
- * @internal
- */ class TransformAnimationPlayable extends AnimationPlayable {
-    processFrame(dt) {
-        if (this.bindingItem.composition) {
-            this.sampleAnimation();
+    render(renderer) {
+        if (!this.getVisible()) {
+            return;
         }
+        const material = this.material;
+        const geo = this.geometry;
+        if (renderer.renderingData.currentFrame.globalUniforms) {
+            renderer.setGlobalMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
+        }
+        this.material.setVector2('_Size', this.transform.size);
+        renderer.drawGeometry(geo, material);
     }
-    /**
-   * 应用时间轴K帧数据到对象
-   */ sampleAnimation() {
-        const duration = this.bindingItem.duration;
-        let life = this.time / duration;
-        life = life < 0 ? 0 : life > 1 ? 1 : life;
-        if (this.sizeXOverLifetime) {
-            tempSize$1.x = this.sizeXOverLifetime.getValue(life);
-            if (this.sizeSeparateAxes) {
-                tempSize$1.y = this.sizeYOverLifetime.getValue(life);
-                tempSize$1.z = this.sizeZOverLifetime.getValue(life);
-            } else {
-                tempSize$1.z = tempSize$1.y = tempSize$1.x;
+    start() {
+        this.priority = this.item.listIndex;
+        this.item.getHitTestParams = this.getHitTestParams;
+    }
+    update(dt) {
+        this.frameAnimationTime += dt / 1000;
+        const time = this.frameAnimationTime;
+        const duration = this.item.duration;
+        const life = Math.min(Math.max(time / duration, 0.0), 1.0);
+        const ta = this.textureSheetAnimation;
+        if (ta) {
+            const total = ta.total || ta.row * ta.col;
+            let texRectX = 0;
+            let texRectY = 0;
+            let texRectW = 1;
+            let texRectH = 1;
+            let flip;
+            if (this.splits) {
+                const sp = this.splits[0];
+                flip = sp[4];
+                texRectX = sp[0];
+                texRectY = sp[1];
+                if (flip) {
+                    texRectW = sp[3];
+                    texRectH = sp[2];
+                } else {
+                    texRectW = sp[2];
+                    texRectH = sp[3];
+                }
             }
-            const startSize = this.originalTransform.scale;
-            this.bindingItem.transform.setScale(tempSize$1.x * startSize.x, tempSize$1.y * startSize.y, tempSize$1.z * startSize.z);
-        // this.animationStream.setCurveValue('transform', 'scale.x', tempSize.x * startSize.x);
-        // this.animationStream.setCurveValue('transform', 'scale.y', tempSize.y * startSize.y);
-        // this.animationStream.setCurveValue('transform', 'scale.z', tempSize.z * startSize.z);
-        }
-        if (this.rotationOverLifetime) {
-            const func = (v)=>this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration);
-            const incZ = func(this.rotationOverLifetime.z);
-            const separateAxes = this.rotationOverLifetime.separateAxes;
-            tempRot$1.x = separateAxes ? func(this.rotationOverLifetime.x) : 0;
-            tempRot$1.y = separateAxes ? func(this.rotationOverLifetime.y) : 0;
-            tempRot$1.z = incZ;
-            const rot = tempRot$1.addEulers(this.originalTransform.rotation, tempRot$1);
-            this.bindingItem.transform.setRotation(rot.x, rot.y, rot.z);
-        // this.animationStream.setCurveValue('transform', 'rotation.x', rot.x);
-        // this.animationStream.setCurveValue('transform', 'rotation.y', rot.y);
-        // this.animationStream.setCurveValue('transform', 'rotation.z', rot.z);
-        }
-        if (this.positionOverLifetime) {
-            const pos = tempPos;
-            calculateTranslation(pos, this, this.gravity, this.time, duration, this.originalTransform.position, this.velocity);
-            if (this.originalTransform.path) {
-                pos.add(this.originalTransform.path.getValue(life));
-            }
-            this.bindingItem.transform.setPosition(pos.x, pos.y, pos.z);
-        // this.animationStream.setCurveValue('transform', 'position.x', pos.x);
-        // this.animationStream.setCurveValue('transform', 'position.y', pos.y);
-        // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
-        }
-    }
-    fromData(data) {
-        const scale = this.bindingItem.transform.scale;
-        this.originalTransform = {
-            position: this.bindingItem.transform.position.clone(),
-            rotation: this.bindingItem.transform.getRotation().clone(),
-            // TODO 编辑器 scale 没有z轴控制
-            scale: new Vector3(scale.x, scale.y, scale.x)
-        };
-        const positionOverLifetime = data.positionOverLifetime;
-        const rotationOverLifetime = data.rotationOverLifetime;
-        const sizeOverLifetime = data.sizeOverLifetime;
-        // TODO: 没有 K 帧数据的不需要传 positionOverLifetime 空对象
-        if (positionOverLifetime && Object.keys(positionOverLifetime).length !== 0) {
-            this.positionOverLifetime = positionOverLifetime;
-            if (positionOverLifetime.path) {
-                this.originalTransform.path = createValueGetter(positionOverLifetime.path);
-            }
-            const linearVelEnable = positionOverLifetime.linearX || positionOverLifetime.linearY || positionOverLifetime.linearZ;
-            if (linearVelEnable) {
-                this.linearVelOverLifetime = {
-                    x: positionOverLifetime.linearX && createValueGetter(positionOverLifetime.linearX),
-                    y: positionOverLifetime.linearY && createValueGetter(positionOverLifetime.linearY),
-                    z: positionOverLifetime.linearZ && createValueGetter(positionOverLifetime.linearZ),
-                    asMovement: positionOverLifetime.asMovement,
-                    enabled: !!linearVelEnable
-                };
-            }
-            const orbitalVelEnable = positionOverLifetime.orbitalX || positionOverLifetime.orbitalY || positionOverLifetime.orbitalZ;
-            if (orbitalVelEnable) {
-                this.orbitalVelOverLifetime = {
-                    x: positionOverLifetime.orbitalX && createValueGetter(positionOverLifetime.orbitalX),
-                    y: positionOverLifetime.orbitalY && createValueGetter(positionOverLifetime.orbitalY),
-                    z: positionOverLifetime.orbitalZ && createValueGetter(positionOverLifetime.orbitalZ),
-                    center: ensureVec3(positionOverLifetime.orbCenter),
-                    asRotation: positionOverLifetime.asRotation,
-                    enabled: !!orbitalVelEnable
-                };
-            }
-            this.speedOverLifetime = positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime);
-        }
-        if (sizeOverLifetime) {
-            if (sizeOverLifetime.separateAxes) {
-                this.sizeSeparateAxes = true;
-                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.x || 1);
-                this.sizeYOverLifetime = createValueGetter(sizeOverLifetime.y || 1);
-                this.sizeZOverLifetime = createValueGetter(sizeOverLifetime.z || 1);
+            let dx, dy;
+            if (flip) {
+                dx = 1 / ta.row * texRectW;
+                dy = 1 / ta.col * texRectH;
             } else {
-                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.size || 1);
+                dx = 1 / ta.col * texRectW;
+                dy = 1 / ta.row * texRectH;
             }
-        }
-        if (rotationOverLifetime) {
-            this.rotationOverLifetime = {
-                asRotation: rotationOverLifetime.asRotation,
-                separateAxes: rotationOverLifetime.separateAxes,
-                z: createValueGetter(rotationOverLifetime.z || 0)
-            };
-            if (rotationOverLifetime.separateAxes) {
-                const rotLt = this.rotationOverLifetime;
-                rotLt.x = createValueGetter(rotationOverLifetime.x || 0);
-                rotLt.y = createValueGetter(rotationOverLifetime.y || 0);
+            let texOffset;
+            if (ta.animate) {
+                const frameIndex = Math.round(life * (total - 1));
+                const yIndex = Math.floor(frameIndex / ta.col);
+                const xIndex = frameIndex - yIndex * ta.col;
+                texOffset = flip ? [
+                    dx * yIndex,
+                    dy * (ta.col - xIndex)
+                ] : [
+                    dx * xIndex,
+                    dy * (1 + yIndex)
+                ];
+            } else {
+                texOffset = [
+                    0,
+                    dy
+                ];
             }
+            this.material.getVector4('_TexOffset').setFromArray([
+                texRectX + texOffset[0],
+                texRectH + texRectY - texOffset[1],
+                dx,
+                dy
+            ]);
         }
-        this.gravity = Vector3.fromArray((positionOverLifetime == null ? void 0 : positionOverLifetime.gravity) || []);
-        var _positionOverLifetime_gravityOverLifetime;
-        this.gravityModifier = createValueGetter((_positionOverLifetime_gravityOverLifetime = positionOverLifetime == null ? void 0 : positionOverLifetime.gravityOverLifetime) != null ? _positionOverLifetime_gravityOverLifetime : 0);
-        this.direction = (positionOverLifetime == null ? void 0 : positionOverLifetime.direction) ? Vector3.fromArray(positionOverLifetime.direction).normalize() : new Vector3();
-        this.startSpeed = (positionOverLifetime == null ? void 0 : positionOverLifetime.startSpeed) || 0;
-        this.velocity = this.direction.clone();
-        this.velocity.multiply(this.startSpeed);
-    }
-}
-class TransformAnimationPlayableAsset extends PlayableAsset {
-    createPlayable() {
-        const transformAnimationPlayable = new TransformAnimationPlayable();
-        transformAnimationPlayable.fromData(this.transformAnimationData);
-        return transformAnimationPlayable;
-    }
-    fromData(data) {
-        this.transformAnimationData = data;
-    }
-}
-/**
- * @since 2.0.0
- * @internal
- */ class ActivationPlayable extends Playable {
-    onGraphStart() {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
-    }
-    onPlayablePlay() {
-        this.bindingItem.transform.setValid(true);
-        this.showRendererComponents();
-    }
-    onPlayableDestroy() {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
     }
-    hideRendererComponents() {
-        for (const rendererComponent of this.bindingItem.rendererComponents){
-            if (rendererComponent.enabled) {
-                rendererComponent.enabled = false;
-            }
+    onDestroy() {
+        if (this.item && this.item.composition) {
+            this.item.composition.destroyTextures(this.getTextures());
         }
     }
-    showRendererComponents() {
-        for (const rendererComponent of this.bindingItem.rendererComponents){
-            if (!rendererComponent.enabled) {
-                rendererComponent.enabled = true;
-            }
+    getItemInitData(item, idx, pointStartIndex, textureIndex) {
+        let geoData = item.geoData;
+        if (!geoData) {
+            geoData = item.geoData = this.getItemGeometryData(item, idx);
         }
-    }
-}
-
-/**
- * @since 2.0.0
- * @internal
- */ class TimelineComponent extends ItemBehaviour {
-    start() {
-        // TODO TimelineClip 需要传入 start 和 duration 数据
-        for (const track of this.tracks){
-            for (const clip of track.getClips()){
-                clip.start = this.item.start;
-                clip.duration = this.item.duration;
+        const index = geoData.index;
+        const idxCount = index.length;
+        // @ts-expect-error
+        const indexData = this.wireframe ? new Uint8Array([
+            0,
+            1,
+            1,
+            3,
+            2,
+            3,
+            2,
+            0
+        ]) : new index.constructor(idxCount);
+        if (!this.wireframe) {
+            for(let i = 0; i < idxCount; i++){
+                indexData[i] = pointStartIndex + index[i];
             }
         }
-        this.compileTracks(this.playableGraph);
+        return {
+            atlasOffset: geoData.atlasOffset,
+            index: indexData
+        };
     }
-    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
-    update(dt) {
-        if (this.item.stopped || !this.item.composition) {
-            return;
+    setItem() {
+        const textures = [];
+        let texture = this.renderer.texture;
+        if (texture) {
+            addItem(textures, texture);
         }
-        if (!this.timelineStarted) {
-            for (const track of this.tracks){
-                for (const clip of track.getClips()){
-                    clip.playable.onGraphStart();
-                }
-            }
-            this.timelineStarted = true;
+        texture = this.renderer.texture;
+        const textureIndex = texture ? textures.indexOf(texture) : -1;
+        const data = this.getItemInitData(this, 0, 0, textureIndex);
+        const renderer = this.renderer;
+        const texParams = this.material.getVector4('_TexParams');
+        texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
+        texParams.y = +this.preMultiAlpha;
+        texParams.z = renderer.renderMode;
+        const attributes = {
+            atlasOffset: new Float32Array(data.atlasOffset.length),
+            index: new Uint16Array(data.index.length)
+        };
+        attributes.atlasOffset.set(data.atlasOffset);
+        attributes.index.set(data.index);
+        const { material, geometry } = this;
+        const indexData = attributes.index;
+        geometry.setIndexData(indexData);
+        geometry.setAttributeData('atlasOffset', attributes.atlasOffset);
+        geometry.setDrawCount(data.index.length);
+        for(let i = 0; i < textures.length; i++){
+            const texture = textures[i];
+            material.setTexture('uSampler' + i, texture);
         }
-        const now = this.time;
-        // 判断动画是否开始
-        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
-            this.item.delaying = false;
-            for (const track of this.tracks){
-                for (const clip of track.getClips()){
-                    clip.playable.onPlayablePlay();
-                }
-            }
+        // FIXME: 内存泄漏的临时方案，后面再调整
+        const emptyTexture = this.emptyTexture;
+        for(let k = textures.length; k < maxSpriteMeshItemCount; k++){
+            material.setTexture('uSampler' + k, emptyTexture);
         }
-        // 判断动画是否结束
-        let ended;
-        if (VFXItem.isParticle(this.item)) {
-            ended = this.item.isEnded(now) && this.item.content.destoryed;
-        } else {
-            ended = this.item.isEnded(now);
-        }
-        if (ended) {
-            const endBehavior = this.item.endBehavior;
-            if (!this.item.ended) {
-                this.item.ended = true;
-                this.item.onEnd();
-                if (endBehavior === ItemEndBehavior.destroy) {
-                    for (const track of this.tracks){
-                        for (const clip of track.getClips()){
-                            clip.playable.onPlayableDestroy();
-                        }
-                    }
-                    this.item.delaying = true;
-                    if (!this.item.reusable && !this.reusable) {
-                        this.item.dispose();
-                        return;
-                    }
+    }
+    createGeometry(mode) {
+        const maxVertex = 12 * this.splits.length;
+        return Geometry.create(this.engine, {
+            attributes: {
+                aPos: {
+                    type: glContext.FLOAT,
+                    size: 3,
+                    data: new Float32Array([
+                        -0.5,
+                        0.5,
+                        0,
+                        -0.5,
+                        -0.5,
+                        0,
+                        0.5,
+                        0.5,
+                        0,
+                        0.5,
+                        -0.5,
+                        0
+                    ])
+                },
+                atlasOffset: {
+                    size: 2,
+                    offset: 0,
+                    releasable: true,
+                    type: glContext.FLOAT,
+                    data: new Float32Array(0)
                 }
-            }
+            },
+            indices: {
+                data: new Uint16Array(0),
+                releasable: true
+            },
+            mode,
+            maxVertex
+        });
+    }
+    createMaterial(renderInfo, count) {
+        const { side, occlusion, blending, maskMode, mask } = renderInfo;
+        const materialProps = {
+            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
+        };
+        this.preMultiAlpha = getPreMultiAlpha(blending);
+        const material = Material.create(this.engine, materialProps);
+        const states = {
+            side,
+            blending: true,
+            blendMode: blending,
+            mask,
+            maskMode,
+            depthTest: true,
+            depthMask: occlusion
+        };
+        material.blending = states.blending;
+        material.stencilRef = states.mask !== undefined ? [
+            states.mask,
+            states.mask
+        ] : undefined;
+        material.depthTest = states.depthTest;
+        material.depthMask = states.depthMask;
+        setBlendMode(material, states.blendMode);
+        setMaskMode(material, states.maskMode);
+        setSideMode(material, states.side);
+        if (!material.hasUniform('_Color')) {
+            material.setVector4('_Color', new Vector4(0, 0, 0, 1));
         }
-        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
-        // 在生命周期内更新动画
-        if (!this.item.delaying) {
-            const lifetime = this.time / this.item.duration;
-            this.item.lifetime = lifetime;
-            for (const track of this.tracks){
-                for (const clip of track.getClips()){
-                    clip.playable.setTime(this.time);
-                }
-            }
-            this.playableGraph.evaluate(dt);
+        if (!material.hasUniform('_TexOffset')) {
+            material.setVector4('_TexOffset', new Vector4());
         }
+        if (!material.hasUniform('_TexParams')) {
+            material.setVector4('_TexParams', new Vector4());
+        }
+        return material;
     }
-    // time 单位秒
-    setTime(time) {
-        this.time = time;
-    }
-    getTime() {
-        return this.time;
-    }
-    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);
+    getItemGeometryData(item, aIndex) {
+        const { splits, renderer, textureSheetAnimation } = item;
+        const sx = 1, sy = 1;
+        if (renderer.shape) {
+            const { index, aPoint } = renderer.shape;
+            const point = new Float32Array(aPoint);
+            const position = [];
+            const atlasOffset = [];
+            for(let i = 0; i < point.length; i += 6){
+                point[i] *= sx;
+                point[i + 1] *= sy;
+                atlasOffset.push(aPoint[i + 2], aPoint[i + 3]);
+                position.push(point[i], point[i + 1], 0.0);
             }
+            this.geometry.setAttributeData('aPos', new Float32Array(position));
+            return {
+                index,
+                atlasOffset
+            };
         }
-        return localTime;
-    }
-    createTrack(classConstructor, name) {
-        const newTrack = new classConstructor();
-        newTrack.bindingItem = this.item;
-        newTrack.id = (this.trackSeed++).toString();
-        newTrack.name = name ? name : 'Track' + newTrack.id;
-        this.tracks.push(newTrack);
-        return newTrack;
-    }
-    getTracks() {
-        return this.tracks;
-    }
-    findTrack(name) {
-        for (const track of this.tracks){
-            if (track.name === name) {
-                return track;
+        const originData = [
+            -.5,
+            .5,
+            -.5,
+            -.5,
+            .5,
+            .5,
+            .5,
+            -.5
+        ];
+        const atlasOffset = [];
+        const index = [];
+        let col = 2;
+        let row = 2;
+        if (splits.length === 1) {
+            col = 1;
+            row = 1;
+        }
+        const position = [];
+        for(let x = 0; x < col; x++){
+            for(let y = 0; y < row; y++){
+                const base = (y * 2 + x) * 4;
+                // @ts-expect-error
+                const split = textureSheetAnimation ? [
+                    0,
+                    0,
+                    1,
+                    1,
+                    splits[0][4]
+                ] : splits[y * 2 + x];
+                const texOffset = split[4] ? [
+                    0,
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1
+                ] : [
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ];
+                const dw = ((x + x + 1) / col - 1) / 2;
+                const dh = ((y + y + 1) / row - 1) / 2;
+                const tox = split[0];
+                const toy = split[1];
+                const tsx = split[4] ? split[3] : split[2];
+                const tsy = split[4] ? split[2] : split[3];
+                const origin = [
+                    originData[0] / col + dw,
+                    originData[1] / row + dh,
+                    originData[2] / col + dw,
+                    originData[3] / row + dh,
+                    originData[4] / col + dw,
+                    originData[5] / row + dh,
+                    originData[6] / col + dw,
+                    originData[7] / row + dh
+                ];
+                atlasOffset.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
+                position.push(origin[0] * sx, origin[1] * sy, 0.0, origin[2] * sx, origin[3] * sy, 0.0, origin[4] * sx, origin[5] * sy, 0.0, origin[6] * sx, origin[7] * sy, 0.0);
+                index.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
             }
         }
+        this.geometry.setAttributeData('aPos', new Float32Array(position));
+        return {
+            index,
+            atlasOffset
+        };
     }
-    rebuildGraph() {
-        this.playableGraph = new PlayableGraph();
-        this.compileTracks(this.playableGraph);
-    }
-    compileTracks(graph) {
-        for (const track of this.tracks){
-            const trackMixPlayable = track.createPlayable();
-            const trackOutput = track.createOutput();
-            graph.addOutput(trackOutput);
-            trackOutput.setSourcePlayeble(trackMixPlayable);
+    getTextures() {
+        const ret = [];
+        const tex = this.renderer.texture;
+        if (tex) {
+            ret.push(tex);
         }
+        return ret;
     }
-    fromData(data) {
-        super.fromData(data);
-        this.options = {
-            start: this.item.start,
-            duration: this.item.duration,
-            looping: this.item.endBehavior === ItemEndBehavior.loop,
-            endBehavior: this.item.endBehavior || ItemEndBehavior.destroy
-        };
-        this.id = this.item.id;
-        this.name = this.item.name;
-        const activationTrack = this.createTrack(Track, 'ActivationTrack');
-        activationTrack.createClip(ActivationPlayable, 'ActivationTimelineClip');
-        //@ts-expect-error
-        if (data.tracks) {
-            //@ts-expect-error
-            const tracks = data.tracks;
-            for (const track of tracks){
-                const newTrack = this.createTrack(Track);
-                for (const clipAsset of track.clips){
-                    switch(clipAsset.dataType){
-                        case 'TransformAnimationPlayableAsset':
-                            newTrack.name = 'AnimationTrack';
-                            newTrack.createClip(TransformAnimationPlayable, 'AnimationTimelineClip').playable.fromData(clipAsset.animationClip);
-                            break;
-                        case 'SpriteColorAnimationPlayableAsset':
-                            newTrack.name = 'SpriteColorTrack';
-                            newTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData(clipAsset.animationClip);
-                            break;
-                    }
-                }
-            }
-        }
-    }
-    toData() {
-        super.toData();
-    }
-    constructor(engine){
-        super(engine);
-        this.reusable = false;
-        this.timelineStarted = false;
-        this.playableGraph = new PlayableGraph();
-        /**
-   * 元素动画已经播放的时间
-   */ this.time = 0;
-        this.tracks = [];
-        this.trackSeed = 0;
-    }
-}
-__decorate([
-    serialize()
-], TimelineComponent.prototype, "time", void 0);
-
-const singleSplits = [
-    [
-        0,
-        0,
-        1,
-        1,
-        undefined
-    ]
-];
-const tempColor = [
-    1,
-    1,
-    1,
-    1
-];
-let seed$2 = 0;
-class SpriteColorPlayable extends Playable {
-    onPlayablePlay() {
-        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
-    }
-    processFrame(dt) {
-        let colorInc = vecFill(tempColor, 1);
-        let colorChanged;
-        const life = this.time / this.bindingItem.duration;
-        const opacityOverLifetime = this.opacityOverLifetime;
-        const colorOverLifetime = this.colorOverLifetime;
-        if (colorOverLifetime) {
-            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
-            colorChanged = true;
-        }
-        if (opacityOverLifetime) {
-            colorInc[3] *= opacityOverLifetime.getValue(life);
-            colorChanged = true;
-        }
-        if (colorChanged) {
-            vecMulCombine(this.renderColor, colorInc, this.startColor);
-            this.spriteMaterial.getVector4('_Color').setFromArray(this.renderColor);
+    /**
+   * 获取图层包围盒的类型和世界坐标
+   * @returns
+   */ getBoundingBox() {
+        if (!this.item) {
+            return;
         }
+        const worldMatrix = this.transform.getWorldMatrix();
+        const triangles = trianglesFromRect(Vector3.ZERO, 0.5 * this.transform.size.x, 0.5 * this.transform.size.y);
+        triangles.forEach((triangle)=>{
+            worldMatrix.transformPoint(triangle.p0);
+            worldMatrix.transformPoint(triangle.p1);
+            worldMatrix.transformPoint(triangle.p2);
+        });
+        return {
+            type: HitTestType.triangle,
+            area: triangles
+        };
     }
-    fromData(clipData) {
-        this.clipData = clipData;
-        const colorOverLifetime = clipData.colorOverLifetime;
-        if (colorOverLifetime) {
-            var _colorOverLifetime_opacity;
-            this.opacityOverLifetime = createValueGetter((_colorOverLifetime_opacity = colorOverLifetime.opacity) != null ? _colorOverLifetime_opacity : 1);
-            if (colorOverLifetime.color && colorOverLifetime.color[0] === ValueType.GRADIENT_COLOR) {
-                this.colorOverLifetime = colorStopsFromGradient(colorOverLifetime.color[1]);
-            }
+    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
+    fromData(data) {
+        super.fromData(data);
+        const { interaction, options, listIndex = 0 } = data;
+        let renderer = data.renderer;
+        if (!renderer) {
+            //@ts-expect-error
+            renderer = {};
         }
-        this.startColor = clipData.startColor || [
+        this.interaction = interaction;
+        var _renderer_renderMode, _renderer_blending, _renderer_texture, _renderer_side, _renderer_mask, _renderer_maskMode;
+        this.renderer = {
+            renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.BILLBOARD,
+            blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
+            texture: (_renderer_texture = renderer.texture) != null ? _renderer_texture : this.engine.emptyTexture,
+            occlusion: !!renderer.occlusion,
+            transparentOcclusion: !!renderer.transparentOcclusion || renderer.maskMode === MaskMode.MASK,
+            side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
+            shape: renderer.shape,
+            mask: (_renderer_mask = renderer.mask) != null ? _renderer_mask : 0,
+            maskMode: (_renderer_maskMode = renderer.maskMode) != null ? _renderer_maskMode : MaskMode.NONE,
+            order: listIndex
+        };
+        this.emptyTexture = this.engine.emptyTexture;
+        this.splits = data.splits || singleSplits;
+        this.textureSheetAnimation = data.textureSheetAnimation;
+        this.cachePrefix = '-';
+        this.renderInfo = getImageItemRenderInfo(this);
+        const geometry = this.createGeometry(glContext.TRIANGLES);
+        const material = this.createMaterial(this.renderInfo, 2);
+        this.worldMatrix = Matrix4.fromIdentity();
+        this.material = material;
+        this.geometry = geometry;
+        this.name = 'MSprite' + seed$2++;
+        const startColor = options.startColor || [
             1,
             1,
             1,
             1
         ];
-        return this;
+        this.material.setVector4('_Color', new Vector4().setFromArray(startColor));
+        this.material.setVector4('_TexOffset', new Vector4().setFromArray([
+            0,
+            0,
+            1,
+            1
+        ]));
+        this.setItem();
     }
-    constructor(...args){
-        super(...args);
-        this.renderColor = [
+    toData() {
+        super.toData();
+    }
+    constructor(engine, props){
+        super(engine);
+        this.frameAnimationTime = 0;
+        this.color = [
             1,
             1,
             1,
             1
         ];
+        this.visible = true;
+        this.getHitTestParams = (force)=>{
+            const ui = this.interaction;
+            if (force || ui) {
+                const area = this.getBoundingBox();
+                if (area) {
+                    var _this_interaction;
+                    return {
+                        behavior: ((_this_interaction = this.interaction) == null ? void 0 : _this_interaction.behavior) || 0,
+                        type: area.type,
+                        triangles: area.area,
+                        backfaceCulling: this.renderer.side === SideMode.FRONT
+                    };
+                }
+            }
+        };
+        if (props) {
+            this.fromData(props);
+        }
     }
 }
-class SpriteComponent extends RendererComponent {
-    /**
-   * 设置当前 Mesh 的可见性。
-   * @param visible - true：可见，false：不可见
-   */ setVisible(visible) {
-        this.visible = visible;
-    }
-    /**
-   * 获取当前 Mesh 的可见性。
-   */ getVisible() {
-        return this.visible;
+SpriteComponent = __decorate([
+    effectsClass(DataType.SpriteComponent)
+], SpriteComponent);
+
+const RUNTIME_ENV = 'runtime_env';
+const RENDER_PREFER_LOOKUP_TEXTURE = 'lookup_texture';
+// 文本元素使用 offscreen canvas 绘制
+const TEMPLATE_USE_OFFSCREEN_CANVAS = 'offscreen_canvas';
+// 后处理配置相关
+const POST_PROCESS_SETTINGS = 'post_process_settings';
+const config = {};
+function getConfig(name) {
+    return config[name];
+}
+function setConfig(name, value) {
+    return config[name] = value;
+}
+
+class Cone {
+    generate(opt) {
+        const arc = getArcAngle(this.arc, this.arcMode, opt);
+        const a = arc * DEG2RAD;
+        const x = Math.cos(a) * this.radius;
+        const y = Math.sin(a) * this.radius;
+        const position = new Vector3(x, y, 0);
+        const l = Math.tan(this.angle * DEG2RAD);
+        const dir = position.clone().multiply(l);
+        // dir + [0,0,1]
+        dir.z += 1;
+        return {
+            position: position.multiply(random(0, 1)),
+            direction: dir.normalize()
+        };
     }
-    /**
-   * 设置当前图层的颜色
-   * > Tips: 透明度也属于颜色的一部分，当有透明度/颜色 K 帧变化时，该 API 会失效
-   * @since 2.0.0
-   * @param color - 颜色值
-   */ setColor(color) {
-        this.color = color;
-        this.material.setVector4('_Color', new Vector4().setFromArray(color));
+    constructor(props){
+        Object.keys(props).forEach((key)=>{
+            this[key] = props[key];
+        });
     }
-    /**
-   * 设置当前 Mesh 的纹理
-   * @since 2.0.0
-   * @param texture - 纹理对象
-   */ setTexture(texture) {
-        this.renderer.texture = texture;
-        this.material.setTexture('uSampler0', texture);
+}
+function getArcAngle(arc, arcMode, opt) {
+    if (arcMode === ShapeArcMode.RANDOM) {
+        arc = random(0, arc);
+    } else if (arcMode === ShapeArcMode.UNIDIRECTIONAL_CYCLE) {
+        const d = opt.index % (opt.total + 1);
+        arc = arc / opt.total * d;
+    } else if (arcMode === ShapeArcMode.BIDIRECTIONAL_CYCLE) {
+        const d = opt.index / (opt.total + 1);
+        const i = d - Math.floor(d);
+        arc = arc * (Math.floor(d) % 2 ? 1 - i : i);
+    } else if (arcMode === ShapeArcMode.UNIFORM_BURST) {
+        arc = arc * opt.burstIndex / opt.burstCount;
     }
-    render(renderer) {
-        if (!this.getVisible()) {
-            return;
-        }
-        const material = this.material;
-        const geo = this.geometry;
-        if (renderer.renderingData.currentFrame.globalUniforms) {
-            renderer.setGlobalMatrix('effects_ObjectToWorld', this.transform.getWorldMatrix());
-        }
-        this.material.setVector2('_Size', this.transform.size);
-        renderer.drawGeometry(geo, material);
+    return arc;
+}
+
+class Circle {
+    generate(opt) {
+        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        const direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
+        const radius = this.radius;
+        return {
+            direction,
+            position: direction.clone().multiply(radius)
+        };
     }
-    start() {
-        this.priority = this.item.listIndex;
-        this.timelineComponent = this.item.getComponent(TimelineComponent);
-        this.item.getHitTestParams = this.getHitTestParams;
+    constructor(props){
+        Object.keys(props).forEach((key)=>{
+            this[key] = props[key];
+        });
     }
-    update(dt) {
-        const time = this.timelineComponent.getTime();
-        const duration = this.item.duration;
-        const life = Math.min(Math.max(time / duration, 0.0), 1.0);
-        const ta = this.textureSheetAnimation;
-        if (ta) {
-            const total = ta.total || ta.row * ta.col;
-            let texRectX = 0;
-            let texRectY = 0;
-            let texRectW = 1;
-            let texRectH = 1;
-            let flip;
-            if (this.splits) {
-                const sp = this.splits[0];
-                flip = sp[4];
-                texRectX = sp[0];
-                texRectY = sp[1];
-                if (flip) {
-                    texRectW = sp[3];
-                    texRectH = sp[2];
-                } else {
-                    texRectW = sp[2];
-                    texRectH = sp[3];
-                }
-            }
-            let dx, dy;
-            if (flip) {
-                dx = 1 / ta.row * texRectW;
-                dy = 1 / ta.col * texRectH;
-            } else {
-                dx = 1 / ta.col * texRectW;
-                dy = 1 / ta.row * texRectH;
-            }
-            let texOffset;
-            if (ta.animate) {
-                const frameIndex = Math.round(life * (total - 1));
-                const yIndex = Math.floor(frameIndex / ta.col);
-                const xIndex = frameIndex - yIndex * ta.col;
-                texOffset = flip ? [
-                    dx * yIndex,
-                    dy * (ta.col - xIndex)
-                ] : [
-                    dx * xIndex,
-                    dy * (1 + yIndex)
-                ];
-            } else {
-                texOffset = [
-                    0,
-                    dy
-                ];
-            }
-            this.material.getVector4('_TexOffset').setFromArray([
-                texRectX + texOffset[0],
-                texRectH + texRectY - texOffset[1],
-                dx,
-                dy
-            ]);
-        }
+}
+class Rectangle {
+    generate(opt) {
+        const x = random(-this._d, this._d);
+        const y = random(-this._h, this._h);
+        return {
+            direction: new Vector3(0, 0, 1),
+            position: new Vector3(x, y, 0)
+        };
     }
-    onDestroy() {
-        if (this.item && this.item.composition) {
-            this.item.composition.destroyTextures(this.getTextures());
-        }
+    constructor(arg){
+        this._d = (arg.width || 1) / 2;
+        this._h = (arg.height || 1) / 2;
     }
-    getItemInitData(item, idx, pointStartIndex, textureIndex) {
-        let geoData = item.geoData;
-        if (!geoData) {
-            geoData = item.geoData = this.getItemGeometryData(item, idx);
-        }
-        const index = geoData.index;
-        const idxCount = index.length;
-        // @ts-expect-error
-        const indexData = this.wireframe ? new Uint8Array([
-            0,
-            1,
-            1,
-            3,
-            2,
-            3,
-            2,
-            0
-        ]) : new index.constructor(idxCount);
-        if (!this.wireframe) {
-            for(let i = 0; i < idxCount; i++){
-                indexData[i] = pointStartIndex + index[i];
-            }
+}
+class RectangleEdge {
+    generate(opt) {
+        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        const direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
+        const w = this._d;
+        const h = this._h;
+        const r0 = Math.atan2(h, w);
+        const tan = Math.tan(arc);
+        const position = new Vector3();
+        if (arc < r0) {
+            position.set(w, w * tan, 0);
+        } else if (arc >= r0 && arc < Math.PI - r0) {
+            position.set(h / tan, h, 0);
+        } else if (arc < Math.PI + r0) {
+            position.set(-w, -w * tan, 0);
+        } else if (arc < Math.PI * 2 - r0) {
+            position.set(-h / tan, -h, 0);
+        } else {
+            position.set(w, w * tan, 0);
         }
         return {
-            atlasOffset: geoData.atlasOffset,
-            index: indexData
+            direction,
+            position
         };
     }
-    setItem() {
-        const textures = [];
-        let texture = this.renderer.texture;
-        if (texture) {
-            addItem(textures, texture);
-        }
-        texture = this.renderer.texture;
-        const textureIndex = texture ? textures.indexOf(texture) : -1;
-        const data = this.getItemInitData(this, 0, 0, textureIndex);
-        const renderer = this.renderer;
-        const texParams = this.material.getVector4('_TexParams');
-        texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
-        texParams.y = +this.preMultiAlpha;
-        texParams.z = renderer.renderMode;
-        const attributes = {
-            atlasOffset: new Float32Array(data.atlasOffset.length),
-            index: new Uint16Array(data.index.length)
+    constructor(arg){
+        this._d = (arg.width || 1) / 2;
+        this._h = (arg.height || 1) / 2;
+        this.arcMode = arg.arcMode;
+        this.arc = arg.arc;
+    }
+}
+class Edge {
+    generate(options) {
+        const x = this.arcMode === ShapeArcMode.UNIFORM_BURST ? options.burstIndex % options.burstCount / (options.burstCount - 1) : random(0, 1);
+        return {
+            direction: new Vector3(0, 1, 0),
+            position: new Vector3(this._d * (x - 0.5), 0, 0)
         };
-        attributes.atlasOffset.set(data.atlasOffset);
-        attributes.index.set(data.index);
-        const { material, geometry } = this;
-        const indexData = attributes.index;
-        geometry.setIndexData(indexData);
-        geometry.setAttributeData('atlasOffset', attributes.atlasOffset);
-        geometry.setDrawCount(data.index.length);
-        for(let i = 0; i < textures.length; i++){
-            const texture = textures[i];
-            material.setTexture('uSampler' + i, texture);
-        }
-        // FIXME: 内存泄漏的临时方案，后面再调整
-        const emptyTexture = this.emptyTexture;
-        for(let k = textures.length; k < maxSpriteMeshItemCount; k++){
-            material.setTexture('uSampler' + k, emptyTexture);
-        }
     }
-    createGeometry(mode) {
-        const maxVertex = 12 * this.splits.length;
-        return Geometry.create(this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0
-                    ])
-                },
-                atlasOffset: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array(0)
-                }
-            },
-            indices: {
-                data: new Uint16Array(0),
-                releasable: true
-            },
-            mode,
-            maxVertex
-        });
+    constructor(args){
+        // TODO: 为通过帧对比暂时使用老计算，修复粒子发射器直线宽度问题下面一行改为: this._d = args.width || 1 ;
+        this._d = (args.width || 1) / 2;
+        this.arcMode = args.arcMode;
     }
-    createMaterial(renderInfo, count) {
-        const { side, occlusion, blending, maskMode, mask } = renderInfo;
-        const materialProps = {
-            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
+}
+
+const tempMat4$2 = new Matrix4();
+class Donut {
+    generate(opt) {
+        const dradius = this.donutRadius;
+        const center = this.radius - dradius;
+        const angle = random(0, Math.PI * 2);
+        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        const rot = tempMat4$2.setFromRotationZ(arc);
+        const direction = new Vector3(Math.cos(angle), Math.sin(angle), 0);
+        const position = new Vector3(center + Math.cos(angle) * dradius, 0, Math.sin(angle) * dradius);
+        return {
+            direction: rot.transformNormal(direction),
+            position: rot.transformPoint(position)
         };
-        this.preMultiAlpha = getPreMultiAlpha(blending);
-        const material = Material.create(this.engine, materialProps);
-        const states = {
-            side,
-            blending: true,
-            blendMode: blending,
-            mask,
-            maskMode,
-            depthTest: true,
-            depthMask: occlusion
-        };
-        material.blending = states.blending;
-        material.stencilRef = states.mask !== undefined ? [
-            states.mask,
-            states.mask
-        ] : undefined;
-        material.depthTest = states.depthTest;
-        material.depthMask = states.depthMask;
-        setBlendMode(material, states.blendMode);
-        setMaskMode(material, states.maskMode);
-        setSideMode(material, states.side);
-        if (!material.hasUniform('_Color')) {
-            material.setVector4('_Color', new Vector4(0, 0, 0, 1));
-        }
-        if (!material.hasUniform('_TexOffset')) {
-            material.setVector4('_TexOffset', new Vector4());
-        }
-        if (!material.hasUniform('_TexParams')) {
-            material.setVector4('_TexParams', new Vector4());
-        }
-        return material;
     }
-    getItemGeometryData(item, aIndex) {
-        const { splits, renderer, textureSheetAnimation } = item;
-        const sx = 1, sy = 1;
-        if (renderer.shape) {
-            const { index, aPoint } = renderer.shape;
-            const point = new Float32Array(aPoint);
-            const position = [];
-            const atlasOffset = [];
-            for(let i = 0; i < point.length; i += 6){
-                point[i] *= sx;
-                point[i + 1] *= sy;
-                atlasOffset.push(aPoint[i + 2], aPoint[i + 3]);
-                position.push(point[i], point[i + 1], 0.0);
-            }
-            this.geometry.setAttributeData('aPos', new Float32Array(position));
-            return {
-                index,
-                atlasOffset
-            };
-        }
-        const originData = [
-            -.5,
-            .5,
-            -.5,
-            -.5,
-            .5,
-            .5,
-            .5,
-            -.5
-        ];
-        const atlasOffset = [];
-        const index = [];
-        let col = 2;
-        let row = 2;
-        if (splits.length === 1) {
-            col = 1;
-            row = 1;
-        }
-        const position = [];
-        for(let x = 0; x < col; x++){
-            for(let y = 0; y < row; y++){
-                const base = (y * 2 + x) * 4;
-                // @ts-expect-error
-                const split = textureSheetAnimation ? [
-                    0,
-                    0,
-                    1,
-                    1,
-                    splits[0][4]
-                ] : splits[y * 2 + x];
-                const texOffset = split[4] ? [
-                    0,
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1
-                ] : [
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1,
-                    0
-                ];
-                const dw = ((x + x + 1) / col - 1) / 2;
-                const dh = ((y + y + 1) / row - 1) / 2;
-                const tox = split[0];
-                const toy = split[1];
-                const tsx = split[4] ? split[3] : split[2];
-                const tsy = split[4] ? split[2] : split[3];
-                const origin = [
-                    originData[0] / col + dw,
-                    originData[1] / row + dh,
-                    originData[2] / col + dw,
-                    originData[3] / row + dh,
-                    originData[4] / col + dw,
-                    originData[5] / row + dh,
-                    originData[6] / col + dw,
-                    originData[7] / row + dh
-                ];
-                atlasOffset.push(texOffset[0] * tsx + tox, texOffset[1] * tsy + toy, texOffset[2] * tsx + tox, texOffset[3] * tsy + toy, texOffset[4] * tsx + tox, texOffset[5] * tsy + toy, texOffset[6] * tsx + tox, texOffset[7] * tsy + toy);
-                position.push(origin[0] * sx, origin[1] * sy, 0.0, origin[2] * sx, origin[3] * sy, 0.0, origin[4] * sx, origin[5] * sy, 0.0, origin[6] * sx, origin[7] * sy, 0.0);
-                index.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
-            }
-        }
-        this.geometry.setAttributeData('aPos', new Float32Array(position));
+    constructor(props){
+        Object.keys(props).forEach((key)=>{
+            this[key] = props[key];
+        });
+    }
+}
+
+const tempMat4$1 = new Matrix4();
+class Sphere {
+    getHorizontalAngle() {
+        return random(-90, 90);
+    }
+    generate(opt) {
+        const rz = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        const rh = this.getHorizontalAngle() * DEG2RAD;
+        const radius = this.radius;
+        const point = new Vector3(Math.cos(rh), 0, Math.sin(rh));
+        const mat4 = tempMat4$1.setFromRotationZ(rz);
+        const p = mat4.transformNormal(point);
         return {
-            index,
-            atlasOffset
+            position: p.clone().multiply(radius),
+            direction: p
         };
     }
-    getTextures() {
-        const ret = [];
-        const tex = this.renderer.texture;
-        if (tex) {
-            ret.push(tex);
-        }
-        return ret;
-    }
-    /**
-   * 获取图层包围盒的类型和世界坐标
-   * @returns
-   */ getBoundingBox() {
-        if (!this.item) {
-            return;
-        }
-        const worldMatrix = this.transform.getWorldMatrix();
-        const triangles = trianglesFromRect(Vector3.ZERO, 1 / 2, 1 / 2);
-        triangles.forEach((triangle)=>{
-            worldMatrix.transformPoint(triangle.p0);
-            worldMatrix.transformPoint(triangle.p1);
-            worldMatrix.transformPoint(triangle.p2);
+    constructor(props){
+        Object.keys(props).forEach((key)=>{
+            this[key] = props[key];
         });
+    }
+}
+class Hemisphere extends Sphere {
+    getHorizontalAngle() {
+        return random(0, 90);
+    }
+}
+
+class TextureShape {
+    generate(opt) {
+        const anchors = this.anchors;
+        const pointCount = anchors.length / 2 - 1;
+        const index = Math.floor(getArcAngle(pointCount, this.arcMode, opt));
+        const pointX = (anchors[index * 2] + this.block[0] * this.random * Math.random()) % 1 - 0.5;
+        const pointY = (anchors[index * 2 + 1] + this.block[1] * this.random * Math.random()) % 1 - 0.5;
+        const dir = new Vector3(pointX, pointY, 0);
         return {
-            type: HitTestType.triangle,
-            area: triangles
+            position: new Vector3(pointX * this.width, pointY * this.height, 0),
+            direction: dir.normalize()
         };
     }
-    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
-    fromData(data) {
-        super.fromData(data);
-        const { interaction, options, listIndex = 0 } = data;
-        let renderer = data.renderer;
-        if (!renderer) {
-            //@ts-expect-error
-            renderer = {};
-        }
-        this.interaction = interaction;
-        var _renderer_renderMode, _renderer_blending, _renderer_texture, _renderer_side, _renderer_mask, _renderer_maskMode;
-        this.renderer = {
-            renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.BILLBOARD,
-            blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
-            texture: (_renderer_texture = renderer.texture) != null ? _renderer_texture : this.engine.emptyTexture,
-            occlusion: !!renderer.occlusion,
-            transparentOcclusion: !!renderer.transparentOcclusion || renderer.maskMode === MaskMode.MASK,
-            side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
-            shape: renderer.shape,
-            mask: (_renderer_mask = renderer.mask) != null ? _renderer_mask : 0,
-            maskMode: (_renderer_maskMode = renderer.maskMode) != null ? _renderer_maskMode : MaskMode.NONE,
-            order: listIndex
+    constructor(arg){
+        const detail = arg.detail || {
+            anchors: [
+                0.5,
+                0.5
+            ],
+            block: [
+                0,
+                0
+            ]
         };
-        this.emptyTexture = this.engine.emptyTexture;
-        this.splits = data.splits || singleSplits;
-        this.textureSheetAnimation = data.textureSheetAnimation;
-        this.cachePrefix = '-';
-        this.renderInfo = getImageItemRenderInfo(this);
-        const geometry = this.createGeometry(glContext.TRIANGLES);
-        const material = this.createMaterial(this.renderInfo, 2);
-        this.worldMatrix = Matrix4.fromIdentity();
-        this.material = material;
-        this.geometry = geometry;
-        this.name = 'MSprite' + seed$2++;
-        const startColor = options.startColor || [
-            1,
-            1,
-            1,
-            1
-        ];
-        this.material.setVector4('_Color', new Vector4().setFromArray(startColor));
-        this.material.setVector4('_TexOffset', new Vector4().setFromArray([
-            0,
-            0,
-            1,
-            1
-        ]));
-        this.setItem();
+        this.anchors = new Float32Array(detail.anchors);
+        this.width = arg.width || 1;
+        this.height = arg.height || 1;
+        this.block = detail.block;
+        this.arcMode = arg.arcMode;
+        this.random = clamp$1(arg.random || 0, 0, 1);
     }
-    toData() {
-        super.toData();
-    }
-    constructor(engine, props){
-        super(engine);
-        this.color = [
-            1,
-            1,
-            1,
-            1
-        ];
-        this.visible = true;
-        this.getHitTestParams = (force)=>{
-            const ui = this.interaction;
-            if (force || ui) {
-                const area = this.getBoundingBox();
-                if (area) {
-                    var _this_interaction;
-                    return {
-                        behavior: ((_this_interaction = this.interaction) == null ? void 0 : _this_interaction.behavior) || 0,
-                        type: area.type,
-                        triangles: area.area,
-                        backfaceCulling: this.renderer.side === SideMode.FRONT
-                    };
-                }
-            }
-        };
-        if (props) {
-            this.fromData(props);
-        }
-    }
-}
-SpriteComponent = __decorate([
-    effectsClass(DataType.SpriteComponent)
-], SpriteComponent);
-
-const RUNTIME_ENV = 'runtime_env';
-const RENDER_PREFER_LOOKUP_TEXTURE = 'lookup_texture';
-// 文本元素使用 offscreen canvas 绘制
-const TEMPLATE_USE_OFFSCREEN_CANVAS = 'offscreen_canvas';
-// 后处理配置相关
-const POST_PROCESS_SETTINGS = 'post_process_settings';
-const config = {};
-function getConfig(name) {
-    return config[name];
-}
-function setConfig(name, value) {
-    return config[name] = value;
-}
-
-class Cone {
-    generate(opt) {
-        const arc = getArcAngle(this.arc, this.arcMode, opt);
-        const a = arc * DEG2RAD;
-        const x = Math.cos(a) * this.radius;
-        const y = Math.sin(a) * this.radius;
-        const position = new Vector3(x, y, 0);
-        const l = Math.tan(this.angle * DEG2RAD);
-        const dir = position.clone().multiply(l);
-        // dir + [0,0,1]
-        dir.z += 1;
-        return {
-            position: position.multiply(random(0, 1)),
-            direction: dir.normalize()
-        };
-    }
-    constructor(props){
-        Object.keys(props).forEach((key)=>{
-            this[key] = props[key];
-        });
-    }
-}
-function getArcAngle(arc, arcMode, opt) {
-    if (arcMode === ShapeArcMode.RANDOM) {
-        arc = random(0, arc);
-    } else if (arcMode === ShapeArcMode.UNIDIRECTIONAL_CYCLE) {
-        const d = opt.index % (opt.total + 1);
-        arc = arc / opt.total * d;
-    } else if (arcMode === ShapeArcMode.BIDIRECTIONAL_CYCLE) {
-        const d = opt.index / (opt.total + 1);
-        const i = d - Math.floor(d);
-        arc = arc * (Math.floor(d) % 2 ? 1 - i : i);
-    } else if (arcMode === ShapeArcMode.UNIFORM_BURST) {
-        arc = arc * opt.burstIndex / opt.burstCount;
-    }
-    return arc;
-}
-
-class Circle {
-    generate(opt) {
-        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        const direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
-        const radius = this.radius;
-        return {
-            direction,
-            position: direction.clone().multiply(radius)
-        };
-    }
-    constructor(props){
-        Object.keys(props).forEach((key)=>{
-            this[key] = props[key];
-        });
-    }
-}
-class Rectangle {
-    generate(opt) {
-        const x = random(-this._d, this._d);
-        const y = random(-this._h, this._h);
-        return {
-            direction: new Vector3(0, 0, 1),
-            position: new Vector3(x, y, 0)
-        };
-    }
-    constructor(arg){
-        this._d = (arg.width || 1) / 2;
-        this._h = (arg.height || 1) / 2;
-    }
-}
-class RectangleEdge {
-    generate(opt) {
-        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        const direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
-        const w = this._d;
-        const h = this._h;
-        const r0 = Math.atan2(h, w);
-        const tan = Math.tan(arc);
-        const position = new Vector3();
-        if (arc < r0) {
-            position.set(w, w * tan, 0);
-        } else if (arc >= r0 && arc < Math.PI - r0) {
-            position.set(h / tan, h, 0);
-        } else if (arc < Math.PI + r0) {
-            position.set(-w, -w * tan, 0);
-        } else if (arc < Math.PI * 2 - r0) {
-            position.set(-h / tan, -h, 0);
-        } else {
-            position.set(w, w * tan, 0);
-        }
-        return {
-            direction,
-            position
-        };
-    }
-    constructor(arg){
-        this._d = (arg.width || 1) / 2;
-        this._h = (arg.height || 1) / 2;
-        this.arcMode = arg.arcMode;
-        this.arc = arg.arc;
-    }
-}
-class Edge {
-    generate(options) {
-        const x = this.arcMode === ShapeArcMode.UNIFORM_BURST ? options.burstIndex % options.burstCount / (options.burstCount - 1) : random(0, 1);
-        return {
-            direction: new Vector3(0, 1, 0),
-            position: new Vector3(this._d * (x - 0.5), 0, 0)
-        };
-    }
-    constructor(args){
-        // TODO: 为通过帧对比暂时使用老计算，修复粒子发射器直线宽度问题下面一行改为: this._d = args.width || 1 ;
-        this._d = (args.width || 1) / 2;
-        this.arcMode = args.arcMode;
-    }
-}
-
-const tempMat4$2 = new Matrix4();
-class Donut {
-    generate(opt) {
-        const dradius = this.donutRadius;
-        const center = this.radius - dradius;
-        const angle = random(0, Math.PI * 2);
-        const arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        const rot = tempMat4$2.setFromRotationZ(arc);
-        const direction = new Vector3(Math.cos(angle), Math.sin(angle), 0);
-        const position = new Vector3(center + Math.cos(angle) * dradius, 0, Math.sin(angle) * dradius);
-        return {
-            direction: rot.transformNormal(direction),
-            position: rot.transformPoint(position)
-        };
-    }
-    constructor(props){
-        Object.keys(props).forEach((key)=>{
-            this[key] = props[key];
-        });
-    }
-}
-
-const tempMat4$1 = new Matrix4();
-class Sphere {
-    getHorizontalAngle() {
-        return random(-90, 90);
-    }
-    generate(opt) {
-        const rz = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        const rh = this.getHorizontalAngle() * DEG2RAD;
-        const radius = this.radius;
-        const point = new Vector3(Math.cos(rh), 0, Math.sin(rh));
-        const mat4 = tempMat4$1.setFromRotationZ(rz);
-        const p = mat4.transformNormal(point);
-        return {
-            position: p.clone().multiply(radius),
-            direction: p
-        };
-    }
-    constructor(props){
-        Object.keys(props).forEach((key)=>{
-            this[key] = props[key];
-        });
-    }
-}
-class Hemisphere extends Sphere {
-    getHorizontalAngle() {
-        return random(0, 90);
-    }
-}
-
-class TextureShape {
-    generate(opt) {
-        const anchors = this.anchors;
-        const pointCount = anchors.length / 2 - 1;
-        const index = Math.floor(getArcAngle(pointCount, this.arcMode, opt));
-        const pointX = (anchors[index * 2] + this.block[0] * this.random * Math.random()) % 1 - 0.5;
-        const pointY = (anchors[index * 2 + 1] + this.block[1] * this.random * Math.random()) % 1 - 0.5;
-        const dir = new Vector3(pointX, pointY, 0);
-        return {
-            position: new Vector3(pointX * this.width, pointY * this.height, 0),
-            direction: dir.normalize()
-        };
-    }
-    constructor(arg){
-        const detail = arg.detail || {
-            anchors: [
-                0.5,
-                0.5
-            ],
-            block: [
-                0,
-                0
-            ]
-        };
-        this.anchors = new Float32Array(detail.anchors);
-        this.width = arg.width || 1;
-        this.height = arg.height || 1;
-        this.block = detail.block;
-        this.arcMode = arg.arcMode;
-        this.random = clamp$1(arg.random || 0, 0, 1);
-    }
-}
-
-class ShapeNone {
-    generate() {
-        return {
-            position: new Vector3(),
-            direction: new Vector3()
-        };
+}
+
+class ShapeNone {
+    generate() {
+        return {
+            position: new Vector3(),
+            direction: new Vector3()
+        };
     }
 }
 const map = {
@@ -14195,319 +13941,856 @@ function insertNode(i, x, y, last) {
         last.next.prev = p;
         last.next = p;
     }
-    return p;
-}
-function removeNode(p) {
-    p.next.prev = p.prev;
-    p.prev.next = p.next;
-    if (p.prevZ) p.prevZ.nextZ = p.nextZ;
-    if (p.nextZ) p.nextZ.prevZ = p.prevZ;
-}
-function Node(i, x, y) {
-    // vertex index in coordinates array
-    this.i = i;
-    // vertex coordinates
-    this.x = x;
-    this.y = y;
-    // previous and next vertex nodes in a polygon ring
-    this.prev = null;
-    this.next = null;
-    // z-order curve value
-    this.z = null;
-    // previous and next nodes in z-order
-    this.prevZ = null;
-    this.nextZ = null;
-    // indicates whether this is a steiner point
-    this.steiner = false;
+    return p;
+}
+function removeNode(p) {
+    p.next.prev = p.prev;
+    p.prev.next = p.next;
+    if (p.prevZ) p.prevZ.nextZ = p.nextZ;
+    if (p.nextZ) p.nextZ.prevZ = p.prevZ;
+}
+function Node(i, x, y) {
+    // vertex index in coordinates array
+    this.i = i;
+    // vertex coordinates
+    this.x = x;
+    this.y = y;
+    // previous and next vertex nodes in a polygon ring
+    this.prev = null;
+    this.next = null;
+    // z-order curve value
+    this.z = null;
+    // previous and next nodes in z-order
+    this.prevZ = null;
+    this.nextZ = null;
+    // indicates whether this is a steiner point
+    this.steiner = false;
+}
+function signedArea(data, start, end, dim) {
+    var sum = 0;
+    for(var i = start, j = end - dim; i < end; i += dim){
+        sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
+        j = i;
+    }
+    return sum;
+}
+
+let indexBase = 0;
+function earcut(data, holeIndices, dim, ib) {
+    dim = dim || 2;
+    indexBase = ib || 0;
+    const hasHoles = holeIndices && holeIndices.length;
+    const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
+    let outerNode = linkedList(data, 0, outerLen, dim, true);
+    const triangles = [];
+    if (!outerNode || outerNode.next === outerNode.prev) {
+        return triangles;
+    }
+    let minX, minY, maxX, maxY, x, y, invSize;
+    if (hasHoles) {
+        outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+    }
+    // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
+    if (data.length > 80 * dim) {
+        minX = maxX = data[0];
+        minY = maxY = data[1];
+        for(let i = dim; i < outerLen; i += dim){
+            x = data[i];
+            y = data[i + 1];
+            if (x < minX) {
+                minX = x;
+            }
+            if (y < minY) {
+                minY = y;
+            }
+            if (x > maxX) {
+                maxX = x;
+            }
+            if (y > maxY) {
+                maxY = y;
+            }
+        }
+        // minX, minY and invSize are later used to transform coords into integers for z-order calculation
+        invSize = Math.max(maxX - minX, maxY - minY);
+        invSize = invSize !== 0 ? 1 / invSize : 0;
+    }
+    hackEarcutLinked(outerNode, triangles, dim, minX, minY, invSize);
+    return triangles;
+}
+// main ear slicing loop which triangulates a polygon (given as a linked list)
+function hackEarcutLinked(ear, triangles, dim, minX, minY, invSize, pass) {
+    if (!ear) {
+        return;
+    }
+    // interlink polygon nodes in z-order
+    if (!pass && invSize) {
+        indexCurve(ear, minX, minY, invSize);
+    }
+    let stop = ear, prev, next;
+    // iterate through ears, slicing them one by one
+    while(ear.prev !== ear.next){
+        prev = ear.prev;
+        next = ear.next;
+        if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) {
+            // cut off the triangle
+            triangles.push(prev.i / dim + indexBase);
+            triangles.push(ear.i / dim + indexBase);
+            triangles.push(next.i / dim + indexBase);
+            removeNode(ear);
+            // skipping the next vertex leads to less sliver triangles
+            ear = next.next;
+            stop = next.next;
+            continue;
+        }
+        ear = next;
+        // if we looped through the whole remaining polygon and can't find any more ears
+        if (ear === stop) {
+            // try filtering triangles and slicing again
+            if (!pass) {
+                hackEarcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1);
+            // if this didn't work, try curing all small self-intersections locally
+            } else if (pass === 1) {
+                ear = hackCureLocalIntersections(filterPoints(ear), triangles, dim);
+                hackEarcutLinked(ear, triangles, dim, minX, minY, invSize, 2);
+            // as a last resort, try splitting the remaining polygon into two
+            } else if (pass === 2) {
+                hackSplitEarcut(ear, triangles, dim, minX, minY, invSize);
+            }
+            break;
+        }
+    }
+}
+// go through all polygon nodes and cure small local self-intersections
+function hackCureLocalIntersections(start, triangles, dim) {
+    let p = start;
+    do {
+        const a = p.prev, b = p.next.next;
+        if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
+            triangles.push(a.i / dim + indexBase);
+            triangles.push(p.i / dim + indexBase);
+            triangles.push(b.i / dim + indexBase);
+            // remove two nodes involved
+            removeNode(p);
+            removeNode(p.next);
+            p = start = b;
+        }
+        p = p.next;
+    }while (p !== start)
+    return filterPoints(p);
+}
+// try splitting polygon into two and triangulate them independently
+function hackSplitEarcut(start, triangles, dim, minX, minY, invSize) {
+    // look for a valid diagonal that divides the polygon into two
+    let a = start;
+    do {
+        let b = a.next.next;
+        while(b !== a.prev){
+            if (a.i !== b.i && isValidDiagonal(a, b)) {
+                // split the polygon in two by the diagonal
+                let c = splitPolygon(a, b);
+                // filter colinear triangles around the cuts
+                a = filterPoints(a, a.next);
+                c = filterPoints(c, c.next);
+                // run earcut on each half
+                hackEarcutLinked(a, triangles, dim, minX, minY, invSize);
+                hackEarcutLinked(c, triangles, dim, minX, minY, invSize);
+                return;
+            }
+            b = b.next;
+        }
+        a = a.next;
+    }while (a !== start)
+}
+
+const POINT_INDEX = 2;
+function getGeometryTriangles(geometry, options) {
+    const { s, p } = geometry;
+    const segments = s[1];
+    const points = p[1];
+    let pointCount = 0;
+    for(let i = 0; i < segments.length; i++){
+        const segment = segments[i];
+        pointCount += segment.length - 1;
+    }
+    const pointData = new Float32Array(pointCount * SPRITE_VERTEX_STRIDE);
+    const { indexBase = 0, uvTransform } = options;
+    let index = 0;
+    let dx = 0, dy = 0, sw = 1, sh = 1, r;
+    if (uvTransform) {
+        dx = uvTransform[0];
+        dy = uvTransform[1];
+        r = uvTransform[4];
+        sw = r ? uvTransform[3] : uvTransform[2];
+        sh = r ? uvTransform[2] : uvTransform[3];
+    }
+    const temp = [
+        0,
+        0
+    ];
+    const angle = r === 0 ? 0 : -Math.PI / 2;
+    for(let i = 0; i < segments.length; i++){
+        const segment = segments[i];
+        const p0 = points[i];
+        const p1 = points[i + 1] || points[0];
+        const keys = segment;
+        const point = [
+            0,
+            0
+        ];
+        for(let j = 0; j < keys.length - 1; j++){
+            const key = keys[j];
+            getBezier2DValue(point, key, p0, p1, p0[4], p0[5], p1[2], p1[3]);
+            setPoint(point[0], point[1]);
+        }
+    }
+    const indices = earcut(Array.from(pointData), null, SPRITE_VERTEX_STRIDE, indexBase);
+    return {
+        aPoint: pointData,
+        index: new Uint16Array(indices)
+    };
+    function setPoint(x, y) {
+        pointData[index++] = x / 2;
+        pointData[index++] = y / 2;
+        if (uvTransform) {
+            temp[0] = x;
+            temp[1] = y;
+            rotateVec2(temp, temp, angle);
+            pointData[index++] = dx + (temp[0] + 1) / 2 * sw;
+            pointData[index++] = dy + (temp[1] + 1) / 2 * sh;
+        } else {
+            pointData[index++] = (x + 1) / 2;
+            pointData[index++] = (y + 1) / 2;
+        }
+        index += POINT_INDEX;
+    }
+}
+/**
+ * 根据新老版形状数据获取形状几何数据
+ * @param shape 新老版形状数据
+ */ function getGeometriesByShapeData(shape) {
+    const geometries = [];
+    // 该版本的单个形状数据可以包含多个形状，可以加个埋点，五福之后没有就可以下掉
+    if (shape.gs) {
+        shape.gs.forEach((gs)=>{
+            geometries.push({
+                p: [
+                    ValueType.SHAPE_POINTS,
+                    gs.p
+                ],
+                s: [
+                    ValueType.SHAPE_SPLITS,
+                    gs.s
+                ]
+            });
+        });
+    } else if (shape.g) {
+        geometries.push({
+            p: [
+                ValueType.SHAPE_POINTS,
+                shape.g.p
+            ],
+            s: [
+                ValueType.SHAPE_SPLITS,
+                shape.g.s
+            ]
+        });
+    } else {
+        geometries.push(shape);
+    }
+    return geometries;
+}
+function getGeometryByShape(shape, uvTransform) {
+    const datas = [];
+    // 老数据兼容处理
+    const geometries = getGeometriesByShapeData(shape);
+    let indexBase = 0;
+    let aPoint = 0;
+    let index = 0;
+    for(let i = 0; i < geometries.length; i++){
+        const geometry = geometries[i];
+        const data = getGeometryTriangles(geometry, {
+            indexBase,
+            uvTransform
+        });
+        indexBase += data.aPoint.length / 5;
+        datas.push(data);
+        aPoint += data.aPoint.length;
+        index += data.index.length;
+    }
+    if (datas.length === 1) {
+        return datas[0];
+    }
+    const aPointData = new Float32Array(aPoint);
+    const indexData = new Uint16Array(index);
+    // @ts-expect-error
+    for(let i = 0, pointIndex = 0, idx = 0; i < datas[i]; i++){
+        const data = datas[i];
+        aPointData.set(data.aPoint, pointIndex);
+        pointIndex += data.aPoint.length;
+        indexData.set(data.index, idx);
+        idx += data.index.length;
+    }
+    return {
+        aPoint: aPointData,
+        index: indexData
+    };
+}
+function rotateVec2(out, vec2, angleInRad) {
+    const c = Math.cos(angleInRad);
+    const s = Math.sin(angleInRad);
+    const x = vec2[0];
+    const y = vec2[1];
+    out[0] = c * x + s * y;
+    out[1] = -s * x + c * y;
+    return out;
+}
+function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
+    const ddt = 1 - t;
+    const a = ddt * ddt * ddt;
+    const b = 3 * t * ddt * ddt;
+    const c = 3 * t * t * ddt;
+    const d = t * t * t;
+    out[0] = a * p0[0] + b * cpx0 + c * cpx1 + d * p1[0];
+    out[1] = a * p0[1] + b * cpy0 + c * cpy1 + d * p1[1];
+    return out;
+}
+
+/**
+ * @since 2.0.0
+ * @internal
+ */ class Track extends PlayableAsset {
+    createOutput() {
+        const output = new PlayableOutput();
+        return output;
+    }
+    /**
+   * 重写该方法以创建自定义混合器
+   */ createMixerPlayable() {
+        return new Playable();
+    }
+    createPlayable() {
+        const defaultMixPlayable = this.createMixerPlayable();
+        for (const clip of this.clips){
+            defaultMixPlayable.connect(clip.playable);
+        }
+        return defaultMixPlayable;
+    }
+    createClip(classConstructor, name) {
+        const newClip = new TimelineClip();
+        newClip.playable = new classConstructor();
+        newClip.name = name ? name : 'TimelineClip' + newClip.id;
+        this.addClip(newClip);
+        return newClip;
+    }
+    getClips() {
+        return this.clips;
+    }
+    findClip(name) {
+        for (const clip of this.clips){
+            if (clip.name === name) {
+                return clip;
+            }
+        }
+    }
+    addClip(clip) {
+        clip.playable.bindingItem = this.bindingItem;
+        clip.id = (this.clipSeed++).toString();
+        this.clips.push(clip);
+    }
+    constructor(...args){
+        super(...args);
+        this.clips = [];
+        this.clipSeed = 0;
+    }
+}
+/**
+ * @since 2.0.0
+ * @internal
+ */ class TimelineClip {
+    constructor(){
+        this.start = 0;
+        this.duration = 0;
+    }
+}
+
+class AnimationStream {
+    setCurveValue(componentType, propertyName, value) {
+        if (!this.findCurveValue(componentType, propertyName)) {
+            this.curveValues[componentType + propertyName] = {
+                componentType,
+                propertyName,
+                value
+            };
+        } else {
+            this.curveValues[componentType + propertyName].value = value;
+        }
+        return this.curveValues[componentType + propertyName];
+    }
+    findCurveValue(componentType, propertyName) {
+        return this.curveValues[componentType + propertyName];
+    }
+    getInputStream(index) {
+        const inputPlayable = this.playable.getInput(index);
+        if (inputPlayable instanceof AnimationPlayable) {
+            return inputPlayable.animationStream;
+        }
+    }
+    constructor(playable){
+        this.curveValues = {};
+        this.playable = playable;
+    }
+}
+
+class AnimationPlayable extends Playable {
+    constructor(){
+        super();
+        this.animationStream = new AnimationStream(this);
+    }
+}
+
+const tempRot$1 = new Euler();
+const tempSize$1 = new Vector3(1, 1, 1);
+const tempPos = new Vector3();
+/**
+ * @since 2.0.0
+ * @internal
+ */ class TransformAnimationPlayable extends AnimationPlayable {
+    processFrame(dt) {
+        if (this.bindingItem.composition) {
+            this.sampleAnimation();
+        }
+    }
+    /**
+   * 应用时间轴K帧数据到对象
+   */ sampleAnimation() {
+        const duration = this.bindingItem.duration;
+        let life = this.time / duration;
+        life = life < 0 ? 0 : life > 1 ? 1 : life;
+        if (this.sizeXOverLifetime) {
+            tempSize$1.x = this.sizeXOverLifetime.getValue(life);
+            if (this.sizeSeparateAxes) {
+                tempSize$1.y = this.sizeYOverLifetime.getValue(life);
+                tempSize$1.z = this.sizeZOverLifetime.getValue(life);
+            } else {
+                tempSize$1.z = tempSize$1.y = tempSize$1.x;
+            }
+            const startSize = this.originalTransform.scale;
+            this.bindingItem.transform.setScale(tempSize$1.x * startSize.x, tempSize$1.y * startSize.y, tempSize$1.z * startSize.z);
+        // this.animationStream.setCurveValue('transform', 'scale.x', tempSize.x * startSize.x);
+        // this.animationStream.setCurveValue('transform', 'scale.y', tempSize.y * startSize.y);
+        // this.animationStream.setCurveValue('transform', 'scale.z', tempSize.z * startSize.z);
+        }
+        if (this.rotationOverLifetime) {
+            const func = (v)=>this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration);
+            const incZ = func(this.rotationOverLifetime.z);
+            const separateAxes = this.rotationOverLifetime.separateAxes;
+            tempRot$1.x = separateAxes ? func(this.rotationOverLifetime.x) : 0;
+            tempRot$1.y = separateAxes ? func(this.rotationOverLifetime.y) : 0;
+            tempRot$1.z = incZ;
+            const rot = tempRot$1.addEulers(this.originalTransform.rotation, tempRot$1);
+            this.bindingItem.transform.setRotation(rot.x, rot.y, rot.z);
+        // this.animationStream.setCurveValue('transform', 'rotation.x', rot.x);
+        // this.animationStream.setCurveValue('transform', 'rotation.y', rot.y);
+        // this.animationStream.setCurveValue('transform', 'rotation.z', rot.z);
+        }
+        if (this.positionOverLifetime) {
+            const pos = tempPos;
+            calculateTranslation(pos, this, this.gravity, this.time, duration, this.originalTransform.position, this.velocity);
+            if (this.originalTransform.path) {
+                pos.add(this.originalTransform.path.getValue(life));
+            }
+            this.bindingItem.transform.setPosition(pos.x, pos.y, pos.z);
+        // this.animationStream.setCurveValue('transform', 'position.x', pos.x);
+        // this.animationStream.setCurveValue('transform', 'position.y', pos.y);
+        // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
+        }
+    }
+    fromData(data) {
+        const scale = this.bindingItem.transform.scale;
+        this.originalTransform = {
+            position: this.bindingItem.transform.position.clone(),
+            rotation: this.bindingItem.transform.getRotation().clone(),
+            // TODO 编辑器 scale 没有z轴控制
+            scale: new Vector3(scale.x, scale.y, scale.x)
+        };
+        const positionOverLifetime = data.positionOverLifetime;
+        const rotationOverLifetime = data.rotationOverLifetime;
+        const sizeOverLifetime = data.sizeOverLifetime;
+        // TODO: 没有 K 帧数据的不需要传 positionOverLifetime 空对象
+        if (positionOverLifetime && Object.keys(positionOverLifetime).length !== 0) {
+            this.positionOverLifetime = positionOverLifetime;
+            if (positionOverLifetime.path) {
+                this.originalTransform.path = createValueGetter(positionOverLifetime.path);
+            }
+            const linearVelEnable = positionOverLifetime.linearX || positionOverLifetime.linearY || positionOverLifetime.linearZ;
+            if (linearVelEnable) {
+                this.linearVelOverLifetime = {
+                    x: positionOverLifetime.linearX && createValueGetter(positionOverLifetime.linearX),
+                    y: positionOverLifetime.linearY && createValueGetter(positionOverLifetime.linearY),
+                    z: positionOverLifetime.linearZ && createValueGetter(positionOverLifetime.linearZ),
+                    asMovement: positionOverLifetime.asMovement,
+                    enabled: !!linearVelEnable
+                };
+            }
+            const orbitalVelEnable = positionOverLifetime.orbitalX || positionOverLifetime.orbitalY || positionOverLifetime.orbitalZ;
+            if (orbitalVelEnable) {
+                this.orbitalVelOverLifetime = {
+                    x: positionOverLifetime.orbitalX && createValueGetter(positionOverLifetime.orbitalX),
+                    y: positionOverLifetime.orbitalY && createValueGetter(positionOverLifetime.orbitalY),
+                    z: positionOverLifetime.orbitalZ && createValueGetter(positionOverLifetime.orbitalZ),
+                    center: ensureVec3(positionOverLifetime.orbCenter),
+                    asRotation: positionOverLifetime.asRotation,
+                    enabled: !!orbitalVelEnable
+                };
+            }
+            this.speedOverLifetime = positionOverLifetime.speedOverLifetime && createValueGetter(positionOverLifetime.speedOverLifetime);
+        }
+        if (sizeOverLifetime) {
+            if (sizeOverLifetime.separateAxes) {
+                this.sizeSeparateAxes = true;
+                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.x || 1);
+                this.sizeYOverLifetime = createValueGetter(sizeOverLifetime.y || 1);
+                this.sizeZOverLifetime = createValueGetter(sizeOverLifetime.z || 1);
+            } else {
+                this.sizeXOverLifetime = createValueGetter(sizeOverLifetime.size || 1);
+            }
+        }
+        if (rotationOverLifetime) {
+            this.rotationOverLifetime = {
+                asRotation: rotationOverLifetime.asRotation,
+                separateAxes: rotationOverLifetime.separateAxes,
+                z: createValueGetter(rotationOverLifetime.z || 0)
+            };
+            if (rotationOverLifetime.separateAxes) {
+                const rotLt = this.rotationOverLifetime;
+                rotLt.x = createValueGetter(rotationOverLifetime.x || 0);
+                rotLt.y = createValueGetter(rotationOverLifetime.y || 0);
+            }
+        }
+        this.gravity = Vector3.fromArray((positionOverLifetime == null ? void 0 : positionOverLifetime.gravity) || []);
+        var _positionOverLifetime_gravityOverLifetime;
+        this.gravityModifier = createValueGetter((_positionOverLifetime_gravityOverLifetime = positionOverLifetime == null ? void 0 : positionOverLifetime.gravityOverLifetime) != null ? _positionOverLifetime_gravityOverLifetime : 0);
+        this.direction = (positionOverLifetime == null ? void 0 : positionOverLifetime.direction) ? Vector3.fromArray(positionOverLifetime.direction).normalize() : new Vector3();
+        this.startSpeed = (positionOverLifetime == null ? void 0 : positionOverLifetime.startSpeed) || 0;
+        this.velocity = this.direction.clone();
+        this.velocity.multiply(this.startSpeed);
+    }
 }
-function signedArea(data, start, end, dim) {
-    var sum = 0;
-    for(var i = start, j = end - dim; i < end; i += dim){
-        sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
-        j = i;
+class TransformAnimationPlayableAsset extends PlayableAsset {
+    createPlayable() {
+        const transformAnimationPlayable = new TransformAnimationPlayable();
+        transformAnimationPlayable.fromData(this.transformAnimationData);
+        return transformAnimationPlayable;
+    }
+    fromData(data) {
+        this.transformAnimationData = data;
     }
-    return sum;
 }
-
-let indexBase = 0;
-function earcut(data, holeIndices, dim, ib) {
-    dim = dim || 2;
-    indexBase = ib || 0;
-    const hasHoles = holeIndices && holeIndices.length;
-    const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
-    let outerNode = linkedList(data, 0, outerLen, dim, true);
-    const triangles = [];
-    if (!outerNode || outerNode.next === outerNode.prev) {
-        return triangles;
+/**
+ * @since 2.0.0
+ * @internal
+ */ class ActivationPlayable extends Playable {
+    onGraphStart() {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
     }
-    let minX, minY, maxX, maxY, x, y, invSize;
-    if (hasHoles) {
-        outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+    onPlayablePlay() {
+        this.bindingItem.transform.setValid(true);
+        this.showRendererComponents();
     }
-    // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
-    if (data.length > 80 * dim) {
-        minX = maxX = data[0];
-        minY = maxY = data[1];
-        for(let i = dim; i < outerLen; i += dim){
-            x = data[i];
-            y = data[i + 1];
-            if (x < minX) {
-                minX = x;
-            }
-            if (y < minY) {
-                minY = y;
-            }
-            if (x > maxX) {
-                maxX = x;
+    onPlayableDestroy() {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
+    }
+    hideRendererComponents() {
+        for (const rendererComponent of this.bindingItem.rendererComponents){
+            if (rendererComponent.enabled) {
+                rendererComponent.enabled = false;
             }
-            if (y > maxY) {
-                maxY = y;
+        }
+    }
+    showRendererComponents() {
+        for (const rendererComponent of this.bindingItem.rendererComponents){
+            if (!rendererComponent.enabled) {
+                rendererComponent.enabled = true;
             }
         }
-        // minX, minY and invSize are later used to transform coords into integers for z-order calculation
-        invSize = Math.max(maxX - minX, maxY - minY);
-        invSize = invSize !== 0 ? 1 / invSize : 0;
     }
-    hackEarcutLinked(outerNode, triangles, dim, minX, minY, invSize);
-    return triangles;
 }
-// main ear slicing loop which triangulates a polygon (given as a linked list)
-function hackEarcutLinked(ear, triangles, dim, minX, minY, invSize, pass) {
-    if (!ear) {
-        return;
-    }
-    // interlink polygon nodes in z-order
-    if (!pass && invSize) {
-        indexCurve(ear, minX, minY, invSize);
+class AnimationClip extends EffectsObject {
+    sampleAnimation(vfxItem, time) {
+        const duration = vfxItem.duration;
+        let life = time / duration;
+        life = life < 0 ? 0 : life > 1 ? 1 : life;
+        for (const curve of this.positionCurves){
+            const value = curve.keyFrames.getValue(life);
+            const target = this.findTarget(vfxItem, curve.path);
+            target == null ? void 0 : target.transform.setPosition(value.x, value.y, value.z);
+        }
+        for (const curve of this.eulerCurves){
+            const value = curve.keyFrames.getValue(life);
+            const target = this.findTarget(vfxItem, curve.path);
+            target == null ? void 0 : target.transform.setRotation(value.x, value.y, value.z);
+        }
+        for (const curve of this.scaleCurves){
+            const value = curve.keyFrames.getValue(life);
+            const target = this.findTarget(vfxItem, curve.path);
+            target == null ? void 0 : target.transform.setScale(value.x, value.y, value.z);
+        }
+    // TODO float curves 采样
     }
-    let stop = ear, prev, next;
-    // iterate through ears, slicing them one by one
-    while(ear.prev !== ear.next){
-        prev = ear.prev;
-        next = ear.next;
-        if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) {
-            // cut off the triangle
-            triangles.push(prev.i / dim + indexBase);
-            triangles.push(ear.i / dim + indexBase);
-            triangles.push(next.i / dim + indexBase);
-            removeNode(ear);
-            // skipping the next vertex leads to less sliver triangles
-            ear = next.next;
-            stop = next.next;
-            continue;
+    fromData(data) {
+        this.positionCurves.length = 0;
+        this.eulerCurves.length = 0;
+        this.scaleCurves.length = 0;
+        this.floatCurves.length = 0;
+        for (const positionCurveData of data.positionCurves){
+            const curve = {
+                path: positionCurveData.path,
+                keyFrames: createValueGetter(positionCurveData.keyFrames)
+            };
+            this.positionCurves.push(curve);
         }
-        ear = next;
-        // if we looped through the whole remaining polygon and can't find any more ears
-        if (ear === stop) {
-            // try filtering triangles and slicing again
-            if (!pass) {
-                hackEarcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1);
-            // if this didn't work, try curing all small self-intersections locally
-            } else if (pass === 1) {
-                ear = hackCureLocalIntersections(filterPoints(ear), triangles, dim);
-                hackEarcutLinked(ear, triangles, dim, minX, minY, invSize, 2);
-            // as a last resort, try splitting the remaining polygon into two
-            } else if (pass === 2) {
-                hackSplitEarcut(ear, triangles, dim, minX, minY, invSize);
+        for (const eulerCurveData of data.eulerCurves){
+            const curve = {
+                path: eulerCurveData.path,
+                keyFrames: createValueGetter(eulerCurveData.keyFrames)
+            };
+            this.eulerCurves.push(curve);
+        }
+        for (const scaleCurvesData of data.scaleCurves){
+            const curve = {
+                path: scaleCurvesData.path,
+                keyFrames: createValueGetter(scaleCurvesData.keyFrames)
+            };
+            this.scaleCurves.push(curve);
+        }
+        for (const floatCurveData of data.floatCurves){
+            const curve = {
+                path: floatCurveData.path,
+                keyFrames: createValueGetter(floatCurveData.keyFrames),
+                property: floatCurveData.property,
+                className: floatCurveData.className
+            };
+            this.floatCurves.push(curve);
+        }
+    }
+    findTarget(vfxItem, path) {
+        let target = vfxItem;
+        for (const name of path){
+            let findTag = false;
+            for (const child of target.children){
+                if (child.name === name) {
+                    target = child;
+                    findTag = true;
+                    break;
+                }
+            }
+            if (!findTag) {
+                return;
             }
-            break;
         }
+        return target;
+    }
+    constructor(...args){
+        super(...args);
+        this.positionCurves = [];
+        this.eulerCurves = [];
+        this.scaleCurves = [];
+        this.floatCurves = [];
     }
 }
-// go through all polygon nodes and cure small local self-intersections
-function hackCureLocalIntersections(start, triangles, dim) {
-    let p = start;
-    do {
-        const a = p.prev, b = p.next.next;
-        if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
-            triangles.push(a.i / dim + indexBase);
-            triangles.push(p.i / dim + indexBase);
-            triangles.push(b.i / dim + indexBase);
-            // remove two nodes involved
-            removeNode(p);
-            removeNode(p.next);
-            p = start = b;
+class AnimationClipPlayable extends Playable {
+    processFrame(dt) {
+        if (this.bindingItem.composition) {
+            this.clip.sampleAnimation(this.bindingItem, this.time);
         }
-        p = p.next;
-    }while (p !== start)
-    return filterPoints(p);
+    }
+    fromData(data) {
+        this.clip = data.clip;
+    }
 }
-// try splitting polygon into two and triangulate them independently
-function hackSplitEarcut(start, triangles, dim, minX, minY, invSize) {
-    // look for a valid diagonal that divides the polygon into two
-    let a = start;
-    do {
-        let b = a.next.next;
-        while(b !== a.prev){
-            if (a.i !== b.i && isValidDiagonal(a, b)) {
-                // split the polygon in two by the diagonal
-                let c = splitPolygon(a, b);
-                // filter colinear triangles around the cuts
-                a = filterPoints(a, a.next);
-                c = filterPoints(c, c.next);
-                // run earcut on each half
-                hackEarcutLinked(a, triangles, dim, minX, minY, invSize);
-                hackEarcutLinked(c, triangles, dim, minX, minY, invSize);
-                return;
+
+/**
+ * @since 2.0.0
+ * @internal
+ */ class TimelineComponent extends ItemBehaviour {
+    start() {
+        // TODO TimelineClip 需要传入 start 和 duration 数据
+        for (const track of this.tracks){
+            for (const clip of track.getClips()){
+                clip.start = this.item.start;
+                clip.duration = this.item.duration;
+            }
+        }
+        this.compileTracks(this.playableGraph);
+    }
+    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
+    update(dt) {
+        if (this.item.stopped || !this.item.composition) {
+            return;
+        }
+        if (!this.timelineStarted) {
+            for (const track of this.tracks){
+                for (const clip of track.getClips()){
+                    clip.playable.onGraphStart();
+                }
+            }
+            this.timelineStarted = true;
+        }
+        const now = this.time;
+        // 判断动画是否开始
+        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
+            this.item.delaying = false;
+            for (const track of this.tracks){
+                for (const clip of track.getClips()){
+                    clip.playable.onPlayablePlay();
+                }
+            }
+        }
+        // 判断动画是否结束
+        let ended;
+        if (VFXItem.isParticle(this.item)) {
+            ended = this.item.isEnded(now) && this.item.content.destoryed;
+        } else {
+            ended = this.item.isEnded(now);
+        }
+        if (ended) {
+            const endBehavior = this.item.endBehavior;
+            if (!this.item.ended) {
+                this.item.ended = true;
+                this.item.onEnd();
+                if (endBehavior === ItemEndBehavior.destroy) {
+                    for (const track of this.tracks){
+                        for (const clip of track.getClips()){
+                            clip.playable.onPlayableDestroy();
+                        }
+                    }
+                    this.item.delaying = true;
+                    if (!this.item.reusable && !this.reusable) {
+                        this.item.dispose();
+                        return;
+                    }
+                }
             }
-            b = b.next;
         }
-        a = a.next;
-    }while (a !== start)
-}
-
-const POINT_INDEX = 2;
-function getGeometryTriangles(geometry, options) {
-    const { s, p } = geometry;
-    const segments = s[1];
-    const points = p[1];
-    let pointCount = 0;
-    for(let i = 0; i < segments.length; i++){
-        const segment = segments[i];
-        pointCount += segment.length - 1;
+        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
+        // 在生命周期内更新动画
+        if (!this.item.delaying) {
+            const lifetime = this.time / this.item.duration;
+            this.item.lifetime = lifetime;
+            for (const track of this.tracks){
+                for (const clip of track.getClips()){
+                    clip.playable.setTime(this.time);
+                }
+            }
+            this.playableGraph.evaluate(dt);
+        }
     }
-    const pointData = new Float32Array(pointCount * SPRITE_VERTEX_STRIDE);
-    const { indexBase = 0, uvTransform } = options;
-    let index = 0;
-    let dx = 0, dy = 0, sw = 1, sh = 1, r;
-    if (uvTransform) {
-        dx = uvTransform[0];
-        dy = uvTransform[1];
-        r = uvTransform[4];
-        sw = r ? uvTransform[3] : uvTransform[2];
-        sh = r ? uvTransform[2] : uvTransform[3];
+    // time 单位秒
+    setTime(time) {
+        this.time = time;
     }
-    const temp = [
-        0,
-        0
-    ];
-    const angle = r === 0 ? 0 : -Math.PI / 2;
-    for(let i = 0; i < segments.length; i++){
-        const segment = segments[i];
-        const p0 = points[i];
-        const p1 = points[i + 1] || points[0];
-        const keys = segment;
-        const point = [
-            0,
-            0
-        ];
-        for(let j = 0; j < keys.length - 1; j++){
-            const key = keys[j];
-            getBezier2DValue(point, key, p0, p1, p0[4], p0[5], p1[2], p1[3]);
-            setPoint(point[0], point[1]);
+    getTime() {
+        return this.time;
+    }
+    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;
     }
-    const indices = earcut(Array.from(pointData), null, SPRITE_VERTEX_STRIDE, indexBase);
-    return {
-        aPoint: pointData,
-        index: new Uint16Array(indices)
-    };
-    function setPoint(x, y) {
-        pointData[index++] = x / 2;
-        pointData[index++] = y / 2;
-        if (uvTransform) {
-            temp[0] = x;
-            temp[1] = y;
-            rotateVec2(temp, temp, angle);
-            pointData[index++] = dx + (temp[0] + 1) / 2 * sw;
-            pointData[index++] = dy + (temp[1] + 1) / 2 * sh;
-        } else {
-            pointData[index++] = (x + 1) / 2;
-            pointData[index++] = (y + 1) / 2;
+    createTrack(classConstructor, name) {
+        const newTrack = new classConstructor();
+        newTrack.bindingItem = this.item;
+        newTrack.id = (this.trackSeed++).toString();
+        newTrack.name = name ? name : 'Track' + newTrack.id;
+        this.tracks.push(newTrack);
+        return newTrack;
+    }
+    getTracks() {
+        return this.tracks;
+    }
+    findTrack(name) {
+        for (const track of this.tracks){
+            if (track.name === name) {
+                return track;
+            }
         }
-        index += POINT_INDEX;
     }
-}
-/**
- * 根据新老版形状数据获取形状几何数据
- * @param shape 新老版形状数据
- */ function getGeometriesByShapeData(shape) {
-    const geometries = [];
-    // 该版本的单个形状数据可以包含多个形状，可以加个埋点，五福之后没有就可以下掉
-    if (shape.gs) {
-        shape.gs.forEach((gs)=>{
-            geometries.push({
-                p: [
-                    ValueType.SHAPE_POINTS,
-                    gs.p
-                ],
-                s: [
-                    ValueType.SHAPE_SPLITS,
-                    gs.s
-                ]
-            });
-        });
-    } else if (shape.g) {
-        geometries.push({
-            p: [
-                ValueType.SHAPE_POINTS,
-                shape.g.p
-            ],
-            s: [
-                ValueType.SHAPE_SPLITS,
-                shape.g.s
-            ]
-        });
-    } else {
-        geometries.push(shape);
+    rebuildGraph() {
+        this.playableGraph = new PlayableGraph();
+        this.compileTracks(this.playableGraph);
     }
-    return geometries;
-}
-function getGeometryByShape(shape, uvTransform) {
-    const datas = [];
-    // 老数据兼容处理
-    const geometries = getGeometriesByShapeData(shape);
-    let indexBase = 0;
-    let aPoint = 0;
-    let index = 0;
-    for(let i = 0; i < geometries.length; i++){
-        const geometry = geometries[i];
-        const data = getGeometryTriangles(geometry, {
-            indexBase,
-            uvTransform
-        });
-        indexBase += data.aPoint.length / 5;
-        datas.push(data);
-        aPoint += data.aPoint.length;
-        index += data.index.length;
+    compileTracks(graph) {
+        for (const track of this.tracks){
+            const trackMixPlayable = track.createPlayable();
+            const trackOutput = track.createOutput();
+            graph.addOutput(trackOutput);
+            trackOutput.setSourcePlayeble(trackMixPlayable);
+        }
     }
-    if (datas.length === 1) {
-        return datas[0];
+    fromData(data) {
+        super.fromData(data);
+        this.options = {
+            start: this.item.start,
+            duration: this.item.duration,
+            looping: this.item.endBehavior === ItemEndBehavior.loop,
+            endBehavior: this.item.endBehavior || ItemEndBehavior.destroy
+        };
+        this.id = this.item.id;
+        this.name = this.item.name;
+        const activationTrack = this.createTrack(Track, 'ActivationTrack');
+        activationTrack.createClip(ActivationPlayable, 'ActivationTimelineClip');
+        //@ts-expect-error
+        if (data.tracks) {
+            //@ts-expect-error
+            const tracks = data.tracks;
+            for (const track of tracks){
+                const newTrack = this.createTrack(Track);
+                for (const clipAsset of track.clips){
+                    switch(clipAsset.dataType){
+                        case 'TransformAnimationPlayableAsset':
+                            newTrack.name = 'TransformAnimationTrack';
+                            newTrack.createClip(TransformAnimationPlayable, 'TransformAnimationTimelineClip').playable.fromData(clipAsset.animationClip);
+                            break;
+                        case 'SpriteColorAnimationPlayableAsset':
+                            newTrack.name = 'SpriteColorTrack';
+                            newTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData(clipAsset.animationClip);
+                            break;
+                        case 'AnimationClipPlayableAsset':
+                            newTrack.name = 'AnimationTrack';
+                            newTrack.createClip(AnimationClipPlayable, 'AnimationTimelineClip').playable.fromData(clipAsset.animationClip);
+                            break;
+                    }
+                }
+            }
+        }
     }
-    const aPointData = new Float32Array(aPoint);
-    const indexData = new Uint16Array(index);
-    // @ts-expect-error
-    for(let i = 0, pointIndex = 0, idx = 0; i < datas[i]; i++){
-        const data = datas[i];
-        aPointData.set(data.aPoint, pointIndex);
-        pointIndex += data.aPoint.length;
-        indexData.set(data.index, idx);
-        idx += data.index.length;
+    toData() {
+        super.toData();
+    }
+    constructor(engine){
+        super(engine);
+        this.reusable = false;
+        this.timelineStarted = false;
+        this.playableGraph = new PlayableGraph();
+        /**
+   * 元素动画已经播放的时间
+   */ this.time = 0;
+        this.tracks = [];
+        this.trackSeed = 0;
     }
-    return {
-        aPoint: aPointData,
-        index: indexData
-    };
-}
-function rotateVec2(out, vec2, angleInRad) {
-    const c = Math.cos(angleInRad);
-    const s = Math.sin(angleInRad);
-    const x = vec2[0];
-    const y = vec2[1];
-    out[0] = c * x + s * y;
-    out[1] = -s * x + c * y;
-    return out;
-}
-function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
-    const ddt = 1 - t;
-    const a = ddt * ddt * ddt;
-    const b = 3 * t * ddt * ddt;
-    const c = 3 * t * t * ddt;
-    const d = t * t * t;
-    out[0] = a * p0[0] + b * cpx0 + c * cpx1 + d * p1[0];
-    out[1] = a * p0[1] + b * cpy0 + c * cpy1 + d * p1[1];
-    return out;
 }
+__decorate([
+    serialize()
+], TimelineComponent.prototype, "time", void 0);
 
 class Burst {
     getGeneratorOptions(timePassed, lifetime) {
@@ -19299,7 +19582,6 @@ function getStandardCameraContent(model) {
                 }
             }
         });
-        const itemGuidMap = {};
         for (const item of composition.items){
             itemGuidMap[item.id] = generateGUID();
             // TODO: 编辑器测试用，上线后删除
@@ -20872,14 +21154,6 @@ const tmpScale = new Vector3(1, 1, 1);
  * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
  */ class Composition {
     /**
-   * 合成结束回调
-   * @param {(composition: Composition) => void} func
-   * @deprecated since 2.0 - use `onEnd` instead
-   */ set handleEnd(func) {
-        console.warn('The handleEnd property is deprecated. Use onEnd instead.');
-        this.onEnd = func;
-    }
-    /**
    * 获取场景中的纹理数组
    */ get textures() {
         return this.compositionSourceManager.textures;
@@ -22546,5 +22820,5 @@ registerPlugin('particle', ParticleLoader, VFXItem, true);
 registerPlugin('cal', CalculateLoader, VFXItem, true);
 registerPlugin('interact', InteractLoader, VFXItem, true);
 
-export { AbstractPlugin, ActivationPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, COMPRESSED_TEXTURE, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, Ticker, TimelineClip, TimelineComponent, Track, Transform, TransformAnimationPlayable, TransformAnimationPlayableAsset, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, assertExist, asserts, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, decimalEqual, deepClone, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, random, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize };
+export { AbstractPlugin, ActivationPlayable, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, COMPRESSED_TEXTURE, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, Ticker, TimelineClip, TimelineComponent, Track, Transform, TransformAnimationPlayable, TransformAnimationPlayableAsset, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, assertExist, asserts, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, decimalEqual, deepClone, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, random, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map