From 1f1125f18479ef5362359494118cafa8c399156e Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Fri, 16 Jul 2021 11:13:02 +0100
Subject: [PATCH] Updated examples builds

---
 examples/js/lines/LineMaterial.js |  6 ++--
 examples/js/loaders/SVGLoader.js  | 48 ++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js
index 6cb2579ff1..0bf90f93e9 100644
--- a/examples/js/lines/LineMaterial.js
+++ b/examples/js/lines/LineMaterial.js
@@ -221,7 +221,7 @@
 
 			#endif
 
-			float alpha = opacity;
+			float alpha = 1.0;
 
 			#ifdef ALPHA_TO_COVERAGE
 
@@ -251,12 +251,12 @@
 
 			#endif
 
-			vec4 diffuseColor = vec4( diffuse, alpha );
+			vec4 diffuseColor = vec4( diffuse, opacity * alpha );
 
 			#include <logdepthbuf_fragment>
 			#include <color_fragment>
 
-			gl_FragColor = vec4( diffuseColor.rgb, alpha );
+			gl_FragColor = diffuseColor;
 
 			#include <tonemapping_fragment>
 			#include <encodings_fragment>
diff --git a/examples/js/loaders/SVGLoader.js b/examples/js/loaders/SVGLoader.js
index e5f225c80e..d283d1f865 100644
--- a/examples/js/loaders/SVGLoader.js
+++ b/examples/js/loaders/SVGLoader.js
@@ -651,29 +651,49 @@
 
 				const x = parseFloatWithUnits( node.getAttribute( 'x' ) || 0 );
 				const y = parseFloatWithUnits( node.getAttribute( 'y' ) || 0 );
-				const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || 0 );
-				const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || 0 );
+				const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || node.getAttribute( 'ry' ) || 0 );
+				const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || node.getAttribute( 'rx' ) || 0 );
 				const w = parseFloatWithUnits( node.getAttribute( 'width' ) );
-				const h = parseFloatWithUnits( node.getAttribute( 'height' ) );
-				const path = new THREE.ShapePath();
-				path.moveTo( x + 2 * rx, y );
-				path.lineTo( x + w - 2 * rx, y );
-				if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
-				path.lineTo( x + w, y + h - 2 * ry );
-				if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
-				path.lineTo( x + 2 * rx, y + h );
+				const h = parseFloatWithUnits( node.getAttribute( 'height' ) ); // Ellipse arc to Bezier approximation Coefficient (Inversed). See:
+				// https://spencermortensen.com/articles/bezier-circle/
+
+				const bci = 1 - 0.551915024494;
+				const path = new THREE.ShapePath(); // top left
+
+				path.moveTo( x + rx, y ); // top right
+
+				path.lineTo( x + w - rx, y );
 
 				if ( rx !== 0 || ry !== 0 ) {
 
-					path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
+					path.bezierCurveTo( x + w - rx * bci, y, x + w, y + ry * bci, x + w, y + ry );
+
+				} // bottom right
+
+
+				path.lineTo( x + w, y + h - ry );
+
+				if ( rx !== 0 || ry !== 0 ) {
+
+					path.bezierCurveTo( x + w, y + h - ry * bci, x + w - rx * bci, y + h, x + w - rx, y + h );
+
+				} // bottom left
+
+
+				path.lineTo( x + rx, y + h );
+
+				if ( rx !== 0 || ry !== 0 ) {
+
+					path.bezierCurveTo( x + rx * bci, y + h, x, y + h - ry * bci, x, y + h - ry );
+
+				} // back to top left
 
-				}
 
-				path.lineTo( x, y + 2 * ry );
+				path.lineTo( x, y + ry );
 
 				if ( rx !== 0 || ry !== 0 ) {
 
-					path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
+					path.bezierCurveTo( x, y + ry * bci, x + rx * bci, y, x + rx, y );
 
 				}
 
-- 
GitLab