BatchedMesh: Add support for wireframe materials

[gkjohnson]

Fix #32939

Description

The BatchedMesh multidraw starts and counts need to align with the internally-created index buffer for line primitives, which will be 2x the length of those for triangles (3 lines per tri). Because the renderer will create a uint16 or uint32 buffer based on some internal calculations we have to try to make some of the same assumptions, which feels a little messy but I can't see a more clean way to handle it.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	359.21 85.29	359.19 85.29	-18 B -1 B
WebGPU	618.76 172.26	618.76 172.26	+0 B +0 B
WebGPU Nodes	617.34 172.01	617.34 172.01	+0 B +0 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	490.85 119.64	490.85 119.65	+2 B +6 B
WebGPU	692.56 187.4	692.56 187.4	+0 B +0 B
WebGPU Nodes	641.82 174.78	641.82 174.78	+0 B +0 B

[mrdoob]

Nice! I actually hit this issue while working on the Quake port.
Forgot to mention it the other day 😅

[Mugen87]

This PR fixes the issue only for WebGLRenderer. However, webgpu_mesh_batch with enabled wireframe still looks broken. But only with WebGPU, the WebGL backend is fine.

WebGPU does not support multi-draw yet so I guess there is an additional code path in the WebGPU backend.

[Mugen87]

In WebGPURenderer we should be able to fix the issue by adding:

let bytesPerElement = index === null ? 1 : index.array.BYTES_PER_ELEMENT;

if ( material.wireframe ) {

     bytesPerElement = object.geometry.attributes.position.count > 65535 ? 4 : 2;

}

outside below for loop and then use bytesPerElement instead of index.array.BYTES_PER_ELEMENT.

three.js/src/renderers/webgpu/WebGPUBackend.js

Lines 1599 to 1616 in 04961be

	for ( let i = 0; i < drawCount; i ++ ) {
	const count = drawInstances ? drawInstances[ i ] : 1;
	const firstInstance = count > 1 ? 0 : i;
	if ( hasIndex === true ) {
	passEncoderGPU.drawIndexed( counts[ i ], count, starts[ i ] / index.array.BYTES_PER_ELEMENT, 0, firstInstance );
	} else {
	passEncoderGPU.draw( counts[ i ], count, starts[ i ], firstInstance );
	}
	info.update( object, counts[ i ], count );
	}

[elhote-byte]

Nice work !
Thanks a lot !