Przeglądaj źródła

Improve render order for SVGLoader example (#22912)

- Set all materials as transparent, so all will be rendered as part of the same render list
- Ordering will fall back to the final object.id ordering in reversePainterSortStable
- Add an example SVG that is rendered in the correct order after this change

Co-authored-by: Simon Taylor <[email protected]>
tangobravo 3 lat temu
rodzic
commit
a375e5aae5

+ 8 - 0
examples/models/svg/tests/ordering.svg

@@ -0,0 +1,8 @@
+<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <rect x="25" y="25" width="250" height="250" style="fill:#ff0000;fill-opacity:0.2;stroke:none" />
+    <rect x="50" y="50" width="100" height="200" style="fill:#000000;fill-opacity:1;stroke:none" />
+    <rect x="75" y="75" width="150" height="150" style="fill:#00ff00;fill-opacity:0.5;stroke:none" />
+    <rect x="100" y="100" width="100" height="100" style="fill:#000080;fill-opacity:1;stroke:none" />
+
+</svg>

+ 3 - 2
examples/webgl_loader_svg.html

@@ -103,6 +103,7 @@
 					"Test 8": 'models/svg/tests/8.svg',
 					"Test 9": 'models/svg/tests/9.svg',
 					"Units": 'models/svg/tests/units.svg',
+					"Ordering": 'models/svg/tests/ordering.svg',
 					"Defs": 'models/svg/tests/testDefs/Svg-defs.svg',
 					"Defs2": 'models/svg/tests/testDefs/Svg-defs2.svg',
 					"Defs3": 'models/svg/tests/testDefs/Wave-defs.svg',
@@ -165,7 +166,7 @@
 							const material = new THREE.MeshBasicMaterial( {
 								color: new THREE.Color().setStyle( fillColor ),
 								opacity: path.userData.style.fillOpacity,
-								transparent: path.userData.style.fillOpacity < 1,
+								transparent: true,
 								side: THREE.DoubleSide,
 								depthWrite: false,
 								wireframe: guiData.fillShapesWireframe
@@ -193,7 +194,7 @@
 							const material = new THREE.MeshBasicMaterial( {
 								color: new THREE.Color().setStyle( strokeColor ),
 								opacity: path.userData.style.strokeOpacity,
-								transparent: path.userData.style.strokeOpacity < 1,
+								transparent: true,
 								side: THREE.DoubleSide,
 								depthWrite: false,
 								wireframe: guiData.strokesWireframe