TSL: Rename `viewportTopLeft` -> `viewportUV` (#29211)

* TSL: Rename `viewportTopLeft` -> `viewportUV`

* cleanup

examples/webgpu_backdrop.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { float, vec3, color, viewportSharedTexture, viewportSafeUV, viewportTopLeft, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
+			import { float, vec3, color, viewportSharedTexture, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -43,7 +43,7 @@
 				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
-				scene.backgroundNode = viewportTopLeft.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
+				scene.backgroundNode = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();
@@ -111,8 +111,8 @@
 				addBackdropSphere( viewportSharedTexture().rgb.saturation( 0 ) );
 				addBackdropSphere( viewportSharedTexture().rgb.saturation( 10 ), oscSine() );
 				addBackdropSphere( viewportSharedTexture().rgb.overlay( checker( uv().mul( 10 ) ) ) );
-				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportTopLeft.mul( 40 ).floor().div( 40 ) ) ) );
-				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportTopLeft.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
+				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 40 ).floor().div( 40 ) ) ) );
+				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
 				addBackdropSphere( vec3( 0, 0, viewportSharedTexture().b ) );
 
 				//renderer

examples/webgpu_backdrop_area.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportTopLeft, checker, uv, modelScale } from 'three/tsl';
+			import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -106,7 +106,7 @@
 				bicubicMaterial.side = THREE.DoubleSide;
 
 				const pixelMaterial = new THREE.MeshBasicNodeMaterial();
-				pixelMaterial.backdropNode = viewportSharedTexture( viewportTopLeft.mul( 100 ).floor().div( 100 ) );
+				pixelMaterial.backdropNode = viewportSharedTexture( viewportUV.mul( 100 ).floor().div( 100 ) );
 				pixelMaterial.transparent = true;
 
 				// box / floor

examples/webgpu_backdrop_water.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportTopLeft, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
+			import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -148,14 +148,14 @@
 				const depthWater = viewportLinearDepth.sub( depth );
 				const depthEffect = depthWater.remapClamp( - .002, .04 );
 
-				const refractionUV = viewportTopLeft.add( vec2( 0, waterIntensity.mul( .1 ) ) );
+				const refractionUV = viewportUV.add( vec2( 0, waterIntensity.mul( .1 ) ) );
 
 				// linearDepth( viewportDepthTexture( uv ) ) return the linear depth of the scene
 				const depthTestForRefraction = linearDepth( viewportDepthTexture( refractionUV ) ).sub( depth );
 
 				const depthRefraction = depthTestForRefraction.remapClamp( 0, .1 );
 
-				const finalUV = depthTestForRefraction.lessThan( 0 ).select( viewportTopLeft, refractionUV );
+				const finalUV = depthTestForRefraction.lessThan( 0 ).select( viewportUV, refractionUV );
 
 				const viewportTexture = viewportSharedTexture( finalUV );
 
@@ -226,7 +226,7 @@
 				const scenePassColorBlurred = scenePassColor.gaussianBlur();
 				scenePassColorBlurred.directionNode = waterMask.select( scenePassDepth, scenePass.getLinearDepthNode().mul( 5 ) );
 
-				const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignet ) );

examples/webgpu_compute_audio.html

@@ -29,7 +29,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, uniform, storage, storageObject, instanceIndex, float, texture, viewportTopLeft, color } from 'three/tsl';
+			import { Fn, uniform, storage, storageObject, instanceIndex, float, texture, viewportUV, color } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -170,7 +170,7 @@
 
 				analyserTexture = new THREE.DataTexture( analyserBuffer, analyserBuffer.length, 1, THREE.RedFormat );
 
-				const spectrum = texture( analyserTexture, viewportTopLeft.x ).x.mul( viewportTopLeft.y );
+				const spectrum = texture( analyserTexture, viewportUV.x ).x.mul( viewportUV.y );
 				const backgroundNode = color( 0x0000FF ).mul( spectrum );
 
 

examples/webgpu_compute_particles_snow.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, texture, vec3, pass, color, uint, viewportTopLeft, positionWorld, positionLocal, timerLocal, vec2, instanceIndex, storage, If } from 'three/tsl';
+			import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, instanceIndex, storage, If } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -261,7 +261,7 @@
 
 				//
 
-				scene.backgroundNode = viewportTopLeft.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
+				scene.backgroundNode = viewportUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
 
 				//
 
@@ -295,7 +295,7 @@
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();
-				const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
 				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
 				const teapotTreePassBlurred = teapotTreePass.gaussianBlur( vec2( 1 ), 3 );

examples/webgpu_mrt.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { output, transformedNormalWorld, pass, step, diffuseColor, emissive, viewportTopLeft, mix, mrt, Fn } from 'three/tsl';
+			import { output, transformedNormalWorld, pass, step, diffuseColor, emissive, viewportUV, mix, mrt, Fn } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -108,10 +108,10 @@
 					const diffuse = scenePass.getTextureNode( 'diffuse' );
 					const emissive = scenePass.getTextureNode( 'emissive' );
 
-					const out = mix( output.renderOutput(), output, step( 0.2, viewportTopLeft.x ) );
-					const nor = mix( out, normal, step( 0.4, viewportTopLeft.x ) );
-					const emi = mix( nor, emissive, step( 0.6, viewportTopLeft.x ) );
-					const dif = mix( emi, diffuse, step( 0.8, viewportTopLeft.x ) );
+					const out = mix( output.renderOutput(), output, step( 0.2, viewportUV.x ) );
+					const nor = mix( out, normal, step( 0.4, viewportUV.x ) );
+					const emi = mix( nor, emissive, step( 0.6, viewportUV.x ) );
+					const dif = mix( emi, diffuse, step( 0.8, viewportUV.x ) );
 
 					return dif;
 

examples/webgpu_mrt_mask.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, viewportTopLeft, mrt, output, pass, vec4 } from 'three/tsl';
+			import { color, viewportUV, mrt, output, pass, vec4 } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -45,7 +45,7 @@
 				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
-				scene.backgroundNode = viewportTopLeft.y.mix( color( 0x66bbff ), color( 0x4466ff ) ).mul( .05 );
+				scene.backgroundNode = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) ).mul( .05 );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();

examples/webgpu_multiple_rendertargets.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { mix, vec2, step, texture, uv, viewportTopLeft, normalWorld, output, mrt } from 'three/tsl';
+			import { mix, vec2, step, texture, uv, viewportUV, normalWorld, output, mrt } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -86,7 +86,7 @@
 				// Post Processing
 
 				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, viewportTopLeft.x ) );
+				postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, viewportUV.x ) );
 
 				// Controls
 

examples/webgpu_multiple_rendertargets_readback.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { mix, step, texture, viewportTopLeft, mrt, output, transformedNormalWorld, uv, vec2 } from 'three/tsl';
+			import { mix, step, texture, viewportUV, mrt, output, transformedNormalWorld, uv, vec2 } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -111,7 +111,7 @@
 				// Output
 
 				material = new THREE.NodeMaterial();
-				material.colorNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, viewportTopLeft.x ) );
+				material.colorNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, viewportUV.x ) );
 
 				quadMesh = new THREE.QuadMesh( material );
 

examples/webgpu_portal.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, color, mx_worley_noise_float, timerLocal, viewportTopLeft, vec2, uv, normalWorld, mx_fractal_noise_vec3 } from 'three/tsl';
+			import { pass, color, mx_worley_noise_float, timerLocal, viewportUV, vec2, uv, normalWorld, mx_fractal_noise_vec3 } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -128,7 +128,7 @@
 				const geometry = new THREE.PlaneGeometry( 1.7, 2 );
 
 				const material = new THREE.MeshBasicNodeMaterial();
-				material.colorNode = pass( scenePortal, camera ).context( { getUV: () => viewportTopLeft } );
+				material.colorNode = pass( scenePortal, camera ).context( { getUV: () => viewportUV } );
 				material.opacityNode = uv().distance( .5 ).remapClamp( .3, .5 ).oneMinus();
 				material.side = THREE.DoubleSide;
 				material.transparent = true;

examples/webgpu_postprocessing_anamorphic.html

@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, cubeTexture, viewportTopLeft, uniform } from 'three/tsl';
+			import { pass, cubeTexture, viewportUV, uniform } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -58,7 +58,7 @@
 					.loadCubemapAsync( rgbmUrls );
 
 				scene.environment = cube1Texture;
-				scene.backgroundNode = cubeTexture( cube1Texture ).mul( viewportTopLeft.distance( .5 ).oneMinus().remapClamp( .1, 4 ) ).saturation( 0 );
+				scene.backgroundNode = cubeTexture( cube1Texture ).mul( viewportUV.distance( .5 ).oneMinus().remapClamp( .1, 4 ) ).saturation( 0 );
 
 				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 				loader.load( 'DamagedHelmet.gltf', function ( gltf ) {

examples/webgpu_postprocessing_motion_blur.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, texture, motionBlur, uniform, output, mrt, mix, velocity, uv, viewportTopLeft } from 'three/tsl';
+			import { pass, texture, motionBlur, uniform, output, mrt, mix, velocity, uv, viewportUV } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -188,7 +188,7 @@
 
 				const mBlur = motionBlur( beauty, vel );
 
-				const vignet = viewportTopLeft.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
+				const vignet = viewportUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = mix( mBlur, vel, showVelocity ).mul( vignet );

examples/webgpu_reflection.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/tsl';
+			import { color, pass, reflector, normalWorld, texture, uv, viewportUV } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -151,7 +151,7 @@
 				const scenePassColorBlurred = scenePassColor.gaussianBlur();
 				scenePassColorBlurred.directionNode = scenePassDepth;
 
-				const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = scenePassColorBlurred.mul( vignet );

examples/webgpu_refraction.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { viewportSafeUV, viewportSharedTexture, viewportTopLeft, texture, uv } from 'three/tsl';
+			import { viewportSafeUV, viewportSharedTexture, viewportUV, texture, uv } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -66,7 +66,7 @@
 				const verticalNormalScale = 0.1;
 				const verticalUVOffset = texture( floorNormal, uv().mul( 5 ) ).xy.mul( 2 ).sub( 1 ).mul( verticalNormalScale );
 
-				const refractorUV = viewportTopLeft.add( verticalUVOffset );
+				const refractorUV = viewportUV.add( verticalUVOffset );
 				const verticalRefractor = viewportSharedTexture( viewportSafeUV( refractorUV ) );
 
 				const planeGeo = new THREE.PlaneGeometry( 100.1, 100.1 );

examples/webgpu_skinning.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, viewportTopLeft } from 'three/tsl';
+			import { color, viewportUV } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -41,7 +41,7 @@
 				camera.position.set( 1, 2, 3 );
 
 				scene = new THREE.Scene();
-				scene.backgroundNode = viewportTopLeft.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
+				scene.backgroundNode = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();

src/nodes/Nodes.js

@@ -123,7 +123,7 @@ export { default as FrontFacingNode, frontFacing, faceDirection } from './displa
 export { default as NormalMapNode, normalMap } from './display/NormalMapNode.js';
 export { default as PosterizeNode, posterize } from './display/PosterizeNode.js';
 export { default as ToneMappingNode, toneMapping } from './display/ToneMappingNode.js';
-export { default as ViewportNode, viewport, viewportCoordinate, viewportResolution, viewportTopLeft, viewportBottomLeft, viewportTopRight, viewportBottomRight } from './display/ViewportNode.js';
+export { default as ViewportNode, viewport, viewportCoordinate, viewportResolution, viewportUV, viewportTopLeft } from './display/ViewportNode.js';
 export { default as ViewportTextureNode, viewportTexture, viewportMipTexture } from './display/ViewportTextureNode.js';
 export { default as ViewportSharedTextureNode, viewportSharedTexture } from './display/ViewportSharedTextureNode.js';
 export { default as ViewportDepthTextureNode, viewportDepthTexture } from './display/ViewportDepthTextureNode.js';

src/nodes/display/ViewportDepthTextureNode.js

@@ -1,7 +1,7 @@
 import ViewportTextureNode from './ViewportTextureNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-import { viewportTopLeft } from './ViewportNode.js';
+import { viewportUV } from './ViewportNode.js';
 
 import { DepthTexture } from '../../textures/DepthTexture.js';
 
@@ -9,7 +9,7 @@ let sharedDepthbuffer = null;
 
 class ViewportDepthTextureNode extends ViewportTextureNode {
 
-	constructor( uvNode = viewportTopLeft, levelNode = null ) {
+	constructor( uvNode = viewportUV, levelNode = null ) {
 
 		if ( sharedDepthbuffer === null ) {
 

src/nodes/display/ViewportNode.js

@@ -1,7 +1,7 @@
 import Node, { addNodeClass } from '../core/Node.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { uniform } from '../core/UniformNode.js';
-import { nodeImmutable, vec2 } from '../shadernode/ShaderNode.js';
+import { Fn, nodeImmutable, vec2 } from '../shadernode/ShaderNode.js';
 
 import { Vector2 } from '../../math/Vector2.js';
 import { Vector4 } from '../../math/Vector4.js';
@@ -23,7 +23,6 @@ class ViewportNode extends Node {
 	getNodeType() {
 
 		if ( this.scope === ViewportNode.VIEWPORT ) return 'vec4';
-		else if ( this.scope === ViewportNode.COORDINATE ) return 'vec3';
 		else return 'vec2';
 
 	}
@@ -74,15 +73,7 @@ class ViewportNode extends Node {
 
 		} else {
 
-			output = viewportCoordinate.div( viewportResolution );
-
-			let outX = output.x;
-			let outY = output.y;
-
-			if ( /bottom/i.test( scope ) ) outY = outY.oneMinus();
-			if ( /right/i.test( scope ) ) outX = outX.oneMinus();
-
-			output = vec2( outX, outY );
+			output = vec2( viewportCoordinate.div( viewportResolution ) );
 
 		}
 
@@ -102,7 +93,7 @@ class ViewportNode extends Node {
 
 				const resolution = builder.getNodeProperties( viewportResolution ).outputNode.build( builder );
 
-				coord = `${ builder.getType( 'vec3' ) }( ${ coord }.x, ${ resolution }.y - ${ coord }.y, ${ coord }.z )`;
+				coord = `${ builder.getType( 'vec2' ) }( ${ coord }.x, ${ resolution }.y - ${ coord }.y )`;
 
 			}
 
@@ -129,9 +120,14 @@ export default ViewportNode;
 export const viewportCoordinate = nodeImmutable( ViewportNode, ViewportNode.COORDINATE );
 export const viewportResolution = nodeImmutable( ViewportNode, ViewportNode.RESOLUTION );
 export const viewport = nodeImmutable( ViewportNode, ViewportNode.VIEWPORT );
-export const viewportTopLeft = nodeImmutable( ViewportNode, ViewportNode.TOP_LEFT );
-export const viewportBottomLeft = nodeImmutable( ViewportNode, ViewportNode.BOTTOM_LEFT );
-export const viewportTopRight = nodeImmutable( ViewportNode, ViewportNode.TOP_RIGHT );
-export const viewportBottomRight = nodeImmutable( ViewportNode, ViewportNode.BOTTOM_RIGHT );
+export const viewportUV = nodeImmutable( ViewportNode, ViewportNode.TOP_LEFT );
+
+export const viewportTopLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
+
+	console.warn( 'TSL.ViewportNode: "viewportTopLeft" is deprecated. Use "viewportUV" instead.' );
+
+	return viewportUV;
+
+}, 'vec2' ).once() )();
 
 addNodeClass( 'ViewportNode', ViewportNode );

src/nodes/display/ViewportSharedTextureNode.js

@@ -1,7 +1,7 @@
 import ViewportTextureNode from './ViewportTextureNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-import { viewportTopLeft } from './ViewportNode.js';
+import { viewportUV } from './ViewportNode.js';
 
 import { FramebufferTexture } from '../../textures/FramebufferTexture.js';
 
@@ -9,7 +9,7 @@ let _sharedFramebuffer = null;
 
 class ViewportSharedTextureNode extends ViewportTextureNode {
 
-	constructor( uvNode = viewportTopLeft, levelNode = null ) {
+	constructor( uvNode = viewportUV, levelNode = null ) {
 
 		if ( _sharedFramebuffer === null ) {
 

src/nodes/display/ViewportTextureNode.js

@@ -2,7 +2,7 @@ import TextureNode from '../accessors/TextureNode.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
-import { viewportTopLeft } from './ViewportNode.js';
+import { viewportUV } from './ViewportNode.js';
 
 import { Vector2 } from '../../math/Vector2.js';
 import { FramebufferTexture } from '../../textures/FramebufferTexture.js';
@@ -12,7 +12,7 @@ const _size = /*@__PURE__*/ new Vector2();
 
 class ViewportTextureNode extends TextureNode {
 
-	constructor( uvNode = viewportTopLeft, levelNode = null, framebufferTexture = null ) {
+	constructor( uvNode = viewportUV, levelNode = null, framebufferTexture = null ) {
 
 		if ( framebufferTexture === null ) {
 

src/nodes/utils/ReflectorNode.js

@@ -1,7 +1,7 @@
 import TextureNode from '../accessors/TextureNode.js';
-import { nodeObject, vec2 } from '../shadernode/ShaderNode.js';
+import { nodeObject } from '../shadernode/ShaderNode.js';
 import { NodeUpdateType } from '../core/constants.js';
-import { viewportTopLeft } from '../display/ViewportNode.js';
+import { viewportUV } from '../display/ViewportNode.js';
 
 import { HalfFloatType, LinearMipMapLinearFilter } from '../../constants.js';
 import { Plane } from '../../math/Plane.js';
@@ -27,7 +27,7 @@ const _q = new Vector4();
 const _size = new Vector2();
 
 const _defaultRT = new RenderTarget();
-const _defaultUV = vec2( viewportTopLeft.x.oneMinus(), viewportTopLeft.y );
+const _defaultUV = viewportUV.flipX();
 
 let _inReflector = false;
 

src/nodes/utils/ViewportUtils.js

@@ -1,5 +1,5 @@
 import { Fn } from '../shadernode/ShaderNode.js';
-import { viewportTopLeft } from '../display/ViewportNode.js';
+import { viewportUV } from '../display/ViewportNode.js';
 import { viewportDepthTexture } from '../display/ViewportDepthTextureNode.js';
 import { linearDepth } from '../display/ViewportDepthNode.js';
 
@@ -7,7 +7,7 @@ export const viewportSafeUV = Fn( ( [ uv = null ] ) => {
 
 	const depth = linearDepth();
 	const depthDiff = linearDepth( viewportDepthTexture( uv ) ).sub( depth );
-	const finalUV = depthDiff.lessThan( 0 ).select( viewportTopLeft, uv );
+	const finalUV = depthDiff.lessThan( 0 ).select( viewportUV, uv );
 
 	return finalUV;
 

src/renderers/common/nodes/Nodes.js

@@ -2,7 +2,7 @@ import DataMap from '../DataMap.js';
 import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
 import { cubeMapNode } from '../../../nodes/utils/CubeMapNode.js';
-import { NodeFrame, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, viewportBottomLeft, normalWorld, pmremTexture, viewportTopLeft } from '../../../nodes/Nodes.js';
+import { NodeFrame, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, normalWorld, pmremTexture, viewportUV } from '../../../nodes/Nodes.js';
 
 import { EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../../constants.js';
 
@@ -297,7 +297,7 @@ class Nodes extends DataMap {
 
 				} else if ( background.isTexture === true ) {
 
-					backgroundNode = texture( background, viewportBottomLeft ).setUpdateMatrix( true );
+					backgroundNode = texture( background, viewportUV.flipY() ).setUpdateMatrix( true );
 
 				} else if ( background.isColor !== true ) {
 
@@ -438,7 +438,7 @@ class Nodes extends DataMap {
 		const renderer = this.renderer;
 		const cacheKey = this.getOutputCacheKey();
 
-		const output = texture( outputTexture, viewportTopLeft ).renderOutput( renderer.toneMapping, renderer.currentColorSpace );
+		const output = texture( outputTexture, viewportUV ).renderOutput( renderer.toneMapping, renderer.currentColorSpace );
 
 		outputNodeMap.set( outputTexture, cacheKey );
 

src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js

@@ -629,7 +629,7 @@ ${ flowData.code }
 
 	getFragCoord() {
 
-		return 'gl_FragCoord';
+		return 'gl_FragCoord.xy';
 
 	}
 

src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -659,7 +659,7 @@ ${ flowData.code }
 
 	getFragCoord() {
 
-		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xyz';
+		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xy';
 
 	}