WebGPURenderer: Move `viewport` and `scissor` to WebGPU convention - `top-left` (#29249)

* Move `viewport` and `scissor` to WebGPU convention - `top-left`

* PMREMGenerator approves this

* update examples

examples/webgpu_instance_points.html

@@ -163,13 +163,15 @@
 
 				// inset scene
 
+				const posY = window.innerHeight - insetHeight - 20;
+
 				renderer.clearDepth(); // important!
 
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 20, 20, insetWidth, insetHeight );
+				renderer.setScissor( 20, posY, insetWidth, insetHeight );
 
-				renderer.setViewport( 20, 20, insetWidth, insetHeight );
+				renderer.setViewport( 20, posY, insetWidth, insetHeight );
 
 				camera2.position.copy( camera.position );
 

examples/webgpu_lines_fat.html

@@ -177,13 +177,15 @@
 
 				// inset scene
 
+				const posY = window.innerHeight - insetHeight - 20;
+
 				renderer.clearDepth(); // important!
 
 				renderer.setScissorTest( true );
 
-				renderer.setScissor( 20, 20, insetWidth, insetHeight );
+				renderer.setScissor( 20, posY, insetWidth, insetHeight );
 
-				renderer.setViewport( 20, 20, insetWidth, insetHeight );
+				renderer.setViewport( 20, posY, insetWidth, insetHeight );
 
 				camera2.position.copy( camera.position );
 				camera2.quaternion.copy( camera.quaternion );

src/renderers/common/extras/PMREMGenerator.js

@@ -698,10 +698,8 @@ function _createRenderTarget( width, height, params ) {
 
 function _setViewport( target, x, y, width, height ) {
 
-	const viewY = target.height - height - y;
-
-	target.viewport.set( x, viewY, width, height );
-	target.scissor.set( x, viewY, width, height );
+	target.viewport.set( x, y, width, height );
+	target.scissor.set( x, y, width, height );
 
 }
 

src/renderers/webgl-fallback/WebGLBackend.js

@@ -207,7 +207,7 @@ class WebGLBackend extends Backend {
 
 			const { x, y, width, height } = renderContext.scissorValue;
 
-			gl.scissor( x, y, width, height );
+			gl.scissor( x, renderContext.height - height - y, width, height );
 
 		}
 
@@ -296,8 +296,10 @@ class WebGLBackend extends Backend {
 
 						const { x, y, width, height } = renderContext.scissorValue;
 
-						gl.blitFramebuffer( x, y, x + width, y + height, x, y, x + width, y + height, mask, gl.NEAREST );
-						gl.invalidateSubFramebuffer( gl.READ_FRAMEBUFFER, renderTargetContextData.invalidationArray, x, y, width, height );
+						const viewY = renderContext.height - height - y;
+
+						gl.blitFramebuffer( x, viewY, x + width, viewY + height, x, viewY, x + width, viewY + height, mask, gl.NEAREST );
+						gl.invalidateSubFramebuffer( gl.READ_FRAMEBUFFER, renderTargetContextData.invalidationArray, x, viewY, width, height );
 
 					} else {
 
@@ -404,7 +406,7 @@ class WebGLBackend extends Backend {
 		const gl = this.gl;
 		const { x, y, width, height } = renderContext.viewportValue;
 
-		gl.viewport( x, y, width, height );
+		gl.viewport( x, renderContext.height - height - y, width, height );
 
 	}
 

src/renderers/webgpu/WebGPUBackend.js

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