WebGPURenderer: Fix storage buffer example (mrdoob#28729)

* fix storage buffer webgpu

* bind groups cache per renderer

* Revert "bind groups cache per renderer"

This reverts commit 6fe58cc.

examples/webgpu_storage_buffer.html

@@ -78,11 +78,11 @@
 
 				// texture
 
-				const size = 1024; // non power of two buffer size is not well supported in WebGPU
+				const size = 32; // non power of two buffer size is not well supported in WebGPU
+				const barCount = 32;
 
 				const type = [ 'float', 'vec2', 'vec3', 'vec4' ];
 
-
 				const arrayBufferNodes = [];
 
 				for ( let i = 0; i < type.length; i ++ ) {
@@ -110,7 +110,7 @@
 
 					for ( let i = 0; i < type.length; i ++ ) {
 
-						const invertIndex = arrayBufferNodes[ i ].element( uint( size ).sub( instanceIndex ) );
+						const invertIndex = arrayBufferNodes[ i ].element( uint( size - 1 ).sub( instanceIndex ) );
 						arrayBufferNodes[ i ].element( instanceIndex ).assign( invertIndex );
 
 					}
@@ -140,7 +140,7 @@
 					If( uv().y.greaterThan( 0.0 ), () => {
 
 						const indexValue = arrayBufferNodes[ 0 ].element( index ).toVar();
-						const value = float( indexValue ).div( float( size ) ).mul( 20 ).floor().div( 20 );
+						const value = float( indexValue ).div( float( size ) ).mul( barCount ).floor().div( barCount );
 
 						color.assign( vec3( value, 0, 0 ) );
 
@@ -149,7 +149,7 @@
 					If( uv().y.greaterThan( 0.25 ), () => {
 
 						const indexValue = arrayBufferNodes[ 1 ].element( index ).toVar();
-						const value = float( indexValue ).div( float( size ) ).mul( 20 ).floor().div( 20 );
+						const value = float( indexValue ).div( float( size ) ).mul( barCount ).floor().div( barCount );
 
 						color.assign( vec3( 0, value, 0 ) );
 
@@ -158,7 +158,7 @@
 					If( uv().y.greaterThan( 0.5 ), () => {
 
 						const indexValue = arrayBufferNodes[ 2 ].element( index ).toVar();
-						const value = float( indexValue ).div( float( size ) ).mul( 20 ).floor().div( 20 );
+						const value = float( indexValue ).div( float( size ) ).mul( barCount ).floor().div( barCount );
 
 						color.assign( vec3( 0, 0, value ) );
 
@@ -167,7 +167,7 @@
 					If( uv().y.greaterThan( 0.75 ), () => {
 
 						const indexValue = arrayBufferNodes[ 3 ].element( index ).toVar();
-						const value = float( indexValue ).div( float( size ) ).mul( 20 ).floor().div( 20 );
+						const value = float( indexValue ).div( float( size ) ).mul( barCount ).floor().div( barCount );
 
 						color.assign( vec3( value, value, value ) );