Proof-of-concept: Support Wireframe Linewidth

[WestLangley]

As proposed in #31917 (comment).

In this proof-of-concept, the necessary shader chunks have been introduced into MeshMatcapMaterial only.

[WestLangley]

Temporary live examples

Wireframe
https://raw.githack.com/westlangley/three.js/dev-wireframe_linewidth/examples/webgl_materials_matcap.html

Skinning (zoom in)
https://raw.githack.com/westlangley/three.js/dev-wireframe_linewidth/examples/webgl_loader_fbx.html

Instancing
https://raw.githack.com/westlangley/three.js/dev-wireframe_linewidth/examples/webgl_instancing_morph.html

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	338.24 79.14	339.25 79.38	+1.01 kB +241 B
WebGPU	584.78 161.56	584.78 161.56	+0 B +0 B
WebGPU Nodes	583.39 161.32	583.39 161.32	+0 B +0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	469.7 113.74	470.71 113.99	+1.01 kB +246 B
WebGPU	654.25 177.07	654.25 177.07	+1 B +4 B
WebGPU Nodes	608.25 166.24	608.25 166.24	+0 B +0 B

[sunag]

I love the example.

I imagine that's not the original intention as it's a proof of concept but I was thinking that if this were a TSL function like material.opacityNode = wireframe( 2 ), it could be more useful in connecting to other types of procedural effects, plus there would be no need to add new parameters for materials.

[Mugen87]

I was also wondering if we should add this feature just for node materials since it will end up easier to maintain and a more flexible solution like outlined in #31921 (comment).