@galacean/effects-threejs 2.2.6 → 2.3.0-alpha.1

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.2.6
+ * Version: v2.3.0-alpha.1
  */
 
 import * as THREE from 'three';
@@ -1020,6 +1020,26 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 
+/**
+ * JSON 版本
+ */ var JSONSceneVersion;
+(function(JSONSceneVersion) {
+    JSONSceneVersion["1_0"] = "1.0";
+    JSONSceneVersion["1_1"] = "1.1";
+    JSONSceneVersion["1_2"] = "1.2";
+    JSONSceneVersion["1_3"] = "1.3";
+    JSONSceneVersion["1_5"] = "1.5";
+    JSONSceneVersion["1_8"] = "1.8";
+    JSONSceneVersion["2_0"] = "2.0";
+    JSONSceneVersion["2_1"] = "2.1";
+    JSONSceneVersion["2_2"] = "2.2";
+    JSONSceneVersion["2_3"] = "2.3";
+    JSONSceneVersion["2_4"] = "2.4";
+    JSONSceneVersion["3_0"] = "3.0";
+    JSONSceneVersion["3_1"] = "3.1";
+    JSONSceneVersion["LATEST"] = "3.1";
+})(JSONSceneVersion || (JSONSceneVersion = {}));
+
 /*********************************************/ /*               元素属性参数类型               */ /*********************************************/ /**
  * 渲染等级
  */ var RenderLevel;
@@ -1325,8 +1345,12 @@ var RenderFace;
  */ var END_BEHAVIOR_DESTROY_CHILDREN = 6;
 var CAMERA_CLIP_MODE_VERTICAL = 1;
 var CAMERA_CLIP_MODE_NORMAL = 0;
-var MESSAGE_ITEM_PHRASE_BEGIN = 2;
-var MESSAGE_ITEM_PHRASE_END = 1;
+/**
+ * 消息开始
+ */ var MESSAGE_ITEM_PHRASE_BEGIN = 2;
+/**
+ * 消息结束
+ */ var MESSAGE_ITEM_PHRASE_END = 1;
 
 var CameraClipMode;
 (function(CameraClipMode) {
@@ -1400,6 +1424,9 @@ var CameraClipMode;
     /**
      * Vector4 曲线
      */ ValueType[ValueType["VECTOR4_CURVE"] = 25] = "VECTOR4_CURVE";
+    /**
+     * Vector2 曲线
+     */ ValueType[ValueType["VECTOR2_CURVE"] = 26] = "VECTOR2_CURVE";
 })(ValueType || (ValueType = {}));
 /**
  * 关键帧类型
@@ -1668,19 +1695,13 @@ var ShapePointType;
 var DataType;
 (function(DataType) {
     DataType["VFXItemData"] = "VFXItemData";
-    DataType["EffectComponent"] = "EffectComponent";
+    // Assets
     DataType["Material"] = "Material";
     DataType["Shader"] = "Shader";
-    DataType["SpriteComponent"] = "SpriteComponent";
-    DataType["ParticleSystem"] = "ParticleSystem";
-    DataType["InteractComponent"] = "InteractComponent";
-    DataType["CameraController"] = "CameraController";
-    DataType["PostProcessVolume"] = "PostProcessVolume";
     DataType["Geometry"] = "Geometry";
     DataType["Texture"] = "Texture";
     DataType["Image"] = "Image";
     DataType["AnimationClip"] = "AnimationClip";
-    DataType["TextComponent"] = "TextComponent";
     DataType["BinaryAsset"] = "BinaryAsset";
     // Timeline
     DataType["TrackAsset"] = "TrackAsset";
@@ -1692,6 +1713,7 @@ var DataType;
     DataType["SubCompositionTrack"] = "SubCompositionTrack";
     DataType["FloatPropertyTrack"] = "FloatPropertyTrack";
     DataType["ColorPropertyTrack"] = "ColorPropertyTrack";
+    DataType["Vector2PropertyTrack"] = "Vector2PropertyTrack";
     DataType["Vector4PropertyTrack"] = "Vector4PropertyTrack";
     DataType["TransformPlayableAsset"] = "TransformPlayableAsset";
     DataType["SpriteColorPlayableAsset"] = "SpriteColorPlayableAsset";
@@ -1699,6 +1721,9 @@ var DataType;
     DataType["SubCompositionPlayableAsset"] = "SubCompositionPlayableAsset";
     DataType["FloatPropertyPlayableAsset"] = "FloatPropertyPlayableAsset";
     DataType["ColorPropertyPlayableAsset"] = "ColorPropertyPlayableAsset";
+    DataType["Vector2PropertyPlayableAsset"] = "Vector2PropertyPlayableAsset";
+    DataType["Vector4PropertyPlayableAsset"] = "Vector4PropertyPlayableAsset";
+    // Components
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
     DataType["LightComponent"] = "LightComponent";
@@ -1712,6 +1737,13 @@ var DataType;
     DataType["RichTextComponent"] = "RichTextComponent";
     DataType["OrientationComponent"] = "OrientationComponent";
     DataType["ShapeComponent"] = "ShapeComponent";
+    DataType["SpriteComponent"] = "SpriteComponent";
+    DataType["ParticleSystem"] = "ParticleSystem";
+    DataType["InteractComponent"] = "InteractComponent";
+    DataType["CameraController"] = "CameraController";
+    DataType["PostProcessVolume"] = "PostProcessVolume";
+    DataType["EffectComponent"] = "EffectComponent";
+    DataType["TextComponent"] = "TextComponent";
     // Non-EffectObject
     DataType["TimelineClip"] = "TimelineClip";
 })(DataType || (DataType = {}));
@@ -1800,8 +1832,11 @@ var VertexBufferSemantic;
     VertexBufferSemantic["TangentBS3"] = "TANGENT_BS3";
 })(VertexBufferSemantic || (VertexBufferSemantic = {}));
 
+var LATEST_VERSION = JSONSceneVersion.LATEST;
+
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    LATEST_VERSION: LATEST_VERSION,
     get RenderLevel () { return RenderLevel; },
     get BlendingMode () { return BlendingMode; },
     get SideMode () { return SideMode; },
@@ -1829,6 +1864,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     MESSAGE_ITEM_PHRASE_END: MESSAGE_ITEM_PHRASE_END,
     get ValueType () { return ValueType; },
     get BezierKeyframeType () { return BezierKeyframeType; },
+    get JSONSceneVersion () { return JSONSceneVersion; },
     get EndBehavior () { return EndBehavior; },
     get ParentItemEndBehavior () { return ParentItemEndBehavior; },
     get ParticleInteractionBehavior () { return ParticleInteractionBehavior; },
@@ -5276,418 +5312,6 @@ Matrix4.tempVec1 = new Vector3();
 Matrix4.tempVec2 = new Vector3();
 Matrix4.tempMat0 = new Matrix4();
 
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-
-function _create_for_of_iterator_helper_loose(o, allowArrayLike) {
-    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-    if (it) return (it = it.call(o)).next.bind(it);
-    // Fallback for engines without symbol support
-    if (Array.isArray(o) || (it = _unsupported_iterable_to_array(o)) || allowArrayLike && o && typeof o.length === "number") {
-        if (it) o = it;
-        var i = 0;
-        return function() {
-            if (i >= o.length) return {
-                done: true
-            };
-            return {
-                done: false,
-                value: o[i++]
-            };
-        };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var ShaderCompileResultStatus;
-(function(ShaderCompileResultStatus) {
-    ShaderCompileResultStatus[ShaderCompileResultStatus["noShader"] = 0] = "noShader";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["success"] = 1] = "success";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["fail"] = 2] = "fail";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["compiling"] = 3] = "compiling";
-})(ShaderCompileResultStatus || (ShaderCompileResultStatus = {}));
-var GLSLVersion;
-(function(GLSLVersion) {
-    GLSLVersion["GLSL1"] = "100";
-    GLSLVersion["GLSL3"] = "300 es";
-})(GLSLVersion || (GLSLVersion = {}));
-var ShaderVariant = /*#__PURE__*/ function(EffectsObject) {
-    _inherits(ShaderVariant, EffectsObject);
-    function ShaderVariant(engine, source) {
-        var _this;
-        _this = EffectsObject.call(this, engine) || this;
-        _this.source = source;
-        return _this;
-    }
-    return ShaderVariant;
-}(EffectsObject);
-var Shader = /*#__PURE__*/ function(EffectsObject) {
-    _inherits(Shader, EffectsObject);
-    function Shader() {
-        return EffectsObject.apply(this, arguments);
-    }
-    var _proto = Shader.prototype;
-    _proto.createVariant = function createVariant(macros) {
-        var shaderMacros = [];
-        if (macros) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(macros)), _step; !(_step = _iterator()).done;){
-                var key = _step.value;
-                shaderMacros.push([
-                    key,
-                    macros[key]
-                ]);
-            }
-        }
-        var shaderVariant = this.engine.getShaderLibrary().createShader(this.shaderData, shaderMacros);
-        shaderVariant.shader = this;
-        return shaderVariant;
-    };
-    _proto.fromData = function fromData(data) {
-        EffectsObject.prototype.fromData.call(this, data);
-        this.shaderData = data;
-    };
-    return Shader;
-}(EffectsObject);
-Shader = __decorate([
-    effectsClass(DataType.Shader)
-], Shader);
-
-var EFFECTS_COPY_MESH_NAME = "effects-internal-copy";
-var COPY_MESH_SHADER_ID = "effects-internal-copy-mesh";
-var COPY_VERTEX_SHADER = "\nprecision highp float;\nattribute vec2 aPos;\nvarying vec2 vTex;\nvoid main(){\n    gl_Position = vec4(aPos,0.,1.0);\n    vTex = (aPos + vec2(1.0))/2.;\n}";
-var COPY_FRAGMENT_SHADER = "precision mediump float;\nvarying vec2 vTex;\n\n#ifdef DEPTH_TEXTURE\nuniform sampler2D uDepth;\n#extension GL_EXT_frag_depth : enable\n#endif\nvoid main(){\n    #ifdef DEPTH_TEXTURE\n    gl_FragDepthEXT = texture2D(uDepth,vTex).r;\n    #endif\n}\n";
-function createCopyShader(level, writeDepth) {
-    var webgl2 = level === 2;
-    return {
-        name: EFFECTS_COPY_MESH_NAME,
-        vertex: COPY_VERTEX_SHADER,
-        fragment: COPY_FRAGMENT_SHADER,
-        glslVersion: webgl2 ? GLSLVersion.GLSL3 : GLSLVersion.GLSL1,
-        macros: [
-            [
-                "DEPTH_TEXTURE",
-                !!writeDepth
-            ]
-        ],
-        // @ts-expect-error
-        cacheId: COPY_MESH_SHADER_ID + +writeDepth
-    };
-}
-
-/**
- * Helper class to create a WebGL Context
- *
- * @param canvas
- * @param glType
- * @param options
- * @returns
- */ function createGLContext(canvas, glType, options) {
-    if (glType === void 0) glType = "webgl";
-    var context;
-    if (glType === "webgl2") {
-        context = canvas.getContext("webgl2", options);
-        if (!context) {
-            console.debug("WebGL2 context retrieval failed, falling back to WebGL context.");
-        }
-    }
-    if (!context || glType === "webgl") {
-        context = canvas.getContext("webgl", options);
-    }
-    if (!context) {
-        throw new Error("This browser does not support WebGL or the WebGL version is incorrect. Please check your WebGL version.");
-    }
-    return context;
-}
-
-function gpuTimer(gl) {
-    var ext = gl.getExtension("EXT_disjoint_timer_query_webgl2");
-    if (ext) {
-        var query = gl.createQuery();
-        var getTime = /*#__PURE__*/ _async_to_generator(function() {
-            return __generator(this, function(_state) {
-                return [
-                    2,
-                    new Promise(function(resolve, reject) {
-                        if (query) {
-                            var available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
-                            var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
-                            if (available && !disjoint) {
-                                // See how much time the rendering of the object took in nanoseconds.
-                                var timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); // Do something useful with the time.  Note that care should be
-                                // taken to use all significant bits of the result, not just the
-                                // least significant 32 bits.
-                                resolve(timeElapsed / 1000 / 1000);
-                            }
-                            if (available || disjoint) {
-                                // Clean up the query object.
-                                gl.deleteQuery(query); // Don't re-enter this polling loop.
-                                query = null;
-                            }
-                            available !== null && query && window.setTimeout(function() {
-                                getTime().then(resolve).catch;
-                            }, 1);
-                        }
-                    })
-                ];
-            });
-        });
-        if (!query) {
-            return;
-        }
-        return {
-            begin: function() {
-                query && gl.beginQuery(ext.TIME_ELAPSED_EXT, query);
-            },
-            end: function() {
-                gl.endQuery(ext.TIME_ELAPSED_EXT);
-            },
-            getTime: getTime
-        };
-    }
-}
-
-var initErrors = [];
-// @ts-expect-error
-var glContext = {};
-if (!initErrors.length) {
-    initGLContext();
-}
-function initGLContext() {
-    // 重要：iOS 9/10 低版本需要拷贝 gl context 的 prototype，要不然会有属性值的缺失
-    if (typeof WebGL2RenderingContext === "function") {
-        copy(WebGL2RenderingContext);
-    } else if (typeof WebGLRenderingContext !== "undefined") {
-        copy(WebGLRenderingContext);
-        copy(WebGLRenderingContext.prototype);
-    } else {
-        initErrors.push(// iOS 16 lockdown mode
-        "iOS16 lockdown mode, WebGL Constants not in global");
-    }
-    if (!initErrors.length && !("HALF_FLOAT" in glContext)) {
-        // @ts-expect-error set default value
-        glContext["HALF_FLOAT"] = 5131;
-    }
-}
-function isWebGL2(gl) {
-    return typeof WebGL2RenderingContext !== "undefined" && gl.constructor.name === "WebGL2RenderingContext";
-}
-function copy(target) {
-    for(var name in target){
-        if (/^[A-Z_]/.test(name)) {
-            // @ts-expect-error safe to assign
-            glContext[name] = target[name];
-        }
-    }
-}
-function vertexFormatType2GLType(formatType) {
-    switch(formatType){
-        case VertexFormatType.Float32:
-            return WebGLRenderingContext["FLOAT"];
-        case VertexFormatType.Int16:
-            return WebGLRenderingContext["SHORT"];
-        case VertexFormatType.Int8:
-            return WebGLRenderingContext["BYTE"];
-        case VertexFormatType.UInt16:
-            return WebGLRenderingContext["UNSIGNED_SHORT"];
-        case VertexFormatType.UInt8:
-            return WebGLRenderingContext["UNSIGNED_BYTE"];
-        default:
-            return WebGLRenderingContext["FLOAT"];
-    }
-}
-function glType2VertexFormatType(webglType) {
-    switch(webglType){
-        case WebGLRenderingContext["FLOAT"]:
-            return VertexFormatType.Float32;
-        case WebGLRenderingContext["SHORT"]:
-            return VertexFormatType.Int16;
-        case WebGLRenderingContext["BYTE"]:
-            return VertexFormatType.Int8;
-        case WebGLRenderingContext["UNSIGNED_SHORT"]:
-            return VertexFormatType.UInt16;
-        case WebGLRenderingContext["UNSIGNED_BYTE"]:
-            return VertexFormatType.UInt8;
-        default:
-            return VertexFormatType.Float32;
-    }
-}
-
-var ShaderType;
-(function(ShaderType) {
-    ShaderType[ShaderType["vertex"] = 0] = "vertex";
-    ShaderType[ShaderType["fragment"] = 1] = "fragment";
-})(ShaderType || (ShaderType = {}));
-
-function valIfUndefined(val, def) {
-    if (val === undefined || val === null) {
-        return def;
-    }
-    return val;
-}
-function getPreMultiAlpha(blending) {
-    switch(blending){
-        case BlendingMode.ALPHA:
-            return 1;
-        case BlendingMode.ADD:
-            return 1;
-        case BlendingMode.SUBTRACTION:
-            return 1;
-        case BlendingMode.STRONG_LIGHT:
-            return 1;
-        case BlendingMode.WEAK_LIGHT:
-            return 1;
-        case BlendingMode.SUPERPOSITION:
-            return 2;
-        case BlendingMode.BRIGHTNESS:
-            return 3;
-        case BlendingMode.MULTIPLY:
-            return 0;
-        default:
-            // 处理undefined
-            return 1;
-    }
-}
-function setBlendMode(material, blendMode) {
-    switch(blendMode){
-        case undefined:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA,
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA
-            ];
-            break;
-        case BlendingMode.ALPHA:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA,
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA
-            ];
-            break;
-        case BlendingMode.ADD:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE,
-                glContext.ONE,
-                glContext.ONE
-            ];
-            break;
-        case BlendingMode.SUBTRACTION:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE,
-                glContext.ZERO,
-                glContext.ONE
-            ];
-            material.blendEquation = [
-                glContext.FUNC_REVERSE_SUBTRACT,
-                glContext.FUNC_REVERSE_SUBTRACT
-            ];
-            break;
-        case BlendingMode.SUPERPOSITION:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE,
-                glContext.ONE,
-                glContext.ONE
-            ];
-            break;
-        case BlendingMode.MULTIPLY:
-            material.blendFunction = [
-                glContext.DST_COLOR,
-                glContext.ONE_MINUS_SRC_ALPHA,
-                glContext.DST_COLOR,
-                glContext.ONE_MINUS_SRC_ALPHA
-            ];
-            break;
-        case BlendingMode.BRIGHTNESS:
-            material.blendFunction = [
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA,
-                glContext.ONE,
-                glContext.ONE_MINUS_SRC_ALPHA
-            ];
-            break;
-        case BlendingMode.STRONG_LIGHT:
-            material.blendFunction = [
-                glContext.DST_COLOR,
-                glContext.DST_ALPHA,
-                glContext.ZERO,
-                glContext.ONE
-            ];
-            break;
-        case BlendingMode.WEAK_LIGHT:
-            material.blendFunction = [
-                glContext.DST_COLOR,
-                glContext.ZERO,
-                glContext.ZERO,
-                glContext.ONE
-            ];
-            break;
-        default:
-            console.warn("BlendMode " + blendMode + " not in specification, please set blend params separately.");
-    }
-}
-function setSideMode(material, side) {
-    if (side === SideMode.DOUBLE) {
-        material.culling = false;
-    } else {
-        material.culling = true;
-        material.frontFace = glContext.CW;
-        material.cullFace = side === SideMode.BACK ? glContext.BACK : glContext.FRONT;
-    }
-}
-function setMaskMode(material, maskMode) {
-    switch(maskMode){
-        case undefined:
-            material.stencilTest = false;
-            break;
-        case MaskMode.MASK:
-            material.stencilTest = true;
-            material.stencilFunc = [
-                glContext.ALWAYS,
-                glContext.ALWAYS
-            ];
-            material.stencilOpZPass = [
-                glContext.REPLACE,
-                glContext.REPLACE
-            ];
-            break;
-        case MaskMode.OBSCURED:
-            material.stencilTest = true;
-            material.stencilFunc = [
-                glContext.EQUAL,
-                glContext.EQUAL
-            ];
-            break;
-        case MaskMode.REVERSE_OBSCURED:
-            material.stencilTest = true;
-            material.stencilFunc = [
-                glContext.NOTEQUAL,
-                glContext.NOTEQUAL
-            ];
-            break;
-        case MaskMode.NONE:
-            material.stencilTest = false;
-            break;
-        default:
-            console.warn("MaskMode " + maskMode + " not in specification, please set stencil params seperately.");
-    }
-}
-
 function _extends() {
     _extends = Object.assign || function assign(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -6098,7 +5722,12 @@ function _loadVideo() {
     });
     return _loadVideo.apply(this, arguments);
 }
-function loadMedia(url, loadFn) {
+/**
+ * 异步加载一个媒体文件
+ * @param url
+ * @param loadFn
+ * @returns
+ */ function loadMedia(url, loadFn) {
     return _loadMedia.apply(this, arguments);
 }
 function _loadMedia() {
@@ -6260,6 +5889,144 @@ function _loadMipmapImage() {
     return _loadMipmapImage.apply(this, arguments);
 }
 
+/**
+ * Helper class to create a WebGL Context
+ *
+ * @param canvas
+ * @param glType
+ * @param options
+ * @returns
+ */ function createGLContext(canvas, glType, options) {
+    if (glType === void 0) glType = "webgl";
+    var context;
+    if (glType === "webgl2") {
+        context = canvas.getContext("webgl2", options);
+        if (!context) {
+            console.debug("WebGL2 context retrieval failed, falling back to WebGL context.");
+        }
+    }
+    if (!context || glType === "webgl") {
+        context = canvas.getContext("webgl", options);
+    }
+    if (!context) {
+        throw new Error("This browser does not support WebGL or the WebGL version is incorrect. Please check your WebGL version.");
+    }
+    return context;
+}
+
+function gpuTimer(gl) {
+    var ext = gl.getExtension("EXT_disjoint_timer_query_webgl2");
+    if (ext) {
+        var query = gl.createQuery();
+        var getTime = /*#__PURE__*/ _async_to_generator(function() {
+            return __generator(this, function(_state) {
+                return [
+                    2,
+                    new Promise(function(resolve, reject) {
+                        if (query) {
+                            var available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+                            var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
+                            if (available && !disjoint) {
+                                // See how much time the rendering of the object took in nanoseconds.
+                                var timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); // Do something useful with the time.  Note that care should be
+                                // taken to use all significant bits of the result, not just the
+                                // least significant 32 bits.
+                                resolve(timeElapsed / 1000 / 1000);
+                            }
+                            if (available || disjoint) {
+                                // Clean up the query object.
+                                gl.deleteQuery(query); // Don't re-enter this polling loop.
+                                query = null;
+                            }
+                            available !== null && query && window.setTimeout(function() {
+                                getTime().then(resolve).catch;
+                            }, 1);
+                        }
+                    })
+                ];
+            });
+        });
+        if (!query) {
+            return;
+        }
+        return {
+            begin: function() {
+                query && gl.beginQuery(ext.TIME_ELAPSED_EXT, query);
+            },
+            end: function() {
+                gl.endQuery(ext.TIME_ELAPSED_EXT);
+            },
+            getTime: getTime
+        };
+    }
+}
+
+var initErrors = [];
+// @ts-expect-error
+var glContext = {};
+if (!initErrors.length) {
+    initGLContext();
+}
+function initGLContext() {
+    // 重要：iOS 9/10 低版本需要拷贝 gl context 的 prototype，要不然会有属性值的缺失
+    if (typeof WebGL2RenderingContext === "function") {
+        copy(WebGL2RenderingContext);
+    } else if (typeof WebGLRenderingContext !== "undefined") {
+        copy(WebGLRenderingContext);
+        copy(WebGLRenderingContext.prototype);
+    } else {
+        initErrors.push(// iOS 16 lockdown mode
+        "iOS16 lockdown mode, WebGL Constants not in global");
+    }
+    if (!initErrors.length && !("HALF_FLOAT" in glContext)) {
+        // @ts-expect-error set default value
+        glContext["HALF_FLOAT"] = 5131;
+    }
+}
+function isWebGL2(gl) {
+    return typeof WebGL2RenderingContext !== "undefined" && gl.constructor.name === "WebGL2RenderingContext";
+}
+function copy(target) {
+    for(var name in target){
+        if (/^[A-Z_]/.test(name)) {
+            // @ts-expect-error safe to assign
+            glContext[name] = target[name];
+        }
+    }
+}
+function vertexFormatType2GLType(formatType) {
+    switch(formatType){
+        case VertexFormatType.Float32:
+            return WebGLRenderingContext["FLOAT"];
+        case VertexFormatType.Int16:
+            return WebGLRenderingContext["SHORT"];
+        case VertexFormatType.Int8:
+            return WebGLRenderingContext["BYTE"];
+        case VertexFormatType.UInt16:
+            return WebGLRenderingContext["UNSIGNED_SHORT"];
+        case VertexFormatType.UInt8:
+            return WebGLRenderingContext["UNSIGNED_BYTE"];
+        default:
+            return WebGLRenderingContext["FLOAT"];
+    }
+}
+function glType2VertexFormatType(webglType) {
+    switch(webglType){
+        case WebGLRenderingContext["FLOAT"]:
+            return VertexFormatType.Float32;
+        case WebGLRenderingContext["SHORT"]:
+            return VertexFormatType.Int16;
+        case WebGLRenderingContext["BYTE"]:
+            return VertexFormatType.Int8;
+        case WebGLRenderingContext["UNSIGNED_SHORT"]:
+            return VertexFormatType.UInt16;
+        case WebGLRenderingContext["UNSIGNED_BYTE"]:
+            return VertexFormatType.UInt8;
+        default:
+            return VertexFormatType.Float32;
+    }
+}
+
 var seed$a = 1;
 /**
  * Texture 抽象类
@@ -6894,6 +6661,280 @@ function setDefaultTextureFactory(factory) {
     g = factory;
 }
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+
+function _create_for_of_iterator_helper_loose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+    // Fallback for engines without symbol support
+    if (Array.isArray(o) || (it = _unsupported_iterable_to_array(o)) || allowArrayLike && o && typeof o.length === "number") {
+        if (it) o = it;
+        var i = 0;
+        return function() {
+            if (i >= o.length) return {
+                done: true
+            };
+            return {
+                done: false,
+                value: o[i++]
+            };
+        };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var ShaderCompileResultStatus;
+(function(ShaderCompileResultStatus) {
+    ShaderCompileResultStatus[ShaderCompileResultStatus["noShader"] = 0] = "noShader";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["success"] = 1] = "success";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["fail"] = 2] = "fail";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["compiling"] = 3] = "compiling";
+})(ShaderCompileResultStatus || (ShaderCompileResultStatus = {}));
+var GLSLVersion;
+(function(GLSLVersion) {
+    GLSLVersion["GLSL1"] = "100";
+    GLSLVersion["GLSL3"] = "300 es";
+})(GLSLVersion || (GLSLVersion = {}));
+var ShaderVariant = /*#__PURE__*/ function(EffectsObject) {
+    _inherits(ShaderVariant, EffectsObject);
+    function ShaderVariant(engine, source) {
+        var _this;
+        _this = EffectsObject.call(this, engine) || this;
+        _this.source = source;
+        return _this;
+    }
+    return ShaderVariant;
+}(EffectsObject);
+var Shader = /*#__PURE__*/ function(EffectsObject) {
+    _inherits(Shader, EffectsObject);
+    function Shader() {
+        return EffectsObject.apply(this, arguments);
+    }
+    var _proto = Shader.prototype;
+    _proto.createVariant = function createVariant(macros) {
+        var shaderMacros = [];
+        if (macros) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(Object.keys(macros)), _step; !(_step = _iterator()).done;){
+                var key = _step.value;
+                shaderMacros.push([
+                    key,
+                    macros[key]
+                ]);
+            }
+        }
+        var shaderVariant = this.engine.getShaderLibrary().createShader(this.shaderData, shaderMacros);
+        shaderVariant.shader = this;
+        return shaderVariant;
+    };
+    _proto.fromData = function fromData(data) {
+        EffectsObject.prototype.fromData.call(this, data);
+        this.shaderData = data;
+    };
+    return Shader;
+}(EffectsObject);
+Shader = __decorate([
+    effectsClass(DataType.Shader)
+], Shader);
+
+var EFFECTS_COPY_MESH_NAME = "effects-internal-copy";
+var COPY_MESH_SHADER_ID = "effects-internal-copy-mesh";
+var COPY_VERTEX_SHADER = "\nprecision highp float;\nattribute vec2 aPos;\nvarying vec2 vTex;\nvoid main(){\n    gl_Position = vec4(aPos,0.,1.0);\n    vTex = (aPos + vec2(1.0))/2.;\n}";
+var COPY_FRAGMENT_SHADER = "precision mediump float;\nvarying vec2 vTex;\n\n#ifdef DEPTH_TEXTURE\nuniform sampler2D uDepth;\n#extension GL_EXT_frag_depth : enable\n#endif\nvoid main(){\n    #ifdef DEPTH_TEXTURE\n    gl_FragDepthEXT = texture2D(uDepth,vTex).r;\n    #endif\n}\n";
+function createCopyShader(level, writeDepth) {
+    var webgl2 = level === 2;
+    return {
+        name: EFFECTS_COPY_MESH_NAME,
+        vertex: COPY_VERTEX_SHADER,
+        fragment: COPY_FRAGMENT_SHADER,
+        glslVersion: webgl2 ? GLSLVersion.GLSL3 : GLSLVersion.GLSL1,
+        macros: [
+            [
+                "DEPTH_TEXTURE",
+                !!writeDepth
+            ]
+        ],
+        // @ts-expect-error
+        cacheId: COPY_MESH_SHADER_ID + +writeDepth
+    };
+}
+
+var ShaderType;
+(function(ShaderType) {
+    ShaderType[ShaderType["vertex"] = 0] = "vertex";
+    ShaderType[ShaderType["fragment"] = 1] = "fragment";
+})(ShaderType || (ShaderType = {}));
+
+function valIfUndefined(val, def) {
+    if (val === undefined || val === null) {
+        return def;
+    }
+    return val;
+}
+function getPreMultiAlpha(blending) {
+    switch(blending){
+        case BlendingMode.ALPHA:
+            return 1;
+        case BlendingMode.ADD:
+            return 1;
+        case BlendingMode.SUBTRACTION:
+            return 1;
+        case BlendingMode.STRONG_LIGHT:
+            return 1;
+        case BlendingMode.WEAK_LIGHT:
+            return 1;
+        case BlendingMode.SUPERPOSITION:
+            return 2;
+        case BlendingMode.BRIGHTNESS:
+            return 3;
+        case BlendingMode.MULTIPLY:
+            return 0;
+        default:
+            // 处理undefined
+            return 1;
+    }
+}
+function setBlendMode(material, blendMode) {
+    switch(blendMode){
+        case undefined:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA,
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA
+            ];
+            break;
+        case BlendingMode.ALPHA:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA,
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA
+            ];
+            break;
+        case BlendingMode.ADD:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE,
+                glContext.ONE,
+                glContext.ONE
+            ];
+            break;
+        case BlendingMode.SUBTRACTION:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE,
+                glContext.ZERO,
+                glContext.ONE
+            ];
+            material.blendEquation = [
+                glContext.FUNC_REVERSE_SUBTRACT,
+                glContext.FUNC_REVERSE_SUBTRACT
+            ];
+            break;
+        case BlendingMode.SUPERPOSITION:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE,
+                glContext.ONE,
+                glContext.ONE
+            ];
+            break;
+        case BlendingMode.MULTIPLY:
+            material.blendFunction = [
+                glContext.DST_COLOR,
+                glContext.ONE_MINUS_SRC_ALPHA,
+                glContext.DST_COLOR,
+                glContext.ONE_MINUS_SRC_ALPHA
+            ];
+            break;
+        case BlendingMode.BRIGHTNESS:
+            material.blendFunction = [
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA,
+                glContext.ONE,
+                glContext.ONE_MINUS_SRC_ALPHA
+            ];
+            break;
+        case BlendingMode.STRONG_LIGHT:
+            material.blendFunction = [
+                glContext.DST_COLOR,
+                glContext.DST_ALPHA,
+                glContext.ZERO,
+                glContext.ONE
+            ];
+            break;
+        case BlendingMode.WEAK_LIGHT:
+            material.blendFunction = [
+                glContext.DST_COLOR,
+                glContext.ZERO,
+                glContext.ZERO,
+                glContext.ONE
+            ];
+            break;
+        default:
+            console.warn("BlendMode " + blendMode + " not in specification, please set blend params separately.");
+    }
+}
+function setSideMode(material, side) {
+    if (side === SideMode.DOUBLE) {
+        material.culling = false;
+    } else {
+        material.culling = true;
+        material.frontFace = glContext.CW;
+        material.cullFace = side === SideMode.BACK ? glContext.BACK : glContext.FRONT;
+    }
+}
+function setMaskMode(material, maskMode) {
+    switch(maskMode){
+        case undefined:
+            material.stencilTest = false;
+            break;
+        case MaskMode.MASK:
+            material.stencilTest = true;
+            material.stencilFunc = [
+                glContext.ALWAYS,
+                glContext.ALWAYS
+            ];
+            material.stencilOpZPass = [
+                glContext.REPLACE,
+                glContext.REPLACE
+            ];
+            break;
+        case MaskMode.OBSCURED:
+            material.stencilTest = true;
+            material.stencilFunc = [
+                glContext.EQUAL,
+                glContext.EQUAL
+            ];
+            break;
+        case MaskMode.REVERSE_OBSCURED:
+            material.stencilTest = true;
+            material.stencilFunc = [
+                glContext.NOTEQUAL,
+                glContext.NOTEQUAL
+            ];
+            break;
+        case MaskMode.NONE:
+            material.stencilTest = false;
+            break;
+        default:
+            console.warn("MaskMode " + maskMode + " not in specification, please set stencil params seperately.");
+    }
+}
+
 /**
  * 引擎接入暂时不需要实现
  */ var MaterialDataBlock = /*#__PURE__*/ function() {
@@ -10143,7 +10184,7 @@ var integrate = "float calculateMovement(float t,vec2 p1,vec2 p2,vec2 p3,vec2 p4
 
 var itemVert = "precision highp float;attribute vec2 atlasOffset;attribute vec3 aPos;varying vec2 vTexCoord;varying vec3 vParams;varying vec4 vColor;uniform vec2 _Size;uniform vec3 _Scale;uniform vec4 _Color;uniform vec4 _TexParams;uniform vec4 _TexOffset;uniform mat4 effects_MatrixVP;uniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 texParams=_TexParams;vTexCoord=vec2(atlasOffset.xy*_TexOffset.zw+_TexOffset.xy);vColor=_Color;vParams=vec3(0.0,texParams.y,texParams.x);if(texParams.z==1.0){vec4 pos=vec4(aPos.xy*_Size,aPos.z,1.0);gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;}else{mat4 view=effects_MatrixV;vec3 camRight=vec3(view[0][0],view[1][0],view[2][0]);vec3 camUp=vec3(view[0][1],view[1][1],view[2][1]);vec3 worldPosition=vec3(effects_ObjectToWorld*vec4(0.0,0.0,0.0,1.0));vec3 vertexPosition=worldPosition+camRight*aPos.x*_Size.x*_Scale.x+camUp*aPos.y*_Size.y*_Scale.y;gl_Position=effects_MatrixVP*vec4(vertexPosition,1.0);}\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}";
 
-var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);vec4 texColor=texture2D(_MainTex,vTexCoord.xy);color=blendColor(texColor,vColor,floor(0.5+vParams.y));\n#ifdef ALPHA_CLIP\nif(vParams.z==0.&&color.a<0.04){discard;}\n#endif\ncolor.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
+var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);\n#ifdef TRANSPARENT_VIDEO\nvec2 uv_rgb=vec2(vTexCoord.x*0.5000,vTexCoord.y);vec2 uv_alpha=vec2(vTexCoord.x*0.5000+0.5000,vTexCoord.y);vec3 rgb=texture2D(_MainTex,uv_rgb).rgb;float alpha=texture2D(_MainTex,uv_alpha).r;vec4 texColor=vec4(rgb/alpha,alpha);\n#else\nvec4 texColor=texture2D(_MainTex,vTexCoord.xy);\n#endif\ncolor=blendColor(texColor,vColor,floor(0.5+vParams.y));\n#ifdef ALPHA_CLIP\nif(vParams.z==0.&&color.a<0.04){discard;}\n#endif\ncolor.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
 
 var particleFrag = "#version 100\nprecision mediump float;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}\n#define PATICLE_SHADER 1\nvarying float vLife;varying vec2 vTexCoord;varying vec4 vColor;uniform vec3 emissionColor;uniform float emissionIntensity;uniform sampler2D uMaskTex;uniform vec4 uColorParams;uniform vec2 uTexOffset;\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\n#ifdef USE_SPRITE\nvarying vec4 vTexCoordBlend;\n#endif\nvarying float vSeed;\n#ifdef PREVIEW_BORDER\nuniform vec4 uPreviewColor;\n#endif\n#ifdef USE_SPRITE\nvec4 getTextureColor(sampler2D tex,vec2 texCoord){if(vTexCoordBlend.w>0.){return mix(texture2D(tex,texCoord),texture2D(tex,vTexCoordBlend.xy+texCoord),vTexCoordBlend.z);}return texture2D(tex,texCoord);}\n#else\n#define getTextureColor texture2D\n#endif\n#ifndef WEBGL2\n#define round(a) floor(0.5+a)\n#endif\n#ifdef PREVIEW_BORDER\nvoid main(){gl_FragColor=uPreviewColor;}\n#else\nvoid main(){vec4 color=vec4(1.0);vec4 tempColor=vColor;vec2 texOffset=uTexOffset;if(vLife<0.){discard;}if(uColorParams.x>0.0){color=getTextureColor(uMaskTex,vTexCoord);}\n#ifdef COLOR_OVER_LIFETIME\n#ifndef ENABLE_VERTEX_TEXTURE\ntempColor*=texture2D(uColorOverLifetime,vec2(vLife,0.));\n#endif\n#endif\ncolor=blendColor(color,tempColor,round(uColorParams.y));if(color.a<=0.01&&uColorParams.w>0.){float _at=texture2D(uMaskTex,vTexCoord+texOffset).a+texture2D(uMaskTex,vTexCoord+texOffset*-1.).a;if(_at<=0.02){discard;}}vec3 emission=emissionColor*pow(2.0,emissionIntensity);color=vec4(pow(pow(color.rgb,vec3(2.2))+emission,vec3(1.0/2.2)),color.a);gl_FragColor=color;}\n#endif\n";
 
@@ -13104,6 +13145,27 @@ var Vector4Curve = /*#__PURE__*/ function(ValueGetter) {
     };
     return Vector4Curve;
 }(ValueGetter);
+var Vector2Curve = /*#__PURE__*/ function(ValueGetter) {
+    _inherits(Vector2Curve, ValueGetter);
+    function Vector2Curve() {
+        var _this;
+        _this = ValueGetter.apply(this, arguments) || this;
+        _this.value = new Vector2();
+        return _this;
+    }
+    var _proto = Vector2Curve.prototype;
+    _proto.onCreate = function onCreate(arg) {
+        this.xCurve = createValueGetter(arg[0]);
+        this.yCurve = createValueGetter(arg[1]);
+    };
+    _proto.getValue = function getValue(t) {
+        var x = this.xCurve.getValue(t);
+        var y = this.yCurve.getValue(t);
+        this.value.set(x, y);
+        return this.value;
+    };
+    return Vector2Curve;
+}(ValueGetter);
 
 var SPRITE_VERTEX_STRIDE = 6;
 var SEMANTIC_PRE_COLOR_ATTACHMENT_0 = "PRE_COLOR_0";
@@ -13167,6 +13229,8 @@ var map$1 = (_obj$4 = {}, _obj$4[ValueType.RANDOM] = function(props) {
     return new ColorCurve(props);
 }, _obj$4[ValueType.VECTOR4_CURVE] = function(props) {
     return new Vector4Curve(props);
+}, _obj$4[ValueType.VECTOR2_CURVE] = function(props) {
+    return new Vector2Curve(props);
 }, _obj$4);
 function createValueGetter(args) {
     if (!args || !isNaN(+args)) {
@@ -13291,13 +13355,39 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
         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("_MainTex", texture);
+    _proto.setTexture = function setTexture(input) {
+        var _this = this;
+        return _async_to_generator(function() {
+            var texture;
+            return __generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!(typeof input === "string")) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            Texture.fromImage(input, _this.item.engine)
+                        ];
+                    case 1:
+                        texture = _state.sent();
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        texture = input;
+                        _state.label = 3;
+                    case 3:
+                        _this.renderer.texture = texture;
+                        _this.material.setTexture("_MainTex", texture);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
     };
     /**
    * @internal
@@ -13476,11 +13566,14 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
             maxVertex: 4
         });
     };
-    _proto.createMaterial = function createMaterial(renderInfo, count) {
-        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
-        var materialProps = {
+    _proto.getMaterialProps = function getMaterialProps(renderInfo, count) {
+        return {
             shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
         };
+    };
+    _proto.createMaterial = function createMaterial(renderInfo, count) {
+        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
+        var materialProps = this.getMaterialProps(renderInfo, count);
         this.preMultiAlpha = getPreMultiAlpha(blending);
         var material = Material.create(this.engine, materialProps);
         var states = {
@@ -13559,6 +13652,8 @@ function getImageItemRenderInfo(item) {
     };
 }
 
+// Based on:
+// https://github.com/pixijs/pixijs/blob/dev/src/maths/shapes/ShapePrimitive.ts
 var ShapePrimitive = function ShapePrimitive() {
 };
 
@@ -14664,6 +14759,7 @@ function triangulate(contours) {
     return triangleVerts;
 }
 
+// Based on:
 /**
  * A class to define a shape via user defined coordinates.
  */ var Polygon = /*#__PURE__*/ function(ShapePrimitive) {
@@ -14763,12 +14859,13 @@ function triangulate(contours) {
         var triangles = triangulate([
             points
         ]);
+        var indexStart = vertices.length / 2;
         for(var i = 0; i < triangles.length; i++){
-            vertices[verticesOffset + i] = triangles[i];
+            vertices[verticesOffset * 2 + i] = triangles[i];
         }
         var vertexCount = triangles.length / 2;
         for(var i1 = 0; i1 < vertexCount; i1++){
-            indices[indicesOffset + i1] = i1;
+            indices[indicesOffset + i1] = indexStart + i1;
         }
     };
     _create_class(Polygon, [
@@ -14890,6 +14987,7 @@ function recursive(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, le
     recursive(x1234, y1234, x234, y234, x34, y34, x4, y4, points, distanceTolerance, level + 1);
 }
 
+// Based on:
 /**
  * The Ellipse object is used to help draw graphics and can also be used to specify a hit area for containers.
  */ var Ellipse = /*#__PURE__*/ function(ShapePrimitive) {
@@ -15096,6 +15194,7 @@ function recursive(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, le
     return Ellipse;
 }(ShapePrimitive);
 
+// Based on:
 var StarType;
 (function(StarType) {
     StarType[StarType["Star"] = 0] = "Star";
@@ -15164,12 +15263,13 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
         var triangles = triangulate([
             points
         ]);
+        var indexStart = vertices.length / 2;
         for(var i = 0; i < triangles.length; i++){
-            vertices[verticesOffset + i] = triangles[i];
+            vertices[verticesOffset * 2 + i] = triangles[i];
         }
         var vertexCount = triangles.length / 2;
         for(var i1 = 0; i1 < vertexCount; i1++){
-            indices[indicesOffset + i1] = i1;
+            indices[indicesOffset + i1] = indexStart + i1;
         }
     };
     _proto.buildStarPath = function buildStarPath() {
@@ -15240,6 +15340,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
     return PolyStar;
 }(ShapePrimitive);
 
+// Based on:
 // const tempPoints = [new Point(), new Point(), new Point(), new Point()];
 /**
  * The `Rectangle` object is an area defined by its position, as indicated by its upper-left corner
@@ -15563,6 +15664,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
     return Rectangle;
 }(ShapePrimitive);
 
+// Based on:
 var ShapePath = /*#__PURE__*/ function() {
     function ShapePath(graphicsPath) {
         this.graphicsPath = graphicsPath;
@@ -15721,6 +15823,7 @@ var ShapePath = /*#__PURE__*/ function() {
     return ShapePath;
 }();
 
+// Based on:
 var GraphicsPath = /*#__PURE__*/ function() {
     function GraphicsPath() {
         this.instructions = [];
@@ -15858,14 +15961,433 @@ var GraphicsPath = /*#__PURE__*/ function() {
     return GraphicsPath;
 }();
 
+// Based on:
+/**
+ * The Point object represents a location in a two-dimensional coordinate system, where `x` represents
+ * the position on the horizontal axis and `y` represents the position on the vertical axis.
+ */ var Point = /*#__PURE__*/ function() {
+    function Point(x, y) {
+        if (x === void 0) x = 0;
+        if (y === void 0) y = 0;
+        /**
+   * Position of the point on the x axis
+   */ this.x = 0;
+        /**
+   * Position of the point on the y axis
+   */ this.y = 0;
+        this.x = x;
+        this.y = y;
+    }
+    var _proto = Point.prototype;
+    /**
+   * Creates a clone of this point
+   * @returns A clone of this point
+   */ _proto.clone = function clone() {
+        return new Point(this.x, this.y);
+    };
+    /**
+   * Copies `x` and `y` from the given point into this point
+   * @param p - The point to copy from
+   * @returns The point instance itself
+   */ _proto.copyFrom = function copyFrom(p) {
+        this.set(p.x, p.y);
+        return this;
+    };
+    /**
+   * Copies this point's x and y into the given point (`p`).
+   * @param p - The point to copy to. Can be any of type that is or extends `PointData`
+   * @returns The point (`p`) with values updated
+   */ _proto.copyTo = function copyTo(p) {
+        p.set(this.x, this.y);
+        return p;
+    };
+    /**
+   * Accepts another point (`p`) and returns `true` if the given point is equal to this point
+   * @param p - The point to check
+   * @returns Returns `true` if both `x` and `y` are equal
+   */ _proto.equals = function equals(p) {
+        return p.x === this.x && p.y === this.y;
+    };
+    /**
+   * Sets the point to a new `x` and `y` position.
+   * If `y` is omitted, both `x` and `y` will be set to `x`.
+   * @param {number} [x=0] - position of the point on the `x` axis
+   * @param {number} [y=x] - position of the point on the `y` axis
+   * @returns The point instance itself
+   */ _proto.set = function set(x, y) {
+        if (x === void 0) x = 0;
+        if (y === void 0) y = x;
+        this.x = x;
+        this.y = y;
+        return this;
+    };
+    _create_class(Point, null, [
+        {
+            key: "shared",
+            get: /**
+   * A static Point object with `x` and `y` values of `0`. Can be used to avoid creating new objects multiple times.
+   * @readonly
+   */ function get() {
+                tempPoint.x = 0;
+                tempPoint.y = 0;
+                return tempPoint;
+            }
+        }
+    ]);
+    return Point;
+}();
+var tempPoint = new Point();
+
+// Based on:
+var closePointEps = 1e-4;
+var curveEps = 0.0001;
+/**
+ * Buffers vertices to draw a square cap.
+ *
+ * @internal
+ * @private
+ * @param x - X-coord of end point
+ * @param y - Y-coord of end point
+ * @param nx - X-coord of line normal pointing inside
+ * @param ny - Y-coord of line normal pointing inside
+ * @param innerWeight - Weight of inner points
+ * @param outerWeight - Weight of outer points
+ * @param clockwise - Whether the cap is drawn clockwise
+ * @param verts - vertex buffer
+ * @returns - no. of vertices pushed
+ */ function square(x, y, nx, ny, innerWeight, outerWeight, clockwise, /* rotation for square (true at left end, false at right end) */ verts) {
+    var ix = x - nx * innerWeight;
+    var iy = y - ny * innerWeight;
+    var ox = x + nx * outerWeight;
+    var oy = y + ny * outerWeight;
+    /* Rotate nx,ny for extension vector */ var exx;
+    var eyy;
+    if (clockwise) {
+        exx = ny;
+        eyy = -nx;
+    } else {
+        exx = -ny;
+        eyy = nx;
+    }
+    /* [i|0]x,y extended at cap */ var eix = ix + exx;
+    var eiy = iy + eyy;
+    var eox = ox + exx;
+    var eoy = oy + eyy;
+    /* Square itself must be inserted clockwise*/ verts.push(eix, eiy);
+    verts.push(eox, eoy);
+    return 2;
+}
+/**
+ * Buffers vertices to draw an arc at the line joint or cap.
+ *
+ * @internal
+ * @private
+ * @param cx - X-coord of center
+ * @param cy - Y-coord of center
+ * @param sx - X-coord of arc start
+ * @param sy - Y-coord of arc start
+ * @param ex - X-coord of arc end
+ * @param ey - Y-coord of arc end
+ * @param verts - buffer of vertices
+ * @param clockwise - orientation of vertices
+ * @returns - no. of vertices pushed
+ */ function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
+    var cx2p0x = sx - cx;
+    var cy2p0y = sy - cy;
+    var angle0 = Math.atan2(cx2p0x, cy2p0y);
+    var angle1 = Math.atan2(ex - cx, ey - cy);
+    if (clockwise && angle0 < angle1) {
+        angle0 += Math.PI * 2;
+    } else if (!clockwise && angle0 > angle1) {
+        angle1 += Math.PI * 2;
+    }
+    var startAngle = angle0;
+    var angleDiff = angle1 - angle0;
+    var absAngleDiff = Math.abs(angleDiff);
+    var radius = Math.sqrt(cx2p0x * cx2p0x + cy2p0y * cy2p0y);
+    var segCount = (15 * absAngleDiff * Math.sqrt(radius) / Math.PI >> 0) + 1;
+    var angleInc = angleDiff / segCount;
+    startAngle += angleInc;
+    if (clockwise) {
+        verts.push(cx, cy);
+        verts.push(sx, sy);
+        for(var i = 1, angle = startAngle; i < segCount; i++, angle += angleInc){
+            verts.push(cx, cy);
+            verts.push(cx + Math.sin(angle) * radius, cy + Math.cos(angle) * radius);
+        }
+        verts.push(cx, cy);
+        verts.push(ex, ey);
+    } else {
+        verts.push(sx, sy);
+        verts.push(cx, cy);
+        for(var i1 = 1, angle2 = startAngle; i1 < segCount; i1++, angle2 += angleInc){
+            verts.push(cx + Math.sin(angle2) * radius, cy + Math.cos(angle2) * radius);
+            verts.push(cx, cy);
+        }
+        verts.push(ex, ey);
+        verts.push(cx, cy);
+    }
+    return segCount * 2;
+}
+function getOrientationOfPoints(points) {
+    var m = points.length;
+    if (m < 6) {
+        return 1;
+    }
+    var area = 0;
+    for(var i = 0, x1 = points[m - 2], y1 = points[m - 1]; i < m; i += 2){
+        var x2 = points[i];
+        var y2 = points[i + 1];
+        area += (x2 - x1) * (y2 + y1);
+        x1 = x2;
+        y1 = y2;
+    }
+    if (area < 0) {
+        return -1;
+    }
+    return 1;
+}
+/**
+ * Builds a line to draw using the polygon method.
+ * @param points
+ * @param lineStyle
+ * @param flipAlignment
+ * @param closed
+ * @param vertices
+ * @param _verticesStride
+ * @param _verticesOffset
+ * @param indices
+ * @param _indicesOffset
+ */ function buildLine(points, lineStyle, flipAlignment, closed, // alignment:number,
+vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
+    // const shape = graphicsData.shape as Polygon;
+    // let points = graphicsData.points || shape.points.slice();
+    var eps = closePointEps;
+    if (points.length === 0) {
+        return;
+    }
+    var style = lineStyle;
+    var alignment = style.alignment;
+    if (lineStyle.alignment !== 0.5) {
+        // rotate the points!
+        var orientation = getOrientationOfPoints(points);
+        if (flipAlignment) {
+            orientation *= -1;
+        }
+        alignment = (alignment - 0.5) * orientation + 0.5;
+    }
+    // get first and last point.. figure out the middle!
+    var firstPoint = new Point(points[0], points[1]);
+    var lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
+    var closedShape = closed;
+    var closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps && Math.abs(firstPoint.y - lastPoint.y) < eps;
+    // if the first point is the last point - gonna have issues :)
+    if (closedShape) {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+        if (closedPath) {
+            points.pop();
+            points.pop();
+            lastPoint.set(points[points.length - 2], points[points.length - 1]);
+        }
+        var midPointX = (firstPoint.x + lastPoint.x) * 0.5;
+        var midPointY = (lastPoint.y + firstPoint.y) * 0.5;
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+    var verts = vertices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length / 2;
+    // Max. inner and outer width
+    var width = style.width / 2;
+    var widthSquared = width * width;
+    var miterLimitSquared = style.miterLimit * style.miterLimit;
+    /* Line segments of interest where (x1,y1) forms the corner. */ var x0 = points[0];
+    var y0 = points[1];
+    var x1 = points[2];
+    var y1 = points[3];
+    var x2 = 0;
+    var y2 = 0;
+    /* perp[?](x|y) = the line normal with magnitude lineWidth. */ var perpX = -(y0 - y1);
+    var perpY = x0 - x1;
+    var perp1x = 0;
+    var perp1y = 0;
+    var dist = Math.sqrt(perpX * perpX + perpY * perpY);
+    perpX /= dist;
+    perpY /= dist;
+    perpX *= width;
+    perpY *= width;
+    var ratio = alignment; // 0.5;
+    var innerWeight = (1 - ratio) * 2;
+    var outerWeight = ratio * 2;
+    if (!closedShape) {
+        if (style.cap === "round") {
+            indexCount += round(x0 - perpX * (innerWeight - outerWeight) * 0.5, y0 - perpY * (innerWeight - outerWeight) * 0.5, x0 - perpX * innerWeight, y0 - perpY * innerWeight, x0 + perpX * outerWeight, y0 + perpY * outerWeight, verts, true) + 2;
+        } else if (style.cap === "square") {
+            indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
+        }
+    }
+    // Push first point (below & above vertices)
+    verts.push(x0 - perpX * innerWeight, y0 - perpY * innerWeight);
+    verts.push(x0 + perpX * outerWeight, y0 + perpY * outerWeight);
+    for(var i = 1; i < length - 1; ++i){
+        x0 = points[(i - 1) * 2];
+        y0 = points[(i - 1) * 2 + 1];
+        x1 = points[i * 2];
+        y1 = points[i * 2 + 1];
+        x2 = points[(i + 1) * 2];
+        y2 = points[(i + 1) * 2 + 1];
+        perpX = -(y0 - y1);
+        perpY = x0 - x1;
+        dist = Math.sqrt(perpX * perpX + perpY * perpY);
+        perpX /= dist;
+        perpY /= dist;
+        perpX *= width;
+        perpY *= width;
+        perp1x = -(y1 - y2);
+        perp1y = x1 - x2;
+        dist = Math.sqrt(perp1x * perp1x + perp1y * perp1y);
+        perp1x /= dist;
+        perp1y /= dist;
+        perp1x *= width;
+        perp1y *= width;
+        /* d[x|y](0|1) = the component displacement between points p(0,1|1,2) */ var dx0 = x1 - x0;
+        var dy0 = y0 - y1;
+        var dx1 = x1 - x2;
+        var dy1 = y2 - y1;
+        /* +ve if internal angle < 90 degree, -ve if internal angle > 90 degree. */ var dot = dx0 * dx1 + dy0 * dy1;
+        /* +ve if internal angle counterclockwise, -ve if internal angle clockwise. */ var cross = dy0 * dx1 - dy1 * dx0;
+        var clockwise = cross < 0;
+        /* Going nearly parallel? */ /* atan(0.001) ~= 0.001 rad ~= 0.057 degree */ if (Math.abs(cross) < 0.001 * Math.abs(dot)) {
+            verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+            verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+            /* 180 degree corner? */ if (dot >= 0) {
+                if (style.join === "round") {
+                    indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 4;
+                } else {
+                    indexCount += 2;
+                }
+                verts.push(x1 - perp1x * outerWeight, y1 - perp1y * outerWeight);
+                verts.push(x1 + perp1x * innerWeight, y1 + perp1y * innerWeight);
+            }
+            continue;
+        }
+        /* p[x|y] is the miter point. pDist is the distance between miter point and p1. */ var c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
+        var c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
+        var px = (dx0 * c2 - dx1 * c1) / cross;
+        var py = (dy1 * c1 - dy0 * c2) / cross;
+        var pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
+        /* Inner miter point */ var imx = x1 + (px - x1) * innerWeight;
+        var imy = y1 + (py - y1) * innerWeight;
+        /* Outer miter point */ var omx = x1 - (px - x1) * outerWeight;
+        var omy = y1 - (py - y1) * outerWeight;
+        /* Is the inside miter point too far away, creating a spike? */ var smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
+        var insideWeight = clockwise ? innerWeight : outerWeight;
+        var smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
+        var insideMiterOk = pDist <= smallerInsideDiagonalSq;
+        if (insideMiterOk) {
+            if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
+                if (clockwise) /* rotating at inner angle */ {
+                    verts.push(imx, imy); // inner miter point
+                    verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight); // first segment's outer vertex
+                    verts.push(imx, imy); // inner miter point
+                    verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight); // second segment's outer vertex
+                } else /* rotating at outer angle */ {
+                    verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight); // first segment's inner vertex
+                    verts.push(omx, omy); // outer miter point
+                    verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight); // second segment's outer vertex
+                    verts.push(omx, omy); // outer miter point
+                }
+                indexCount += 2;
+            } else if (style.join === "round") {
+                if (clockwise) /* arc is outside */ {
+                    verts.push(imx, imy);
+                    verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+                    indexCount += round(x1, y1, x1 + perpX * outerWeight, y1 + perpY * outerWeight, x1 + perp1x * outerWeight, y1 + perp1y * outerWeight, verts, true) + 4;
+                    verts.push(imx, imy);
+                    verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+                } else /* arc is inside */ {
+                    verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+                    verts.push(omx, omy);
+                    indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 4;
+                    verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+                    verts.push(omx, omy);
+                }
+            } else {
+                verts.push(imx, imy);
+                verts.push(omx, omy);
+            }
+        } else {
+            verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight); // first segment's inner vertex
+            verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight); // first segment's outer vertex
+            if (style.join === "round") {
+                if (clockwise) /* arc is outside */ {
+                    indexCount += round(x1, y1, x1 + perpX * outerWeight, y1 + perpY * outerWeight, x1 + perp1x * outerWeight, y1 + perp1y * outerWeight, verts, true) + 2;
+                } else /* arc is inside */ {
+                    indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 2;
+                }
+            } else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
+                if (clockwise) {
+                    verts.push(omx, omy); // inner miter point
+                    verts.push(omx, omy); // inner miter point
+                } else {
+                    verts.push(imx, imy); // outer miter point
+                    verts.push(imx, imy); // outer miter point
+                }
+                indexCount += 2;
+            }
+            verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight); // second segment's inner vertex
+            verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight); // second segment's outer vertex
+            indexCount += 2;
+        }
+    }
+    x0 = points[(length - 2) * 2];
+    y0 = points[(length - 2) * 2 + 1];
+    x1 = points[(length - 1) * 2];
+    y1 = points[(length - 1) * 2 + 1];
+    perpX = -(y0 - y1);
+    perpY = x0 - x1;
+    dist = Math.sqrt(perpX * perpX + perpY * perpY);
+    perpX /= dist;
+    perpY /= dist;
+    perpX *= width;
+    perpY *= width;
+    verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+    verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+    if (!closedShape) {
+        if (style.cap === "round") {
+            indexCount += round(x1 - perpX * (innerWeight - outerWeight) * 0.5, y1 - perpY * (innerWeight - outerWeight) * 0.5, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 + perpX * outerWeight, y1 + perpY * outerWeight, verts, false) + 2;
+        } else if (style.cap === "square") {
+            indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
+        }
+    }
+    // const indices = graphicsGeometry.indices;
+    var eps2 = curveEps * curveEps;
+    // indices.push(indexStart);
+    for(var i1 = indexStart; i1 < indexCount + indexStart - 2; ++i1){
+        x0 = verts[i1 * 2];
+        y0 = verts[i1 * 2 + 1];
+        x1 = verts[(i1 + 1) * 2];
+        y1 = verts[(i1 + 1) * 2 + 1];
+        x2 = verts[(i1 + 2) * 2];
+        y2 = verts[(i1 + 2) * 2 + 1];
+        /* Skip zero area triangles */ if (Math.abs(x0 * (y1 - y2) + x1 * (y2 - y0) + x2 * (y0 - y1)) < eps2) {
+            continue;
+        }
+        indices.push(i1, i1 + 1, i1 + 2);
+    }
+}
+
 var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     _inherits(ShapeComponent, MeshComponent);
     function ShapeComponent(engine) {
         var _this;
         _this = MeshComponent.call(this, engine) || this;
-        _this.path = new GraphicsPath();
+        _this.isStroke = false;
+        _this.graphicsPath = new GraphicsPath();
         _this.curveValues = [];
-        _this.animated = true;
+        _this.shapeDirty = true;
         _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
         _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  color.rgb *= color.a;\n  gl_FragColor = color;\n}\n";
         if (!_this.geometry) {
@@ -15913,6 +16435,20 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
             _this.material.depthTest = true;
             _this.material.blending = true;
         }
+        _this.strokeAttributes = {
+            width: 1,
+            alignment: 0.5,
+            cap: "butt",
+            join: "miter",
+            miterLimit: 10
+        };
+        _this.shapeAttribute = {
+            type: ShapePrimitiveType.Custom,
+            points: [],
+            easingIns: [],
+            easingOuts: [],
+            shapes: []
+        };
         return _this;
     }
     var _proto = ShapeComponent.prototype;
@@ -15920,10 +16456,10 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.onUpdate = function onUpdate(dt) {
-        if (this.animated) {
-            this.buildPath(this.data);
-            this.buildGeometryFromPath(this.path.shapePath);
-            this.animated = false;
+        if (this.shapeDirty) {
+            this.buildPath(this.shapeAttribute);
+            this.buildGeometryFromPath(this.graphicsPath.shapePath);
+            this.shapeDirty = false;
         }
     };
     _proto.buildGeometryFromPath = function buildGeometryFromPath(shapePath) {
@@ -15938,7 +16474,13 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
             var indexOffset = indices.length;
             var vertOffset = vertices.length / 2;
             shape.build(points);
-            shape.triangulate(points, vertices, vertOffset, indices, indexOffset);
+            if (!this.isStroke) {
+                shape.triangulate(points, vertices, vertOffset, indices, indexOffset);
+            } else {
+                var close = true;
+                var lineStyle = this.strokeAttributes;
+                buildLine(points, lineStyle, false, close, vertices, 2, vertOffset, indices);
+            }
         }
         var vertexCount = vertices.length / 2;
         // get the current attribute and index arrays from the geometry, avoiding re-creation
@@ -15951,7 +16493,7 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         if (!uvArray || uvArray.length < vertexCount * 2) {
             uvArray = new Float32Array(vertexCount * 2);
         }
-        if (!indexArray) {
+        if (!indexArray || indexArray.length < indices.length) {
             indexArray = new Uint16Array(indices.length);
         }
         // set position and uv attribute array
@@ -15973,19 +16515,18 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.geometry.setIndexData(indexArray);
         this.geometry.setDrawCount(indices.length);
     };
-    _proto.buildPath = function buildPath(data) {
-        this.path.clear();
-        var shapeData = data;
-        switch(shapeData.type){
+    _proto.buildPath = function buildPath(shapeAttribute) {
+        this.graphicsPath.clear();
+        switch(shapeAttribute.type){
             case ShapePrimitiveType.Custom:
                 {
-                    var customData = shapeData;
-                    var points = customData.points;
-                    var easingIns = customData.easingIns;
-                    var easingOuts = customData.easingOuts;
-                    this.curveValues = [];
-                    for(var _iterator = _create_for_of_iterator_helper_loose(customData.shapes), _step; !(_step = _iterator()).done;){
+                    var customShapeAtribute = this.shapeAttribute;
+                    var points = customShapeAtribute.points;
+                    var easingIns = customShapeAtribute.easingIns;
+                    var easingOuts = customShapeAtribute.easingOuts;
+                    for(var _iterator = _create_for_of_iterator_helper_loose(customShapeAtribute.shapes), _step; !(_step = _iterator()).done;){
                         var shape = _step.value;
+                        this.curveValues = [];
                         this.setFillColor(shape.fill);
                         var indices = shape.indexes;
                         for(var i = 1; i < indices.length; i++){
@@ -16003,42 +16544,42 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                             controlPoint1: easingOuts[indices[indices.length - 1].easingOut],
                             controlPoint2: easingIns[indices[0].easingIn]
                         });
-                    }
-                    this.path.moveTo(this.curveValues[this.curveValues.length - 1].point.x, this.curveValues[this.curveValues.length - 1].point.y);
-                    for(var _iterator1 = _create_for_of_iterator_helper_loose(this.curveValues), _step1; !(_step1 = _iterator1()).done;){
-                        var curveValue = _step1.value;
-                        var point = curveValue.point;
-                        var control1 = curveValue.controlPoint1;
-                        var control2 = curveValue.controlPoint2;
-                        this.path.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, point.x, point.y, 1);
+                        this.graphicsPath.moveTo(this.curveValues[this.curveValues.length - 1].point.x, this.curveValues[this.curveValues.length - 1].point.y);
+                        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.curveValues), _step1; !(_step1 = _iterator1()).done;){
+                            var curveValue = _step1.value;
+                            var point = curveValue.point;
+                            var control1 = curveValue.controlPoint1;
+                            var control2 = curveValue.controlPoint2;
+                            this.graphicsPath.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, point.x, point.y, 1);
+                        }
                     }
                     break;
                 }
             case ShapePrimitiveType.Ellipse:
                 {
-                    var ellipseData = shapeData;
-                    this.path.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
+                    var ellipseData = shapeAttribute;
+                    this.graphicsPath.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
                     this.setFillColor(ellipseData.fill);
                     break;
                 }
             case ShapePrimitiveType.Rectangle:
                 {
-                    var rectangleData = shapeData;
-                    this.path.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
+                    var rectangleData = shapeAttribute;
+                    this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
                     this.setFillColor(rectangleData.fill);
                     break;
                 }
             case ShapePrimitiveType.Star:
                 {
-                    var starData = shapeData;
-                    this.path.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
+                    var starData = shapeAttribute;
+                    this.graphicsPath.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
                     this.setFillColor(starData.fill);
                     break;
                 }
             case ShapePrimitiveType.Polygon:
                 {
-                    var polygonData = shapeData;
-                    this.path.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
+                    var polygonData = shapeAttribute;
+                    this.graphicsPath.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
                     this.setFillColor(polygonData.fill);
                     break;
                 }
@@ -16052,7 +16593,93 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.fromData = function fromData(data) {
         MeshComponent.prototype.fromData.call(this, data);
-        this.data = data;
+        this.shapeDirty = true;
+        var strokeParam = data.stroke;
+        if (strokeParam) {
+            this.isStroke = true;
+            this.strokeAttributes.width = strokeParam.width;
+        }
+        switch(data.type){
+            case ShapePrimitiveType.Custom:
+                {
+                    this.shapeAttribute = {
+                        type: ShapePrimitiveType.Custom,
+                        points: [],
+                        easingIns: [],
+                        easingOuts: [],
+                        shapes: []
+                    };
+                    var customShapeData = data;
+                    var customShapeAttribute = this.shapeAttribute;
+                    for(var _iterator = _create_for_of_iterator_helper_loose(customShapeData.points), _step; !(_step = _iterator()).done;){
+                        var point = _step.value;
+                        customShapeAttribute.points.push(new Vector2(point.x, point.y));
+                    }
+                    for(var _iterator1 = _create_for_of_iterator_helper_loose(customShapeData.easingIns), _step1; !(_step1 = _iterator1()).done;){
+                        var easingIn = _step1.value;
+                        customShapeAttribute.easingIns.push(new Vector2(easingIn.x, easingIn.y));
+                    }
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(customShapeData.easingOuts), _step2; !(_step2 = _iterator2()).done;){
+                        var easingOut = _step2.value;
+                        customShapeAttribute.easingOuts.push(new Vector2(easingOut.x, easingOut.y));
+                    }
+                    customShapeAttribute.shapes = customShapeData.shapes;
+                    break;
+                }
+            case ShapePrimitiveType.Ellipse:
+                {
+                    var ellipseData = data;
+                    var ellipseAttribute = {
+                        type: ShapePrimitiveType.Ellipse,
+                        xRadius: ellipseData.xRadius,
+                        yRadius: ellipseData.yRadius,
+                        fill: ellipseData.fill
+                    };
+                    this.shapeAttribute = ellipseAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Rectangle:
+                {
+                    var rectangleData = data;
+                    var rectangleAttribute = {
+                        type: ShapePrimitiveType.Rectangle,
+                        width: rectangleData.width,
+                        height: rectangleData.height,
+                        roundness: rectangleData.roundness,
+                        fill: rectangleData.fill
+                    };
+                    this.shapeAttribute = rectangleAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Star:
+                {
+                    var starData = data;
+                    var starAttribute = {
+                        type: ShapePrimitiveType.Star,
+                        pointCount: starData.pointCount,
+                        innerRadius: starData.innerRadius,
+                        outerRadius: starData.outerRadius,
+                        innerRoundness: starData.innerRoundness,
+                        outerRoundness: starData.outerRoundness,
+                        fill: starData.fill
+                    };
+                    this.shapeAttribute = starAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Polygon:
+                {
+                    var polygonData = data;
+                    var polygonAttribute = {
+                        type: ShapePrimitiveType.Polygon,
+                        pointCount: polygonData.pointCount,
+                        radius: polygonData.radius,
+                        roundness: polygonData.roundness,
+                        fill: polygonData.fill
+                    };
+                    this.shapeAttribute = polygonAttribute;
+                    break;
+                }
+        }
         var material = this.material;
         //@ts-expect-error // TODO 新版蒙版上线后重构
         material.stencilRef = data.renderer.mask !== undefined ? [
@@ -16062,6 +16689,15 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         //@ts-expect-error // TODO 新版蒙版上线后重构
         setMaskMode(material, data.renderer.maskMode);
     };
+    _create_class(ShapeComponent, [
+        {
+            key: "shape",
+            get: function get() {
+                this.shapeDirty = true;
+                return this.shapeAttribute;
+            }
+        }
+    ]);
     return ShapeComponent;
 }(MeshComponent);
 ShapeComponent = __decorate([
@@ -18749,10 +19385,19 @@ var TEMPLATE_USE_OFFSCREEN_CANVAS = "offscreen_canvas";
 // 后处理配置相关
 var POST_PROCESS_SETTINGS = "post_process_settings";
 var config = {};
-function getConfig(name) {
+/**
+ * 获取全局配置项
+ * @param name
+ * @returns
+ */ function getConfig(name) {
     return config[name];
 }
-function setConfig(name, value) {
+/**
+ * 设置全局配置项
+ * @param name
+ * @param value
+ * @returns
+ */ function setConfig(name, value) {
     return config[name] = value;
 }
 
@@ -20454,19 +21099,17 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
             rotation: rotation,
             path: path
         };
-        var parentTransform = this.transform.parentTransform;
         var selfPos = position.clone();
         if (path) {
             selfPos.add(path.getValue(0));
         }
         this.transform.setPosition(selfPos.x, selfPos.y, selfPos.z);
-        if (this.options.particleFollowParent && parentTransform) {
-            var worldMatrix = parentTransform.getWorldMatrix();
+        if (this.options.particleFollowParent) {
+            var worldMatrix = this.transform.getWorldMatrix();
             this.renderer.updateWorldMatrix(worldMatrix);
         }
     };
     _proto.updateEmitterTransform = function updateEmitterTransform(time) {
-        var parentTransform = this.transform.parentTransform;
         var _this_basicTransform = this.basicTransform, path = _this_basicTransform.path, position = _this_basicTransform.position;
         var selfPos = position.clone();
         if (path) {
@@ -20474,8 +21117,8 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
             selfPos.add(path.getValue(time / duration));
         }
         this.transform.setPosition(selfPos.x, selfPos.y, selfPos.z);
-        if (this.options.particleFollowParent && parentTransform) {
-            var worldMatrix = parentTransform.getWorldMatrix();
+        if (this.options.particleFollowParent) {
+            var worldMatrix = this.transform.getWorldMatrix();
             this.renderer.updateWorldMatrix(worldMatrix);
         }
     };
@@ -20863,7 +21506,7 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
         var lifetime = this.lifetime;
         var shape = this.shape;
         var speed = options.startSpeed.getValue(lifetime);
-        var matrix4 = options.particleFollowParent ? this.transform.getMatrix() : this.transform.getWorldMatrix();
+        var matrix4 = options.particleFollowParent ? Matrix4.IDENTITY : this.transform.getWorldMatrix();
         var pointPosition = data.position;
         // 粒子的位置受发射器的位置影响，自身的旋转和缩放不受影响
         var position = matrix4.transformPoint(pointPosition, new Vector3());
@@ -23099,88 +23742,81 @@ var PropertyClipPlayable = /*#__PURE__*/ function(Playable) {
     return PropertyClipPlayable;
 }(Playable);
 
-var ColorPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
-    _inherits(ColorPropertyMixerPlayable, TrackMixerPlayable);
-    function ColorPropertyMixerPlayable() {
+var PropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
+    _inherits(PropertyMixerPlayable, TrackMixerPlayable);
+    function PropertyMixerPlayable() {
         var _this;
         _this = TrackMixerPlayable.apply(this, arguments) || this;
         _this.propertyName = "";
         return _this;
     }
-    var _proto = ColorPropertyMixerPlayable.prototype;
+    var _proto = PropertyMixerPlayable.prototype;
     _proto.evaluate = function evaluate(context) {
         var boundObject = context.output.getUserData();
         if (!boundObject) {
             return;
         }
         var hasInput = false;
-        var value = boundObject[this.propertyName];
-        if (!_instanceof1(value, Color)) {
+        this.propertyValue = boundObject[this.propertyName];
+        if (this.propertyValue === undefined || this.propertyValue === null) {
             return;
         }
-        value.setZero();
+        this.resetPropertyValue();
         // evaluate the curve
         for(var i = 0; i < this.clipPlayables.length; i++){
             var weight = this.getClipWeight(i);
             if (weight > 0) {
                 var propertyClipPlayable = this.getClipPlayable(i);
                 if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
-                    console.error("ColorPropertyMixerPlayable received incompatible input");
+                    console.error("PropertyTrack added non-PropertyPlayableAsset");
                     continue;
                 }
                 var curveValue = propertyClipPlayable.value;
-                value.r += curveValue.r * weight;
-                value.g += curveValue.g * weight;
-                value.b += curveValue.b * weight;
-                value.a += curveValue.a * weight;
+                this.addWeightedValue(curveValue, weight);
                 hasInput = true;
             }
         }
         // set value
         if (hasInput) {
-            boundObject[this.propertyName] = value;
+            boundObject[this.propertyName] = this.propertyValue;
         }
     };
-    return ColorPropertyMixerPlayable;
+    return PropertyMixerPlayable;
 }(TrackMixerPlayable);
 
-var FloatPropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
-    _inherits(FloatPropertyMixerPlayable, TrackMixerPlayable);
+var ColorPropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable) {
+    _inherits(ColorPropertyMixerPlayable, PropertyMixerPlayable);
+    function ColorPropertyMixerPlayable() {
+        return PropertyMixerPlayable.apply(this, arguments);
+    }
+    var _proto = ColorPropertyMixerPlayable.prototype;
+    _proto.resetPropertyValue = function resetPropertyValue() {
+        this.propertyValue.setZero();
+    };
+    _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
+        var result = this.propertyValue;
+        result.r += curveValue.r * weight;
+        result.g += curveValue.g * weight;
+        result.b += curveValue.b * weight;
+        result.a += curveValue.a * weight;
+    };
+    return ColorPropertyMixerPlayable;
+}(PropertyMixerPlayable);
+
+var FloatPropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable) {
+    _inherits(FloatPropertyMixerPlayable, PropertyMixerPlayable);
     function FloatPropertyMixerPlayable() {
-        var _this;
-        _this = TrackMixerPlayable.apply(this, arguments) || this;
-        _this.propertyName = "";
-        return _this;
+        return PropertyMixerPlayable.apply(this, arguments);
     }
     var _proto = FloatPropertyMixerPlayable.prototype;
-    _proto.evaluate = function evaluate(context) {
-        var boundObject = context.output.getUserData();
-        if (!boundObject) {
-            return;
-        }
-        var hasInput = false;
-        var value = 0;
-        // evaluate the curve
-        for(var i = 0; i < this.clipPlayables.length; i++){
-            var weight = this.getClipWeight(i);
-            if (weight > 0) {
-                var propertyClipPlayable = this.getClipPlayable(i);
-                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
-                    console.error("FloatPropertyTrack added non-FloatPropertyPlayableAsset");
-                    continue;
-                }
-                var curveValue = propertyClipPlayable.value;
-                value += curveValue * weight;
-                hasInput = true;
-            }
-        }
-        // set value
-        if (hasInput) {
-            boundObject[this.propertyName] = value;
-        }
+    _proto.resetPropertyValue = function resetPropertyValue() {
+        this.propertyValue = 0;
+    };
+    _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
+        this.propertyValue += curveValue * weight;
     };
     return FloatPropertyMixerPlayable;
-}(TrackMixerPlayable);
+}(PropertyMixerPlayable);
 
 var ParticleMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
     _inherits(ParticleMixerPlayable, TrackMixerPlayable);
@@ -23692,7 +24328,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
         this.timelinePlayable.setTime(time);
         // The properties of the object may change dynamically,
         // so reset the track binding to avoid invalidation of the previously obtained binding object.
-        // this.resolveBindings();
+        this.resolveBindings();
         this.timelinePlayable.evaluate();
         this.graph.evaluate(dt);
     };
@@ -23924,50 +24560,44 @@ var TransformMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
     return TransformMixerPlayable;
 }(TrackMixerPlayable);
 
-var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(TrackMixerPlayable) {
-    _inherits(Vector4PropertyMixerPlayable, TrackMixerPlayable);
+var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable) {
+    _inherits(Vector4PropertyMixerPlayable, PropertyMixerPlayable);
     function Vector4PropertyMixerPlayable() {
-        var _this;
-        _this = TrackMixerPlayable.apply(this, arguments) || this;
-        _this.propertyName = "";
-        return _this;
+        return PropertyMixerPlayable.apply(this, arguments);
     }
     var _proto = Vector4PropertyMixerPlayable.prototype;
-    _proto.evaluate = function evaluate(context) {
-        var boundObject = context.output.getUserData();
-        if (!boundObject) {
-            return;
-        }
-        var hasInput = false;
-        var value = boundObject[this.propertyName];
-        if (!_instanceof1(value, Vector4)) {
-            return;
-        }
-        value.setZero();
-        // evaluate the curve
-        for(var i = 0; i < this.clipPlayables.length; i++){
-            var weight = this.getClipWeight(i);
-            if (weight > 0) {
-                var propertyClipPlayable = this.getClipPlayable(i);
-                if (!_instanceof1(propertyClipPlayable, PropertyClipPlayable)) {
-                    console.error("Vector4PropertyTrack added non-Vector4PropertyPlayableAsset");
-                    continue;
-                }
-                var curveValue = propertyClipPlayable.value;
-                value.x += curveValue.x * weight;
-                value.y += curveValue.y * weight;
-                value.z += curveValue.z * weight;
-                value.w += curveValue.w * weight;
-                hasInput = true;
-            }
-        }
-        // set value
-        if (hasInput) {
-            boundObject[this.propertyName] = value;
-        }
+    _proto.resetPropertyValue = function resetPropertyValue() {
+        this.propertyValue.x = 0;
+        this.propertyValue.y = 0;
+        this.propertyValue.z = 0;
+        this.propertyValue.w = 0;
+    };
+    _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
+        var result = this.propertyValue;
+        result.x += curveValue.x * weight;
+        result.y += curveValue.y * weight;
+        result.z += curveValue.z * weight;
+        result.w += curveValue.w * weight;
     };
     return Vector4PropertyMixerPlayable;
-}(TrackMixerPlayable);
+}(PropertyMixerPlayable);
+var Vector2PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable) {
+    _inherits(Vector2PropertyMixerPlayable, PropertyMixerPlayable);
+    function Vector2PropertyMixerPlayable() {
+        return PropertyMixerPlayable.apply(this, arguments);
+    }
+    var _proto = Vector2PropertyMixerPlayable.prototype;
+    _proto.resetPropertyValue = function resetPropertyValue() {
+        this.propertyValue.x = 0;
+        this.propertyValue.y = 0;
+    };
+    _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
+        var result = this.propertyValue;
+        result.x += curveValue.x * weight;
+        result.y += curveValue.y * weight;
+    };
+    return Vector2PropertyMixerPlayable;
+}(PropertyMixerPlayable);
 
 /**
  * @since 2.0.0
@@ -24348,6 +24978,26 @@ var Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
 Vector4PropertyTrack = __decorate([
     effectsClass(DataType.Vector4PropertyTrack)
 ], Vector4PropertyTrack);
+var Vector2PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
+    _inherits(Vector2PropertyTrack, PropertyTrack);
+    function Vector2PropertyTrack() {
+        return PropertyTrack.apply(this, arguments);
+    }
+    var _proto = Vector2PropertyTrack.prototype;
+    _proto.createTrackMixer = function createTrackMixer(graph) {
+        var mixer = new Vector2PropertyMixerPlayable(graph);
+        var propertyNames = this.propertyNames;
+        if (propertyNames.length > 0) {
+            var propertyName = propertyNames[propertyNames.length - 1];
+            mixer.propertyName = propertyName;
+        }
+        return mixer;
+    };
+    return Vector2PropertyTrack;
+}(PropertyTrack);
+Vector2PropertyTrack = __decorate([
+    effectsClass("Vector2PropertyTrack")
+], Vector2PropertyTrack);
 
 var ColorPropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     _inherits(ColorPropertyTrack, PropertyTrack);
@@ -24614,8 +25264,28 @@ __decorate([
     serialize()
 ], Vector4PropertyPlayableAsset.prototype, "curveData", void 0);
 Vector4PropertyPlayableAsset = __decorate([
-    effectsClass("Vector4PropertyPlayableAsset")
+    effectsClass(DataType.Vector4PropertyPlayableAsset)
 ], Vector4PropertyPlayableAsset);
+var Vector2PropertyPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
+    _inherits(Vector2PropertyPlayableAsset, PlayableAsset);
+    function Vector2PropertyPlayableAsset() {
+        return PlayableAsset.apply(this, arguments);
+    }
+    var _proto = Vector2PropertyPlayableAsset.prototype;
+    _proto.createPlayable = function createPlayable(graph) {
+        var clipPlayable = new PropertyClipPlayable(graph);
+        clipPlayable.curve = createValueGetter(this.curveData);
+        clipPlayable.value = clipPlayable.curve.getValue(0);
+        return clipPlayable;
+    };
+    return Vector2PropertyPlayableAsset;
+}(PlayableAsset);
+__decorate([
+    serialize()
+], Vector2PropertyPlayableAsset.prototype, "curveData", void 0);
+Vector2PropertyPlayableAsset = __decorate([
+    effectsClass(DataType.Vector2PropertyPlayableAsset)
+], Vector2PropertyPlayableAsset);
 
 var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(ObjectBindingTrack, TrackAsset);
@@ -25998,7 +26668,7 @@ function getStandardInteractContent(ui) {
             }
         });
     });
-    json.version = "2.1";
+    json.version = JSONSceneVersion["2_1"];
     return json;
 }
 /**
@@ -26337,7 +27007,7 @@ function getStandardInteractContent(ui) {
                 break;
         }
     }
-    result.version = "3.0";
+    result.version = JSONSceneVersion["3_0"];
     return result;
 }
 /**
@@ -26879,13 +27549,13 @@ function getStandardJSON(json) {
     }
     throw new Error("Invalid JSON version: " + json.version + ".");
 }
-var currentVersion = "1.0";
+var currentVersion = JSONSceneVersion["1_0"];
 function getStandardJSONFromV0(json) {
     var _json_bins;
-    currentVersion = "1.0";
+    currentVersion = JSONSceneVersion["1_0"];
     var plugins = json.plugins || [];
     if ((_json_bins = json.bins) == null ? void 0 : _json_bins.length) {
-        currentVersion = "1.3";
+        currentVersion = JSONSceneVersion["1_3"];
     }
     var requires = (json.requires || []).slice();
     var images = json.images.map(function(img, index) {
@@ -28808,7 +29478,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    */ _proto.getSpeed = function getSpeed() {
         return this.speed;
     };
-    _proto.play = function play() {
+    /**
+   *
+   */ _proto.play = function play() {
         if (this.isEnded && this.reusable) {
             this.restart();
         }
@@ -28823,7 +29495,10 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    */ _proto.pause = function pause() {
         this.paused = true;
     };
-    _proto.getPaused = function getPaused() {
+    /**
+   *
+   * @returns
+   */ _proto.getPaused = function getPaused() {
         return this.paused;
     };
     /**
@@ -31401,7 +32076,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, VFXItem, true);
-var version$1 = "2.2.6";
+var version$1 = "2.3.0-alpha.1";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33034,8 +33709,8 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.2.6";
+var version = "2.3.0-alpha.1";
 logger.info("THREEJS plugin version: " + version + ".");
 
-export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
+export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector2Curve, Vector2PropertyPlayableAsset, Vector2PropertyTrack, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map