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

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.3.0-alpha.0
+ * Version: v2.3.0-alpha.2
  */
 
 'use strict';
@@ -1061,7 +1061,8 @@ function _inherits(subClass, superClass) {
     JSONSceneVersion["2_4"] = "2.4";
     JSONSceneVersion["3_0"] = "3.0";
     JSONSceneVersion["3_1"] = "3.1";
-    JSONSceneVersion["LATEST"] = "3.1";
+    JSONSceneVersion["3_2"] = "3.2";
+    JSONSceneVersion["LATEST"] = "3.2";
 })(JSONSceneVersion || (JSONSceneVersion = {}));
 
 /*********************************************/ /*               元素属性参数类型               */ /*********************************************/ /**
@@ -1599,7 +1600,7 @@ var MaterialBlending;
 var TextOverflow;
 (function(TextOverflow) {
     /**
-     * display 模式下，会显示所有文本，存在文本超过边界框的情况。
+     * display 模式下，会显示所有文本，文本大小会根据边界框调整。
      */ TextOverflow[TextOverflow["display"] = 0] = "display";
     /**
      * clip 模式下，当文本内容超出边界框时，多余的会被截断。
@@ -1692,12 +1693,18 @@ var BuiltinObjectGUID = {
      */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
 })(ShapePrimitiveType || (ShapePrimitiveType = {}));
 
-// 本期无该功能 待补充
-var ShapeConnectType;
-(function(ShapeConnectType) {})(ShapeConnectType || (ShapeConnectType = {}));
-// @待补充
-var ShapePointType;
-(function(ShapePointType) {})(ShapePointType || (ShapePointType = {}));
+var LineCap;
+(function(LineCap) {
+    /** 默认值。向线条的每个末端添加平直的边缘 */ LineCap[LineCap["Butt"] = 0] = "Butt";
+    /** 向线条的每个末端添加圆形线帽 */ LineCap[LineCap["Round"] = 1] = "Round";
+    /** 向线条的每个末端添加正方形线帽 */ LineCap[LineCap["Square"] = 2] = "Square";
+})(LineCap || (LineCap = {}));
+var LineJoin;
+(function(LineJoin) {
+    /** 创建圆角 */ LineJoin[LineJoin["Round"] = 0] = "Round";
+    /** 创建斜角 */ LineJoin[LineJoin["Bevel"] = 1] = "Bevel";
+    /** 创建尖角 */ LineJoin[LineJoin["Miter"] = 2] = "Miter";
+})(LineJoin || (LineJoin = {}));
 
 /**
  * 动态换图类型
@@ -1906,8 +1913,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get FontStyle () { return FontStyle; },
     BuiltinObjectGUID: BuiltinObjectGUID,
     get ShapePrimitiveType () { return ShapePrimitiveType; },
-    get ShapeConnectType () { return ShapeConnectType; },
-    get ShapePointType () { return ShapePointType; },
+    get LineCap () { return LineCap; },
+    get LineJoin () { return LineJoin; },
     get BackgroundType () { return BackgroundType; },
     get MultimediaType () { return MultimediaType; },
     get DataType () { return DataType; },
@@ -3826,7 +3833,9 @@ Vector4.ZERO = new Vector4(0.0, 0.0, 0.0, 0.0);
         if (renderer.renderingData.currentFrame.globalUniforms) {
             renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
         }
-        renderer.drawGeometry(this.geometry, this.material);
+        for(var i = 0; i < this.materials.length; i++){
+            renderer.drawGeometry(this.geometry, this.materials[i], i);
+        }
     };
     _proto.getBoundingBox = function getBoundingBox() {
         var worldMatrix = this.transform.getWorldMatrix();
@@ -7361,7 +7370,15 @@ var BYTES_TYPE_MAP = (_obj$6 = {}, _obj$6[glContext.FLOAT] = Float32Array.BYTES_
  */ var Geometry = /*#__PURE__*/ function(EffectsObject) {
     _inherits(Geometry, EffectsObject);
     function Geometry() {
-        return EffectsObject.apply(this, arguments);
+        var _this;
+        _this = EffectsObject.apply(this, arguments) || this;
+        /**
+   * Geometry 的名称
+   */ _this.name = "";
+        /**
+   * 子网格数据
+   */ _this.subMeshes = [];
+        return _this;
     }
     var _proto = Geometry.prototype;
     /**
@@ -10208,7 +10225,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";
 
@@ -12727,18 +12744,12 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
         var keyTimeStart = this.curveMap[keyTimeData[0]].timeStart;
         var keyTimeEnd = this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
         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);
+            keyframeInfo.getPointIndexInCurve(this.startKeyframe, keyframeInfo.pointIndexCache);
+            return this.startKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
         }
         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);
+            keyframeInfo.getPointIndexInCurve(this.endKeyframe, keyframeInfo.pointIndexCache);
+            return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
         }
         for(var i = 0; i < keyTimeData.length; i++){
             var xMin = this.curveMap[keyTimeData[i]].timeStart;
@@ -13590,11 +13601,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 = {
@@ -14881,6 +14895,10 @@ function triangulate(contours) {
             points
         ]);
         var indexStart = vertices.length / 2;
+        // 当所有 points 在一条直线时, gluTess 三角化 triangles 会返回空数组，这边做一下额外处理返回线段左右端点组成的三角形，确保拿到的包围盒是正确的。
+        if (triangles.length === 0) {
+            this.getLineEndPointsTriangle(points, triangles);
+        }
         for(var i = 0; i < triangles.length; i++){
             vertices[verticesOffset * 2 + i] = triangles[i];
         }
@@ -14889,6 +14907,57 @@ function triangulate(contours) {
             indices[indicesOffset + i1] = indexStart + i1;
         }
     };
+    /**
+   * 获取直线上最远的两个端点坐标组成的三角形
+   */ _proto.getLineEndPointsTriangle = function getLineEndPointsTriangle(points, triangles) {
+        // 参数检查
+        if (!points || points.length < 2 || points.length % 2 !== 0) {
+            throw new Error("Invalid points array");
+        }
+        if (points.length === 2) {
+            triangles.push(points[0], points[1], points[0], points[1], points[0], points[1]);
+            return;
+        }
+        // 取第一个线段计算斜率
+        var dx = points[2] - points[0];
+        var dy = points[3] - points[1];
+        // 存放结果坐标
+        var startX = points[0];
+        var startY = points[1];
+        var endX = points[0];
+        var endY = points[1];
+        // 根据斜率决定比较x还是y
+        if (Math.abs(dx) >= Math.abs(dy)) {
+            // 水平方向为主,比较x坐标
+            for(var i = 0; i < points.length; i += 2){
+                var x = points[i];
+                var y = points[i + 1];
+                if (x < startX) {
+                    startX = x;
+                    startY = y;
+                }
+                if (x > endX) {
+                    endX = x;
+                    endY = y;
+                }
+            }
+        } else {
+            // 垂直方向为主,比较y坐标
+            for(var i1 = 0; i1 < points.length; i1 += 2){
+                var x1 = points[i1];
+                var y1 = points[i1 + 1];
+                if (y1 < startY) {
+                    startX = x1;
+                    startY = y1;
+                }
+                if (y1 > endY) {
+                    endX = x1;
+                    endY = y1;
+                }
+            }
+        }
+        triangles.push(startX, startY, endX, endY, endX, endY);
+    };
     _create_class(Polygon, [
         {
             key: "lastX",
@@ -15362,47 +15431,48 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
 }(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
- * point (`x`, `y`) and by its `width` and its `height`.
+ * The `Rectangle` object is an area defined by its position, as indicated by its top-left corner
+ * point (`x`, `y`) and by its `width` and its `height`, including a `roundness` property that
+ * defines the roundness of the rounded corners.
+ * @memberof maths
  */ var Rectangle$1 = /*#__PURE__*/ function(ShapePrimitive) {
     _inherits(Rectangle, ShapePrimitive);
-    function Rectangle(x, y, width, height) {
+    function Rectangle(x, y, width, height, roundness) {
         if (x === void 0) x = 0;
         if (y === void 0) y = 0;
         if (width === void 0) width = 0;
         if (height === void 0) height = 0;
+        if (roundness === void 0) roundness = 20;
         var _this;
         _this = ShapePrimitive.call(this) || this;
-        _this.x = Number(x);
-        _this.y = Number(y);
-        _this.width = Number(width);
-        _this.height = Number(height);
+        _this.x = x;
+        _this.y = y;
+        _this.width = width;
+        _this.height = height;
+        _this.roundness = roundness;
         return _this;
     }
     var _proto = Rectangle.prototype;
-    /** Determines whether the Rectangle is empty. */ _proto.isEmpty = function isEmpty() {
-        return this.left === this.right || this.top === this.bottom;
+    /**
+   * Returns the framing rectangle of the rectangle as a Rectangle object
+   * @param out - optional rectangle to store the result
+   * @returns The framing rectangle
+   */ _proto.getBounds = function getBounds(out) {
+        out = out || new Rectangle();
+        out.x = this.x;
+        out.y = this.y;
+        out.width = this.width;
+        out.height = this.height;
+        return out;
     };
     /**
-   * Creates a clone of this Rectangle
-   * @returns a copy of the rectangle
+   * Creates a clone of this rectangle.
+   * @returns - A copy of the rectangle.
    */ _proto.clone = function clone() {
-        return new Rectangle(this.x, this.y, this.width, this.height);
+        return new Rectangle(this.x, this.y, this.width, this.height, this.roundness);
     };
     /**
-   * Converts a Bounds object to a Rectangle object.
-   * @param bounds - The bounds to copy and convert to a rectangle.
-   * @returns Returns itself.
-   */ //   copyFromBounds (bounds: Bounds): this {
-    //     this.x = bounds.minX;
-    //     this.y = bounds.minY;
-    //     this.width = bounds.maxX - bounds.minX;
-    //     this.height = bounds.maxY - bounds.minY;
-    //     return this;
-    //   }
-    /**
    * Copies another rectangle to this one.
    * @param rectangle - The rectangle to copy from.
    * @returns Returns itself.
@@ -15411,6 +15481,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
         this.y = rectangle.y;
         this.width = rectangle.width;
         this.height = rectangle.height;
+        this.roundness = rectangle.roundness;
         return this;
     };
     /**
@@ -15421,267 +15492,121 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
         rectangle.copyFrom(this);
         return rectangle;
     };
-    /**
-   * Checks whether the x and y coordinates given are contained within this Rectangle
-   * @param x - The X coordinate of the point to test
-   * @param y - The Y coordinate of the point to test
-   * @returns Whether the x/y coordinates are within this Rectangle
-   */ _proto.contains = function contains(x, y) {
-        if (this.width <= 0 || this.height <= 0) {
-            return false;
+    _proto.build = function build(points) {
+        var ry;
+        var halfWidth = this.width / 2;
+        var halfHeight = this.height / 2;
+        var x = this.x + halfWidth;
+        var y = this.y + halfHeight;
+        var rx = ry = Math.max(0, Math.min(this.roundness / 100, 1) * Math.min(halfWidth, halfHeight));
+        var dx = halfWidth - rx;
+        var dy = halfHeight - ry;
+        if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
+            return;
         }
-        if (x >= this.x && x < this.x + this.width) {
-            if (y >= this.y && y < this.y + this.height) {
-                return true;
-            }
+        // 控制边缘的平滑程度
+        var densityScale = 5;
+        // Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
+        var n = densityScale * Math.ceil(2.3 * Math.sqrt(rx + ry));
+        var m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
+        if (m === 0) {
+            return;
         }
-        return false;
-    };
-    /**
-   * Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
-   * @param x - The X coordinate of the point to test
-   * @param y - The Y coordinate of the point to test
-   * @param strokeWidth - The width of the line to check
-   * @returns Whether the x/y coordinates are within this rectangle
-   */ _proto.strokeContains = function strokeContains(x, y, strokeWidth) {
-        var _this = this, width = _this.width, height = _this.height;
-        if (width <= 0 || height <= 0) {
-            return false;
+        if (n === 0) {
+            points[0] = points[6] = x + dx;
+            points[1] = points[3] = y + dy;
+            points[2] = points[4] = x - dx;
+            points[5] = points[7] = y - dy;
+            return;
         }
-        var _x = this.x;
-        var _y = this.y;
-        var outerLeft = _x - strokeWidth / 2;
-        var outerRight = _x + width + strokeWidth / 2;
-        var outerTop = _y - strokeWidth / 2;
-        var outerBottom = _y + height + strokeWidth / 2;
-        var innerLeft = _x + strokeWidth / 2;
-        var innerRight = _x + width - strokeWidth / 2;
-        var innerTop = _y + strokeWidth / 2;
-        var innerBottom = _y + height - strokeWidth / 2;
-        return x >= outerLeft && x <= outerRight && y >= outerTop && y <= outerBottom && !(x > innerLeft && x < innerRight && y > innerTop && y < innerBottom);
-    };
-    /**
-   * Determines whether the `other` Rectangle transformed by `transform` intersects with `this` Rectangle object.
-   * Returns true only if the area of the intersection is >0, this means that Rectangles
-   * sharing a side are not overlapping. Another side effect is that an arealess rectangle
-   * (width or height equal to zero) can't intersect any other rectangle.
-   * @param {Rectangle} other - The Rectangle to intersect with `this`.
-   * @param {Matrix} transform - The transformation matrix of `other`.
-   * @returns {boolean} A value of `true` if the transformed `other` Rectangle intersects with `this`; otherwise `false`.
-   */ //   intersects (other: Rectangle, transform?: Matrix4): boolean {
-    //     if (!transform) {
-    //       const x0 = this.x < other.x ? other.x : this.x;
-    //       const x1 = this.right > other.right ? other.right : this.right;
-    //       if (x1 <= x0) {
-    //         return false;
-    //       }
-    //       const y0 = this.y < other.y ? other.y : this.y;
-    //       const y1 = this.bottom > other.bottom ? other.bottom : this.bottom;
-    //       return y1 > y0;
-    //     }
-    //     const x0 = this.left;
-    //     const x1 = this.right;
-    //     const y0 = this.top;
-    //     const y1 = this.bottom;
-    //     if (x1 <= x0 || y1 <= y0) {
-    //       return false;
-    //     }
-    //     const lt = tempPoints[0].set(other.left, other.top);
-    //     const lb = tempPoints[1].set(other.left, other.bottom);
-    //     const rt = tempPoints[2].set(other.right, other.top);
-    //     const rb = tempPoints[3].set(other.right, other.bottom);
-    //     if (rt.x <= lt.x || lb.y <= lt.y) {
-    //       return false;
-    //     }
-    //     const s = Math.sign((transform.a * transform.d) - (transform.b * transform.c));
-    //     if (s === 0) {
-    //       return false;
-    //     }
-    //     transform.apply(lt, lt);
-    //     transform.apply(lb, lb);
-    //     transform.apply(rt, rt);
-    //     transform.apply(rb, rb);
-    //     if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0
-    //             || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1
-    //             || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0
-    //             || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
-    //       return false;
-    //     }
-    //     const nx = s * (lb.y - lt.y);
-    //     const ny = s * (lt.x - lb.x);
-    //     const n00 = (nx * x0) + (ny * y0);
-    //     const n10 = (nx * x1) + (ny * y0);
-    //     const n01 = (nx * x0) + (ny * y1);
-    //     const n11 = (nx * x1) + (ny * y1);
-    //     if (Math.max(n00, n10, n01, n11) <= (nx * lt.x) + (ny * lt.y)
-    //             || Math.min(n00, n10, n01, n11) >= (nx * rb.x) + (ny * rb.y)) {
-    //       return false;
-    //     }
-    //     const mx = s * (lt.y - rt.y);
-    //     const my = s * (rt.x - lt.x);
-    //     const m00 = (mx * x0) + (my * y0);
-    //     const m10 = (mx * x1) + (my * y0);
-    //     const m01 = (mx * x0) + (my * y1);
-    //     const m11 = (mx * x1) + (my * y1);
-    //     if (Math.max(m00, m10, m01, m11) <= (mx * lt.x) + (my * lt.y)
-    //             || Math.min(m00, m10, m01, m11) >= (mx * rb.x) + (my * rb.y)) {
-    //       return false;
-    //     }
-    //     return true;
-    //   }
-    /**
-   * Pads the rectangle making it grow in all directions.
-   * If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
-   * @param paddingX - The horizontal padding amount.
-   * @param paddingY - The vertical padding amount.
-   * @returns Returns itself.
-   */ _proto.pad = function pad(paddingX, paddingY) {
-        if (paddingX === void 0) paddingX = 0;
-        if (paddingY === void 0) paddingY = paddingX;
-        this.x -= paddingX;
-        this.y -= paddingY;
-        this.width += paddingX * 2;
-        this.height += paddingY * 2;
-        return this;
-    };
-    /**
-   * Fits this rectangle around the passed one.
-   * @param rectangle - The rectangle to fit.
-   * @returns Returns itself.
-   */ _proto.fit = function fit(rectangle) {
-        var x1 = Math.max(this.x, rectangle.x);
-        var x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
-        var y1 = Math.max(this.y, rectangle.y);
-        var y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
-        this.x = x1;
-        this.width = Math.max(x2 - x1, 0);
-        this.y = y1;
-        this.height = Math.max(y2 - y1, 0);
-        return this;
-    };
-    /**
-   * Enlarges rectangle that way its corners lie on grid
-   * @param resolution - resolution
-   * @param eps - precision
-   * @returns Returns itself.
-   */ _proto.ceil = function ceil(resolution, eps) {
-        if (resolution === void 0) resolution = 1;
-        if (eps === void 0) eps = 0.001;
-        var x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
-        var y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
-        this.x = Math.floor((this.x + eps) * resolution) / resolution;
-        this.y = Math.floor((this.y + eps) * resolution) / resolution;
-        this.width = x2 - this.x;
-        this.height = y2 - this.y;
-        return this;
-    };
-    /**
-   * Enlarges this rectangle to include the passed rectangle.
-   * @param rectangle - The rectangle to include.
-   * @returns Returns itself.
-   */ _proto.enlarge = function enlarge(rectangle) {
-        var x1 = Math.min(this.x, rectangle.x);
-        var x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
-        var y1 = Math.min(this.y, rectangle.y);
-        var y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
-        this.x = x1;
-        this.width = x2 - x1;
-        this.y = y1;
-        this.height = y2 - y1;
-        return this;
-    };
-    /**
-   * Returns the framing rectangle of the rectangle as a Rectangle object
-   * @param out - optional rectangle to store the result
-   * @returns The framing rectangle
-   */ _proto.getBounds = function getBounds(out) {
-        out = out || new Rectangle();
-        out.copyFrom(this);
-        return out;
-    };
-    _proto.getX = function getX() {
-        return this.x;
-    };
-    _proto.getY = function getY() {
-        return this.y;
-    };
-    _proto.build = function build(points) {
-        var x = this.x;
-        var y = this.y;
-        var width = this.width;
-        var height = this.height;
-        if (!(width >= 0 && height >= 0)) {
-            return points;
+        var j1 = 0;
+        var j2 = n * 4 + (dx ? 2 : 0) + 2;
+        var j3 = j2;
+        var j4 = m;
+        var x0 = dx + rx;
+        var y0 = dy;
+        var x1 = x + x0;
+        var x2 = x - x0;
+        var y1 = y + y0;
+        points[j1++] = x1;
+        points[j1++] = y1;
+        points[--j2] = y1;
+        points[--j2] = x2;
+        if (dy) {
+            var y2 = y - y0;
+            points[j3++] = x2;
+            points[j3++] = y2;
+            points[--j4] = y2;
+            points[--j4] = x1;
+        }
+        for(var i = 1; i < n; i++){
+            var a = Math.PI / 2 * (i / n);
+            var x01 = dx + Math.cos(a) * rx;
+            var y01 = dy + Math.sin(a) * ry;
+            var x11 = x + x01;
+            var x21 = x - x01;
+            var y11 = y + y01;
+            var y21 = y - y01;
+            points[j1++] = x11;
+            points[j1++] = y11;
+            points[--j2] = y11;
+            points[--j2] = x21;
+            points[j3++] = x21;
+            points[j3++] = y21;
+            points[--j4] = y21;
+            points[--j4] = x11;
+        }
+        x0 = dx;
+        y0 = dy + ry;
+        x1 = x + x0;
+        x2 = x - x0;
+        y1 = y + y0;
+        var y22 = y - y0;
+        points[j1++] = x1;
+        points[j1++] = y1;
+        points[--j4] = y22;
+        points[--j4] = x1;
+        if (dx) {
+            points[j1++] = x2;
+            points[j1++] = y1;
+            points[--j4] = y22;
+            points[--j4] = x2;
         }
-        points[0] = x;
-        points[1] = y;
-        points[2] = x + width;
-        points[3] = y;
-        points[4] = x + width;
-        points[5] = y + height;
-        points[6] = x;
-        points[7] = y + height;
-        return points;
     };
     _proto.triangulate = function triangulate(points, vertices, verticesOffset, indices, indicesOffset) {
-        var count = 0;
-        var verticesStride = 2;
-        verticesOffset *= verticesStride;
-        vertices[verticesOffset + count] = points[0];
-        vertices[verticesOffset + count + 1] = points[1];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[2];
-        vertices[verticesOffset + count + 1] = points[3];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[6];
-        vertices[verticesOffset + count + 1] = points[7];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[4];
-        vertices[verticesOffset + count + 1] = points[5];
-        count += verticesStride;
-        var verticesIndex = verticesOffset / verticesStride;
-        // triangle 1
-        indices[indicesOffset++] = verticesIndex;
-        indices[indicesOffset++] = verticesIndex + 1;
-        indices[indicesOffset++] = verticesIndex + 2;
-        // triangle 2
-        indices[indicesOffset++] = verticesIndex + 1;
-        indices[indicesOffset++] = verticesIndex + 3;
-        indices[indicesOffset++] = verticesIndex + 2;
-    };
-    _create_class(Rectangle, [
-        {
-            key: "left",
-            get: /** Returns the left edge of the rectangle. */ function get() {
-                return this.x;
-            }
-        },
-        {
-            key: "right",
-            get: /** Returns the right edge of the rectangle. */ function get() {
-                return this.x + this.width;
-            }
-        },
-        {
-            key: "top",
-            get: /** Returns the top edge of the rectangle. */ function get() {
-                return this.y;
-            }
-        },
-        {
-            key: "bottom",
-            get: /** Returns the bottom edge of the rectangle. */ function get() {
-                return this.y + this.height;
-            }
+        if (points.length === 0) {
+            return;
         }
-    ], [
-        {
-            key: "EMPTY",
-            get: /** A constant empty rectangle. This is a new object every time the property is accessed */ function get() {
-                return new Rectangle(0, 0, 0, 0);
+        // Compute center (average of all points)
+        var centerX = 0;
+        var centerY = 0;
+        for(var i = 0; i < points.length; i += 2){
+            centerX += points[i];
+            centerY += points[i + 1];
+        }
+        centerX /= points.length / 2;
+        centerY /= points.length / 2;
+        // Set center vertex
+        var count = verticesOffset;
+        vertices[count * 2] = centerX;
+        vertices[count * 2 + 1] = centerY;
+        var centerIndex = count++;
+        // Set edge vertices and indices
+        for(var i1 = 0; i1 < points.length; i1 += 2){
+            vertices[count * 2] = points[i1];
+            vertices[count * 2 + 1] = points[i1 + 1];
+            if (i1 > 0) {
+                indices[indicesOffset++] = count;
+                indices[indicesOffset++] = centerIndex;
+                indices[indicesOffset++] = count - 1;
             }
+            count++;
         }
-    ]);
+        // Connect last point to the first edge point
+        indices[indicesOffset++] = centerIndex + 1;
+        indices[indicesOffset++] = centerIndex;
+        indices[indicesOffset++] = count - 1;
+    };
     return Rectangle;
 }(ShapePrimitive);
 
@@ -15779,8 +15704,8 @@ var ShapePath = /*#__PURE__*/ function() {
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
    * @returns The instance of the current object for chaining.
-   */ _proto.rect = function rect(x, y, w, h, transform) {
-        this.drawShape(new Rectangle$1(x, y, w, h), transform);
+   */ _proto.rect = function rect(x, y, w, h, roundness, transform) {
+        this.drawShape(new Rectangle$1(x, y, w, h, roundness), transform);
         return this;
     };
     /**
@@ -15926,7 +15851,7 @@ var GraphicsPath = /*#__PURE__*/ function() {
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
    * @returns The instance of the current object for chaining.
-   */ _proto.rect = function rect(x, y, w, h, transform) {
+   */ _proto.rect = function rect(x, y, w, h, roundness, transform) {
         this.instructions.push({
             action: "rect",
             data: [
@@ -15934,6 +15859,7 @@ var GraphicsPath = /*#__PURE__*/ function() {
                 y,
                 w,
                 h,
+                roundness,
                 transform
             ]
         });
@@ -16243,9 +16169,9 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
     var innerWeight = (1 - ratio) * 2;
     var outerWeight = ratio * 2;
     if (!closedShape) {
-        if (style.cap === "round") {
+        if (style.cap === LineCap.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") {
+        } else if (style.cap === LineCap.Square) {
             indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
         }
     }
@@ -16284,7 +16210,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
             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") {
+                if (style.join === LineJoin.Round) {
                     indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 4;
                 } else {
                     indexCount += 2;
@@ -16308,7 +16234,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
         var smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
         var insideMiterOk = pDist <= smallerInsideDiagonalSq;
         if (insideMiterOk) {
-            if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
+            if (style.join === LineJoin.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
@@ -16321,7 +16247,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
                     verts.push(omx, omy); // outer miter point
                 }
                 indexCount += 2;
-            } else if (style.join === "round") {
+            } else if (style.join === LineJoin.Round) {
                 if (clockwise) /* arc is outside */ {
                     verts.push(imx, imy);
                     verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
@@ -16342,13 +16268,13 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
         } 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 (style.join === LineJoin.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) {
+            } else if (style.join === LineJoin.Miter && pDist / widthSquared <= miterLimitSquared) {
                 if (clockwise) {
                     verts.push(omx, omy); // inner miter point
                     verts.push(omx, omy); // inner miter point
@@ -16377,9 +16303,9 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
     verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
     verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
     if (!closedShape) {
-        if (style.cap === "round") {
+        if (style.cap === LineCap.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") {
+        } else if (style.cap === LineCap.Square) {
             indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
         }
     }
@@ -16406,9 +16332,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         var _this;
         _this = MeshComponent.call(this, engine) || this;
         _this.isStroke = false;
+        _this.isFill = false;
+        _this.shapeDirty = true;
         _this.graphicsPath = new GraphicsPath();
         _this.curveValues = [];
-        _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) {
@@ -16441,6 +16368,15 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 mode: glContext.TRIANGLES,
                 drawCount: 4
             });
+            _this.geometry.subMeshes.push({
+                offset: 0,
+                indexCount: 0,
+                vertexCount: 0
+            }, {
+                offset: 0,
+                indexCount: 0,
+                vertexCount: 0
+            });
         }
         if (!_this.material) {
             var materialProps = {
@@ -16450,18 +16386,36 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     glslVersion: exports.GLSLVersion.GLSL1
                 }
             };
-            _this.material = Material.create(engine, materialProps);
-            _this.material.setColor("_Color", new Color(1, 1, 1, 1));
-            _this.material.depthMask = false;
-            _this.material.depthTest = true;
-            _this.material.blending = true;
+            var fillMaterial = Material.create(engine, materialProps);
+            fillMaterial.setColor("_Color", new Color(1, 1, 1, 1));
+            fillMaterial.depthMask = false;
+            fillMaterial.depthTest = true;
+            fillMaterial.blending = true;
+            _this.material = fillMaterial;
+            var strokeMaterial = Material.create(engine, materialProps);
+            strokeMaterial.setColor("_Color", new Color(0.25, 0.25, 0.25, 1));
+            strokeMaterial.depthMask = false;
+            strokeMaterial.depthTest = true;
+            strokeMaterial.blending = true;
+            _this.materials[1] = strokeMaterial;
         }
         _this.strokeAttributes = {
             width: 1,
             alignment: 0.5,
-            cap: "butt",
-            join: "miter",
-            miterLimit: 10
+            cap: LineCap.Butt,
+            join: LineJoin.Miter,
+            miterLimit: 10,
+            color: new Color(1, 1, 1, 1)
+        };
+        _this.fillAttribute = {
+            color: new Color(1, 1, 1, 1)
+        };
+        _this.shapeAttribute = {
+            type: ShapePrimitiveType.Custom,
+            points: [],
+            easingIns: [],
+            easingOuts: [],
+            shapes: []
         };
         return _this;
     }
@@ -16470,8 +16424,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.onUpdate = function onUpdate(dt) {
+        this.material.color = this.fillAttribute.color;
+        this.materials[1].color = this.strokeAttributes.color;
         if (this.shapeDirty) {
-            this.buildPath(this.data);
+            this.buildPath(this.shapeAttribute);
             this.buildGeometryFromPath(this.graphicsPath.shapePath);
             this.shapeDirty = false;
         }
@@ -16480,22 +16436,34 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         var shapePrimitives = shapePath.shapePrimitives;
         var vertices = [];
         var indices = [];
-        // triangulate shapePrimitive
-        for(var _iterator = _create_for_of_iterator_helper_loose(shapePrimitives), _step; !(_step = _iterator()).done;){
-            var shapePrimitive = _step.value;
-            var shape = shapePrimitive.shape;
-            var points = [];
-            var indexOffset = indices.length;
-            var vertOffset = vertices.length / 2;
-            shape.build(points);
-            if (!this.isStroke) {
+        // Triangulate shapePrimitive
+        //---------------------------------------------------
+        if (this.isFill) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(shapePrimitives), _step; !(_step = _iterator()).done;){
+                var shapePrimitive = _step.value;
+                var shape = shapePrimitive.shape;
+                var points = [];
+                var indexOffset = indices.length;
+                var vertOffset = vertices.length / 2;
+                shape.build(points);
                 shape.triangulate(points, vertices, vertOffset, indices, indexOffset);
-            } else {
+            }
+        }
+        var fillIndexCount = indices.length;
+        if (this.isStroke) {
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(shapePrimitives), _step1; !(_step1 = _iterator1()).done;){
+                var shapePrimitive1 = _step1.value;
+                var shape1 = shapePrimitive1.shape;
+                var points1 = [];
+                indices.length;
+                var vertOffset1 = vertices.length / 2;
                 var close = true;
                 var lineStyle = this.strokeAttributes;
-                buildLine(points, lineStyle, false, close, vertices, 2, vertOffset, indices);
+                shape1.build(points1);
+                buildLine(points1, lineStyle, false, close, vertices, 2, vertOffset1, indices);
             }
         }
+        var strokeIndexCount = indices.length - fillIndexCount;
         var vertexCount = vertices.length / 2;
         // get the current attribute and index arrays from the geometry, avoiding re-creation
         var positionArray = this.geometry.getAttributeData("aPos");
@@ -16528,21 +16496,25 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.geometry.setAttributeData("aUV", uvArray);
         this.geometry.setIndexData(indexArray);
         this.geometry.setDrawCount(indices.length);
-    };
-    _proto.buildPath = function buildPath(data) {
+        var u16Size = 2;
+        var fillSubMesh = this.geometry.subMeshes[0];
+        var strokeSubMesh = this.geometry.subMeshes[1];
+        fillSubMesh.indexCount = fillIndexCount;
+        strokeSubMesh.offset = fillIndexCount * u16Size;
+        strokeSubMesh.indexCount = strokeIndexCount;
+    };
+    _proto.buildPath = function buildPath(shapeAttribute) {
         this.graphicsPath.clear();
-        var shapeData = data;
-        switch(shapeData.type){
+        switch(shapeAttribute.type){
             case ShapePrimitiveType.Custom:
                 {
-                    var customData = shapeData;
-                    var points = customData.points;
-                    var easingIns = customData.easingIns;
-                    var easingOuts = customData.easingOuts;
-                    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++){
                             var pointIndex = indices[i];
@@ -16572,48 +16544,127 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 }
             case ShapePrimitiveType.Ellipse:
                 {
-                    var ellipseData = shapeData;
+                    var ellipseData = shapeAttribute;
                     this.graphicsPath.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
-                    this.setFillColor(ellipseData.fill);
                     break;
                 }
             case ShapePrimitiveType.Rectangle:
                 {
-                    var rectangleData = shapeData;
-                    this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
-                    this.setFillColor(rectangleData.fill);
+                    var rectangleData = shapeAttribute;
+                    this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height, rectangleData.roundness);
                     break;
                 }
             case ShapePrimitiveType.Star:
                 {
-                    var starData = shapeData;
+                    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;
+                    var polygonData = shapeAttribute;
                     this.graphicsPath.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
-                    this.setFillColor(polygonData.fill);
                     break;
                 }
         }
     };
-    _proto.setFillColor = function setFillColor(fill) {
-        if (fill) {
-            var color = fill.color;
-            this.material.setColor("_Color", new Color(color.r, color.g, color.b, color.a));
-        }
-    };
     _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;
+            this.strokeAttributes.color.copyFrom(strokeParam.color);
+            this.strokeAttributes.cap = strokeParam.cap;
+            this.strokeAttributes.join = strokeParam.join;
+        }
+        var fillParam = data.fill;
+        if (fillParam) {
+            this.isFill = true;
+            this.fillAttribute.color.copyFrom(fillParam.color);
+        }
+        switch(data.type){
+            case ShapePrimitiveType.Custom:
+                {
+                    var customShapeData = data;
+                    var customShapeAttribute = {
+                        type: ShapePrimitiveType.Custom,
+                        points: [],
+                        easingIns: [],
+                        easingOuts: [],
+                        shapes: [],
+                        fill: customShapeData.fill
+                    };
+                    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;
+                    this.shapeAttribute = customShapeAttribute;
+                    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 新版蒙版上线后重构
@@ -16626,10 +16677,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _create_class(ShapeComponent, [
         {
-            key: "path",
+            key: "shape",
             get: function get() {
                 this.shapeDirty = true;
-                return this.data;
+                return this.shapeAttribute;
             }
         }
     ]);
@@ -17449,10 +17500,8 @@ function shouldIgnoreBouncing(arg, mul) {
         };
     };
     _proto.setGeometry = function setGeometry(geometry, worldMatrix) {
-        if (this.geometry !== geometry) {
-            this.triangles = this.geometryToTriangles(geometry);
-            this.geometry = geometry;
-        }
+        this.triangles = this.geometryToTriangles(geometry);
+        this.geometry = geometry;
         var area = [];
         for(var _iterator = _create_for_of_iterator_helper_loose(this.triangles), _step; !(_step = _iterator()).done;){
             var triangle = _step.value;
@@ -17473,10 +17522,11 @@ function shouldIgnoreBouncing(arg, mul) {
     _proto.geometryToTriangles = function geometryToTriangles(geometry) {
         var _geometry_getIndexData;
         var indices = (_geometry_getIndexData = geometry.getIndexData()) != null ? _geometry_getIndexData : [];
+        var drawCount = geometry.getDrawCount();
         var _geometry_getAttributeData;
         var vertices = (_geometry_getAttributeData = geometry.getAttributeData("aPos")) != null ? _geometry_getAttributeData : [];
         var res = [];
-        for(var i = 0; i < indices.length; i += 3){
+        for(var i = 0; i < drawCount; i += 3){
             var index0 = indices[i] * 3;
             var index1 = indices[i + 1] * 3;
             var index2 = indices[i + 2] * 3;
@@ -21034,19 +21084,17 @@ exports.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) {
@@ -21054,8 +21102,8 @@ exports.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);
         }
     };
@@ -21443,7 +21491,7 @@ exports.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());
@@ -24265,7 +24313,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);
     };
@@ -24504,7 +24552,10 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable)
     }
     var _proto = Vector4PropertyMixerPlayable.prototype;
     _proto.resetPropertyValue = function resetPropertyValue() {
-        this.propertyValue.setZero();
+        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;
@@ -24522,7 +24573,8 @@ var Vector2PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable)
     }
     var _proto = Vector2PropertyMixerPlayable.prototype;
     _proto.resetPropertyValue = function resetPropertyValue() {
-        this.propertyValue.setZero();
+        this.propertyValue.x = 0;
+        this.propertyValue.y = 0;
     };
     _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
         var result = this.propertyValue;
@@ -25457,6 +25509,9 @@ exports.TextComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         /**
    * 文本行数
    */ _this.lineCount = 0;
+        /**
+   * 每一行文本的最大宽度
+   */ _this.maxLineWidth = 0;
         _this.SCALE_FACTOR = 0.1;
         _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MText" + seed$2++;
@@ -25540,12 +25595,9 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.textStyle = new TextStyle(options);
         this.textLayout = new TextLayout(options);
         this.text = options.text.toString();
-        this.lineCount = this.getLineCount(options.text, true);
     };
-    _proto.getLineCount = function getLineCount(text, init) {
-        var context = this.context;
-        var letterSpace = this.textLayout.letterSpace;
-        var fontScale = init ? this.textStyle.fontSize / 10 : 1 / this.textStyle.fontScale;
+    _proto.getLineCount = function getLineCount(text, context) {
+        var _this_textLayout = this.textLayout, letterSpace = _this_textLayout.letterSpace, overflow = _this_textLayout.overflow;
         var width = this.textLayout.width + this.textStyle.fontOffset;
         var lineCount = 1;
         var x = 0;
@@ -25553,15 +25605,27 @@ var TextComponentBase = /*#__PURE__*/ function() {
             var _context_measureText;
             var str = text[i];
             var _context_measureText_width;
-            var textMetrics = ((_context_measureText_width = context == null ? void 0 : (_context_measureText = context.measureText(str)) == null ? void 0 : _context_measureText.width) != null ? _context_measureText_width : 0) * fontScale;
+            var textMetrics = (_context_measureText_width = context == null ? void 0 : (_context_measureText = context.measureText(str)) == null ? void 0 : _context_measureText.width) != null ? _context_measureText_width : 0;
             // 和浏览器行为保持一致
             x += letterSpace;
-            if (x + textMetrics > width && i > 0 || str === "\n") {
-                lineCount++;
-                x = 0;
-            }
-            if (str !== "\n") {
-                x += textMetrics;
+            // 处理文本结束行为
+            if (overflow === TextOverflow.display) {
+                if (str === "\n") {
+                    lineCount++;
+                    x = 0;
+                } else {
+                    x += textMetrics;
+                    this.maxLineWidth = Math.max(this.maxLineWidth, x);
+                }
+            } else {
+                if (x + textMetrics > width && i > 0 || str === "\n") {
+                    lineCount++;
+                    this.maxLineWidth = Math.max(this.maxLineWidth, x);
+                    x = 0;
+                }
+                if (str !== "\n") {
+                    x += textMetrics;
+                }
             }
         }
         return lineCount;
@@ -25611,7 +25675,6 @@ var TextComponentBase = /*#__PURE__*/ function() {
             return;
         }
         this.text = value.toString();
-        this.lineCount = this.getLineCount(value, false);
         this.isDirty = true;
     };
     /**
@@ -25693,6 +25756,18 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.isDirty = true;
     };
     /**
+   * 设置文本溢出模式
+   *
+   * - clip: 当文本内容超出边界框时，多余的会被截断。
+   * - display: 该模式下会显示所有文本，会自动调整文本字号以保证显示完整。
+   * > 当存在多行时，部分行内文本可能存在文本字号变小的情况，其他行为正常情况
+   *
+   * @param overflow - 文本溢出模式
+   */ _proto.setOverflow = function setOverflow(overflow) {
+        this.textLayout.overflow = overflow;
+        this.isDirty = true;
+    };
+    /**
    * 设置阴影颜色
    * @param value - 阴影颜色
    * @returns
@@ -25760,28 +25835,35 @@ var TextComponentBase = /*#__PURE__*/ function() {
         var layout = this.textLayout;
         var fontScale = style.fontScale;
         var width = (layout.width + style.fontOffset) * fontScale;
-        var finalHeight = layout.lineHeight * this.lineCount;
         var fontSize = style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
+        style.fontDesc = this.getFontDesc(fontSize);
         this.char = (this.text || "").split("");
         this.canvas.width = width;
+        var height = this.canvas.height;
+        context.font = style.fontDesc;
+        this.lineCount = this.getLineCount(this.text, context);
+        var finalHeight = layout.lineHeight * this.lineCount;
         if (layout.autoWidth) {
             this.canvas.height = finalHeight * fontScale;
             this.item.transform.size.set(1, finalHeight / layout.height);
         } else {
             this.canvas.height = layout.height * fontScale;
         }
-        var height = this.canvas.height;
-        context.clearRect(0, 0, width, height);
+        // canvas size 变化后重新刷新 context
+        if (this.maxLineWidth > width && layout.overflow === TextOverflow.display) {
+            context.font = this.getFontDesc(fontSize * width / this.maxLineWidth);
+        } else {
+            context.font = style.fontDesc;
+        }
         // fix bug 1/255
         context.fillStyle = "rgba(255, 255, 255, 0.0039)";
+        context.clearRect(0, 0, width, height);
         if (!flipY) {
             context.translate(0, height);
             context.scale(1, -1);
         }
         context.fillRect(0, 0, width, height);
-        style.fontDesc = this.getFontDesc();
-        context.font = style.fontDesc;
         if (style.hasShadow) {
             this.setupShadow();
         }
@@ -25853,9 +25935,9 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.material.setTexture("_MainTex", texture);
         this.isDirty = false;
     };
-    _proto.getFontDesc = function getFontDesc() {
-        var _this_textStyle = this.textStyle, fontSize = _this_textStyle.fontSize, fontScale = _this_textStyle.fontScale, fontFamily = _this_textStyle.fontFamily, textWeight = _this_textStyle.textWeight, fontStyle = _this_textStyle.fontStyle;
-        var fontDesc = "" + (fontSize * fontScale).toString() + "px ";
+    _proto.getFontDesc = function getFontDesc(fontSize) {
+        var _this_textStyle = this.textStyle, fontFamily = _this_textStyle.fontFamily, textWeight = _this_textStyle.textWeight, fontStyle = _this_textStyle.fontStyle;
+        var fontDesc = "" + fontSize.toString() + "px ";
         if (!DEFAULT_FONTS.includes(fontFamily)) {
             fontDesc += '"' + fontFamily + '"';
         } else {
@@ -26625,12 +26707,29 @@ function getStandardInteractContent(ui) {
  * 3.1 版本数据适配
  * - 富文本插件名称的适配
  */ function version31Migration(json) {
-    var _json_plugins;
+    var // 修正老版本数据中，富文本插件名称的问题
+    _json_plugins;
     (_json_plugins = json.plugins) == null ? void 0 : _json_plugins.forEach(function(plugin, index) {
         if (plugin === "richtext") {
             json.plugins[index] = "rich-text";
         }
     });
+    // Custom shape fill 属性位置迁移
+    for(var _iterator = _create_for_of_iterator_helper_loose(json.components), _step; !(_step = _iterator()).done;){
+        var component = _step.value;
+        if (component.dataType === DataType.ShapeComponent) {
+            var shapeComponent = component;
+            if (shapeComponent.type === ShapePrimitiveType.Custom) {
+                var _customShapeComponent_shapes;
+                var customShapeComponent = shapeComponent;
+                //@ts-expect-error
+                if (((_customShapeComponent_shapes = customShapeComponent.shapes) == null ? void 0 : _customShapeComponent_shapes.length) > 0 && customShapeComponent.shapes[0].fill) {
+                    // @ts-expect-error
+                    customShapeComponent.fill = customShapeComponent.shapes[0].fill;
+                }
+            }
+        }
+    }
     return json;
 }
 /**
@@ -27460,8 +27559,6 @@ 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";
@@ -27476,7 +27573,13 @@ function getStandardJSON(json) {
             json = version24Migration(json);
         }
         if (mainVersion < 3) {
-            return version30Migration(version21Migration(json));
+            json = version30Migration(version21Migration(json));
+        }
+        // 3.x 版本格式转换
+        if (mainVersion < 4) {
+            if (minorVersion < 2) {
+                json = version31Migration(json);
+            }
         }
         return json;
     }
@@ -27532,13 +27635,11 @@ function getStandardJSONFromV0(json) {
 }
 function getStandardImage(image, index, imageTags) {
     var renderLevel = imageTags[index];
-    var oriY = image.oriY;
     if (typeof image === "string") {
         return {
             id: generateGUID(),
             renderLevel: renderLevel,
-            url: image,
-            oriY: oriY
+            url: image
         };
     } else if (image.template) {
         return {
@@ -27546,14 +27647,12 @@ function getStandardImage(image, index, imageTags) {
             url: image.url,
             template: image.template,
             webp: image.webp,
-            renderLevel: renderLevel,
-            oriY: oriY
+            renderLevel: renderLevel
         };
     } else if (image.compressed) {
         return {
             id: generateGUID(),
             url: image.url,
-            oriY: oriY,
             compressed: {
                 astc: image.compressed.android,
                 pvrtc: image.compressed.iOS
@@ -27566,8 +27665,7 @@ function getStandardImage(image, index, imageTags) {
             id: generateGUID(),
             url: image.url,
             webp: image.webp,
-            renderLevel: renderLevel,
-            oriY: oriY
+            renderLevel: renderLevel
         };
     } else if (image && image.sourceType) {
         return image;
@@ -32009,7 +32107,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.3.0-alpha.0";
+var version$1 = "2.3.0-alpha.2";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33642,7 +33740,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.3.0-alpha.0";
+var version = "2.3.0-alpha.2";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;