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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.11
+ * Version: v2.0.0-alpha.12
  */
 
 'use strict';
@@ -3702,6 +3702,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;
@@ -4021,6 +4032,7 @@ var DataType;
     DataType["CameraController"] = "CameraController";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
@@ -4054,6 +4066,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 {
 }
@@ -4074,6 +4140,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; },
@@ -4107,6 +4175,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
 });
 
@@ -7408,6 +7479,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) {
@@ -7824,6 +7899,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;
@@ -7925,9 +8042,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]);
@@ -7965,6 +8082,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];
@@ -8852,6 +8983,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;
+    }
+}
 
 exports.ShaderType = void 0;
 (function(ShaderType) {
@@ -9533,6 +9696,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: exports.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()
@@ -10451,8 +10637,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);
@@ -10494,9 +10680,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));
             }
         }
     }
@@ -10515,18 +10701,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;
             }
         }
     }
@@ -10535,14 +10721,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 相关参数都需要动态的修改
@@ -10567,7 +10752,7 @@ let seed$5 = 1;
                 return attachment;
             });
             this.attachments = attachments;
-            const framebuffer = FrameBuffer.create({
+            const framebuffer = Framebuffer.create({
                 storeAction: this.storeAction,
                 name,
                 viewport,
@@ -10580,7 +10765,7 @@ let seed$5 = 1;
             }, renderer);
             framebuffer.bind();
             framebuffer.unbind();
-            this.frameBuffer = framebuffer;
+            this.framebuffer = framebuffer;
         } else {
             this.attachments.length = 0;
         }
@@ -10588,8 +10773,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;
         }
@@ -10610,24 +10795,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
             };
         }
     }
@@ -10692,7 +10877,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
@@ -10775,9 +10960,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({
@@ -10835,8 +11020,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({
@@ -10850,7 +11035,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){
@@ -10903,8 +11088,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({
@@ -10967,11 +11152,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({
@@ -11326,7 +11511,7 @@ let seed$4 = 1;
         this.destroyed = true;
     }
     /**
-   * 重置 RenderPass ColorAttachment，解决 FrameBuffer 即读又写的问题
+   * 重置 RenderPass ColorAttachment，解决 Framebuffer 即读又写的问题
    * @param renderPasses - RenderPass 对象数组
    * @param startIndex - 开始重置的索引
    */ resetRenderPassDefaultAttachment(renderPasses, startIndex) {
@@ -11536,7 +11721,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;
@@ -11821,8 +12006,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);
@@ -11848,7 +12033,7 @@ class GlobalUniforms {
     }
 }
 
-class RenderBuffer {
+class Renderbuffer {
     get isDestroyed() {
         return this.destroyed;
     }
@@ -12009,7 +12194,7 @@ exports.RenderTextureFormat = void 0;
 })(exports.RenderTextureFormat || (exports.RenderTextureFormat = {}));
 /**
  *
- */ class FrameBuffer {
+ */ class Framebuffer {
     resize(x, y, width, height) {
     // OVERRIDE
     }
@@ -12057,11 +12242,11 @@ class Renderer {
     setGlobalMatrix(name, value) {
     // OVERRIDE
     }
-    getFrameBuffer() {
+    getFramebuffer() {
         // OVERRIDE
         return null;
     }
-    setFrameBuffer(frameBuffer) {}
+    setFramebuffer(framebuffer) {}
     setViewport(x, y, width, height) {
     // OVERRIDE
     }
@@ -12118,7 +12303,7 @@ class Renderer {
     renderMeshes(meshes) {
     // OVERRIDE
     }
-    drawGeometry(geometry, material) {
+    drawGeometry(geometry, material, subMeshIndex = 0) {
     // OVERRIDE
     }
     getTemporaryRT(name, width, height, depthBuffer, filter, format) {
@@ -12434,7 +12619,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);
@@ -12666,1188 +12851,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 < exports.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: exports.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 < exports.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: exports.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 = {
@@ -14199,319 +13945,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) {
@@ -19303,7 +19586,6 @@ function getStandardCameraContent(model) {
                 }
             }
         });
-        const itemGuidMap = {};
         for (const item of composition.items){
             itemGuidMap[item.id] = generateGUID();
             // TODO: 编辑器测试用，上线后删除
@@ -20876,14 +21158,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;
@@ -22552,6 +22826,8 @@ registerPlugin('interact', InteractLoader, VFXItem, true);
 
 exports.AbstractPlugin = AbstractPlugin;
 exports.ActivationPlayable = ActivationPlayable;
+exports.AnimationClip = AnimationClip;
+exports.AnimationClipPlayable = AnimationClipPlayable;
 exports.AssetLoader = AssetLoader;
 exports.AssetManager = AssetManager;
 exports.BYTES_TYPE_MAP = BYTES_TYPE_MAP;
@@ -22583,7 +22859,7 @@ exports.EffectsObject = EffectsObject;
 exports.Engine = Engine;
 exports.EventSystem = EventSystem;
 exports.Float16ArrayWrapper = Float16ArrayWrapper;
-exports.FrameBuffer = FrameBuffer;
+exports.Framebuffer = Framebuffer;
 exports.GPUCapability = GPUCapability;
 exports.Geometry = Geometry;
 exports.GlobalUniforms = GlobalUniforms;
@@ -22608,6 +22884,7 @@ exports.ParticleMesh = ParticleMesh;
 exports.ParticleSystem = ParticleSystem;
 exports.ParticleSystemRenderer = ParticleSystemRenderer;
 exports.PassTextureCache = PassTextureCache;
+exports.PathSegments = PathSegments;
 exports.PluginSystem = PluginSystem;
 exports.RENDER_PASS_NAME_PREFIX = RENDER_PASS_NAME_PREFIX;
 exports.RENDER_PREFER_LOOKUP_TEXTURE = RENDER_PREFER_LOOKUP_TEXTURE;
@@ -22615,13 +22892,13 @@ exports.RUNTIME_ENV = RUNTIME_ENV;
 exports.RandomSetValue = RandomSetValue;
 exports.RandomValue = RandomValue;
 exports.RandomVectorValue = RandomVectorValue;
-exports.RenderBuffer = RenderBuffer;
 exports.RenderFrame = RenderFrame;
 exports.RenderPass = RenderPass;
 exports.RenderPassPriorityNormal = RenderPassPriorityNormal;
 exports.RenderPassPriorityPostprocess = RenderPassPriorityPostprocess;
 exports.RenderPassPriorityPrepare = RenderPassPriorityPrepare;
 exports.RenderTargetHandle = RenderTargetHandle;
+exports.Renderbuffer = Renderbuffer;
 exports.Renderer = Renderer;
 exports.RendererComponent = RendererComponent;
 exports.SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0;
@@ -22691,6 +22968,7 @@ exports.gaussianUpFrag = gaussianUpFrag;
 exports.generateEmptyTypedArray = generateEmptyTypedArray;
 exports.generateGUID = generateGUID;
 exports.generateHalfFloatTexture = generateHalfFloatTexture;
+exports.generateWhiteTexture = generateWhiteTexture;
 exports.getBackgroundImage = getBackgroundImage;
 exports.getColorFromGradientStops = getColorFromGradientStops;
 exports.getConfig = getConfig;
@@ -22711,6 +22989,7 @@ exports.getStandardItem = getStandardItem;
 exports.getStandardJSON = getStandardJSON;
 exports.getTextureSize = getTextureSize;
 exports.glContext = glContext;
+exports.glType2VertexFormatType = glType2VertexFormatType;
 exports.gpuTimer = gpuTimer;
 exports.imageDataFromColor = imageDataFromColor;
 exports.imageDataFromGradient = imageDataFromGradient;
@@ -22787,4 +23066,5 @@ exports.vecAssign = vecAssign;
 exports.vecFill = vecFill;
 exports.vecMulCombine = vecMulCombine;
 exports.vecNormalize = vecNormalize;
+exports.vertexFormatType2GLType = vertexFormatType2GLType;
 //# sourceMappingURL=index.js.map