@galacean/effects-threejs 2.2.5 → 2.3.0-alpha.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.2.5
+ * Version: v2.3.0-alpha.0
  */
 
 'use strict';
@@ -979,7 +979,7 @@ var pluginInfoMap = {
     "video": "@galacean/effects-plugin-multimedia",
     "audio": "@galacean/effects-plugin-multimedia",
     "orientation-transformer": "@galacean/effects-plugin-orientation-transformer",
-    "richtext": "@galacean/effects-plugin-rich-text",
+    "rich-text": "@galacean/effects-plugin-rich-text",
     "spine": "@galacean/effects-plugin-spine"
 };
 function getPluginUsageInfo(name) {
@@ -1044,6 +1044,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;
@@ -1349,8 +1369,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) {
@@ -1424,6 +1448,9 @@ var CameraClipMode;
     /**
      * Vector4 曲线
      */ ValueType[ValueType["VECTOR4_CURVE"] = 25] = "VECTOR4_CURVE";
+    /**
+     * Vector2 曲线
+     */ ValueType[ValueType["VECTOR2_CURVE"] = 26] = "VECTOR2_CURVE";
 })(ValueType || (ValueType = {}));
 /**
  * 关键帧类型
@@ -1692,19 +1719,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";
@@ -1716,6 +1737,7 @@ var DataType;
     DataType["SubCompositionTrack"] = "SubCompositionTrack";
     DataType["FloatPropertyTrack"] = "FloatPropertyTrack";
     DataType["ColorPropertyTrack"] = "ColorPropertyTrack";
+    DataType["Vector2PropertyTrack"] = "Vector2PropertyTrack";
     DataType["Vector4PropertyTrack"] = "Vector4PropertyTrack";
     DataType["TransformPlayableAsset"] = "TransformPlayableAsset";
     DataType["SpriteColorPlayableAsset"] = "SpriteColorPlayableAsset";
@@ -1723,6 +1745,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";
@@ -1736,6 +1761,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 = {}));
@@ -1824,8 +1856,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; },
@@ -1853,6 +1888,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; },
@@ -5300,418 +5336,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.");
-}
-
-exports.ShaderCompileResultStatus = void 0;
-(function(ShaderCompileResultStatus) {
-    ShaderCompileResultStatus[ShaderCompileResultStatus["noShader"] = 0] = "noShader";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["success"] = 1] = "success";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["fail"] = 2] = "fail";
-    ShaderCompileResultStatus[ShaderCompileResultStatus["compiling"] = 3] = "compiling";
-})(exports.ShaderCompileResultStatus || (exports.ShaderCompileResultStatus = {}));
-exports.GLSLVersion = void 0;
-(function(GLSLVersion) {
-    GLSLVersion["GLSL1"] = "100";
-    GLSLVersion["GLSL3"] = "300 es";
-})(exports.GLSLVersion || (exports.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);
-exports.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);
-exports.Shader = __decorate([
-    effectsClass(DataType.Shader)
-], exports.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 ? exports.GLSLVersion.GLSL3 : exports.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;
-    }
-}
-
-exports.ShaderType = void 0;
-(function(ShaderType) {
-    ShaderType[ShaderType["vertex"] = 0] = "vertex";
-    ShaderType[ShaderType["fragment"] = 1] = "fragment";
-})(exports.ShaderType || (exports.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++){
@@ -6122,7 +5746,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() {
@@ -6284,6 +5913,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 抽象类
@@ -6918,6 +6685,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.");
+}
+
+exports.ShaderCompileResultStatus = void 0;
+(function(ShaderCompileResultStatus) {
+    ShaderCompileResultStatus[ShaderCompileResultStatus["noShader"] = 0] = "noShader";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["success"] = 1] = "success";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["fail"] = 2] = "fail";
+    ShaderCompileResultStatus[ShaderCompileResultStatus["compiling"] = 3] = "compiling";
+})(exports.ShaderCompileResultStatus || (exports.ShaderCompileResultStatus = {}));
+exports.GLSLVersion = void 0;
+(function(GLSLVersion) {
+    GLSLVersion["GLSL1"] = "100";
+    GLSLVersion["GLSL3"] = "300 es";
+})(exports.GLSLVersion || (exports.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);
+exports.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);
+exports.Shader = __decorate([
+    effectsClass(DataType.Shader)
+], exports.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 ? exports.GLSLVersion.GLSL3 : exports.GLSLVersion.GLSL1,
+        macros: [
+            [
+                "DEPTH_TEXTURE",
+                !!writeDepth
+            ]
+        ],
+        // @ts-expect-error
+        cacheId: COPY_MESH_SHADER_ID + +writeDepth
+    };
+}
+
+exports.ShaderType = void 0;
+(function(ShaderType) {
+    ShaderType[ShaderType["vertex"] = 0] = "vertex";
+    ShaderType[ShaderType["fragment"] = 1] = "fragment";
+})(exports.ShaderType || (exports.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() {
@@ -11741,25 +11782,35 @@ function numberToFix(a, fixed) {
 }
 
 var keyframeInfo = {
+    pointIndexCache: {
+        xIndex: 0,
+        yIndex: 0
+    },
     /**
    * 根据不同关键帧类型，获取位于曲线上的点
    */ getPointInCurve: function getPointInCurve(keyframe) {
         keyframe[0]; var data = keyframe[1];
-        var _this_getPointIndexInCurve = this.getPointIndexInCurve(keyframe), xIndex = _this_getPointIndexInCurve.xIndex, yIndex = _this_getPointIndexInCurve.yIndex;
+        var _this_getPointIndexInCurve = this.getPointIndexInCurve(keyframe, this.pointIndexCache), xIndex = _this_getPointIndexInCurve.xIndex, yIndex = _this_getPointIndexInCurve.yIndex;
         var time = data[xIndex];
         var value = data[yIndex];
         return new Vector2(time, value);
     },
     /**
    * 根据不同关键帧类型，获取位于曲线上的点的索引
-   */ getPointIndexInCurve: function getPointIndexInCurve(keyframe) {
+   */ getPointIndexInCurve: function getPointIndexInCurve(keyframe, res) {
         var type = keyframe[0], markType = keyframe[2];
         // 不同类型，存放的时间不同
         var index = type === BezierKeyframeType.LINE ? 0 : type === BezierKeyframeType.EASE_OUT ? 0 : type === BezierKeyframeType.EASE_IN ? 2 : type === BezierKeyframeType.EASE ? 2 : type === BezierKeyframeType.HOLD ? markType === BezierKeyframeType.EASE_IN ? 2 : 0 : 0;
-        return {
-            xIndex: index,
-            yIndex: index + 1
-        };
+        if (res) {
+            res.xIndex = index;
+            res.yIndex = index + 1;
+            return res;
+        } else {
+            return {
+                xIndex: index,
+                yIndex: index + 1
+            };
+        }
     },
     /**
    * 关键帧左侧是否为缓动类型（否则为线段）
@@ -12666,6 +12717,8 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
                 timeEnd: Number(e.x)
             };
         }
+        this.startKeyframe = keyframes[0];
+        this.endKeyframe = keyframes[keyframes.length - 1];
         this.keyTimeData = Object.keys(this.curveMap);
     };
     _proto.getValue = function getValue(time) {
@@ -12673,12 +12726,18 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
         var keyTimeData = this.keyTimeData;
         var keyTimeStart = this.curveMap[keyTimeData[0]].timeStart;
         var keyTimeEnd = this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
-        // const keyTimeStart = Number(keyTimeData[0].split('&')[0]);
-        // const keyTimeEnd = Number(keyTimeData[keyTimeData.length - 1].split('&')[1]);
         if (time <= keyTimeStart) {
+            if (this.startKeyframe[0] === BezierKeyframeType.LINE || this.startKeyframe[0] === BezierKeyframeType.HOLD) {
+                keyframeInfo.getPointIndexInCurve(this.startKeyframe, keyframeInfo.pointIndexCache);
+                return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
+            }
             return this.getCurveValue(keyTimeData[0], keyTimeStart);
         }
         if (time >= keyTimeEnd) {
+            if (this.endKeyframe[0] === BezierKeyframeType.LINE || this.endKeyframe[0] === BezierKeyframeType.HOLD) {
+                keyframeInfo.getPointIndexInCurve(this.endKeyframe, keyframeInfo.pointIndexCache);
+                return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
+            }
             return this.getCurveValue(keyTimeData[keyTimeData.length - 1], keyTimeEnd);
         }
         for(var i = 0; i < keyTimeData.length; i++){
@@ -13110,6 +13169,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";
@@ -13173,6 +13253,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)) {
@@ -13297,13 +13379,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
@@ -13565,6 +13673,8 @@ function getImageItemRenderInfo(item) {
     };
 }
 
+// Based on:
+// https://github.com/pixijs/pixijs/blob/dev/src/maths/shapes/ShapePrimitive.ts
 var ShapePrimitive = function ShapePrimitive() {
 };
 
@@ -14670,6 +14780,7 @@ function triangulate(contours) {
     return triangleVerts;
 }
 
+// Based on:
 /**
  * A class to define a shape via user defined coordinates.
  */ var Polygon = /*#__PURE__*/ function(ShapePrimitive) {
@@ -14769,12 +14880,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, [
@@ -14896,6 +15008,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) {
@@ -15102,6 +15215,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";
@@ -15170,12 +15284,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() {
@@ -15246,6 +15361,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
@@ -15569,6 +15685,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
     return Rectangle;
 }(ShapePrimitive);
 
+// Based on:
 var ShapePath = /*#__PURE__*/ function() {
     function ShapePath(graphicsPath) {
         this.graphicsPath = graphicsPath;
@@ -15727,6 +15844,7 @@ var ShapePath = /*#__PURE__*/ function() {
     return ShapePath;
 }();
 
+// Based on:
 var GraphicsPath = /*#__PURE__*/ function() {
     function GraphicsPath() {
         this.instructions = [];
@@ -15864,14 +15982,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);
+    }
+}
+
 exports.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) {
@@ -15919,6 +16456,13 @@ exports.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
+        };
         return _this;
     }
     var _proto = ShapeComponent.prototype;
@@ -15926,10 +16470,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.onUpdate = function onUpdate(dt) {
-        if (this.animated) {
+        if (this.shapeDirty) {
             this.buildPath(this.data);
-            this.buildGeometryFromPath(this.path.shapePath);
-            this.animated = false;
+            this.buildGeometryFromPath(this.graphicsPath.shapePath);
+            this.shapeDirty = false;
         }
     };
     _proto.buildGeometryFromPath = function buildGeometryFromPath(shapePath) {
@@ -15944,7 +16488,13 @@ exports.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
@@ -15957,7 +16507,7 @@ exports.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
@@ -15980,7 +16530,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.geometry.setDrawCount(indices.length);
     };
     _proto.buildPath = function buildPath(data) {
-        this.path.clear();
+        this.graphicsPath.clear();
         var shapeData = data;
         switch(shapeData.type){
             case ShapePrimitiveType.Custom:
@@ -15989,9 +16539,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     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 shape = _step.value;
+                        this.curveValues = [];
                         this.setFillColor(shape.fill);
                         var indices = shape.indexes;
                         for(var i = 1; i < indices.length; i++){
@@ -16009,42 +16559,42 @@ exports.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);
+                    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);
+                    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);
+                    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);
+                    this.graphicsPath.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
                     this.setFillColor(polygonData.fill);
                     break;
                 }
@@ -16059,6 +16609,12 @@ exports.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;
+        }
         var material = this.material;
         //@ts-expect-error // TODO 新版蒙版上线后重构
         material.stencilRef = data.renderer.mask !== undefined ? [
@@ -16068,6 +16624,15 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         //@ts-expect-error // TODO 新版蒙版上线后重构
         setMaskMode(material, data.renderer.maskMode);
     };
+    _create_class(ShapeComponent, [
+        {
+            key: "path",
+            get: function get() {
+                this.shapeDirty = true;
+                return this.data;
+            }
+        }
+    ]);
     return ShapeComponent;
 }(MeshComponent);
 exports.ShapeComponent = __decorate([
@@ -16282,7 +16847,7 @@ var EventSystem = /*#__PURE__*/ function() {
             var vy = 0;
             var ts = performance.now();
             if (!_this.target) {
-                logger.error("Trigger TouchEvent after EventSystem is disposed.");
+                logger.warn("Trigger TouchEvent after EventSystem is disposed.");
                 return {
                     x: x,
                     y: y,
@@ -18755,10 +19320,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;
 }
 
@@ -23105,88 +23679,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);
@@ -23930,50 +24497,40 @@ 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.setZero();
+    };
+    _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.setZero();
+    };
+    _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
@@ -24354,6 +24911,26 @@ exports.Vector4PropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
 exports.Vector4PropertyTrack = __decorate([
     effectsClass(DataType.Vector4PropertyTrack)
 ], exports.Vector4PropertyTrack);
+exports.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);
+exports.Vector2PropertyTrack = __decorate([
+    effectsClass("Vector2PropertyTrack")
+], exports.Vector2PropertyTrack);
 
 exports.ColorPropertyTrack = /*#__PURE__*/ function(PropertyTrack) {
     _inherits(ColorPropertyTrack, PropertyTrack);
@@ -24620,8 +25197,28 @@ __decorate([
     serialize()
 ], exports.Vector4PropertyPlayableAsset.prototype, "curveData", void 0);
 exports.Vector4PropertyPlayableAsset = __decorate([
-    effectsClass("Vector4PropertyPlayableAsset")
+    effectsClass(DataType.Vector4PropertyPlayableAsset)
 ], exports.Vector4PropertyPlayableAsset);
+exports.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()
+], exports.Vector2PropertyPlayableAsset.prototype, "curveData", void 0);
+exports.Vector2PropertyPlayableAsset = __decorate([
+    effectsClass(DataType.Vector2PropertyPlayableAsset)
+], exports.Vector2PropertyPlayableAsset);
 
 exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset) {
     _inherits(ObjectBindingTrack, TrackAsset);
@@ -26004,7 +26601,7 @@ function getStandardInteractContent(ui) {
             }
         });
     });
-    json.version = "2.1";
+    json.version = JSONSceneVersion["2_1"];
     return json;
 }
 /**
@@ -26024,6 +26621,18 @@ function getStandardInteractContent(ui) {
     });
     return json;
 }
+/**
+ * 3.1 版本数据适配
+ * - 富文本插件名称的适配
+ */ function version31Migration(json) {
+    var _json_plugins;
+    (_json_plugins = json.plugins) == null ? void 0 : _json_plugins.forEach(function(plugin, index) {
+        if (plugin === "richtext") {
+            json.plugins[index] = "rich-text";
+        }
+    });
+    return json;
+}
 /**
  * 3.0 以下版本数据适配（runtime 2.0及以上版本支持）
  */ function version30Migration(json) {
@@ -26331,7 +26940,7 @@ function getStandardInteractContent(ui) {
                 break;
         }
     }
-    result.version = "3.0";
+    result.version = JSONSceneVersion["3_0"];
     return result;
 }
 /**
@@ -26851,6 +27460,8 @@ function getStandardJSON(json) {
     }
     // 修正老版本数据中，meshItem 以及 lightItem 结束行为错误问题
     version22Migration(json);
+    // 修正老版本数据中，富文本插件名称的问题
+    version31Migration(json);
     if (v0.test(json.version)) {
         var _exec;
         reverseParticle = ((_exec = /^(\d+)/.exec(json.version)) == null ? void 0 : _exec[0]) === "0";
@@ -26871,13 +27482,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) {
@@ -28800,7 +29411,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();
         }
@@ -28815,7 +29428,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;
     };
     /**
@@ -31393,7 +32009,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version$1 = "2.2.5";
+var version$1 = "2.3.0-alpha.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33026,7 +33642,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.2.5";
+var version = "2.3.0-alpha.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -33145,6 +33761,7 @@ exports.TrackSortWrapper = TrackSortWrapper;
 exports.Transform = Transform;
 exports.TransformAnimationPlayable = TransformAnimationPlayable;
 exports.ValueGetter = ValueGetter;
+exports.Vector2Curve = Vector2Curve;
 exports.Vector4Curve = Vector4Curve;
 exports.addByOrder = addByOrder;
 exports.addItem = addItem;