WebGPURenderer: Follow the latest GPURenderPipelineDescriptor format (#21472)

* WebGPURenderer: Update GPURenderPipelineDescriptor format

* WebGPUTextureUtils: Minor formatting

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -131,18 +131,6 @@ class WebGPURenderPipelines {
 
 			//
 
-			let indexFormat;
-
-			if ( object.isLine === true && object.isLineSegments !== true ) {
-
-				const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;
-
-				indexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
-
-			}
-
-			//
-
 			let alphaBlend = {};
 			let colorBlend = {};
 
@@ -170,25 +158,24 @@ class WebGPURenderPipelines {
 
 			// pipeline
 
-			const primitiveTopology = this._getPrimitiveTopology( object );
-			const rasterizationState = this._getRasterizationStateDescriptor( material );
+			const primitiveState = this._getPrimitiveState( object, material );
 			const colorWriteMask = this._getColorWriteMask( material );
 			const depthCompare = this._getDepthCompare( material );
 			const colorFormat = this._getColorFormat( this.renderer );
 			const depthStencilFormat = this._getDepthStencilFormat( this.renderer );
 
 			pipeline = device.createRenderPipeline( {
-				vertexStage: moduleVertex,
-				fragmentStage: moduleFragment,
-				primitiveTopology: primitiveTopology,
-				rasterizationState: rasterizationState,
-				colorStates: [ {
+				vertex: Object.assign( {}, moduleVertex, { buffers: vertexBuffers } ),
+				fragment: Object.assign( {}, moduleFragment, { targets: [ {
 					format: colorFormat,
-					alphaBlend: alphaBlend,
-					colorBlend: colorBlend,
+					blend: {
+						alpha: alphaBlend,
+						color: colorBlend
+					},
 					writeMask: colorWriteMask
-				} ],
-				depthStencilState: {
+				} ] } ),
+				primitive: primitiveState,
+				depthStencil: {
 					format: depthStencilFormat,
 					depthWriteEnabled: material.depthWrite,
 					depthCompare: depthCompare,
@@ -197,11 +184,9 @@ class WebGPURenderPipelines {
 					stencilReadMask: material.stencilFuncMask,
 					stencilWriteMask: material.stencilWriteMask
 				},
-				vertexState: {
-					indexFormat: indexFormat,
-					vertexBuffers: vertexBuffers
-				},
-				sampleCount: this.sampleCount
+				multisample: {
+					count: this.sampleCount
+				}
 			} );
 
 			this.pipelines.set( object, pipeline );
@@ -594,18 +579,19 @@ class WebGPURenderPipelines {
 
 	}
 
-	_getPrimitiveTopology( object ) {
+	_getPrimitiveState( object, material ) {
 
-		if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;
-		else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;
-		else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;
-		else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;
+		const descriptor = {};
 
-	}
+		descriptor.topology = this._getPrimitiveTopology( object );
 
-	_getRasterizationStateDescriptor( material ) {
+		if ( object.isLine === true && object.isLineSegments !== true ) {
 
-		const descriptor = {};
+			const geometry = object.geometry;
+			const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;
+			descriptor.stripIndexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
+
+		}
 
 		switch ( material.side ) {
 
@@ -634,6 +620,15 @@ class WebGPURenderPipelines {
 
 	}
 
+	_getPrimitiveTopology( object ) {
+
+		if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;
+		else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;
+		else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;
+		else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;
+
+	}
+
 	_getStencilCompare( material ) {
 
 		let stencilCompare;

examples/jsm/renderers/webgpu/WebGPUTextureUtils.js

@@ -53,11 +53,11 @@ class WebGPUTextureUtils {
 		this.pipelines = {};
 
 		this.mipmapVertexShaderModule = device.createShaderModule( {
-			 code: glslang.compileGLSL( mipmapVertexSource, 'vertex' ),
-		 } );
-		 this.mipmapFragmentShaderModule = device.createShaderModule( {
-			 code: glslang.compileGLSL( mipmapFragmentSource, 'fragment' ),
-		 } );
+			code: glslang.compileGLSL( mipmapVertexSource, 'vertex' ),
+		} );
+		this.mipmapFragmentShaderModule = device.createShaderModule( {
+			code: glslang.compileGLSL( mipmapFragmentSource, 'fragment' ),
+		} );
 
 	}
 
@@ -68,19 +68,19 @@ class WebGPUTextureUtils {
 		if ( pipeline === undefined ) {
 
 			pipeline = this.device.createRenderPipeline( {
-				vertexStage: {
+				vertex: {
 					module: this.mipmapVertexShaderModule,
 					entryPoint: 'main',
 				},
-				fragmentStage: {
+				fragment: {
 					module: this.mipmapFragmentShaderModule,
 					entryPoint: 'main',
+					targets: [ { format } ],
 				},
-				primitiveTopology: GPUPrimitiveTopology.TriangleStrip,
-				vertexState: {
-					indexFormat: GPUIndexFormat.Uint32
-				},
-				colorStates: [ { format } ],
+				primitive: {
+					topology: GPUPrimitiveTopology.TriangleStrip,
+					stripIndexFormat: GPUIndexFormat.Uint32
+				}
 			} );
 			this.pipelines[ format ] = pipeline;