Use more circular rounding for WebGL rect corners

src/webgl/3d_primitives.js

@@ -1792,33 +1792,38 @@ function primitives3D(p5, fn){
       const prevMode = this.states.textureMode;
       this.states.setValue('textureMode', constants.NORMAL);
       const prevOrder = this.bezierOrder();
-      this.bezierOrder(2);
+      this.bezierOrder(3);
       this.beginShape();
       const addUVs = (x, y) => [x, y, 0, (x - x1)/width, (y - y1)/height];
+      const rr = 0.5523; // kappa: 4*(sqrt(2)-1)/3, handle ratio for cubic bezier circle approximation
       if (tr !== 0) {
         this.vertex(...addUVs(x2 - tr, y1));
-        this.bezierVertex(...addUVs(x2, y1));
+        this.bezierVertex(...addUVs(x2 - tr + tr * rr, y1));
+        this.bezierVertex(...addUVs(x2, y1 + tr - tr * rr));
         this.bezierVertex(...addUVs(x2, y1 + tr));
       } else {
         this.vertex(...addUVs(x2, y1));
       }
       if (br !== 0) {
         this.vertex(...addUVs(x2, y2 - br));
-        this.bezierVertex(...addUVs(x2, y2));
+        this.bezierVertex(...addUVs(x2, y2 - br + br * rr));
+        this.bezierVertex(...addUVs(x2 - br + rr * br, y2));
         this.bezierVertex(...addUVs(x2 - br, y2));
       } else {
         this.vertex(...addUVs(x2, y2));
       }
       if (bl !== 0) {
         this.vertex(...addUVs(x1 + bl, y2));
-        this.bezierVertex(...addUVs(x1, y2));
+        this.bezierVertex(...addUVs(x1 + bl - bl * rr, y2));
+        this.bezierVertex(...addUVs(x1, y2 - bl + bl * rr));
         this.bezierVertex(...addUVs(x1, y2 - bl));
       } else {
         this.vertex(...addUVs(x1, y2));
       }
       if (tl !== 0) {
         this.vertex(...addUVs(x1, y1 + tl));
-        this.bezierVertex(...addUVs(x1, y1));
+        this.bezierVertex(...addUVs(x1, y1 + tl - tl * rr));
+        this.bezierVertex(...addUVs(x1 + tl - tl * rr, y1));
         this.bezierVertex(...addUVs(x1 + tl, y1));
       } else {
         this.vertex(...addUVs(x1, y1));

test/unit/visual/cases/webgl.js

@@ -1506,6 +1506,17 @@ visualSuite('WebGL', function() {
     });
   });
 
+  visualSuite('2D Shapes', function() {
+    visualTest('rect() rounded into a circle', function(p5, screenshot) {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      p5.background(255);
+      p5.noStroke();
+      p5.fill('red');
+      p5.rect(-20, -20, 40, 40, 20);
+      screenshot();
+    });
+  });
+
   visualSuite('3D Primitives', function() {
     visualTest('cylinder() renders correctly', function(p5, screenshot) {
       p5.createCanvas(100, 100, p5.WEBGL);

test/unit/visual/screenshots/WebGL/2D Shapes/rect() rounded into a circle/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}