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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.11
+ * Version: v2.0.0-alpha.12
  */
 
 'use strict';
@@ -3959,6 +3959,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;
@@ -4278,6 +4289,7 @@ var DataType;
     DataType["CameraController"] = "CameraController";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
+    DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
@@ -4311,6 +4323,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() {
 };
@@ -4331,6 +4397,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; },
@@ -4364,6 +4432,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
 });
 
@@ -7759,6 +7830,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) {
@@ -8228,6 +8303,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() {
@@ -8328,10 +8451,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]);
     }
@@ -8366,6 +8488,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];
@@ -9291,6 +9427,38 @@ function copy(target) {
         }
     }
 }
+function vertexFormatType2GLType(formatType) {
+    switch(formatType){
+        case VertexFormatType.Float32:
+            return WebGLRenderingContext["FLOAT"];
+        case VertexFormatType.Int16:
+            return WebGLRenderingContext["SHORT"];
+        case VertexFormatType.Int8:
+            return WebGLRenderingContext["BYTE"];
+        case VertexFormatType.UInt16:
+            return WebGLRenderingContext["UNSIGNED_SHORT"];
+        case VertexFormatType.UInt8:
+            return WebGLRenderingContext["UNSIGNED_BYTE"];
+        default:
+            return WebGLRenderingContext["FLOAT"];
+    }
+}
+function glType2VertexFormatType(webglType) {
+    switch(webglType){
+        case WebGLRenderingContext["FLOAT"]:
+            return VertexFormatType.Float32;
+        case WebGLRenderingContext["SHORT"]:
+            return VertexFormatType.Int16;
+        case WebGLRenderingContext["BYTE"]:
+            return VertexFormatType.Int8;
+        case WebGLRenderingContext["UNSIGNED_SHORT"]:
+            return VertexFormatType.UInt16;
+        case WebGLRenderingContext["UNSIGNED_BYTE"]:
+            return VertexFormatType.UInt8;
+        default:
+            return VertexFormatType.Float32;
+    }
+}
 
 exports.ShaderType = void 0;
 (function(ShaderType) {
@@ -10132,6 +10300,29 @@ function generateHalfFloatTexture(engine, data, width, height) {
         wrapT: glContext.CLAMP_TO_EDGE
     });
 }
+function generateWhiteTexture(engine) {
+    return Texture.create(engine, {
+        id: "whitetexture00000000000000000000",
+        data: {
+            width: 1,
+            height: 1,
+            data: new Uint8Array([
+                255,
+                255,
+                255,
+                255
+            ])
+        },
+        sourceType: exports.TextureSourceType.data,
+        type: glContext.UNSIGNED_BYTE,
+        format: glContext.RGBA,
+        internalFormat: glContext.RGBA,
+        wrapS: glContext.MIRRORED_REPEAT,
+        wrapT: glContext.MIRRORED_REPEAT,
+        minFilter: glContext.NEAREST,
+        magFilter: glContext.NEAREST
+    });
+}
 
 var HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
 var COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
@@ -11305,8 +11496,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);
@@ -11353,9 +11544,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;
                 }));
             }
@@ -11376,18 +11567,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;
             }
         }
     };
@@ -11397,16 +11588,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 相关参数都需要动态的修改
@@ -11431,7 +11621,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,
@@ -11446,7 +11636,7 @@ var seed$6 = 1;
             }, renderer);
             framebuffer.bind();
             framebuffer.unbind();
-            this.frameBuffer = framebuffer;
+            this.framebuffer = framebuffer;
         } else {
             this.attachments.length = 0;
         }
@@ -11454,8 +11644,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;
         }
@@ -11476,24 +11666,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
             };
         }
     };
@@ -11558,7 +11748,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
@@ -11688,9 +11878,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({
@@ -11760,8 +11950,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({
@@ -11775,7 +11965,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;
@@ -11830,8 +12020,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({
@@ -11900,11 +12090,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({
@@ -12424,7 +12614,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) {
@@ -12637,7 +12827,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;
@@ -12728,8 +12918,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);
@@ -12754,8 +12944,8 @@ var GlobalUniforms = function GlobalUniforms() {
     ;
 };
 
-var RenderBuffer = /*#__PURE__*/ function() {
-    function RenderBuffer(props) {
+var Renderbuffer = /*#__PURE__*/ function() {
+    function Renderbuffer(props) {
         this.size = [
             0,
             0
@@ -12767,7 +12957,7 @@ var RenderBuffer = /*#__PURE__*/ function() {
         this.format = format;
         this.attachment = attachment;
     }
-    _create_class(RenderBuffer, [
+    _create_class(Renderbuffer, [
         {
             key: "isDestroyed",
             get: function get() {
@@ -12775,7 +12965,7 @@ var RenderBuffer = /*#__PURE__*/ function() {
             }
         }
     ]);
-    return RenderBuffer;
+    return Renderbuffer;
 }();
 
 var isWebGL2Available = typeof WebGL2RenderingContext === "function";
@@ -12923,9 +13113,9 @@ exports.RenderTextureFormat = void 0;
 })(exports.RenderTextureFormat || (exports.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
     };
@@ -12953,7 +13143,7 @@ exports.RenderTextureFormat = void 0;
     _proto.dispose = function dispose(opt) {
     // OVERRIDE
     };
-    _create_class(FrameBuffer, [
+    _create_class(Framebuffer, [
         {
             key: "stencilStorage",
             get: function get() {
@@ -12969,7 +13159,7 @@ exports.RenderTextureFormat = void 0;
             }
         }
     ]);
-    return FrameBuffer;
+    return Framebuffer;
 }();
 
 var Renderer = /*#__PURE__*/ function() {
@@ -12984,11 +13174,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
     };
@@ -13045,7 +13235,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) {
@@ -13344,7 +13534,7 @@ exports.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);
@@ -13575,1330 +13765,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(exports.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);
+exports.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 < exports.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 (exports.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: exports.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(exports.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);
-exports.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);
+exports.SpriteComponent = __decorate([
+    effectsClass(DataType.SpriteComponent)
+], exports.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 < exports.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: exports.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);
-exports.SpriteComponent = __decorate([
-    effectsClass(DataType.SpriteComponent)
-], exports.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) {
@@ -15240,274 +14933,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 (exports.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) {
@@ -20427,7 +20735,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();
@@ -23237,17 +23544,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: /**
@@ -26045,11 +26341,13 @@ 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);
 
 exports.AbstractPlugin = AbstractPlugin;
 exports.ActivationPlayable = ActivationPlayable;
+exports.AnimationClip = AnimationClip;
+exports.AnimationClipPlayable = AnimationClipPlayable;
 exports.AssetLoader = AssetLoader;
 exports.AssetManager = AssetManager;
 exports.BYTES_TYPE_MAP = BYTES_TYPE_MAP;
@@ -26083,7 +26381,7 @@ exports.EffectsObject = EffectsObject;
 exports.Engine = Engine;
 exports.EventSystem = EventSystem;
 exports.Float16ArrayWrapper = Float16ArrayWrapper;
-exports.FrameBuffer = FrameBuffer;
+exports.Framebuffer = Framebuffer;
 exports.GPUCapability = GPUCapability;
 exports.Geometry = Geometry;
 exports.GlobalUniforms = GlobalUniforms;
@@ -26106,6 +26404,7 @@ exports.ParticleLoader = ParticleLoader;
 exports.ParticleMesh = ParticleMesh;
 exports.ParticleSystemRenderer = ParticleSystemRenderer;
 exports.PassTextureCache = PassTextureCache;
+exports.PathSegments = PathSegments;
 exports.PluginSystem = PluginSystem;
 exports.RENDER_PASS_NAME_PREFIX = RENDER_PASS_NAME_PREFIX;
 exports.RENDER_PREFER_LOOKUP_TEXTURE = RENDER_PREFER_LOOKUP_TEXTURE;
@@ -26113,13 +26412,13 @@ exports.RUNTIME_ENV = RUNTIME_ENV;
 exports.RandomSetValue = RandomSetValue;
 exports.RandomValue = RandomValue;
 exports.RandomVectorValue = RandomVectorValue;
-exports.RenderBuffer = RenderBuffer;
 exports.RenderFrame = RenderFrame;
 exports.RenderPass = RenderPass;
 exports.RenderPassPriorityNormal = RenderPassPriorityNormal;
 exports.RenderPassPriorityPostprocess = RenderPassPriorityPostprocess;
 exports.RenderPassPriorityPrepare = RenderPassPriorityPrepare;
 exports.RenderTargetHandle = RenderTargetHandle;
+exports.Renderbuffer = Renderbuffer;
 exports.Renderer = Renderer;
 exports.RendererComponent = RendererComponent;
 exports.SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0 = SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0;
@@ -26191,6 +26490,7 @@ exports.gaussianUpFrag = gaussianUpFrag;
 exports.generateEmptyTypedArray = generateEmptyTypedArray;
 exports.generateGUID = generateGUID;
 exports.generateHalfFloatTexture = generateHalfFloatTexture;
+exports.generateWhiteTexture = generateWhiteTexture;
 exports.getBackgroundImage = getBackgroundImage;
 exports.getColorFromGradientStops = getColorFromGradientStops;
 exports.getConfig = getConfig;
@@ -26211,6 +26511,7 @@ exports.getStandardItem = getStandardItem;
 exports.getStandardJSON = getStandardJSON;
 exports.getTextureSize = getTextureSize;
 exports.glContext = glContext;
+exports.glType2VertexFormatType = glType2VertexFormatType;
 exports.gpuTimer = gpuTimer;
 exports.imageDataFromColor = imageDataFromColor;
 exports.imageDataFromGradient = imageDataFromGradient;
@@ -26289,4 +26590,5 @@ exports.vecFill = vecFill;
 exports.vecMulCombine = vecMulCombine;
 exports.vecNormalize = vecNormalize;
 exports.version = version;
+exports.vertexFormatType2GLType = vertexFormatType2GLType;
 //# sourceMappingURL=index.js.map