Update webgl_loader_svg.html

[ycw]

fix #26110

• assigns renderOrder for each mesh based on data.paths[] seq
• re render onresize

test https://raw.githack.com/ycw/three.js/patch-2/examples/webgl_loader_svg.html

[bergden-resonai]

Thanks for the quick fix!

This fixes the example - but I wonder if SVGLoader is still "broken" existing projects that are using it.
Maybe the renderOrder thing should be documented in the migration guide and the SVGLoader class?

I was trying to check this in the Editor using the tiger.svg but it's not reproducing - I'm not sure why:

[Mugen87]

I've added a note in the migration guide for r152. Updating the docs could also make sense.

However, it would be good to find out why the editor shows no sorting issues.

[ycw]

I was trying to check this in the Editor using the tiger.svg but it's not reproducing - I'm not sure why:

editor blindly ignores transparent

three.js/editor/js/Loader.js

Lines 624 to 627 in 70cc4e1

	const material = new THREE.MeshBasicMaterial( {
	color: path.color,
	depthWrite: false
	} );

in turn it uses opaque sorting,

three.js/src/renderers/webgl/WebGLRenderLists.js

Lines 1 to 25 in 70cc4e1

	function painterSortStable( a, b ) {
	if ( a.groupOrder !== b.groupOrder ) {
	return a.groupOrder - b.groupOrder;
	} else if ( a.renderOrder !== b.renderOrder ) {
	return a.renderOrder - b.renderOrder;
	} else if ( a.material.id !== b.material.id ) {
	return a.material.id - b.material.id;
	} else if ( a.z !== b.z ) {
	return a.z - b.z;
	} else {
	return a.id - b.id;
	}
	}

so renderorder is resolved by .material.id

---

in example, webglloadersvg.html cares about transparent:

three.js/examples/webgl_loader_svg.html

Lines 180 to 186 in 70cc4e1

	const material = new THREE.MeshBasicMaterial( {
	color: new THREE.Color().setStyle( fillColor ),
	opacity: path.userData.style.fillOpacity,
	transparent: true,
	side: THREE.DoubleSide,
	depthWrite: false,
	wireframe: guiData.fillShapesWireframe

in turn it uses transparent sorting:

three.js/src/renderers/webgl/WebGLRenderLists.js

Lines 27 to 47 in 70cc4e1

	function reversePainterSortStable( a, b ) {
	if ( a.groupOrder !== b.groupOrder ) {
	return a.groupOrder - b.groupOrder;
	} else if ( a.renderOrder !== b.renderOrder ) {
	return a.renderOrder - b.renderOrder;
	} else if ( a.z !== b.z ) {
	return b.z - a.z;
	} else {
	return a.id - b.id;
	}
	}

so renderorder is resolved by .z

but I wonder if SVGLoader is still "broken" existing projects that are using it.

the loader itself only tessellates shapes and strokes, it won't broke; but SVGLoader cosumers might, e.g. the one in webglloadersvg.html example which account for transparent.