Using the same material (Line2NodeMaterial) in WebGPU results in worse performance compared to using separate materials.

[Jenychen1996]

Description

In a WebGPU rendering scenario, when constructing multiple Line2 objects using LineGeometry and Line2NodeMaterial (with test data consisting of randomly generated 800 line objects), an abnormal situation was observed.

1. When each line uses its own unique Line2NodeMaterial for object display, the performance can reach full frame rate.
2. When all 800 lines share the same Line2NodeMaterial object, GPU utilization skyrockets, and the rendering frame rate drops sharply.

Issue: This phenomenon is inconsistent with the understanding of WebGL. In WebGL, using the same material object for multiple lines results in better rendering frame rates and lower resource usage compared to using separate material objects.

Looking forward to your reply.

Reproduction steps

1. Generate 800 lines
2. Using separate materials to construct Line2.
3. Using a shared material to construct Line2.

Code

// code goes here

function addLine2(lines) {
	console.log('lines: ', lines)
	let count = 0;

       // All lines share the same material.
       const shareMaterial = new THREE.Line2NodeMaterial({

		color: 0xffffff,
		linewidth: 5, // in world units with size attenuation, pixels otherwise
		vertexColors: true,
		dashed: false,
		alphaToCoverage: true,
		transparent: true

	});

	lines.forEach(line => {
		const colors = generateHSLColors(line.length / 3);

		console.log(line.length / 3);
		count += line.length / 3;

		const material = new THREE.Line2NodeMaterial({

			color: 0xffffff,
			linewidth: 5, // in world units with size attenuation, pixels otherwise
			vertexColors: true,
			dashed: false,
			alphaToCoverage: true,
			transparent: true

		});
		const geometry = new LineGeometry();
		geometry.setPositions(line);
		geometry.setColors(colors);

                 // Using a shared material to construct Line2.
		// line = new Line2(geometry, shareMaterial );
               // Using separate materials to construct Line2.
		line = new Line2(geometry, material);
		line.computeLineDistances();
		line.scale.set(1, 1, 1);
		scene.add(line);
	})
	console.log(count)
}

Live example

• webgpu_line2_use_own_material
• webgpu_line2_use_share_material
• webgl_line2_use_share_material
• webgl_line2_use_own_material

Screenshots

No response

Version

r178;dev

Device

Desktop

Browser

Chrome

OS

Windows