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

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.11
+ * Version: v2.0.0-alpha.12
  */
 
 import * as THREE from 'three';
@@ -3935,6 +3935,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 = {}));
 
 var END_BEHAVIOR_DESTROY = 0;
 var END_BEHAVIOR_PAUSE = 1;
@@ -4254,6 +4265,7 @@ var DataType;
     DataType["CameraController"] = "CameraController";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
@@ -4287,6 +4299,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 = {}));
 
 var BuiltinObjectGUID = function BuiltinObjectGUID() {
 };
@@ -4307,6 +4373,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; },
@@ -4340,6 +4408,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
 });
 
@@ -7735,6 +7806,10 @@ function buildEasingCurve(leftKeyframe, rightKeyframe) {
     }
 }
 
+var CURVE_PRO_TIME = 0;
+var CURVE_PRO_VALUE = 1;
+var CURVE_PRO_IN_TANGENT = 2;
+var CURVE_PRO_OUT_TANGENT = 3;
 var NOT_IMPLEMENT = "not_implement";
 var ValueGetter = /*#__PURE__*/ function() {
     function ValueGetter(arg) {
@@ -8204,6 +8279,54 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
     };
     return BezierCurve;
 }(ValueGetter);
+var PathSegments = /*#__PURE__*/ function(ValueGetter) {
+    _inherits(PathSegments, ValueGetter);
+    function PathSegments() {
+        return ValueGetter.apply(this, arguments);
+    }
+    var _proto = PathSegments.prototype;
+    _proto.onCreate = function onCreate(props) {
+        this.keys = props[0];
+        this.values = props[1];
+    };
+    _proto.getValue = function getValue(time) {
+        var keys = this.keys;
+        var values = this.values;
+        for(var i = 0; i < keys.length - 1; i++){
+            var k0 = keys[i];
+            var k1 = keys[i + 1];
+            if (k0[0] <= time && k1[0] >= time) {
+                var dis = k1[1] - k0[1];
+                var dt = void 0;
+                if (dis === 0) {
+                    dt = (time - k0[0]) / (k1[0] - k0[0]);
+                } else {
+                    var 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();
+    };
+    _proto.calculateVec = function calculateVec(i, dt) {
+        var vec0 = this.values[i];
+        var vec1 = this.values[i + 1];
+        var ret = [
+            0,
+            0,
+            0
+        ];
+        for(var j = 0; j < vec0.length; j++){
+            ret[j] = vec0[j] * (1 - dt) + vec1[j] * dt;
+        }
+        return ret;
+    };
+    return PathSegments;
+}(ValueGetter);
 var BezierCurvePath = /*#__PURE__*/ function(ValueGetter) {
     _inherits(BezierCurvePath, ValueGetter);
     function BezierCurvePath() {
@@ -8304,10 +8427,9 @@ var map$1 = (_obj$6 = {}, _obj$6[ValueType.RANDOM] = function(props) {
     return new LineSegments(props);
 }, _obj$6[ValueType.GRADIENT_COLOR] = function(props) {
     return new GradientValue(props);
-}, // [spec.ValueType.LINEAR_PATH] (pros: number[][][]) {
-//   return new PathSegments(pros);
-// },
-_obj$6[ValueType.BEZIER_CURVE] = function(props) {
+}, _obj$6[ValueType.LINEAR_PATH] = function(pros) {
+    return new PathSegments(pros);
+}, _obj$6[ValueType.BEZIER_CURVE] = function(props) {
     if (props.length === 1) {
         return new StaticValue(props[0][1][1]);
     }
@@ -8342,6 +8464,20 @@ function lineSegIntegrateByTime(t, t0, t1, y0, y1) {
     var 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) {
+    var dt = keyframe1[CURVE_PRO_TIME] - keyframe0[CURVE_PRO_TIME];
+    var m0 = keyframe0[CURVE_PRO_OUT_TANGENT] * dt;
+    var m1 = keyframe1[CURVE_PRO_IN_TANGENT] * dt;
+    var t = (time - keyframe0[CURVE_PRO_TIME]) / dt;
+    var t2 = t * t;
+    var t3 = t2 * t;
+    var a = 2 * t3 - 3 * t2 + 1;
+    var b = t3 - 2 * t2 + t;
+    var c = t3 - t2;
+    var 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) {
         var type = value[0];
@@ -9267,6 +9403,38 @@ function copy(target) {
         }
     }
 }
+function vertexFormatType2GLType(formatType) {
+    switch(formatType){
+        case VertexFormatType.Float32:
+            return WebGLRenderingContext["FLOAT"];
+        case VertexFormatType.Int16:
+            return WebGLRenderingContext["SHORT"];
+        case VertexFormatType.Int8:
+            return WebGLRenderingContext["BYTE"];
+        case VertexFormatType.UInt16:
+            return WebGLRenderingContext["UNSIGNED_SHORT"];
+        case VertexFormatType.UInt8:
+            return WebGLRenderingContext["UNSIGNED_BYTE"];
+        default:
+            return WebGLRenderingContext["FLOAT"];
+    }
+}
+function glType2VertexFormatType(webglType) {
+    switch(webglType){
+        case WebGLRenderingContext["FLOAT"]:
+            return VertexFormatType.Float32;
+        case WebGLRenderingContext["SHORT"]:
+            return VertexFormatType.Int16;
+        case WebGLRenderingContext["BYTE"]:
+            return VertexFormatType.Int8;
+        case WebGLRenderingContext["UNSIGNED_SHORT"]:
+            return VertexFormatType.UInt16;
+        case WebGLRenderingContext["UNSIGNED_BYTE"]:
+            return VertexFormatType.UInt8;
+        default:
+            return VertexFormatType.Float32;
+    }
+}
 
 var ShaderType;
 (function(ShaderType) {
@@ -10108,6 +10276,29 @@ function generateHalfFloatTexture(engine, data, width, height) {
         wrapT: glContext.CLAMP_TO_EDGE
     });
 }
+function generateWhiteTexture(engine) {
+    return Texture.create(engine, {
+        id: "whitetexture00000000000000000000",
+        data: {
+            width: 1,
+            height: 1,
+            data: new Uint8Array([
+                255,
+                255,
+                255,
+                255
+            ])
+        },
+        sourceType: TextureSourceType.data,
+        type: glContext.UNSIGNED_BYTE,
+        format: glContext.RGBA,
+        internalFormat: glContext.RGBA,
+        wrapS: glContext.MIRRORED_REPEAT,
+        wrapT: glContext.MIRRORED_REPEAT,
+        minFilter: glContext.NEAREST,
+        magFilter: glContext.NEAREST
+    });
+}
 
 var HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
 var COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
@@ -11281,8 +11472,8 @@ var seed$6 = 1;
     /**
    * 配置当前pass的RT，在每帧渲染前调用
    */ _proto.configure = function configure(renderer) {
-        if (this.frameBuffer) {
-            renderer.setFrameBuffer(this.frameBuffer);
+        if (this.framebuffer) {
+            renderer.setFramebuffer(this.framebuffer);
         } else {
             var _this_getViewport = this.getViewport(), x = _this_getViewport[0], y = _this_getViewport[1], width = _this_getViewport[2], height = _this_getViewport[3];
             renderer.setViewport(x, y, width, height);
@@ -11329,9 +11520,9 @@ var seed$6 = 1;
                 return !att.externalTexture && att.dispose();
             });
             this.attachments = attachments;
-            if (this.frameBuffer) {
-                this.frameBuffer.bind();
-                this.frameBuffer.resetColorTextures(colors.map(function(color) {
+            if (this.framebuffer) {
+                this.framebuffer.bind();
+                this.framebuffer.resetColorTextures(colors.map(function(color) {
                     return color;
                 }));
             }
@@ -11352,18 +11543,18 @@ var seed$6 = 1;
             this.isCustomViewport = true;
             this.viewportScale = 1;
             this.customViewport = options.viewport.slice(0, 4);
-            if (this.frameBuffer) {
+            if (this.framebuffer) {
                 var 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;
             }
         }
     };
@@ -11373,16 +11564,15 @@ var seed$6 = 1;
         var renderer = this.renderer;
         var options = this.options;
         if (this.attachments.length) {
-            var _this_frameBuffer;
+            var _this_framebuffer;
             this.attachments.forEach(function(att) {
                 return !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;
         }
         var vs = this.viewportScale;
         // renderpass 的 viewport 相关参数都需要动态的修改
@@ -11407,7 +11597,7 @@ var seed$6 = 1;
                 return attachment;
             });
             this.attachments = attachments;
-            var framebuffer = FrameBuffer.create({
+            var framebuffer = Framebuffer.create({
                 storeAction: this.storeAction,
                 name: name,
                 viewport: viewport,
@@ -11422,7 +11612,7 @@ var seed$6 = 1;
             }, renderer);
             framebuffer.bind();
             framebuffer.unbind();
-            this.frameBuffer = framebuffer;
+            this.framebuffer = framebuffer;
         } else {
             this.attachments.length = 0;
         }
@@ -11430,8 +11620,8 @@ var seed$6 = 1;
     /**
    * 获取当前视口大小，格式：[x偏移，y偏移，宽度，高度]
    */ _proto.getViewport = function getViewport() {
-        var _this_frameBuffer;
-        var ret = ((_this_frameBuffer = this.frameBuffer) == null ? void 0 : _this_frameBuffer.viewport) || this.customViewport;
+        var _this_framebuffer;
+        var ret = ((_this_framebuffer = this.framebuffer) == null ? void 0 : _this_framebuffer.viewport) || this.customViewport;
         if (ret) {
             return ret;
         }
@@ -11452,24 +11642,24 @@ var seed$6 = 1;
     /**
    * 获取深度 Attachment，可能没有
    */ _proto.getDepthAttachment = function getDepthAttachment() {
-        var frameBuffer = this.frameBuffer;
-        if (frameBuffer) {
+        var 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，可能没有
    */ _proto.getStencilAttachment = function getStencilAttachment() {
-        var frameBuffer = this.frameBuffer;
-        if (frameBuffer) {
+        var 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
             };
         }
     };
@@ -11534,7 +11724,7 @@ var seed$6 = 1;
         }
         this.destroyed = true;
         var depthStencilOpt = (options == null ? void 0 : options.depthStencilAttachment) ? options.depthStencilAttachment : 0;
-        var fbo = this.frameBuffer;
+        var fbo = this.framebuffer;
         if (fbo) {
             fbo.dispose({
                 depthStencilAttachment: depthStencilOpt
@@ -11664,9 +11854,9 @@ var BloomThresholdPass = /*#__PURE__*/ function(RenderPass) {
     }
     var _proto = BloomThresholdPass.prototype;
     _proto.configure = function 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);
     };
     _proto.execute = function execute(renderer) {
         renderer.clear({
@@ -11736,8 +11926,8 @@ var HQGaussianDownSamplePass = /*#__PURE__*/ function(RenderPass) {
     }
     var _proto = HQGaussianDownSamplePass.prototype;
     _proto.configure = function configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(this.frameBuffer);
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(this.framebuffer);
     };
     _proto.execute = function execute(renderer) {
         renderer.clear({
@@ -11751,7 +11941,7 @@ var HQGaussianDownSamplePass = /*#__PURE__*/ function(RenderPass) {
             this.screenMesh
         ]);
         if (this.type === "V") {
-            this.gaussianResult.texture = renderer.getFrameBuffer().getColorTextures()[0];
+            this.gaussianResult.texture = renderer.getFramebuffer().getColorTextures()[0];
         }
     };
     return HQGaussianDownSamplePass;
@@ -11806,8 +11996,8 @@ var HQGaussianUpSamplePass = /*#__PURE__*/ function(RenderPass) {
     }
     var _proto = HQGaussianUpSamplePass.prototype;
     _proto.configure = function configure(renderer) {
-        this.mainTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(this.frameBuffer);
+        this.mainTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(this.framebuffer);
     };
     _proto.execute = function execute(renderer) {
         renderer.clear({
@@ -11876,11 +12066,11 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
     }
     var _proto = ToneMappingPass.prototype;
     _proto.configure = function 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);
     };
     _proto.execute = function execute(renderer) {
         renderer.clear({
@@ -12400,7 +12590,7 @@ var seed$5 = 1;
         this.destroyed = true;
     };
     /**
-   * 重置 RenderPass ColorAttachment，解决 FrameBuffer 即读又写的问题
+   * 重置 RenderPass ColorAttachment，解决 Framebuffer 即读又写的问题
    * @param renderPasses - RenderPass 对象数组
    * @param startIndex - 开始重置的索引
    */ _proto.resetRenderPassDefaultAttachment = function resetRenderPassDefaultAttachment(renderPasses, startIndex) {
@@ -12613,7 +12803,7 @@ var seed$5 = 1;
     // TODO tex和size没有地方用到。
     /**
    * 创建拷贝 RenderPass 用到的 Mesh 对象
-   * @param semantics - RenderPass 渲染时 FrameBuffer 的颜色和深度纹理、大小和是否混合
+   * @param semantics - RenderPass 渲染时 Framebuffer 的颜色和深度纹理、大小和是否混合
    */ _proto.createCopyMesh = function createCopyMesh(semantics) {
         var name = EFFECTS_COPY_MESH_NAME;
         var engine = this.renderer.engine;
@@ -12704,8 +12894,8 @@ var FinalCopyRP = /*#__PURE__*/ function(RenderPass) {
     }
     var _proto = FinalCopyRP.prototype;
     _proto.configure = function configure(renderer) {
-        this.prePassTexture = renderer.getFrameBuffer().getColorTextures()[0];
-        renderer.setFrameBuffer(null);
+        this.prePassTexture = renderer.getFramebuffer().getColorTextures()[0];
+        renderer.setFramebuffer(null);
     };
     _proto.execute = function execute(renderer) {
         renderer.clear(this.clearAction);
@@ -12730,8 +12920,8 @@ var GlobalUniforms = function GlobalUniforms() {
     ;
 };
 
-var RenderBuffer = /*#__PURE__*/ function() {
-    function RenderBuffer(props) {
+var Renderbuffer = /*#__PURE__*/ function() {
+    function Renderbuffer(props) {
         this.size = [
             0,
             0
@@ -12743,7 +12933,7 @@ var RenderBuffer = /*#__PURE__*/ function() {
         this.format = format;
         this.attachment = attachment;
     }
-    _create_class(RenderBuffer, [
+    _create_class(Renderbuffer, [
         {
             key: "isDestroyed",
             get: function get() {
@@ -12751,7 +12941,7 @@ var RenderBuffer = /*#__PURE__*/ function() {
             }
         }
     ]);
-    return RenderBuffer;
+    return Renderbuffer;
 }();
 
 var isWebGL2Available = typeof WebGL2RenderingContext === "function";
@@ -12899,9 +13089,9 @@ var RenderTextureFormat;
 })(RenderTextureFormat || (RenderTextureFormat = {}));
 /**
  *
- */ var FrameBuffer = /*#__PURE__*/ function() {
-    function FrameBuffer() {}
-    var _proto = FrameBuffer.prototype;
+ */ var Framebuffer = /*#__PURE__*/ function() {
+    function Framebuffer() {}
+    var _proto = Framebuffer.prototype;
     _proto.resize = function resize(x, y, width, height) {
     // OVERRIDE
     };
@@ -12929,7 +13119,7 @@ var RenderTextureFormat;
     _proto.dispose = function dispose(opt) {
     // OVERRIDE
     };
-    _create_class(FrameBuffer, [
+    _create_class(Framebuffer, [
         {
             key: "stencilStorage",
             get: function get() {
@@ -12945,7 +13135,7 @@ var RenderTextureFormat;
             }
         }
     ]);
-    return FrameBuffer;
+    return Framebuffer;
 }();
 
 var Renderer = /*#__PURE__*/ function() {
@@ -12960,11 +13150,11 @@ var Renderer = /*#__PURE__*/ function() {
     _proto.setGlobalMatrix = function setGlobalMatrix(name, value) {
     // OVERRIDE
     };
-    _proto.getFrameBuffer = function getFrameBuffer() {
+    _proto.getFramebuffer = function getFramebuffer() {
         // OVERRIDE
         return null;
     };
-    _proto.setFrameBuffer = function setFrameBuffer(frameBuffer) {};
+    _proto.setFramebuffer = function setFramebuffer(framebuffer) {};
     _proto.setViewport = function setViewport(x, y, width, height) {
     // OVERRIDE
     };
@@ -13021,7 +13211,7 @@ var Renderer = /*#__PURE__*/ function() {
     _proto.renderMeshes = function renderMeshes(meshes) {
     // OVERRIDE
     };
-    _proto.drawGeometry = function drawGeometry(geometry, material) {
+    _proto.drawGeometry = function drawGeometry(geometry, material, subMeshIndex) {
     // OVERRIDE
     };
     _proto.getTemporaryRT = function getTemporaryRT(name, width, height, depthBuffer, filter, format) {
@@ -13320,7 +13510,7 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
     };
     _proto.getBoundingBox = function getBoundingBox() {
         var worldMatrix = this.transform.getWorldMatrix();
-        var triangles = trianglesFromRect(Vector3.ZERO, 0.5, 0.5);
+        var triangles = trianglesFromRect(Vector3.ZERO, 0.5 * this.transform.size.x, 0.5 * this.transform.size.y);
         triangles.forEach(function(triangle) {
             worldMatrix.transformPoint(triangle.p0);
             worldMatrix.transformPoint(triangle.p1);
@@ -13551,1330 +13741,833 @@ var PlayableAsset = /*#__PURE__*/ function() {
     return PlayableAsset;
 }();
 
-/**
- * @since 2.0.0
- * @internal
- */ var Track = /*#__PURE__*/ function(PlayableAsset) {
-    _inherits(Track, PlayableAsset);
-    function Track() {
+var singleSplits = [
+    [
+        0,
+        0,
+        1,
+        1,
+        undefined
+    ]
+];
+var tempColor = [
+    1,
+    1,
+    1,
+    1
+];
+var seed$3 = 0;
+var SpriteColorPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(SpriteColorPlayable, Playable);
+    function SpriteColorPlayable() {
         var _this;
-        _this = PlayableAsset.apply(this, arguments) || this;
-        _this.clips = [];
-        _this.clipSeed = 0;
+        _this = Playable.apply(this, arguments) || this;
+        _this.renderColor = [
+            1,
+            1,
+            1,
+            1
+        ];
         return _this;
     }
-    var _proto = Track.prototype;
-    _proto.createOutput = function createOutput() {
-        var output = new PlayableOutput();
-        return output;
-    };
-    /**
-   * 重写该方法以创建自定义混合器
-   */ _proto.createMixerPlayable = function createMixerPlayable() {
-        return new Playable();
+    var _proto = SpriteColorPlayable.prototype;
+    _proto.onPlayablePlay = function onPlayablePlay() {
+        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
     };
-    _proto.createPlayable = function createPlayable() {
-        var defaultMixPlayable = this.createMixerPlayable();
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            defaultMixPlayable.connect(clip.playable);
+    _proto.processFrame = function processFrame(dt) {
+        var colorInc = vecFill(tempColor, 1);
+        var colorChanged;
+        var life = this.time / this.bindingItem.duration;
+        var opacityOverLifetime = this.opacityOverLifetime;
+        var colorOverLifetime = this.colorOverLifetime;
+        if (colorOverLifetime) {
+            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
+            colorChanged = true;
         }
-        return defaultMixPlayable;
-    };
-    _proto.createClip = function createClip(classConstructor, name) {
-        var newClip = new TimelineClip();
-        newClip.playable = new classConstructor();
-        newClip.name = name ? name : "TimelineClip" + newClip.id;
-        this.addClip(newClip);
-        return newClip;
-    };
-    _proto.getClips = function getClips() {
-        return this.clips;
-    };
-    _proto.findClip = function findClip(name) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
-            var clip = _step.value;
-            if (clip.name === name) {
-                return clip;
-            }
+        if (opacityOverLifetime) {
+            colorInc[3] *= opacityOverLifetime.getValue(life);
+            colorChanged = true;
         }
-    };
-    _proto.addClip = function addClip(clip) {
-        clip.playable.bindingItem = this.bindingItem;
-        clip.id = (this.clipSeed++).toString();
-        this.clips.push(clip);
-    };
-    return Track;
-}(PlayableAsset);
-/**
- * @since 2.0.0
- * @internal
- */ var TimelineClip = function TimelineClip() {
-    this.start = 0;
-    this.duration = 0;
-};
-
-function _assert_this_initialized(self) {
-    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return self;
-}
-
-var AnimationStream = /*#__PURE__*/ function() {
-    function AnimationStream(playable) {
-        this.curveValues = {};
-        this.playable = playable;
-    }
-    var _proto = AnimationStream.prototype;
-    _proto.setCurveValue = function setCurveValue(componentType, propertyName, value) {
-        if (!this.findCurveValue(componentType, propertyName)) {
-            this.curveValues[componentType + propertyName] = {
-                componentType: componentType,
-                propertyName: propertyName,
-                value: value
-            };
-        } else {
-            this.curveValues[componentType + propertyName].value = value;
+        if (colorChanged) {
+            vecMulCombine(this.renderColor, colorInc, this.startColor);
+            this.spriteMaterial.getVector4("_Color").setFromArray(this.renderColor);
         }
-        return this.curveValues[componentType + propertyName];
-    };
-    _proto.findCurveValue = function findCurveValue(componentType, propertyName) {
-        return this.curveValues[componentType + propertyName];
     };
-    _proto.getInputStream = function getInputStream(index) {
-        var inputPlayable = this.playable.getInput(index);
-        if (_instanceof1(inputPlayable, AnimationPlayable)) {
-            return inputPlayable.animationStream;
+    _proto.fromData = function fromData(clipData) {
+        this.clipData = clipData;
+        var 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]);
+            }
         }
+        this.startColor = clipData.startColor || [
+            1,
+            1,
+            1,
+            1
+        ];
+        return this;
     };
-    return AnimationStream;
-}();
-
-var AnimationPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(AnimationPlayable, Playable);
-    function AnimationPlayable() {
+    return SpriteColorPlayable;
+}(Playable);
+var SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
+    _inherits(SpriteComponent, RendererComponent);
+    function SpriteComponent(engine, props) {
         var _this;
-        _this = Playable.call(this) || this;
-        _this.animationStream = new AnimationStream(_assert_this_initialized(_this));
+        _this = RendererComponent.call(this, engine) || this;
+        _this.frameAnimationTime = 0;
+        _this.color = [
+            1,
+            1,
+            1,
+            1
+        ];
+        _this.visible = true;
+        _this.getHitTestParams = function(force) {
+            var ui = _this.interaction;
+            if (force || ui) {
+                var 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);
+        }
         return _this;
     }
-    return AnimationPlayable;
-}(Playable);
-
-var tempRot$1 = new Euler();
-var tempSize$1 = new Vector3(1, 1, 1);
-var tempPos = new Vector3();
-/**
- * @since 2.0.0
- * @internal
- */ var TransformAnimationPlayable = /*#__PURE__*/ function(AnimationPlayable) {
-    _inherits(TransformAnimationPlayable, AnimationPlayable);
-    function TransformAnimationPlayable() {
-        return AnimationPlayable.apply(this, arguments);
-    }
-    var _proto = TransformAnimationPlayable.prototype;
-    _proto.processFrame = function processFrame(dt) {
-        if (this.bindingItem.composition) {
-            this.sampleAnimation();
-        }
+    var _proto = SpriteComponent.prototype;
+    /**
+   * 设置当前 Mesh 的可见性。
+   * @param visible - true：可见，false：不可见
+   */ _proto.setVisible = function setVisible(visible) {
+        this.visible = visible;
     };
     /**
-   * 应用时间轴K帧数据到对象
-   */ _proto.sampleAnimation = function sampleAnimation() {
-        var _this = this;
-        var duration = this.bindingItem.duration;
-        var 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;
-            }
-            var 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) {
-            var func = function(v) {
-                return _this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration);
-            };
-            var incZ = func(this.rotationOverLifetime.z);
-            var 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;
-            var 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);
+   * 获取当前 Mesh 的可见性。
+   */ _proto.getVisible = function getVisible() {
+        return this.visible;
+    };
+    /**
+   * 设置当前图层的颜色
+   * > Tips: 透明度也属于颜色的一部分，当有透明度/颜色 K 帧变化时，该 API 会失效
+   * @since 2.0.0
+   * @param color - 颜色值
+   */ _proto.setColor = function setColor(color) {
+        this.color = color;
+        this.material.setVector4("_Color", new Vector4().setFromArray(color));
+    };
+    /**
+   * 设置当前 Mesh 的纹理
+   * @since 2.0.0
+   * @param texture - 纹理对象
+   */ _proto.setTexture = function setTexture(texture) {
+        this.renderer.texture = texture;
+        this.material.setTexture("uSampler0", texture);
+    };
+    _proto.render = function render(renderer) {
+        if (!this.getVisible()) {
+            return;
         }
-        if (this.positionOverLifetime) {
-            var 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);
+        var material = this.material;
+        var 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);
     };
-    _proto.fromData = function fromData(data) {
-        var 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)
-        };
-        var positionOverLifetime = data.positionOverLifetime;
-        var rotationOverLifetime = data.rotationOverLifetime;
-        var 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);
-            }
-            var 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
-                };
-            }
-            var 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
-                };
+    _proto.start = function start() {
+        this.priority = this.item.listIndex;
+        this.item.getHitTestParams = this.getHitTestParams;
+    };
+    _proto.update = function update(dt) {
+        this.frameAnimationTime += dt / 1000;
+        var time = this.frameAnimationTime;
+        var duration = this.item.duration;
+        var life = Math.min(Math.max(time / duration, 0.0), 1.0);
+        var ta = this.textureSheetAnimation;
+        if (ta) {
+            var total = ta.total || ta.row * ta.col;
+            var texRectX = 0;
+            var texRectY = 0;
+            var texRectW = 1;
+            var texRectH = 1;
+            var flip;
+            if (this.splits) {
+                var 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];
+                }
             }
-            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);
+            var 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) {
-                var rotLt = this.rotationOverLifetime;
-                rotLt.x = createValueGetter(rotationOverLifetime.x || 0);
-                rotLt.y = createValueGetter(rotationOverLifetime.y || 0);
+            var texOffset;
+            if (ta.animate) {
+                var frameIndex = Math.round(life * (total - 1));
+                var yIndex = Math.floor(frameIndex / ta.col);
+                var 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);
-    };
-    return TransformAnimationPlayable;
-}(AnimationPlayable);
-var TransformAnimationPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
-    _inherits(TransformAnimationPlayableAsset, PlayableAsset);
-    function TransformAnimationPlayableAsset() {
-        return PlayableAsset.apply(this, arguments);
-    }
-    var _proto = TransformAnimationPlayableAsset.prototype;
-    _proto.createPlayable = function createPlayable() {
-        var transformAnimationPlayable = new TransformAnimationPlayable();
-        transformAnimationPlayable.fromData(this.transformAnimationData);
-        return transformAnimationPlayable;
-    };
-    _proto.fromData = function fromData(data) {
-        this.transformAnimationData = data;
-    };
-    return TransformAnimationPlayableAsset;
-}(PlayableAsset);
-/**
- * @since 2.0.0
- * @internal
- */ var ActivationPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(ActivationPlayable, Playable);
-    function ActivationPlayable() {
-        return Playable.apply(this, arguments);
-    }
-    var _proto = ActivationPlayable.prototype;
-    _proto.onGraphStart = function onGraphStart() {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
-    };
-    _proto.onPlayablePlay = function onPlayablePlay() {
-        this.bindingItem.transform.setValid(true);
-        this.showRendererComponents();
     };
-    _proto.onPlayableDestroy = function onPlayableDestroy() {
-        this.bindingItem.transform.setValid(false);
-        this.hideRendererComponents();
+    _proto.onDestroy = function onDestroy() {
+        if (this.item && this.item.composition) {
+            this.item.composition.destroyTextures(this.getTextures());
+        }
     };
-    _proto.hideRendererComponents = function hideRendererComponents() {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.bindingItem.rendererComponents), _step; !(_step = _iterator()).done;){
-            var rendererComponent = _step.value;
-            if (rendererComponent.enabled) {
-                rendererComponent.enabled = false;
+    _proto.getItemInitData = function getItemInitData(item, idx, pointStartIndex, textureIndex) {
+        var geoData = item.geoData;
+        if (!geoData) {
+            geoData = item.geoData = this.getItemGeometryData(item, idx);
+        }
+        var index = geoData.index;
+        var idxCount = index.length;
+        // @ts-expect-error
+        var indexData = this.wireframe ? new Uint8Array([
+            0,
+            1,
+            1,
+            3,
+            2,
+            3,
+            2,
+            0
+        ]) : new index.constructor(idxCount);
+        if (!this.wireframe) {
+            for(var i = 0; i < idxCount; i++){
+                indexData[i] = pointStartIndex + index[i];
             }
         }
+        return {
+            atlasOffset: geoData.atlasOffset,
+            index: indexData
+        };
     };
-    _proto.showRendererComponents = function showRendererComponents() {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.bindingItem.rendererComponents), _step; !(_step = _iterator()).done;){
-            var rendererComponent = _step.value;
-            if (!rendererComponent.enabled) {
-                rendererComponent.enabled = true;
-            }
-        }
-    };
-    return ActivationPlayable;
-}(Playable);
-
-/**
- * @since 2.0.0
- * @internal
- */ var TimelineComponent = /*#__PURE__*/ function(ItemBehaviour) {
-    _inherits(TimelineComponent, ItemBehaviour);
-    function TimelineComponent(engine) {
-        var _this;
-        _this = ItemBehaviour.call(this, engine) || this;
-        _this.reusable = false;
-        _this.timelineStarted = false;
-        _this.playableGraph = new PlayableGraph();
-        /**
-   * 元素动画已经播放的时间
-   */ _this.time = 0;
-        _this.tracks = [];
-        _this.trackSeed = 0;
-        return _this;
-    }
-    var _proto = TimelineComponent.prototype;
-    _proto.start = function start() {
-        // TODO TimelineClip 需要传入 start 和 duration 数据
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
-            var track = _step.value;
-            for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getClips()), _step1; !(_step1 = _iterator1()).done;){
-                var clip = _step1.value;
-                clip.start = this.item.start;
-                clip.duration = this.item.duration;
-            }
+    _proto.setItem = function setItem() {
+        var textures = [];
+        var texture = this.renderer.texture;
+        if (texture) {
+            addItem(textures, texture);
         }
-        this.compileTracks(this.playableGraph);
-    };
-    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
-    _proto.update = function update(dt) {
-        if (this.item.stopped || !this.item.composition) {
-            return;
+        texture = this.renderer.texture;
+        var textureIndex = texture ? textures.indexOf(texture) : -1;
+        var data = this.getItemInitData(this, 0, 0, textureIndex);
+        var renderer = this.renderer;
+        var texParams = this.material.getVector4("_TexParams");
+        texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
+        texParams.y = +this.preMultiAlpha;
+        texParams.z = renderer.renderMode;
+        var attributes = {
+            atlasOffset: new Float32Array(data.atlasOffset.length),
+            index: new Uint16Array(data.index.length)
+        };
+        attributes.atlasOffset.set(data.atlasOffset);
+        attributes.index.set(data.index);
+        var _this = this, material = _this.material, geometry = _this.geometry;
+        var indexData = attributes.index;
+        geometry.setIndexData(indexData);
+        geometry.setAttributeData("atlasOffset", attributes.atlasOffset);
+        geometry.setDrawCount(data.index.length);
+        for(var i = 0; i < textures.length; i++){
+            var texture1 = textures[i];
+            material.setTexture("uSampler" + i, texture1);
         }
-        if (!this.timelineStarted) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
-                var track = _step.value;
-                for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getClips()), _step1; !(_step1 = _iterator1()).done;){
-                    var clip = _step1.value;
-                    clip.playable.onGraphStart();
-                }
-            }
-            this.timelineStarted = true;
+        // FIXME: 内存泄漏的临时方案，后面再调整
+        var emptyTexture = this.emptyTexture;
+        for(var k = textures.length; k < maxSpriteMeshItemCount; k++){
+            material.setTexture("uSampler" + k, emptyTexture);
         }
-        var now = this.time;
-        // 判断动画是否开始
-        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
-            this.item.delaying = false;
-            for(var _iterator2 = _create_for_of_iterator_helper_loose(this.tracks), _step2; !(_step2 = _iterator2()).done;){
-                var track1 = _step2.value;
-                for(var _iterator3 = _create_for_of_iterator_helper_loose(track1.getClips()), _step3; !(_step3 = _iterator3()).done;){
-                    var clip1 = _step3.value;
-                    clip1.playable.onPlayablePlay();
+    };
+    _proto.createGeometry = function createGeometry(mode) {
+        var 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)
                 }
-            }
-        }
-        // 判断动画是否结束
-        var ended;
-        if (VFXItem.isParticle(this.item)) {
-            ended = this.item.isEnded(now) && this.item.content.destoryed;
-        } else {
-            ended = this.item.isEnded(now);
+            },
+            indices: {
+                data: new Uint16Array(0),
+                releasable: true
+            },
+            mode: mode,
+            maxVertex: maxVertex
+        });
+    };
+    _proto.createMaterial = function createMaterial(renderInfo, count) {
+        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
+        var materialProps = {
+            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
+        };
+        this.preMultiAlpha = getPreMultiAlpha(blending);
+        var material = Material.create(this.engine, materialProps);
+        var states = {
+            side: side,
+            blending: true,
+            blendMode: blending,
+            mask: mask,
+            maskMode: 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 (ended) {
-            var endBehavior = this.item.endBehavior;
-            if (!this.item.ended) {
-                this.item.ended = true;
-                this.item.onEnd();
-                if (endBehavior === ItemEndBehavior.destroy) {
-                    for(var _iterator4 = _create_for_of_iterator_helper_loose(this.tracks), _step4; !(_step4 = _iterator4()).done;){
-                        var track2 = _step4.value;
-                        for(var _iterator5 = _create_for_of_iterator_helper_loose(track2.getClips()), _step5; !(_step5 = _iterator5()).done;){
-                            var clip2 = _step5.value;
-                            clip2.playable.onPlayableDestroy();
-                        }
-                    }
-                    this.item.delaying = true;
-                    if (!this.item.reusable && !this.reusable) {
-                        this.item.dispose();
-                        return;
-                    }
-                }
-            }
+        if (!material.hasUniform("_TexOffset")) {
+            material.setVector4("_TexOffset", new Vector4());
         }
-        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
-        // 在生命周期内更新动画
-        if (!this.item.delaying) {
-            var lifetime = this.time / this.item.duration;
-            this.item.lifetime = lifetime;
-            for(var _iterator6 = _create_for_of_iterator_helper_loose(this.tracks), _step6; !(_step6 = _iterator6()).done;){
-                var track3 = _step6.value;
-                for(var _iterator7 = _create_for_of_iterator_helper_loose(track3.getClips()), _step7; !(_step7 = _iterator7()).done;){
-                    var clip3 = _step7.value;
-                    clip3.playable.setTime(this.time);
-                }
-            }
-            this.playableGraph.evaluate(dt);
+        if (!material.hasUniform("_TexParams")) {
+            material.setVector4("_TexParams", new Vector4());
         }
+        return material;
     };
-    // time 单位秒
-    _proto.setTime = function setTime(time) {
-        this.time = time;
-    };
-    _proto.getTime = function getTime() {
-        return this.time;
-    };
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.options.start;
-        var duration = this.options.duration;
-        if (localTime - duration > 0.001) {
-            if (this.options.endBehavior === END_BEHAVIOR_RESTART) {
-                localTime = localTime % duration;
-            } else if (this.options.endBehavior === END_BEHAVIOR_FREEZE) {
-                localTime = Math.min(duration, localTime);
+    _proto.getItemGeometryData = function getItemGeometryData(item, aIndex) {
+        var splits = item.splits, renderer = item.renderer, textureSheetAnimation = item.textureSheetAnimation;
+        var sx = 1, sy = 1;
+        if (renderer.shape) {
+            var _renderer_shape = renderer.shape, index = _renderer_shape.index, aPoint = _renderer_shape.aPoint;
+            var point = new Float32Array(aPoint);
+            var position = [];
+            var atlasOffset = [];
+            for(var 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: index,
+                atlasOffset: atlasOffset
+            };
         }
-        return localTime;
-    };
-    _proto.createTrack = function createTrack(classConstructor, name) {
-        var 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;
-    };
-    _proto.getTracks = function getTracks() {
-        return this.tracks;
-    };
-    _proto.findTrack = function findTrack(name) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
-            var track = _step.value;
-            if (track.name === name) {
-                return track;
+        var originData = [
+            -.5,
+            .5,
+            -.5,
+            -.5,
+            .5,
+            .5,
+            .5,
+            -.5
+        ];
+        var atlasOffset1 = [];
+        var index1 = [];
+        var col = 2;
+        var row = 2;
+        if (splits.length === 1) {
+            col = 1;
+            row = 1;
+        }
+        var position1 = [];
+        for(var x = 0; x < col; x++){
+            for(var y = 0; y < row; y++){
+                var base = (y * 2 + x) * 4;
+                // @ts-expect-error
+                var split = textureSheetAnimation ? [
+                    0,
+                    0,
+                    1,
+                    1,
+                    splits[0][4]
+                ] : splits[y * 2 + x];
+                var texOffset = split[4] ? [
+                    0,
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1
+                ] : [
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ];
+                var dw = ((x + x + 1) / col - 1) / 2;
+                var dh = ((y + y + 1) / row - 1) / 2;
+                var tox = split[0];
+                var toy = split[1];
+                var tsx = split[4] ? split[3] : split[2];
+                var tsy = split[4] ? split[2] : split[3];
+                var 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
+                ];
+                atlasOffset1.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);
+                position1.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);
+                index1.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
             }
         }
+        this.geometry.setAttributeData("aPos", new Float32Array(position1));
+        return {
+            index: index1,
+            atlasOffset: atlasOffset1
+        };
     };
-    _proto.rebuildGraph = function rebuildGraph() {
-        this.playableGraph = new PlayableGraph();
-        this.compileTracks(this.playableGraph);
+    _proto.getTextures = function getTextures() {
+        var ret = [];
+        var tex = this.renderer.texture;
+        if (tex) {
+            ret.push(tex);
+        }
+        return ret;
     };
-    _proto.compileTracks = function compileTracks(graph) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
-            var track = _step.value;
-            var trackMixPlayable = track.createPlayable();
-            var trackOutput = track.createOutput();
-            graph.addOutput(trackOutput);
-            trackOutput.setSourcePlayeble(trackMixPlayable);
+    /**
+   * 获取图层包围盒的类型和世界坐标
+   * @returns
+   */ _proto.getBoundingBox = function getBoundingBox() {
+        if (!this.item) {
+            return;
         }
+        var worldMatrix = this.transform.getWorldMatrix();
+        var triangles = trianglesFromRect(Vector3.ZERO, 0.5 * this.transform.size.x, 0.5 * this.transform.size.y);
+        triangles.forEach(function(triangle) {
+            worldMatrix.transformPoint(triangle.p0);
+            worldMatrix.transformPoint(triangle.p1);
+            worldMatrix.transformPoint(triangle.p2);
+        });
+        return {
+            type: HitTestType.triangle,
+            area: triangles
+        };
     };
+    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
     _proto.fromData = function fromData(data) {
-        ItemBehaviour.prototype.fromData.call(this, 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;
-        var activationTrack = this.createTrack(Track, "ActivationTrack");
-        activationTrack.createClip(ActivationPlayable, "ActivationTimelineClip");
-        //@ts-expect-error
-        if (data.tracks) {
+        RendererComponent.prototype.fromData.call(this, data);
+        var interaction = data.interaction, options = data.options, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex;
+        var renderer = data.renderer;
+        if (!renderer) {
             //@ts-expect-error
-            var tracks = data.tracks;
-            for(var _iterator = _create_for_of_iterator_helper_loose(tracks), _step; !(_step = _iterator()).done;){
-                var track = _step.value;
-                var newTrack = this.createTrack(Track);
-                for(var _iterator1 = _create_for_of_iterator_helper_loose(track.clips), _step1; !(_step1 = _iterator1()).done;){
-                    var clipAsset = _step1.value;
-                    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;
-                    }
-                }
-            }
+            renderer = {};
         }
-    };
-    _proto.toData = function toData() {
-        ItemBehaviour.prototype.toData.call(this);
-    };
-    return TimelineComponent;
-}(ItemBehaviour);
-__decorate([
-    serialize()
-], TimelineComponent.prototype, "time", void 0);
-
-var singleSplits = [
-    [
-        0,
-        0,
-        1,
-        1,
-        undefined
-    ]
-];
-var tempColor = [
-    1,
-    1,
-    1,
-    1
-];
-var seed$3 = 0;
-var SpriteColorPlayable = /*#__PURE__*/ function(Playable) {
-    _inherits(SpriteColorPlayable, Playable);
-    function SpriteColorPlayable() {
-        var _this;
-        _this = Playable.apply(this, arguments) || this;
-        _this.renderColor = [
+        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);
+        var geometry = this.createGeometry(glContext.TRIANGLES);
+        var material = this.createMaterial(this.renderInfo, 2);
+        this.worldMatrix = Matrix4.fromIdentity();
+        this.material = material;
+        this.geometry = geometry;
+        this.name = "MSprite" + seed$3++;
+        var startColor = options.startColor || [
             1,
             1,
             1,
             1
         ];
-        return _this;
-    }
-    var _proto = SpriteColorPlayable.prototype;
-    _proto.onPlayablePlay = function onPlayablePlay() {
-        this.spriteMaterial = this.bindingItem.getComponent(SpriteComponent).material;
-    };
-    _proto.processFrame = function processFrame(dt) {
-        var colorInc = vecFill(tempColor, 1);
-        var colorChanged;
-        var life = this.time / this.bindingItem.duration;
-        var opacityOverLifetime = this.opacityOverLifetime;
-        var 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);
-        }
-    };
-    _proto.fromData = function fromData(clipData) {
-        this.clipData = clipData;
-        var 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]);
-            }
-        }
-        this.startColor = clipData.startColor || [
-            1,
-            1,
+        this.material.setVector4("_Color", new Vector4().setFromArray(startColor));
+        this.material.setVector4("_TexOffset", new Vector4().setFromArray([
+            0,
+            0,
             1,
             1
-        ];
-        return this;
+        ]));
+        this.setItem();
     };
-    return SpriteColorPlayable;
-}(Playable);
-var SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
-    _inherits(SpriteComponent, RendererComponent);
-    function SpriteComponent(engine, props) {
-        var _this;
-        _this = RendererComponent.call(this, engine) || this;
-        _this.color = [
-            1,
-            1,
-            1,
-            1
-        ];
-        _this.visible = true;
-        _this.getHitTestParams = function(force) {
-            var ui = _this.interaction;
-            if (force || ui) {
-                var 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
-                    };
-                }
-            }
+    _proto.toData = function toData() {
+        RendererComponent.prototype.toData.call(this);
+    };
+    return SpriteComponent;
+}(RendererComponent);
+SpriteComponent = __decorate([
+    effectsClass(DataType.SpriteComponent)
+], SpriteComponent);
+
+var RUNTIME_ENV = "runtime_env";
+var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
+// 文本元素使用 offscreen canvas 绘制
+var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
+// 后处理配置相关
+var POST_PROCESS_SETTINGS = "post_process_settings";
+var config = {};
+function getConfig(name) {
+    return config[name];
+}
+function setConfig(name, value) {
+    return config[name] = value;
+}
+
+var Cone = /*#__PURE__*/ function() {
+    function Cone(props) {
+        var _this = this;
+        Object.keys(props).forEach(function(key) {
+            _this[key] = props[key];
+        });
+    }
+    var _proto = Cone.prototype;
+    _proto.generate = function generate(opt) {
+        var arc = getArcAngle(this.arc, this.arcMode, opt);
+        var a = arc * DEG2RAD;
+        var x = Math.cos(a) * this.radius;
+        var y = Math.sin(a) * this.radius;
+        var position = new Vector3(x, y, 0);
+        var l = Math.tan(this.angle * DEG2RAD);
+        var dir = position.clone().multiply(l);
+        // dir + [0,0,1]
+        dir.z += 1;
+        return {
+            position: position.multiply(random(0, 1)),
+            direction: dir.normalize()
         };
-        if (props) {
-            _this.fromData(props);
-        }
-        return _this;
+    };
+    return Cone;
+}();
+function getArcAngle(arc, arcMode, opt) {
+    if (arcMode === ShapeArcMode.RANDOM) {
+        arc = random(0, arc);
+    } else if (arcMode === ShapeArcMode.UNIDIRECTIONAL_CYCLE) {
+        var d = opt.index % (opt.total + 1);
+        arc = arc / opt.total * d;
+    } else if (arcMode === ShapeArcMode.BIDIRECTIONAL_CYCLE) {
+        var d1 = opt.index / (opt.total + 1);
+        var i = d1 - Math.floor(d1);
+        arc = arc * (Math.floor(d1) % 2 ? 1 - i : i);
+    } else if (arcMode === ShapeArcMode.UNIFORM_BURST) {
+        arc = arc * opt.burstIndex / opt.burstCount;
     }
-    var _proto = SpriteComponent.prototype;
-    /**
-   * 设置当前 Mesh 的可见性。
-   * @param visible - true：可见，false：不可见
-   */ _proto.setVisible = function setVisible(visible) {
-        this.visible = visible;
+    return arc;
+}
+
+var Circle = /*#__PURE__*/ function() {
+    function Circle(props) {
+        var _this = this;
+        Object.keys(props).forEach(function(key) {
+            _this[key] = props[key];
+        });
+    }
+    var _proto = Circle.prototype;
+    _proto.generate = function generate(opt) {
+        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        var direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
+        var radius = this.radius;
+        return {
+            direction: direction,
+            position: direction.clone().multiply(radius)
+        };
     };
-    /**
-   * 获取当前 Mesh 的可见性。
-   */ _proto.getVisible = function getVisible() {
-        return this.visible;
+    return Circle;
+}();
+var Rectangle = /*#__PURE__*/ function() {
+    function Rectangle(arg) {
+        this._d = (arg.width || 1) / 2;
+        this._h = (arg.height || 1) / 2;
+    }
+    var _proto = Rectangle.prototype;
+    _proto.generate = function generate(opt) {
+        var x = random(-this._d, this._d);
+        var y = random(-this._h, this._h);
+        return {
+            direction: new Vector3(0, 0, 1),
+            position: new Vector3(x, y, 0)
+        };
     };
-    /**
-   * 设置当前图层的颜色
-   * > Tips: 透明度也属于颜色的一部分，当有透明度/颜色 K 帧变化时，该 API 会失效
-   * @since 2.0.0
-   * @param color - 颜色值
-   */ _proto.setColor = function setColor(color) {
-        this.color = color;
-        this.material.setVector4("_Color", new Vector4().setFromArray(color));
+    return Rectangle;
+}();
+var RectangleEdge = /*#__PURE__*/ function() {
+    function RectangleEdge(arg) {
+        this._d = (arg.width || 1) / 2;
+        this._h = (arg.height || 1) / 2;
+        this.arcMode = arg.arcMode;
+        this.arc = arg.arc;
+    }
+    var _proto = RectangleEdge.prototype;
+    _proto.generate = function generate(opt) {
+        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        var direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
+        var w = this._d;
+        var h = this._h;
+        var r0 = Math.atan2(h, w);
+        var tan = Math.tan(arc);
+        var 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: direction,
+            position: position
+        };
     };
-    /**
-   * 设置当前 Mesh 的纹理
-   * @since 2.0.0
-   * @param texture - 纹理对象
-   */ _proto.setTexture = function setTexture(texture) {
-        this.renderer.texture = texture;
-        this.material.setTexture("uSampler0", texture);
+    return RectangleEdge;
+}();
+var Edge = /*#__PURE__*/ function() {
+    function Edge(args) {
+        // TODO: 为通过帧对比暂时使用老计算，修复粒子发射器直线宽度问题下面一行改为: this._d = args.width || 1 ;
+        this._d = (args.width || 1) / 2;
+        this.arcMode = args.arcMode;
+    }
+    var _proto = Edge.prototype;
+    _proto.generate = function generate(options) {
+        var 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)
+        };
     };
-    _proto.render = function render(renderer) {
-        if (!this.getVisible()) {
-            return;
-        }
-        var material = this.material;
-        var 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 Edge;
+}();
+
+var tempMat4$2 = new Matrix4();
+var Donut = /*#__PURE__*/ function() {
+    function Donut(props) {
+        var _this = this;
+        Object.keys(props).forEach(function(key) {
+            _this[key] = props[key];
+        });
+    }
+    var _proto = Donut.prototype;
+    _proto.generate = function generate(opt) {
+        var dradius = this.donutRadius;
+        var center = this.radius - dradius;
+        var angle = random(0, Math.PI * 2);
+        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        var rot = tempMat4$2.setFromRotationZ(arc);
+        var direction = new Vector3(Math.cos(angle), Math.sin(angle), 0);
+        var position = new Vector3(center + Math.cos(angle) * dradius, 0, Math.sin(angle) * dradius);
+        return {
+            direction: rot.transformNormal(direction),
+            position: rot.transformPoint(position)
+        };
     };
-    _proto.start = function start() {
-        this.priority = this.item.listIndex;
-        this.timelineComponent = this.item.getComponent(TimelineComponent);
-        this.item.getHitTestParams = this.getHitTestParams;
+    return Donut;
+}();
+
+var tempMat4$1 = new Matrix4();
+var Sphere = /*#__PURE__*/ function() {
+    function Sphere(props) {
+        var _this = this;
+        Object.keys(props).forEach(function(key) {
+            _this[key] = props[key];
+        });
+    }
+    var _proto = Sphere.prototype;
+    _proto.getHorizontalAngle = function getHorizontalAngle() {
+        return random(-90, 90);
     };
-    _proto.update = function update(dt) {
-        var time = this.timelineComponent.getTime();
-        var duration = this.item.duration;
-        var life = Math.min(Math.max(time / duration, 0.0), 1.0);
-        var ta = this.textureSheetAnimation;
-        if (ta) {
-            var total = ta.total || ta.row * ta.col;
-            var texRectX = 0;
-            var texRectY = 0;
-            var texRectW = 1;
-            var texRectH = 1;
-            var flip;
-            if (this.splits) {
-                var 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];
-                }
-            }
-            var 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;
-            }
-            var texOffset;
-            if (ta.animate) {
-                var frameIndex = Math.round(life * (total - 1));
-                var yIndex = Math.floor(frameIndex / ta.col);
-                var 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
-            ]);
-        }
-    };
-    _proto.onDestroy = function onDestroy() {
-        if (this.item && this.item.composition) {
-            this.item.composition.destroyTextures(this.getTextures());
-        }
-    };
-    _proto.getItemInitData = function getItemInitData(item, idx, pointStartIndex, textureIndex) {
-        var geoData = item.geoData;
-        if (!geoData) {
-            geoData = item.geoData = this.getItemGeometryData(item, idx);
-        }
-        var index = geoData.index;
-        var idxCount = index.length;
-        // @ts-expect-error
-        var indexData = this.wireframe ? new Uint8Array([
-            0,
-            1,
-            1,
-            3,
-            2,
-            3,
-            2,
-            0
-        ]) : new index.constructor(idxCount);
-        if (!this.wireframe) {
-            for(var i = 0; i < idxCount; i++){
-                indexData[i] = pointStartIndex + index[i];
-            }
-        }
+    _proto.generate = function generate(opt) {
+        var rz = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
+        var rh = this.getHorizontalAngle() * DEG2RAD;
+        var radius = this.radius;
+        var point = new Vector3(Math.cos(rh), 0, Math.sin(rh));
+        var mat4 = tempMat4$1.setFromRotationZ(rz);
+        var p = mat4.transformNormal(point);
         return {
-            atlasOffset: geoData.atlasOffset,
-            index: indexData
-        };
-    };
-    _proto.setItem = function setItem() {
-        var textures = [];
-        var texture = this.renderer.texture;
-        if (texture) {
-            addItem(textures, texture);
-        }
-        texture = this.renderer.texture;
-        var textureIndex = texture ? textures.indexOf(texture) : -1;
-        var data = this.getItemInitData(this, 0, 0, textureIndex);
-        var renderer = this.renderer;
-        var texParams = this.material.getVector4("_TexParams");
-        texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
-        texParams.y = +this.preMultiAlpha;
-        texParams.z = renderer.renderMode;
-        var attributes = {
-            atlasOffset: new Float32Array(data.atlasOffset.length),
-            index: new Uint16Array(data.index.length)
+            position: p.clone().multiply(radius),
+            direction: p
         };
-        attributes.atlasOffset.set(data.atlasOffset);
-        attributes.index.set(data.index);
-        var _this = this, material = _this.material, geometry = _this.geometry;
-        var indexData = attributes.index;
-        geometry.setIndexData(indexData);
-        geometry.setAttributeData("atlasOffset", attributes.atlasOffset);
-        geometry.setDrawCount(data.index.length);
-        for(var i = 0; i < textures.length; i++){
-            var texture1 = textures[i];
-            material.setTexture("uSampler" + i, texture1);
-        }
-        // FIXME: 内存泄漏的临时方案，后面再调整
-        var emptyTexture = this.emptyTexture;
-        for(var k = textures.length; k < maxSpriteMeshItemCount; k++){
-            material.setTexture("uSampler" + k, emptyTexture);
-        }
     };
-    _proto.createGeometry = function createGeometry(mode) {
-        var 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: mode,
-            maxVertex: maxVertex
-        });
+    return Sphere;
+}();
+var Hemisphere = /*#__PURE__*/ function(Sphere) {
+    _inherits(Hemisphere, Sphere);
+    function Hemisphere() {
+        return Sphere.apply(this, arguments);
+    }
+    var _proto = Hemisphere.prototype;
+    _proto.getHorizontalAngle = function getHorizontalAngle() {
+        return random(0, 90);
     };
-    _proto.createMaterial = function createMaterial(renderInfo, count) {
-        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
-        var materialProps = {
-            shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
+    return Hemisphere;
+}(Sphere);
+
+var TextureShape = /*#__PURE__*/ function() {
+    function TextureShape(arg) {
+        var detail = arg.detail || {
+            anchors: [
+                0.5,
+                0.5
+            ],
+            block: [
+                0,
+                0
+            ]
         };
-        this.preMultiAlpha = getPreMultiAlpha(blending);
-        var material = Material.create(this.engine, materialProps);
-        var states = {
-            side: side,
-            blending: true,
-            blendMode: blending,
-            mask: mask,
-            maskMode: maskMode,
-            depthTest: true,
-            depthMask: occlusion
+        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);
+    }
+    var _proto = TextureShape.prototype;
+    _proto.generate = function generate(opt) {
+        var anchors = this.anchors;
+        var pointCount = anchors.length / 2 - 1;
+        var index = Math.floor(getArcAngle(pointCount, this.arcMode, opt));
+        var pointX = (anchors[index * 2] + this.block[0] * this.random * Math.random()) % 1 - 0.5;
+        var pointY = (anchors[index * 2 + 1] + this.block[1] * this.random * Math.random()) % 1 - 0.5;
+        var dir = new Vector3(pointX, pointY, 0);
+        return {
+            position: new Vector3(pointX * this.width, pointY * this.height, 0),
+            direction: dir.normalize()
         };
-        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;
     };
-    _proto.getItemGeometryData = function getItemGeometryData(item, aIndex) {
-        var splits = item.splits, renderer = item.renderer, textureSheetAnimation = item.textureSheetAnimation;
-        var sx = 1, sy = 1;
-        if (renderer.shape) {
-            var _renderer_shape = renderer.shape, index = _renderer_shape.index, aPoint = _renderer_shape.aPoint;
-            var point = new Float32Array(aPoint);
-            var position = [];
-            var atlasOffset = [];
-            for(var 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: index,
-                atlasOffset: atlasOffset
-            };
-        }
-        var originData = [
-            -.5,
-            .5,
-            -.5,
-            -.5,
-            .5,
-            .5,
-            .5,
-            -.5
-        ];
-        var atlasOffset1 = [];
-        var index1 = [];
-        var col = 2;
-        var row = 2;
-        if (splits.length === 1) {
-            col = 1;
-            row = 1;
-        }
-        var position1 = [];
-        for(var x = 0; x < col; x++){
-            for(var y = 0; y < row; y++){
-                var base = (y * 2 + x) * 4;
-                // @ts-expect-error
-                var split = textureSheetAnimation ? [
-                    0,
-                    0,
-                    1,
-                    1,
-                    splits[0][4]
-                ] : splits[y * 2 + x];
-                var texOffset = split[4] ? [
-                    0,
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1
-                ] : [
-                    0,
-                    1,
-                    0,
-                    0,
-                    1,
-                    1,
-                    1,
-                    0
-                ];
-                var dw = ((x + x + 1) / col - 1) / 2;
-                var dh = ((y + y + 1) / row - 1) / 2;
-                var tox = split[0];
-                var toy = split[1];
-                var tsx = split[4] ? split[3] : split[2];
-                var tsy = split[4] ? split[2] : split[3];
-                var 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
-                ];
-                atlasOffset1.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);
-                position1.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);
-                index1.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
-            }
-        }
-        this.geometry.setAttributeData("aPos", new Float32Array(position1));
-        return {
-            index: index1,
-            atlasOffset: atlasOffset1
-        };
-    };
-    _proto.getTextures = function getTextures() {
-        var ret = [];
-        var tex = this.renderer.texture;
-        if (tex) {
-            ret.push(tex);
-        }
-        return ret;
-    };
-    /**
-   * 获取图层包围盒的类型和世界坐标
-   * @returns
-   */ _proto.getBoundingBox = function getBoundingBox() {
-        if (!this.item) {
-            return;
-        }
-        var worldMatrix = this.transform.getWorldMatrix();
-        var triangles = trianglesFromRect(Vector3.ZERO, 1 / 2, 1 / 2);
-        triangles.forEach(function(triangle) {
-            worldMatrix.transformPoint(triangle.p0);
-            worldMatrix.transformPoint(triangle.p1);
-            worldMatrix.transformPoint(triangle.p2);
-        });
+    return TextureShape;
+}();
+
+var ShapeNone = /*#__PURE__*/ function() {
+    function ShapeNone() {}
+    var _proto = ShapeNone.prototype;
+    _proto.generate = function generate() {
         return {
-            type: HitTestType.triangle,
-            area: triangles
+            position: new Vector3(),
+            direction: new Vector3()
         };
     };
-    // TODO: [1.31] @十弦 https://github.com/galacean/effects-runtime/commit/fe8736540b9a461d8e96658f4d755ff8089a263b#diff-a3618f4527c5fe6e842f20d67d5c82984568502c6bf6fdfcbd24f69e2894ca90
-    _proto.fromData = function fromData(data) {
-        RendererComponent.prototype.fromData.call(this, data);
-        var interaction = data.interaction, options = data.options, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex;
-        var 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
-        };
-        this.emptyTexture = this.engine.emptyTexture;
-        this.splits = data.splits || singleSplits;
-        this.textureSheetAnimation = data.textureSheetAnimation;
-        this.cachePrefix = "-";
-        this.renderInfo = getImageItemRenderInfo(this);
-        var geometry = this.createGeometry(glContext.TRIANGLES);
-        var material = this.createMaterial(this.renderInfo, 2);
-        this.worldMatrix = Matrix4.fromIdentity();
-        this.material = material;
-        this.geometry = geometry;
-        this.name = "MSprite" + seed$3++;
-        var startColor = options.startColor || [
-            1,
-            1,
-            1,
-            1
-        ];
-        this.material.setVector4("_Color", new Vector4().setFromArray(startColor));
-        this.material.setVector4("_TexOffset", new Vector4().setFromArray([
+    return ShapeNone;
+}();
+var _obj$3;
+var map = (_obj$3 = {}, _obj$3[ShapeType.NONE] = ShapeNone, _obj$3[ShapeType.CONE] = Cone, _obj$3[ShapeType.SPHERE] = Sphere, _obj$3[ShapeType.HEMISPHERE] = Hemisphere, _obj$3[ShapeType.CIRCLE] = Circle, _obj$3[ShapeType.DONUT] = Donut, _obj$3[ShapeType.RECTANGLE] = Rectangle, _obj$3[ShapeType.EDGE] = Edge, _obj$3[ShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$3[ShapeType.TEXTURE] = TextureShape, _obj$3);
+function createShape(shapeOptions) {
+    if (!shapeOptions) {
+        return new ShapeNone();
+    }
+    var options = _extends({
+        radius: 1,
+        arc: 360,
+        angle: 0,
+        arcMode: ShapeArcMode.RANDOM
+    }, shapeOptions);
+    var type = shapeOptions.type;
+    var Ctrl = map[type];
+    if (!Ctrl) {
+        throw Error("invalid shape:" + type);
+    }
+    var ctrl = new Ctrl(options);
+    if (type !== ShapeType.NONE) {
+        var alignSpeedDirection = shapeOptions.alignSpeedDirection, _shapeOptions_upDirection = shapeOptions.upDirection, upDirection = _shapeOptions_upDirection === void 0 ? [
             0,
             0,
-            1,
             1
-        ]));
-        this.setItem();
-    };
-    _proto.toData = function toData() {
-        RendererComponent.prototype.toData.call(this);
-    };
-    return SpriteComponent;
-}(RendererComponent);
-SpriteComponent = __decorate([
-    effectsClass(DataType.SpriteComponent)
-], SpriteComponent);
-
-var RUNTIME_ENV = "runtime_env";
-var RENDER_PREFER_LOOKUP_TEXTURE = "lookup_texture";
-// 文本元素使用 offscreen canvas 绘制
-var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
-// 后处理配置相关
-var POST_PROCESS_SETTINGS = "post_process_settings";
-var config = {};
-function getConfig(name) {
-    return config[name];
-}
-function setConfig(name, value) {
-    return config[name] = value;
+        ] : _shapeOptions_upDirection;
+        ctrl.alignSpeedDirection = alignSpeedDirection;
+        ctrl.upDirection = Vector3.fromArray(upDirection).normalize();
+    }
+    return ctrl;
 }
 
-var Cone = /*#__PURE__*/ function() {
-    function Cone(props) {
-        var _this = this;
-        Object.keys(props).forEach(function(key) {
-            _this[key] = props[key];
-        });
+// create a circular doubly linked list from polygon points in the specified winding order
+function linkedList(data, start, end, dim, clockwise) {
+    var i, last;
+    if (clockwise === signedArea(data, start, end, dim) > 0) {
+        for(i = start; i < end; i += dim)last = insertNode(i, data[i], data[i + 1], last);
+    } else {
+        for(i = end - dim; i >= start; i -= dim)last = insertNode(i, data[i], data[i + 1], last);
     }
-    var _proto = Cone.prototype;
-    _proto.generate = function generate(opt) {
-        var arc = getArcAngle(this.arc, this.arcMode, opt);
-        var a = arc * DEG2RAD;
-        var x = Math.cos(a) * this.radius;
-        var y = Math.sin(a) * this.radius;
-        var position = new Vector3(x, y, 0);
-        var l = Math.tan(this.angle * DEG2RAD);
-        var dir = position.clone().multiply(l);
-        // dir + [0,0,1]
-        dir.z += 1;
-        return {
-            position: position.multiply(random(0, 1)),
-            direction: dir.normalize()
-        };
-    };
-    return Cone;
-}();
-function getArcAngle(arc, arcMode, opt) {
-    if (arcMode === ShapeArcMode.RANDOM) {
-        arc = random(0, arc);
-    } else if (arcMode === ShapeArcMode.UNIDIRECTIONAL_CYCLE) {
-        var d = opt.index % (opt.total + 1);
-        arc = arc / opt.total * d;
-    } else if (arcMode === ShapeArcMode.BIDIRECTIONAL_CYCLE) {
-        var d1 = opt.index / (opt.total + 1);
-        var i = d1 - Math.floor(d1);
-        arc = arc * (Math.floor(d1) % 2 ? 1 - i : i);
-    } else if (arcMode === ShapeArcMode.UNIFORM_BURST) {
-        arc = arc * opt.burstIndex / opt.burstCount;
+    if (last && equals(last, last.next)) {
+        removeNode(last);
+        last = last.next;
     }
-    return arc;
-}
-
-var Circle = /*#__PURE__*/ function() {
-    function Circle(props) {
-        var _this = this;
-        Object.keys(props).forEach(function(key) {
-            _this[key] = props[key];
-        });
-    }
-    var _proto = Circle.prototype;
-    _proto.generate = function generate(opt) {
-        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        var direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
-        var radius = this.radius;
-        return {
-            direction: direction,
-            position: direction.clone().multiply(radius)
-        };
-    };
-    return Circle;
-}();
-var Rectangle = /*#__PURE__*/ function() {
-    function Rectangle(arg) {
-        this._d = (arg.width || 1) / 2;
-        this._h = (arg.height || 1) / 2;
-    }
-    var _proto = Rectangle.prototype;
-    _proto.generate = function generate(opt) {
-        var x = random(-this._d, this._d);
-        var y = random(-this._h, this._h);
-        return {
-            direction: new Vector3(0, 0, 1),
-            position: new Vector3(x, y, 0)
-        };
-    };
-    return Rectangle;
-}();
-var RectangleEdge = /*#__PURE__*/ function() {
-    function RectangleEdge(arg) {
-        this._d = (arg.width || 1) / 2;
-        this._h = (arg.height || 1) / 2;
-        this.arcMode = arg.arcMode;
-        this.arc = arg.arc;
-    }
-    var _proto = RectangleEdge.prototype;
-    _proto.generate = function generate(opt) {
-        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        var direction = new Vector3(Math.cos(arc), Math.sin(arc), 0);
-        var w = this._d;
-        var h = this._h;
-        var r0 = Math.atan2(h, w);
-        var tan = Math.tan(arc);
-        var 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: direction,
-            position: position
-        };
-    };
-    return RectangleEdge;
-}();
-var Edge = /*#__PURE__*/ function() {
-    function Edge(args) {
-        // TODO: 为通过帧对比暂时使用老计算，修复粒子发射器直线宽度问题下面一行改为: this._d = args.width || 1 ;
-        this._d = (args.width || 1) / 2;
-        this.arcMode = args.arcMode;
-    }
-    var _proto = Edge.prototype;
-    _proto.generate = function generate(options) {
-        var 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)
-        };
-    };
-    return Edge;
-}();
-
-var tempMat4$2 = new Matrix4();
-var Donut = /*#__PURE__*/ function() {
-    function Donut(props) {
-        var _this = this;
-        Object.keys(props).forEach(function(key) {
-            _this[key] = props[key];
-        });
-    }
-    var _proto = Donut.prototype;
-    _proto.generate = function generate(opt) {
-        var dradius = this.donutRadius;
-        var center = this.radius - dradius;
-        var angle = random(0, Math.PI * 2);
-        var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        var rot = tempMat4$2.setFromRotationZ(arc);
-        var direction = new Vector3(Math.cos(angle), Math.sin(angle), 0);
-        var position = new Vector3(center + Math.cos(angle) * dradius, 0, Math.sin(angle) * dradius);
-        return {
-            direction: rot.transformNormal(direction),
-            position: rot.transformPoint(position)
-        };
-    };
-    return Donut;
-}();
-
-var tempMat4$1 = new Matrix4();
-var Sphere = /*#__PURE__*/ function() {
-    function Sphere(props) {
-        var _this = this;
-        Object.keys(props).forEach(function(key) {
-            _this[key] = props[key];
-        });
-    }
-    var _proto = Sphere.prototype;
-    _proto.getHorizontalAngle = function getHorizontalAngle() {
-        return random(-90, 90);
-    };
-    _proto.generate = function generate(opt) {
-        var rz = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
-        var rh = this.getHorizontalAngle() * DEG2RAD;
-        var radius = this.radius;
-        var point = new Vector3(Math.cos(rh), 0, Math.sin(rh));
-        var mat4 = tempMat4$1.setFromRotationZ(rz);
-        var p = mat4.transformNormal(point);
-        return {
-            position: p.clone().multiply(radius),
-            direction: p
-        };
-    };
-    return Sphere;
-}();
-var Hemisphere = /*#__PURE__*/ function(Sphere) {
-    _inherits(Hemisphere, Sphere);
-    function Hemisphere() {
-        return Sphere.apply(this, arguments);
-    }
-    var _proto = Hemisphere.prototype;
-    _proto.getHorizontalAngle = function getHorizontalAngle() {
-        return random(0, 90);
-    };
-    return Hemisphere;
-}(Sphere);
-
-var TextureShape = /*#__PURE__*/ function() {
-    function TextureShape(arg) {
-        var 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);
-    }
-    var _proto = TextureShape.prototype;
-    _proto.generate = function generate(opt) {
-        var anchors = this.anchors;
-        var pointCount = anchors.length / 2 - 1;
-        var index = Math.floor(getArcAngle(pointCount, this.arcMode, opt));
-        var pointX = (anchors[index * 2] + this.block[0] * this.random * Math.random()) % 1 - 0.5;
-        var pointY = (anchors[index * 2 + 1] + this.block[1] * this.random * Math.random()) % 1 - 0.5;
-        var dir = new Vector3(pointX, pointY, 0);
-        return {
-            position: new Vector3(pointX * this.width, pointY * this.height, 0),
-            direction: dir.normalize()
-        };
-    };
-    return TextureShape;
-}();
-
-var ShapeNone = /*#__PURE__*/ function() {
-    function ShapeNone() {}
-    var _proto = ShapeNone.prototype;
-    _proto.generate = function generate() {
-        return {
-            position: new Vector3(),
-            direction: new Vector3()
-        };
-    };
-    return ShapeNone;
-}();
-var _obj$3;
-var map = (_obj$3 = {}, _obj$3[ShapeType.NONE] = ShapeNone, _obj$3[ShapeType.CONE] = Cone, _obj$3[ShapeType.SPHERE] = Sphere, _obj$3[ShapeType.HEMISPHERE] = Hemisphere, _obj$3[ShapeType.CIRCLE] = Circle, _obj$3[ShapeType.DONUT] = Donut, _obj$3[ShapeType.RECTANGLE] = Rectangle, _obj$3[ShapeType.EDGE] = Edge, _obj$3[ShapeType.RECTANGLE_EDGE] = RectangleEdge, _obj$3[ShapeType.TEXTURE] = TextureShape, _obj$3);
-function createShape(shapeOptions) {
-    if (!shapeOptions) {
-        return new ShapeNone();
-    }
-    var options = _extends({
-        radius: 1,
-        arc: 360,
-        angle: 0,
-        arcMode: ShapeArcMode.RANDOM
-    }, shapeOptions);
-    var type = shapeOptions.type;
-    var Ctrl = map[type];
-    if (!Ctrl) {
-        throw Error("invalid shape:" + type);
-    }
-    var ctrl = new Ctrl(options);
-    if (type !== ShapeType.NONE) {
-        var alignSpeedDirection = shapeOptions.alignSpeedDirection, _shapeOptions_upDirection = shapeOptions.upDirection, upDirection = _shapeOptions_upDirection === void 0 ? [
-            0,
-            0,
-            1
-        ] : _shapeOptions_upDirection;
-        ctrl.alignSpeedDirection = alignSpeedDirection;
-        ctrl.upDirection = Vector3.fromArray(upDirection).normalize();
-    }
-    return ctrl;
-}
-
-// create a circular doubly linked list from polygon points in the specified winding order
-function linkedList(data, start, end, dim, clockwise) {
-    var i, last;
-    if (clockwise === signedArea(data, start, end, dim) > 0) {
-        for(i = start; i < end; i += dim)last = insertNode(i, data[i], data[i + 1], last);
-    } else {
-        for(i = end - dim; i >= start; i -= dim)last = insertNode(i, data[i], data[i + 1], last);
-    }
-    if (last && equals(last, last.next)) {
-        removeNode(last);
-        last = last.next;
-    }
-    return last;
+    return last;
 }
 // eliminate colinear or duplicate points
 function filterPoints(start, end) {
@@ -15216,274 +14909,889 @@ function earcut(data, holeIndices, dim, ib) {
     if (!outerNode || outerNode.next === outerNode.prev) {
         return triangles;
     }
-    var minX, minY, maxX, maxY, x, y, invSize;
-    if (hasHoles) {
-        outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+    var 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(var 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);
+    }
+    var 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) {
+    var p = start;
+    do {
+        var 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
+    var a = start;
+    do {
+        var b = a.next.next;
+        while(b !== a.prev){
+            if (a.i !== b.i && isValidDiagonal(a, b)) {
+                // split the polygon in two by the diagonal
+                var 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);
+}
+
+var POINT_INDEX = 2;
+function getGeometryTriangles(geometry, options) {
+    var s = geometry.s, p = geometry.p;
+    var segments = s[1];
+    var points = p[1];
+    var pointCount = 0;
+    for(var i = 0; i < segments.length; i++){
+        var segment = segments[i];
+        pointCount += segment.length - 1;
+    }
+    var pointData = new Float32Array(pointCount * SPRITE_VERTEX_STRIDE);
+    var _options_indexBase = options.indexBase, indexBase = _options_indexBase === void 0 ? 0 : _options_indexBase, uvTransform = options.uvTransform;
+    var index = 0;
+    var 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];
+    }
+    var temp = [
+        0,
+        0
+    ];
+    var angle = r === 0 ? 0 : -Math.PI / 2;
+    for(var i1 = 0; i1 < segments.length; i1++){
+        var segment1 = segments[i1];
+        var p0 = points[i1];
+        var p1 = points[i1 + 1] || points[0];
+        var keys = segment1;
+        var point = [
+            0,
+            0
+        ];
+        for(var j = 0; j < keys.length - 1; j++){
+            var key = keys[j];
+            getBezier2DValue(point, key, p0, p1, p0[4], p0[5], p1[2], p1[3]);
+            setPoint(point[0], point[1]);
+        }
+    }
+    var 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) {
+    var geometries = [];
+    // 该版本的单个形状数据可以包含多个形状，可以加个埋点，五福之后没有就可以下掉
+    if (shape.gs) {
+        shape.gs.forEach(function(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) {
+    var datas = [];
+    // 老数据兼容处理
+    var geometries = getGeometriesByShapeData(shape);
+    var indexBase = 0;
+    var aPoint = 0;
+    var index = 0;
+    for(var i = 0; i < geometries.length; i++){
+        var geometry = geometries[i];
+        var data = getGeometryTriangles(geometry, {
+            indexBase: indexBase,
+            uvTransform: uvTransform
+        });
+        indexBase += data.aPoint.length / 5;
+        datas.push(data);
+        aPoint += data.aPoint.length;
+        index += data.index.length;
+    }
+    if (datas.length === 1) {
+        return datas[0];
+    }
+    var aPointData = new Float32Array(aPoint);
+    var indexData = new Uint16Array(index);
+    // @ts-expect-error
+    for(var i1 = 0, pointIndex = 0, idx = 0; i1 < datas[i1]; i1++){
+        var data1 = datas[i1];
+        aPointData.set(data1.aPoint, pointIndex);
+        pointIndex += data1.aPoint.length;
+        indexData.set(data1.index, idx);
+        idx += data1.index.length;
+    }
+    return {
+        aPoint: aPointData,
+        index: indexData
+    };
+}
+function rotateVec2(out, vec2, angleInRad) {
+    var c = Math.cos(angleInRad);
+    var s = Math.sin(angleInRad);
+    var x = vec2[0];
+    var 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) {
+    var ddt = 1 - t;
+    var a = ddt * ddt * ddt;
+    var b = 3 * t * ddt * ddt;
+    var c = 3 * t * t * ddt;
+    var 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
+ */ var Track = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(Track, PlayableAsset);
+    function Track() {
+        var _this;
+        _this = PlayableAsset.apply(this, arguments) || this;
+        _this.clips = [];
+        _this.clipSeed = 0;
+        return _this;
+    }
+    var _proto = Track.prototype;
+    _proto.createOutput = function createOutput() {
+        var output = new PlayableOutput();
+        return output;
+    };
+    /**
+   * 重写该方法以创建自定义混合器
+   */ _proto.createMixerPlayable = function createMixerPlayable() {
+        return new Playable();
+    };
+    _proto.createPlayable = function createPlayable() {
+        var defaultMixPlayable = this.createMixerPlayable();
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            defaultMixPlayable.connect(clip.playable);
+        }
+        return defaultMixPlayable;
+    };
+    _proto.createClip = function createClip(classConstructor, name) {
+        var newClip = new TimelineClip();
+        newClip.playable = new classConstructor();
+        newClip.name = name ? name : "TimelineClip" + newClip.id;
+        this.addClip(newClip);
+        return newClip;
+    };
+    _proto.getClips = function getClips() {
+        return this.clips;
+    };
+    _proto.findClip = function findClip(name) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.clips), _step; !(_step = _iterator()).done;){
+            var clip = _step.value;
+            if (clip.name === name) {
+                return clip;
+            }
+        }
+    };
+    _proto.addClip = function addClip(clip) {
+        clip.playable.bindingItem = this.bindingItem;
+        clip.id = (this.clipSeed++).toString();
+        this.clips.push(clip);
+    };
+    return Track;
+}(PlayableAsset);
+/**
+ * @since 2.0.0
+ * @internal
+ */ var TimelineClip = function TimelineClip() {
+    this.start = 0;
+    this.duration = 0;
+};
+
+function _assert_this_initialized(self) {
+    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return self;
+}
+
+var AnimationStream = /*#__PURE__*/ function() {
+    function AnimationStream(playable) {
+        this.curveValues = {};
+        this.playable = playable;
+    }
+    var _proto = AnimationStream.prototype;
+    _proto.setCurveValue = function setCurveValue(componentType, propertyName, value) {
+        if (!this.findCurveValue(componentType, propertyName)) {
+            this.curveValues[componentType + propertyName] = {
+                componentType: componentType,
+                propertyName: propertyName,
+                value: value
+            };
+        } else {
+            this.curveValues[componentType + propertyName].value = value;
+        }
+        return this.curveValues[componentType + propertyName];
+    };
+    _proto.findCurveValue = function findCurveValue(componentType, propertyName) {
+        return this.curveValues[componentType + propertyName];
+    };
+    _proto.getInputStream = function getInputStream(index) {
+        var inputPlayable = this.playable.getInput(index);
+        if (_instanceof1(inputPlayable, AnimationPlayable)) {
+            return inputPlayable.animationStream;
+        }
+    };
+    return AnimationStream;
+}();
+
+var AnimationPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(AnimationPlayable, Playable);
+    function AnimationPlayable() {
+        var _this;
+        _this = Playable.call(this) || this;
+        _this.animationStream = new AnimationStream(_assert_this_initialized(_this));
+        return _this;
+    }
+    return AnimationPlayable;
+}(Playable);
+
+var tempRot$1 = new Euler();
+var tempSize$1 = new Vector3(1, 1, 1);
+var tempPos = new Vector3();
+/**
+ * @since 2.0.0
+ * @internal
+ */ var TransformAnimationPlayable = /*#__PURE__*/ function(AnimationPlayable) {
+    _inherits(TransformAnimationPlayable, AnimationPlayable);
+    function TransformAnimationPlayable() {
+        return AnimationPlayable.apply(this, arguments);
+    }
+    var _proto = TransformAnimationPlayable.prototype;
+    _proto.processFrame = function processFrame(dt) {
+        if (this.bindingItem.composition) {
+            this.sampleAnimation();
+        }
+    };
+    /**
+   * 应用时间轴K帧数据到对象
+   */ _proto.sampleAnimation = function sampleAnimation() {
+        var _this = this;
+        var duration = this.bindingItem.duration;
+        var 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;
+            }
+            var 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) {
+            var func = function(v) {
+                return _this.rotationOverLifetime.asRotation ? v.getValue(life) : v.getIntegrateValue(0, life, duration);
+            };
+            var incZ = func(this.rotationOverLifetime.z);
+            var 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;
+            var 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) {
+            var 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);
+        }
+    };
+    _proto.fromData = function fromData(data) {
+        var 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)
+        };
+        var positionOverLifetime = data.positionOverLifetime;
+        var rotationOverLifetime = data.rotationOverLifetime;
+        var 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);
+            }
+            var 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
+                };
+            }
+            var 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) {
+                var 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);
+    };
+    return TransformAnimationPlayable;
+}(AnimationPlayable);
+var TransformAnimationPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(TransformAnimationPlayableAsset, PlayableAsset);
+    function TransformAnimationPlayableAsset() {
+        return PlayableAsset.apply(this, arguments);
+    }
+    var _proto = TransformAnimationPlayableAsset.prototype;
+    _proto.createPlayable = function createPlayable() {
+        var transformAnimationPlayable = new TransformAnimationPlayable();
+        transformAnimationPlayable.fromData(this.transformAnimationData);
+        return transformAnimationPlayable;
+    };
+    _proto.fromData = function fromData(data) {
+        this.transformAnimationData = data;
+    };
+    return TransformAnimationPlayableAsset;
+}(PlayableAsset);
+/**
+ * @since 2.0.0
+ * @internal
+ */ var ActivationPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(ActivationPlayable, Playable);
+    function ActivationPlayable() {
+        return Playable.apply(this, arguments);
     }
-    // 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(var i = dim; i < outerLen; i += dim){
-            x = data[i];
-            y = data[i + 1];
-            if (x < minX) {
-                minX = x;
+    var _proto = ActivationPlayable.prototype;
+    _proto.onGraphStart = function onGraphStart() {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
+    };
+    _proto.onPlayablePlay = function onPlayablePlay() {
+        this.bindingItem.transform.setValid(true);
+        this.showRendererComponents();
+    };
+    _proto.onPlayableDestroy = function onPlayableDestroy() {
+        this.bindingItem.transform.setValid(false);
+        this.hideRendererComponents();
+    };
+    _proto.hideRendererComponents = function hideRendererComponents() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.bindingItem.rendererComponents), _step; !(_step = _iterator()).done;){
+            var rendererComponent = _step.value;
+            if (rendererComponent.enabled) {
+                rendererComponent.enabled = false;
             }
-            if (y < minY) {
-                minY = y;
+        }
+    };
+    _proto.showRendererComponents = function showRendererComponents() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.bindingItem.rendererComponents), _step; !(_step = _iterator()).done;){
+            var rendererComponent = _step.value;
+            if (!rendererComponent.enabled) {
+                rendererComponent.enabled = true;
             }
-            if (x > maxX) {
-                maxX = x;
+        }
+    };
+    return ActivationPlayable;
+}(Playable);
+var AnimationClip = /*#__PURE__*/ function(EffectsObject) {
+    _inherits(AnimationClip, EffectsObject);
+    function AnimationClip() {
+        var _this;
+        _this = EffectsObject.apply(this, arguments) || this;
+        _this.positionCurves = [];
+        _this.eulerCurves = [];
+        _this.scaleCurves = [];
+        _this.floatCurves = [];
+        return _this;
+    }
+    var _proto = AnimationClip.prototype;
+    _proto.sampleAnimation = function sampleAnimation(vfxItem, time) {
+        var duration = vfxItem.duration;
+        var life = time / duration;
+        life = life < 0 ? 0 : life > 1 ? 1 : life;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.positionCurves), _step; !(_step = _iterator()).done;){
+            var curve = _step.value;
+            var value = curve.keyFrames.getValue(life);
+            var target = this.findTarget(vfxItem, curve.path);
+            target == null ? void 0 : target.transform.setPosition(value.x, value.y, value.z);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.eulerCurves), _step1; !(_step1 = _iterator1()).done;){
+            var curve1 = _step1.value;
+            var value1 = curve1.keyFrames.getValue(life);
+            var target1 = this.findTarget(vfxItem, curve1.path);
+            target1 == null ? void 0 : target1.transform.setRotation(value1.x, value1.y, value1.z);
+        }
+        for(var _iterator2 = _create_for_of_iterator_helper_loose(this.scaleCurves), _step2; !(_step2 = _iterator2()).done;){
+            var curve2 = _step2.value;
+            var value2 = curve2.keyFrames.getValue(life);
+            var target2 = this.findTarget(vfxItem, curve2.path);
+            target2 == null ? void 0 : target2.transform.setScale(value2.x, value2.y, value2.z);
+        }
+    // TODO float curves 采样
+    };
+    _proto.fromData = function fromData(data) {
+        this.positionCurves.length = 0;
+        this.eulerCurves.length = 0;
+        this.scaleCurves.length = 0;
+        this.floatCurves.length = 0;
+        for(var _iterator = _create_for_of_iterator_helper_loose(data.positionCurves), _step; !(_step = _iterator()).done;){
+            var positionCurveData = _step.value;
+            var curve = {
+                path: positionCurveData.path,
+                keyFrames: createValueGetter(positionCurveData.keyFrames)
+            };
+            this.positionCurves.push(curve);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(data.eulerCurves), _step1; !(_step1 = _iterator1()).done;){
+            var eulerCurveData = _step1.value;
+            var curve1 = {
+                path: eulerCurveData.path,
+                keyFrames: createValueGetter(eulerCurveData.keyFrames)
+            };
+            this.eulerCurves.push(curve1);
+        }
+        for(var _iterator2 = _create_for_of_iterator_helper_loose(data.scaleCurves), _step2; !(_step2 = _iterator2()).done;){
+            var scaleCurvesData = _step2.value;
+            var curve2 = {
+                path: scaleCurvesData.path,
+                keyFrames: createValueGetter(scaleCurvesData.keyFrames)
+            };
+            this.scaleCurves.push(curve2);
+        }
+        for(var _iterator3 = _create_for_of_iterator_helper_loose(data.floatCurves), _step3; !(_step3 = _iterator3()).done;){
+            var floatCurveData = _step3.value;
+            var curve3 = {
+                path: floatCurveData.path,
+                keyFrames: createValueGetter(floatCurveData.keyFrames),
+                property: floatCurveData.property,
+                className: floatCurveData.className
+            };
+            this.floatCurves.push(curve3);
+        }
+    };
+    _proto.findTarget = function findTarget(vfxItem, path) {
+        var target = vfxItem;
+        for(var _iterator = _create_for_of_iterator_helper_loose(path), _step; !(_step = _iterator()).done;){
+            var name = _step.value;
+            var findTag = false;
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(target.children), _step1; !(_step1 = _iterator1()).done;){
+                var child = _step1.value;
+                if (child.name === name) {
+                    target = child;
+                    findTag = true;
+                    break;
+                }
             }
-            if (y > maxY) {
-                maxY = y;
+            if (!findTag) {
+                return;
             }
         }
-        // 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;
+        return target;
+    };
+    return AnimationClip;
+}(EffectsObject);
+var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
+    _inherits(AnimationClipPlayable, Playable);
+    function AnimationClipPlayable() {
+        return Playable.apply(this, arguments);
     }
-    // interlink polygon nodes in z-order
-    if (!pass && invSize) {
-        indexCurve(ear, minX, minY, invSize);
+    var _proto = AnimationClipPlayable.prototype;
+    _proto.processFrame = function processFrame(dt) {
+        if (this.bindingItem.composition) {
+            this.clip.sampleAnimation(this.bindingItem, this.time);
+        }
+    };
+    _proto.fromData = function fromData(data) {
+        this.clip = data.clip;
+    };
+    return AnimationClipPlayable;
+}(Playable);
+
+/**
+ * @since 2.0.0
+ * @internal
+ */ var TimelineComponent = /*#__PURE__*/ function(ItemBehaviour) {
+    _inherits(TimelineComponent, ItemBehaviour);
+    function TimelineComponent(engine) {
+        var _this;
+        _this = ItemBehaviour.call(this, engine) || this;
+        _this.reusable = false;
+        _this.timelineStarted = false;
+        _this.playableGraph = new PlayableGraph();
+        /**
+   * 元素动画已经播放的时间
+   */ _this.time = 0;
+        _this.tracks = [];
+        _this.trackSeed = 0;
+        return _this;
     }
-    var 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;
+    var _proto = TimelineComponent.prototype;
+    _proto.start = function start() {
+        // TODO TimelineClip 需要传入 start 和 duration 数据
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
+            var track = _step.value;
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getClips()), _step1; !(_step1 = _iterator1()).done;){
+                var clip = _step1.value;
+                clip.start = this.item.start;
+                clip.duration = this.item.duration;
+            }
         }
-        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);
+        this.compileTracks(this.playableGraph);
+    };
+    // TODO: [1.31] @十弦 vfx-item 下 onUpdate 的改动验证
+    _proto.update = function update(dt) {
+        if (this.item.stopped || !this.item.composition) {
+            return;
+        }
+        if (!this.timelineStarted) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
+                var track = _step.value;
+                for(var _iterator1 = _create_for_of_iterator_helper_loose(track.getClips()), _step1; !(_step1 = _iterator1()).done;){
+                    var clip = _step1.value;
+                    clip.playable.onGraphStart();
+                }
             }
-            break;
+            this.timelineStarted = true;
         }
-    }
-}
-// go through all polygon nodes and cure small local self-intersections
-function hackCureLocalIntersections(start, triangles, dim) {
-    var p = start;
-    do {
-        var 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;
+        var now = this.time;
+        // 判断动画是否开始
+        if (this.item.delaying && now >= 0 && now <= this.item.duration) {
+            this.item.delaying = false;
+            for(var _iterator2 = _create_for_of_iterator_helper_loose(this.tracks), _step2; !(_step2 = _iterator2()).done;){
+                var track1 = _step2.value;
+                for(var _iterator3 = _create_for_of_iterator_helper_loose(track1.getClips()), _step3; !(_step3 = _iterator3()).done;){
+                    var clip1 = _step3.value;
+                    clip1.playable.onPlayablePlay();
+                }
+            }
+        }
+        // 判断动画是否结束
+        var ended;
+        if (VFXItem.isParticle(this.item)) {
+            ended = this.item.isEnded(now) && this.item.content.destoryed;
+        } else {
+            ended = this.item.isEnded(now);
+        }
+        if (ended) {
+            var endBehavior = this.item.endBehavior;
+            if (!this.item.ended) {
+                this.item.ended = true;
+                this.item.onEnd();
+                if (endBehavior === ItemEndBehavior.destroy) {
+                    for(var _iterator4 = _create_for_of_iterator_helper_loose(this.tracks), _step4; !(_step4 = _iterator4()).done;){
+                        var track2 = _step4.value;
+                        for(var _iterator5 = _create_for_of_iterator_helper_loose(track2.getClips()), _step5; !(_step5 = _iterator5()).done;){
+                            var clip2 = _step5.value;
+                            clip2.playable.onPlayableDestroy();
+                        }
+                    }
+                    this.item.delaying = true;
+                    if (!this.item.reusable && !this.reusable) {
+                        this.item.dispose();
+                        return;
+                    }
+                }
+            }
+        }
+        // TODO: [1.31] @茂安 验证 https://github.com/galacean/effects-runtime/commits/main/packages/effects-core/src/vfx-item.ts
+        // 在生命周期内更新动画
+        if (!this.item.delaying) {
+            var lifetime = this.time / this.item.duration;
+            this.item.lifetime = lifetime;
+            for(var _iterator6 = _create_for_of_iterator_helper_loose(this.tracks), _step6; !(_step6 = _iterator6()).done;){
+                var track3 = _step6.value;
+                for(var _iterator7 = _create_for_of_iterator_helper_loose(track3.getClips()), _step7; !(_step7 = _iterator7()).done;){
+                    var clip3 = _step7.value;
+                    clip3.playable.setTime(this.time);
+                }
+            }
+            this.playableGraph.evaluate(dt);
+        }
+    };
+    // time 单位秒
+    _proto.setTime = function setTime(time) {
+        this.time = time;
+    };
+    _proto.getTime = function getTime() {
+        return this.time;
+    };
+    _proto.toLocalTime = function toLocalTime(time) {
+        var localTime = time - this.options.start;
+        var duration = this.options.duration;
+        if (localTime - duration > 0.001) {
+            if (this.options.endBehavior === END_BEHAVIOR_RESTART) {
+                localTime = localTime % duration;
+            } else if (this.options.endBehavior === END_BEHAVIOR_FREEZE) {
+                localTime = Math.min(duration, localTime);
+            }
         }
-        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
-    var a = start;
-    do {
-        var b = a.next.next;
-        while(b !== a.prev){
-            if (a.i !== b.i && isValidDiagonal(a, b)) {
-                // split the polygon in two by the diagonal
-                var 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;
+        return localTime;
+    };
+    _proto.createTrack = function createTrack(classConstructor, name) {
+        var 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;
+    };
+    _proto.getTracks = function getTracks() {
+        return this.tracks;
+    };
+    _proto.findTrack = function findTrack(name) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
+            var track = _step.value;
+            if (track.name === name) {
+                return track;
             }
-            b = b.next;
         }
-        a = a.next;
-    }while (a !== start);
-}
-
-var POINT_INDEX = 2;
-function getGeometryTriangles(geometry, options) {
-    var s = geometry.s, p = geometry.p;
-    var segments = s[1];
-    var points = p[1];
-    var pointCount = 0;
-    for(var i = 0; i < segments.length; i++){
-        var segment = segments[i];
-        pointCount += segment.length - 1;
-    }
-    var pointData = new Float32Array(pointCount * SPRITE_VERTEX_STRIDE);
-    var _options_indexBase = options.indexBase, indexBase = _options_indexBase === void 0 ? 0 : _options_indexBase, uvTransform = options.uvTransform;
-    var index = 0;
-    var 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];
-    }
-    var temp = [
-        0,
-        0
-    ];
-    var angle = r === 0 ? 0 : -Math.PI / 2;
-    for(var i1 = 0; i1 < segments.length; i1++){
-        var segment1 = segments[i1];
-        var p0 = points[i1];
-        var p1 = points[i1 + 1] || points[0];
-        var keys = segment1;
-        var point = [
-            0,
-            0
-        ];
-        for(var j = 0; j < keys.length - 1; j++){
-            var key = keys[j];
-            getBezier2DValue(point, key, p0, p1, p0[4], p0[5], p1[2], p1[3]);
-            setPoint(point[0], point[1]);
+    };
+    _proto.rebuildGraph = function rebuildGraph() {
+        this.playableGraph = new PlayableGraph();
+        this.compileTracks(this.playableGraph);
+    };
+    _proto.compileTracks = function compileTracks(graph) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.tracks), _step; !(_step = _iterator()).done;){
+            var track = _step.value;
+            var trackMixPlayable = track.createPlayable();
+            var trackOutput = track.createOutput();
+            graph.addOutput(trackOutput);
+            trackOutput.setSourcePlayeble(trackMixPlayable);
         }
-    }
-    var 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;
+    _proto.fromData = function fromData(data) {
+        ItemBehaviour.prototype.fromData.call(this, 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;
+        var activationTrack = this.createTrack(Track, "ActivationTrack");
+        activationTrack.createClip(ActivationPlayable, "ActivationTimelineClip");
+        //@ts-expect-error
+        if (data.tracks) {
+            //@ts-expect-error
+            var tracks = data.tracks;
+            for(var _iterator = _create_for_of_iterator_helper_loose(tracks), _step; !(_step = _iterator()).done;){
+                var track = _step.value;
+                var newTrack = this.createTrack(Track);
+                for(var _iterator1 = _create_for_of_iterator_helper_loose(track.clips), _step1; !(_step1 = _iterator1()).done;){
+                    var clipAsset = _step1.value;
+                    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;
+                    }
+                }
+            }
         }
-        index += POINT_INDEX;
-    }
-}
-/**
- * 根据新老版形状数据获取形状几何数据
- * @param shape 新老版形状数据
- */ function getGeometriesByShapeData(shape) {
-    var geometries = [];
-    // 该版本的单个形状数据可以包含多个形状，可以加个埋点，五福之后没有就可以下掉
-    if (shape.gs) {
-        shape.gs.forEach(function(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) {
-    var datas = [];
-    // 老数据兼容处理
-    var geometries = getGeometriesByShapeData(shape);
-    var indexBase = 0;
-    var aPoint = 0;
-    var index = 0;
-    for(var i = 0; i < geometries.length; i++){
-        var geometry = geometries[i];
-        var data = getGeometryTriangles(geometry, {
-            indexBase: indexBase,
-            uvTransform: uvTransform
-        });
-        indexBase += data.aPoint.length / 5;
-        datas.push(data);
-        aPoint += data.aPoint.length;
-        index += data.index.length;
-    }
-    if (datas.length === 1) {
-        return datas[0];
-    }
-    var aPointData = new Float32Array(aPoint);
-    var indexData = new Uint16Array(index);
-    // @ts-expect-error
-    for(var i1 = 0, pointIndex = 0, idx = 0; i1 < datas[i1]; i1++){
-        var data1 = datas[i1];
-        aPointData.set(data1.aPoint, pointIndex);
-        pointIndex += data1.aPoint.length;
-        indexData.set(data1.index, idx);
-        idx += data1.index.length;
-    }
-    return {
-        aPoint: aPointData,
-        index: indexData
     };
-}
-function rotateVec2(out, vec2, angleInRad) {
-    var c = Math.cos(angleInRad);
-    var s = Math.sin(angleInRad);
-    var x = vec2[0];
-    var 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) {
-    var ddt = 1 - t;
-    var a = ddt * ddt * ddt;
-    var b = 3 * t * ddt * ddt;
-    var c = 3 * t * t * ddt;
-    var 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;
-}
+    _proto.toData = function toData() {
+        ItemBehaviour.prototype.toData.call(this);
+    };
+    return TimelineComponent;
+}(ItemBehaviour);
+__decorate([
+    serialize()
+], TimelineComponent.prototype, "time", void 0);
 
 var Burst = /*#__PURE__*/ function() {
     function Burst(opts) {
@@ -20403,7 +20711,6 @@ function getStandardCameraContent(model) {
                 }
             }
         });
-        var itemGuidMap = {};
         for(var _iterator = _create_for_of_iterator_helper_loose(composition.items), _step; !(_step = _iterator()).done;){
             var item = _step.value;
             itemGuidMap[item.id] = generateGUID();
@@ -23213,17 +23520,6 @@ var tmpScale = new Vector3(1, 1, 1);
         })();
     };
     _create_class(Composition, [
-        {
-            key: "handleEnd",
-            set: /**
-   * 合成结束回调
-   * @param {(composition: Composition) => void} func
-   * @deprecated since 2.0 - use `onEnd` instead
-   */ function set(func) {
-                console.warn("The handleEnd property is deprecated. Use onEnd instead.");
-                this.onEnd = func;
-            }
-        },
         {
             key: "textures",
             get: /**
@@ -26021,8 +26317,8 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.11";
+var version = "2.0.0-alpha.12";
 logger.info("THREEJS plugin version: " + version);
 
-export { AbstractPlugin, ActivationPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, FrameBuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderBuffer, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, TransformAnimationPlayable, TransformAnimationPlayableAsset, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, assertExist, asserts, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, decimalEqual, deepClone, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, random, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version };
+export { AbstractPlugin, ActivationPlayable, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractBehavior, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteComponent, SpriteLoader, StaticValue, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextLoader, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineClip, TimelineComponent, Track, Transform, TransformAnimationPlayable, TransformAnimationPlayableAsset, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, assertExist, asserts, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMarcos, createShape, createVFXItem, createValueGetter, decimalEqual, deepClone, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAndroid, isArray, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, maxSpriteTextureCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, random, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxFragmentTextures, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map