WebGPU: update to latest WebGPU API (#23483)

examples/jsm/renderers/webgpu/WebGPUBackground.js

-import { GPULoadOp } from './constants.js';
+import { GPULoadOp, GPUStoreOp } from './constants.js';
 import { Color } from 'three';
 
 let _clearAlpha;
@@ -57,39 +57,43 @@ class WebGPUBackground {
 
 			if ( renderer.autoClearColor === true ) {
 
-				colorAttachment.loadValue = { r: _clearColor.r, g: _clearColor.g, b: _clearColor.b, a: _clearAlpha };
+				colorAttachment.clearValue = { r: _clearColor.r, g: _clearColor.g, b: _clearColor.b, a: _clearAlpha };
+				colorAttachment.loadOp = GPULoadOp.Clear;
+				colorAttachment.storeOp = GPUStoreOp.Store;
 
 			} else {
 
-				colorAttachment.loadValue = GPULoadOp.Load;
+				colorAttachment.loadOp = GPULoadOp.Load;
 
 			}
 
 			if ( renderer.autoClearDepth === true ) {
 
-				depthStencilAttachment.depthLoadValue = renderer._clearDepth;
+				depthStencilAttachment.depthClearValue = renderer._clearDepth;
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
 
 			} else {
 
-				depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
 
 			}
 
 			if ( renderer.autoClearStencil === true ) {
 
-				depthStencilAttachment.stencilLoadValue = renderer._clearStencil;
+				depthStencilAttachment.stencilClearValue = renderer._clearStencil;
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
 
 			} else {
 
-				depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 			}
 
 		} else {
 
-			colorAttachment.loadValue = GPULoadOp.Load;
-			depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
-			depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
+			colorAttachment.loadOp = GPULoadOp.Load;
+			depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+			depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 		}
 

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -193,7 +193,7 @@ class WebGPURenderer {
 			colorAttachments: [ {
 				view: null
 			} ],
-			 depthStencilAttachment: {
+			depthStencilAttachment: {
 				view: null,
 				depthStoreOp: GPUStoreOp.Store,
 				stencilStoreOp: GPUStoreOp.Store
@@ -313,7 +313,7 @@ class WebGPURenderer {
 
 		// finish render pass
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}
@@ -620,7 +620,7 @@ class WebGPURenderer {
 
 		}
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}

examples/jsm/renderers/webgpu/WebGPUTextureUtils.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants.js';
+import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
 
 // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
 
@@ -145,7 +145,9 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 			const passEncoder = commandEncoder.beginRenderPass( {
 				colorAttachments: [ {
 					view: dstView,
-					loadValue: [ 0, 0, 0, 0 ]
+					loadOp: GPULoadOp.Clear,
+					storeOp: GPUStoreOp.Store,
+					clearValue: [ 0, 0, 0, 0 ]
 				} ]
 			} );
 
@@ -163,7 +165,7 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 			passEncoder.setPipeline( pipeline );
 			passEncoder.setBindGroup( 0, bindGroup );
 			passEncoder.draw( 4, 1, 0, 0 );
-			passEncoder.endPass();
+			passEncoder.end();
 
 			srcView = dstView;
 

examples/jsm/renderers/webgpu/constants.js

@@ -19,11 +19,12 @@ export const GPUCompareFunction = {
 
 export const GPUStoreOp = {
 	Store: 'store',
-	Clear: 'clear'
+	Discard: 'discard'
 };
 
 export const GPULoadOp = {
-	Load: 'load'
+	Load: 'load',
+	Clear: 'clear'
 };
 
 export const GPUFrontFace = {