WebGPURenderer: Use material name or type to label WebGPU pipelines, add names to Nodes internal materials. (#29217)

* name materials and label pipeline

* code style

* lint

* small cleanup

---------

Co-authored-by: aardgoose <angus.sawyer@email.com>
Co-authored-by: Renaud Rohlinger <renaud.rohlinger@gmail.com>

src/nodes/display/AfterImageNode.js

@@ -120,6 +120,7 @@ class AfterImageNode extends TempNode {
 		//
 
 		const materialComposed = this._materialComposed || ( this._materialComposed = builder.createNodeMaterial() );
+		materialComposed.name = 'AfterImage';
 		materialComposed.fragmentNode = afterImg();
 
 		_quadMeshComp.material = materialComposed;

src/nodes/display/AnaglyphPassNode.js

@@ -47,6 +47,7 @@ class AnaglyphPassNode extends StereoCompositePassNode {
 
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
 		material.fragmentNode = anaglyph().context( builder.getSharedContext() );
+		material.name = 'Anaglyph';
 		material.needsUpdate = true;
 
 		return super.setup( builder );

src/nodes/display/AnamorphicNode.js

@@ -116,6 +116,7 @@ class AnamorphicNode extends TempNode {
 		//
 
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
+		material.name = 'Anamorphic';
 		material.fragmentNode = anamorph();
 
 		//

src/nodes/display/BloomNode.js

@@ -196,6 +196,7 @@ class BloomNode extends TempNode {
 
 		this._highPassFilterMaterial = this._highPassFilterMaterial || builder.createNodeMaterial();
 		this._highPassFilterMaterial.fragmentNode = luminosityHighPass().context( builder.getSharedContext() );
+		this._highPassFilterMaterial.name = 'Bloom_highPass';
 		this._highPassFilterMaterial.needsUpdate = true;
 
 		// gaussian blur materials
@@ -244,6 +245,7 @@ class BloomNode extends TempNode {
 
 		this._compositeMaterial = this._compositeMaterial || builder.createNodeMaterial();
 		this._compositeMaterial.fragmentNode = compositePass().context( builder.getSharedContext() );
+		this._compositeMaterial.name = 'Bloom_comp';
 		this._compositeMaterial.needsUpdate = true;
 
 		//
@@ -313,6 +315,7 @@ class BloomNode extends TempNode {
 
 		const seperableBlurMaterial = builder.createNodeMaterial();
 		seperableBlurMaterial.fragmentNode = seperableBlurPass().context( builder.getSharedContext() );
+		seperableBlurMaterial.name = 'Bloom_seperable';
 		seperableBlurMaterial.needsUpdate = true;
 
 		// uniforms

src/nodes/display/GTAONode.js

@@ -217,6 +217,7 @@ class GTAONode extends TempNode {
 
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
 		material.fragmentNode = ao().context( builder.getSharedContext() );
+		material.name = 'GTAO';
 		material.needsUpdate = true;
 
 		//

src/nodes/display/GaussianBlurNode.js

@@ -163,6 +163,7 @@ class GaussianBlurNode extends TempNode {
 
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
 		material.fragmentNode = blur().context( builder.getSharedContext() );
+		material.name = 'Gaussian_blur';
 		material.needsUpdate = true;
 
 		//

src/nodes/display/SSAAPassNode.js

@@ -218,6 +218,7 @@ class SSAAPassNode extends PassNode {
 		this._quadMesh.material.premultipliedAlpha = true;
 		this._quadMesh.material.blending = AdditiveBlending;
 		this._quadMesh.material.normals = false;
+		this._quadMesh.material.name = 'SSAA';
 
 		return super.setup( builder );
 

src/nodes/lighting/AnalyticLightNode.js

@@ -169,6 +169,7 @@ class AnalyticLightNode extends LightingNode {
 				overrideMaterial = builder.createNodeMaterial();
 				overrideMaterial.fragmentNode = vec4( 0, 0, 0, 1 );
 				overrideMaterial.isShadowNodeMaterial = true; // Use to avoid other overrideMaterial override material.fragmentNode unintentionally when using material.shadowNode
+				overrideMaterial.name = 'ShadowMaterial';
 
 			}
 

src/nodes/utils/RTTNode.js

@@ -47,6 +47,7 @@ class RTTNode extends TextureNode {
 	setup( builder ) {
 
 		this._rttNode = this.node.context( builder.getSharedContext() );
+		this._quadMesh.material.name = 'RTT';
 		this._quadMesh.material.needsUpdate = true;
 
 		return super.setup( builder );

src/renderers/common/PostProcessing.js

@@ -16,6 +16,8 @@ class PostProcessing {
 
 		this.needsUpdate = true;
 
+		_material.name = 'PostProcessing';
+
 	}
 
 	render() {

src/renderers/common/Renderer.js

@@ -102,6 +102,7 @@ class Renderer {
 		this._background = null;
 
 		this._quad = new QuadMesh( new NodeMaterial() );
+		this._quad.material.type = 'Renderer_output';
 
 		this._currentRenderContext = null;
 

src/renderers/common/extras/PMREMGenerator.js

@@ -705,12 +705,13 @@ function _setViewport( target, x, y, width, height ) {
 
 }
 
-function _getMaterial() {
+function _getMaterial( type ) {
 
 	const material = new NodeMaterial();
 	material.depthTest = false;
 	material.depthWrite = false;
 	material.blending = NoBlending;
+	material.name = `PMREM_${ type }`;
 
 	return material;
 
@@ -745,7 +746,7 @@ function _getBlurShader( lodMax, width, height ) {
 		CUBEUV_MAX_MIP
 	};
 
-	const material = _getMaterial();
+	const material = _getMaterial( 'blur' );
 	material.uniforms = materialUniforms; // TODO: Move to outside of the material
 	material.fragmentNode = blur( { ...materialUniforms, latitudinal: latitudinal.equal( 1 ) } );
 
@@ -755,7 +756,7 @@ function _getBlurShader( lodMax, width, height ) {
 
 function _getCubemapMaterial( envTexture ) {
 
-	const material = _getMaterial();
+	const material = _getMaterial( 'cubemap' );
 	material.fragmentNode = cubeTexture( envTexture, outputDirection );
 
 	return material;
@@ -764,7 +765,7 @@ function _getCubemapMaterial( envTexture ) {
 
 function _getEquirectMaterial( envTexture ) {
 
-	const material = _getMaterial();
+	const material = _getMaterial( 'equirect' );
 	material.fragmentNode = texture( envTexture, equirectUV( outputDirection ), 0 );
 
 	return material;

src/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -123,7 +123,7 @@ class WebGPUPipelineUtils {
 		const sampleCount = this._getSampleCount( renderObject.context );
 
 		const pipelineDescriptor = {
-			label: 'renderPipeline',
+			label: `renderPipeline_${ material.name || material.type }_${ material.id }`,
 			vertex: Object.assign( {}, vertexModule, { buffers: vertexBuffers } ),
 			fragment: Object.assign( {}, fragmentModule, { targets } ),
 			primitive: primitiveState,