WebGPURenderer: Don't set redundant state

examples/jsm/renderers/common/Attributes.js

@@ -62,6 +62,12 @@ class Attributes extends DataMap {
 
 	}
 
+	getUUID( attribute ) {
+
+		return this._getBufferAttribute( attribute ).uuid;
+
+	}
+
 	_getBufferAttribute( attribute ) {
 
 		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;

examples/jsm/renderers/common/RenderObject.js

@@ -2,9 +2,10 @@ let id = 0;
 
 export default class RenderObject {
 
-	constructor( nodes, geometries, renderer, object, material, scene, camera, lightsNode ) {
+	constructor( nodes, attributes, geometries, renderer, object, material, scene, camera, lightsNode ) {
 
 		this._nodes = nodes;
+		this._attributes = attributes;
 		this._geometries = geometries;
 
 		this.id = id ++;
@@ -72,6 +73,18 @@ export default class RenderObject {
 
 	}
 
+	getAttributeHash( index ) {
+
+		return this._attributes.getUUID( this.getAttributes()[ index ] );
+
+	}
+
+	getIndexHash() {
+
+		return this._attributes.getUUID( this.getIndex() );
+
+	}
+
 	getCacheKey() {
 
 		const { material, scene, lightsNode } = this;

examples/jsm/renderers/common/RenderObjects.js

@@ -4,12 +4,13 @@ import RenderObject from './RenderObject.js';
 
 class RenderObjects extends ChainMap {
 
-	constructor( renderer, nodes, geometries, pipelines, info ) {
+	constructor( renderer, nodes, attributes, geometries, pipelines, info ) {
 
 		super();
 
 		this.renderer = renderer;
 		this.nodes = nodes;
+		this.attributes = attributes;
 		this.geometries = geometries;
 		this.pipelines = pipelines;
 		this.info = info;
@@ -26,7 +27,7 @@ class RenderObjects extends ChainMap {
 
 		if ( renderObject === undefined ) {
 
-			renderObject = new RenderObject( this.nodes, this.geometries, this.renderer, object, material, scene, camera, lightsNode );
+			renderObject = new RenderObject( this.nodes, this.attributes, this.geometries, this.renderer, object, material, scene, camera, lightsNode );
 
 			this._initRenderObject( renderObject );
 

examples/jsm/renderers/common/Renderer.js

@@ -134,7 +134,7 @@ class Renderer {
 			this._textures = new Textures( backend, this._info );
 			this._pipelines = new Pipelines( backend, this._nodes );
 			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this._info );
-			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._info );
+			this._objects = new RenderObjects( this, this._nodes, this._attributes, this._geometries, this._pipelines, this._info );
 			this._renderLists = new RenderLists();
 			this._renderContexts = new RenderContexts();
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -1,3 +1,7 @@
+/*// debugger tools
+import 'https://greggman.github.io/webgpu-avoid-redundant-state-setting/webgpu-check-redundant-state-setting.js';
+//*/
+
 import { GPUFeatureName, GPUTextureFormat, GPULoadOp, GPUStoreOp, GPUIndexFormat, GPUTextureViewDimension } from './utils/WebGPUConstants.js';
 
 import WebGPUNodeBuilder from './nodes/WGSLNodeBuilder.js';
@@ -243,6 +247,7 @@ class WebGPUBackend extends Backend {
 		renderContextData.descriptor = descriptor;
 		renderContextData.encoder = encoder;
 		renderContextData.currentPass = currentPass;
+		renderContextData.currentAttributesSet = {};
 
 		//
 
@@ -395,6 +400,7 @@ class WebGPUBackend extends Backend {
 		const bindingsData = this.get( renderObject.getBindings() );
 		const contextData = this.get( context );
 		const pipelineGPU = this.get( pipeline ).pipeline;
+		const attributesSet = contextData.currentAttributesSet;
 
 		// pipeline
 
@@ -406,18 +412,28 @@ class WebGPUBackend extends Backend {
 		const bindGroupGPU = bindingsData.group;
 		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
 
-		// index
+		// attributes
 
 		const index = renderObject.getIndex();
 
 		const hasIndex = ( index !== null );
 
+		// index
+
 		if ( hasIndex === true ) {
 
-			const buffer = this.get( index ).buffer;
-			const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
+			const indexHash = renderObject.getIndexHash();
 
-			passEncoderGPU.setIndexBuffer( buffer, indexFormat );
+			if ( attributesSet.index !== indexHash ) {
+
+				const buffer = this.get( index ).buffer;
+				const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
+
+				passEncoderGPU.setIndexBuffer( buffer, indexFormat );
+
+				attributesSet.index = indexHash;
+
+			}
 
 		}
 
@@ -427,8 +443,17 @@ class WebGPUBackend extends Backend {
 
 		for ( let i = 0, l = attributes.length; i < l; i ++ ) {
 
-			const buffer = this.get( attributes[ i ] ).buffer;
-			passEncoderGPU.setVertexBuffer( i, buffer );
+			const attribute = attributes[ i ];
+			const attributeHash = renderObject.getAttributeHash( i );
+
+			if ( attributesSet[ i ] !== attributeHash ) {
+
+				const buffer = this.get( attribute ).buffer;
+				passEncoderGPU.setVertexBuffer( i, buffer );
+
+				attributesSet[ i ] = attributeHash;
+
+			}
 
 		}
 
@@ -703,6 +728,7 @@ class WebGPUBackend extends Backend {
 		if ( renderContext.stencil ) descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
+		renderContextData.currentAttributesSet = {};
 
 	}
 

src/core/BufferAttribute.js

@@ -1,3 +1,4 @@
+import * as MathUtils from '../math/MathUtils.js';
 import { Vector3 } from '../math/Vector3.js';
 import { Vector2 } from '../math/Vector2.js';
 import { denormalize, normalize } from '../math/MathUtils.js';
@@ -32,6 +33,8 @@ class BufferAttribute {
 
 		this.version = 0;
 
+		this.uuid = MathUtils.generateUUID();
+
 	}
 
 	onUploadCallback() {}