WebGPURenderer: Invert viewport/scissor y coords (#26730)

* invert viewport/scissor y coords
fix example

* add width & height to renderContext

* move setting to Renderer.js

* cleanup

---------

Co-authored-by: aardgoose <[email protected]>

examples/jsm/renderers/common/RenderContext.js

@@ -31,6 +31,9 @@ class RenderContext {
 		this.activeCubeFace = 0;
 		this.sampleCount = 1;
 
+		this.width = 0;
+		this.height = 0;
+
 	}
 
 }

examples/jsm/renderers/common/Renderer.js

@@ -280,11 +280,15 @@ class Renderer {
 
 			renderContext.textures = renderTargetData.textures;
 			renderContext.depthTexture = renderTargetData.depthTexture;
+			renderContext.width = renderTargetData.width;
+			renderContext.height = renderTargetData.height;
 
 		} else {
 
 			renderContext.textures = null;
 			renderContext.depthTexture = null;
+			renderContext.width = this.domElement.width;
+			renderContext.height = this.domElement.height;
 
 		}
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -350,7 +350,7 @@ class WebGPUBackend extends Backend {
 
 			const { x, y, width, height } = renderContext.scissorValue;
 
-			currentPass.setScissorRect( x, y, width, height );
+			currentPass.setScissorRect( x, renderContext.height - height - y, width, height );
 
 		}
 
@@ -484,9 +484,9 @@ class WebGPUBackend extends Backend {
 	updateViewport( renderContext ) {
 
 		const { currentPass } = this.get( renderContext );
-		const { x, y, width, height, minDepth, maxDepth } = renderContext.viewportValue;
+		let { x, y, width, height, minDepth, maxDepth } = renderContext.viewportValue;
 
-		currentPass.setViewport( x, y, width, height, minDepth, maxDepth );
+		currentPass.setViewport( x, renderContext.height - height - y, width, height, minDepth, maxDepth );
 
 	}
 

examples/webgpu_lines_fat.html

@@ -195,9 +195,9 @@
 
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 20, window.innerHeight - insetHeight - 20, insetWidth, insetHeight );
+				renderer.setScissor( 20, 20, insetWidth, insetHeight );
 
-				renderer.setViewport( 20, window.innerHeight - insetHeight - 20, insetWidth, insetHeight );
+				renderer.setViewport( 20, 20, insetWidth, insetHeight );
 
 				camera2.position.copy( camera.position );
 				camera2.quaternion.copy( camera.quaternion );