TSL: Introduce `screenUV`, `screenSize`, `screenCoordinate` and `viewport` revision (#29347)

* rename `viewportUV` -> `screenUV`

* rename `viewportResolution` -> `screenSize`

* rename `viewportCoordinate` -> `screenCoordinate`

* rename `ViewportNode` -> `ScreenNode`

* viewport -> use physical pixel units

* revision

* add `viewportSize`, `viewportCoordinate`, `viewportUV` -- other logic

* restore

* Update ScreenNode.js

* Update ScreenNode.js

* rev

* Update webgpu_animation_retargeting.html

* update

examples/jsm/objects/Water2Mesh.js

@@ -5,7 +5,7 @@ import {
 	Vector2,
 	Vector3
 } from 'three';
-import { vec2, viewportSafeUV, viewportSharedTexture, reflector, pow, float, abs, texture, uniform, TempNode, NodeUpdateType, vec4, Fn, cameraPosition, positionWorld, uv, mix, vec3, normalize, max, dot, viewportUV } from 'three/tsl';
+import { vec2, viewportSafeUV, viewportSharedTexture, reflector, pow, float, abs, texture, uniform, TempNode, NodeUpdateType, vec4, Fn, cameraPosition, positionWorld, uv, mix, vec3, normalize, max, dot, screenUV } from 'three/tsl';
 
 /**
  * References:
@@ -141,7 +141,7 @@ class WaterNode extends TempNode {
 			this.waterBody.add( reflectionSampler.target );
 			reflectionSampler.uvNode = reflectionSampler.uvNode.add( offset );
 
-			const refractorUV = viewportUV.add( offset );
+			const refractorUV = screenUV.add( offset );
 			const refractionSampler = viewportSharedTexture( viewportSafeUV( refractorUV ) );
 
 			// calculate final uv coords

examples/jsm/transpiler/GLSLDecoder.js

@@ -226,7 +226,7 @@ class GLSLDecoder {
 
 		this._currentFunction = null;
 
-		this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( viewportCoordinate.x, viewportCoordinate.y.oneMinus(), viewportCoordinate.z );' );
+		this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( screenCoordinate.x, screenCoordinate.y.oneMinus(), screenCoordinate.z );' );
 
 	}
 

examples/jsm/transpiler/ShaderToyDecoder.js

@@ -8,8 +8,8 @@ class ShaderToyDecoder extends GLSLDecoder {
 		super();
 
 		this.addPolyfill( 'iTime', 'float iTime = timerGlobal();' );
-		this.addPolyfill( 'iResolution', 'vec2 iResolution = viewportResolution;' );
-		this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( viewportCoordinate.x, viewportResolution.y - viewportCoordinate.y, viewportCoordinate.z );' );
+		this.addPolyfill( 'iResolution', 'vec2 iResolution = screenSize;' );
+		this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( screenCoordinate.x, screenSize.y - screenCoordinate.y, screenCoordinate.z );' );
 
 	}
 

examples/webgpu_animation_retargeting.html

@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, viewportUV, reflector } from 'three/tsl';
+			import { color, screenUV, hue, timerLocal, reflector } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -59,7 +59,7 @@
 
 			// scene
 			const scene = new THREE.Scene();
-			scene.backgroundNode = viewportUV.distance( .5 ).mix( color( 0x0175ad ), color( 0x02274f ) );
+			scene.backgroundNode = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), timerLocal( .1 ) ), hue( color( 0x02274f ), timerLocal( .5 ) ) );
 
 			const helpers = new THREE.Group();
 			helpers.visible = false;

examples/webgpu_backdrop.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
+			import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, screenUV, 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 = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
+				scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();
@@ -107,8 +107,8 @@
 				addBackdropSphere( grayscale( viewportSharedTexture().rgb ) );
 				addBackdropSphere( saturation( viewportSharedTexture().rgb, 10 ), oscSine() );
 				addBackdropSphere( overlay( viewportSharedTexture().rgb, checker( uv().mul( 10 ) ) ) );
-				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 40 ).floor().div( 40 ) ) ) );
-				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
+				addBackdropSphere( viewportSharedTexture( viewportSafeUV( screenUV.mul( 40 ).floor().div( 40 ) ) ) );
+				addBackdropSphere( viewportSharedTexture( viewportSafeUV( screenUV.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, textureBicubic, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
+			import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, textureBicubic, viewportMipTexture, screenUV, 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( viewportUV.mul( 100 ).floor().div( 100 ) );
+				pixelMaterial.backdropNode = viewportSharedTexture( screenUV.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, gaussianBlur, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
+			import { color, vec2, pass, linearDepth, normalWorld, gaussianBlur, triplanarTexture, texture, objectPosition, screenUV, 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 = viewportUV.add( vec2( 0, waterIntensity.mul( .1 ) ) );
+				const refractionUV = screenUV.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( viewportUV, refractionUV );
+				const finalUV = depthTestForRefraction.lessThan( 0 ).select( screenUV, refractionUV );
 
 				const viewportTexture = viewportSharedTexture( finalUV );
 
@@ -226,7 +226,7 @@
 				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.directionNode = waterMask.select( scenePassDepth, scenePass.getLinearDepthNode().mul( 5 ) );
 
-				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = screenUV.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, viewportUV, color } from 'three/tsl';
+			import { Fn, uniform, storage, storageObject, instanceIndex, float, texture, screenUV, 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, viewportUV.x ).x.mul( viewportUV.y );
+				const spectrum = texture( analyserTexture, screenUV.x ).x.mul( screenUV.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, viewportUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';
+			import { Fn, texture, vec3, pass, color, uint, screenUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -261,7 +261,7 @@
 
 				//
 
-				scene.backgroundNode = viewportUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
+				scene.backgroundNode = screenUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
 
 				//
 
@@ -295,7 +295,7 @@
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();
-				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
 				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
 				const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 3 );

examples/webgpu_materials.html

@@ -27,7 +27,7 @@
 			import * as THREE from 'three';
 			import * as TSL from 'three/tsl';
 
-			import { Fn, wgslFn, positionLocal, scriptable, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
+			import { Fn, wgslFn, positionLocal, scriptable, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, screenUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -208,7 +208,7 @@
 
 				// Screen Projection Texture
 				material = new THREE.MeshBasicNodeMaterial();
-				material.colorNode = texture( uvTexture, viewportUV.flipY() );
+				material.colorNode = texture( uvTexture, screenUV.flipY() );
 				materials.push( material );
 
 				// Loop

examples/webgpu_mrt.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { output, transformedNormalView, pass, step, diffuseColor, emissive, directionToColor, viewportUV, mix, mrt, Fn } from 'three/tsl';
+			import { output, transformedNormalView, pass, step, diffuseColor, emissive, directionToColor, screenUV, 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, 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 ) );
+					const out = mix( output.renderOutput(), output, step( 0.2, screenUV.x ) );
+					const nor = mix( out, normal, step( 0.4, screenUV.x ) );
+					const emi = mix( nor, emissive, step( 0.6, screenUV.x ) );
+					const dif = mix( emi, diffuse, step( 0.8, screenUV.x ) );
 
 					return dif;
 

examples/webgpu_mrt_mask.html

@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, viewportUV, mrt, output, gaussianBlur, pass, vec4 } from 'three/tsl';
+			import { color, screenUV, mrt, output, gaussianBlur, 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 = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) ).mul( .05 );
+				scene.backgroundNode = screenUV.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, viewportUV, normalWorld, output, mrt } from 'three/tsl';
+			import { mix, vec2, step, texture, uv, screenUV, 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, viewportUV.x ) );
+				postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.x ) );
 
 				// Controls
 

examples/webgpu_multiple_rendertargets_readback.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { mix, step, texture, viewportUV, mrt, output, transformedNormalWorld, uv, vec2 } from 'three/tsl';
+			import { mix, step, texture, screenUV, 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, viewportUV.x ) );
+				material.colorNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.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, viewportUV, vec2, uv, normalWorld, mx_fractal_noise_vec3 } from 'three/tsl';
+			import { pass, color, mx_worley_noise_float, timerLocal, screenUV, 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: () => viewportUV } );
+				material.colorNode = pass( scenePortal, camera ).context( { getUV: () => screenUV } );
 				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, viewportUV, grayscale, uniform, anamorphic } from 'three/tsl';
+			import { pass, cubeTexture, screenUV, grayscale, uniform, anamorphic } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -58,7 +58,7 @@
 					.loadCubemapAsync( rgbmUrls );
 
 				scene.environment = cube1Texture;
-				scene.backgroundNode = grayscale( cubeTexture( cube1Texture ).mul( viewportUV.distance( .5 ).oneMinus().remapClamp( .1, 4 ) ) );
+				scene.backgroundNode = grayscale( cubeTexture( cube1Texture ).mul( screenUV.distance( .5 ).oneMinus().remapClamp( .1, 4 ) ) );
 
 				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, viewportUV } from 'three/tsl';
+			import { pass, texture, motionBlur, uniform, output, mrt, mix, velocity, uv, screenUV } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -188,7 +188,7 @@
 
 				const mBlur = motionBlur( beauty, vel );
 
-				const vignet = viewportUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
+				const vignet = screenUV.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, viewportUV, gaussianBlur } from 'three/tsl';
+			import { color, pass, reflector, normalWorld, texture, uv, screenUV, gaussianBlur } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -151,7 +151,7 @@
 				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.directionNode = scenePassDepth;
 
-				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
+				const vignet = screenUV.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, viewportUV, texture, uv } from 'three/tsl';
+			import { viewportSafeUV, viewportSharedTexture, screenUV, 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 = viewportUV.add( verticalUVOffset );
+				const refractorUV = screenUV.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, viewportUV } from 'three/tsl';
+			import { color, screenUV } 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 = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
+				scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
 				clock = new THREE.Clock();

examples/webgpu_tsl_halftone.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, mix, normalWorld, output, Fn, uniform, vec4, rotate, viewportCoordinate, viewportResolution } from 'three/tsl';
+			import { color, mix, normalWorld, output, Fn, uniform, vec4, rotate, screenCoordinate, screenSize } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -133,7 +133,7 @@
 
 					// grid pattern
 
-					let gridUv = viewportCoordinate.xy.div( viewportResolution.yy ).mul( count );
+					let gridUv = screenCoordinate.xy.div( screenSize.yy ).mul( count );
 					gridUv = rotate( gridUv, Math.PI * 0.25 ).mod( 1 );
 
 					// orientation strength

src/materials/nodes/InstancedPointsNodeMaterial.js

@@ -7,7 +7,7 @@ import { positionGeometry } from '../../nodes/accessors/Position.js';
 import { smoothstep, lengthSq } from '../../nodes/math/MathNode.js';
 import { Fn, vec4, float } from '../../nodes/tsl/TSLBase.js';
 import { uv } from '../../nodes/accessors/UV.js';
-import { viewport } from '../../nodes/display/ViewportNode.js';
+import { viewport } from '../../nodes/display/ScreenNode.js';
 
 import { PointsMaterial } from '../PointsMaterial.js';
 

src/materials/nodes/Line2NodeMaterial.js

@@ -8,7 +8,7 @@ import { positionGeometry } from '../../nodes/accessors/Position.js';
 import { mix, smoothstep } from '../../nodes/math/MathNode.js';
 import { Fn, varying, float, vec2, vec3, vec4, If } from '../../nodes/tsl/TSLBase.js';
 import { uv } from '../../nodes/accessors/UV.js';
-import { viewport } from '../../nodes/display/ViewportNode.js';
+import { viewport } from '../../nodes/display/ScreenNode.js';
 import { dashSize, gapSize } from '../../nodes/core/PropertyNode.js';
 
 import { LineDashedMaterial } from '../LineDashedMaterial.js';

src/nodes/Nodes.js

@@ -88,7 +88,7 @@ export { default as FrontFacingNode } from './display/FrontFacingNode.js';
 export { default as NormalMapNode } from './display/NormalMapNode.js';
 export { default as PosterizeNode } from './display/PosterizeNode.js';
 export { default as ToneMappingNode } from './display/ToneMappingNode.js';
-export { default as ViewportNode } from './display/ViewportNode.js';
+export { default as ScreenNode } from './display/ScreenNode.js';
 export { default as ViewportTextureNode } from './display/ViewportTextureNode.js';
 export { default as ViewportSharedTextureNode } from './display/ViewportSharedTextureNode.js';
 export { default as ViewportDepthTextureNode } from './display/ViewportDepthTextureNode.js';

src/nodes/TSL.js

@@ -90,7 +90,7 @@ export * from './display/FrontFacingNode.js';
 export * from './display/NormalMapNode.js';
 export * from './display/PosterizeNode.js';
 export * from './display/ToneMappingNode.js';
-export * from './display/ViewportNode.js';
+export * from './display/ScreenNode.js';
 export * from './display/ViewportTextureNode.js';
 export * from './display/ViewportSharedTextureNode.js';
 export * from './display/ViewportDepthTextureNode.js';

src/nodes/display/DotScreenNode.js

@@ -4,7 +4,7 @@ import { uniform } from '../core/UniformNode.js';
 import { uv } from '../accessors/UV.js';
 import { sin, cos } from '../math/MathNode.js';
 import { add } from '../math/OperatorNode.js';
-import { viewportResolution } from '../display/ViewportNode.js';
+import { screenSize } from './ScreenNode.js';
 
 import { Vector2 } from '../../math/Vector2.js';
 
@@ -36,7 +36,7 @@ class DotScreenNode extends TempNode {
 			const s = sin( this.angle );
 			const c = cos( this.angle );
 
-			const tex = uv().mul( viewportResolution ).sub( this.center );
+			const tex = uv().mul( screenSize ).sub( this.center );
 			const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
 
 			return sin( point.x ).mul( sin( point.y ) ).mul( 4 );

src/nodes/display/ParallaxBarrierPassNode.js

@@ -1,7 +1,7 @@
 import { Fn, If, nodeObject, vec4 } from '../tsl/TSLBase.js';
 import { uv } from '../accessors/UV.js';
 import { mod } from '../math/MathNode.js';
-import { viewportCoordinate } from './ViewportNode.js';
+import { screenCoordinate } from './ScreenNode.js';
 import StereoCompositePassNode from './StereoCompositePassNode.js';
 import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
 
@@ -29,7 +29,7 @@ class ParallaxBarrierPassNode extends StereoCompositePassNode {
 
 			const color = vec4().toVar();
 
-			If( mod( viewportCoordinate.y, 2 ).greaterThan( 1 ), () => {
+			If( mod( screenCoordinate.y, 2 ).greaterThan( 1 ), () => {
 
 				color.assign( this._mapLeft.uv( uvNode ) );
 

src/nodes/display/ScreenNode.js

@@ -0,0 +1,181 @@
+import Node from '../core/Node.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { uniform } from '../core/UniformNode.js';
+import { Fn, nodeImmutable, vec2 } from '../tsl/TSLBase.js';
+
+import { Vector2 } from '../../math/Vector2.js';
+import { Vector4 } from '../../math/Vector4.js';
+
+let screenSizeVec, viewportVec;
+
+class ScreenNode extends Node {
+
+	static get type() {
+
+		return 'ScreenNode';
+
+	}
+
+	constructor( scope ) {
+
+		super();
+
+		this.scope = scope;
+
+		this.isViewportNode = true;
+
+	}
+
+	getNodeType() {
+
+		if ( this.scope === ScreenNode.VIEWPORT ) return 'vec4';
+		else return 'vec2';
+
+	}
+
+	getUpdateType() {
+
+		let updateType = NodeUpdateType.NONE;
+
+		if ( this.scope === ScreenNode.SIZE || this.scope === ScreenNode.VIEWPORT ) {
+
+			updateType = NodeUpdateType.RENDER;
+
+		}
+
+		this.updateType = updateType;
+
+		return updateType;
+
+	}
+
+	update( { renderer } ) {
+
+		const renderTarget = renderer.getRenderTarget();
+
+		if ( this.scope === ScreenNode.VIEWPORT ) {
+
+			if ( renderTarget !== null ) {
+
+				viewportVec.copy( renderTarget.viewport );
+
+			} else {
+
+				renderer.getViewport( viewportVec );
+
+				viewportVec.multiplyScalar( renderer.getPixelRatio() );
+
+			}
+
+		} else {
+
+			if ( renderTarget !== null ) {
+
+				screenSizeVec.width = renderTarget.width;
+				screenSizeVec.height = renderTarget.height;
+
+			} else {
+
+				renderer.getDrawingBufferSize( screenSizeVec );
+
+			}
+
+		}
+
+	}
+
+	setup( /*builder*/ ) {
+
+		const scope = this.scope;
+
+		let output = null;
+
+		if ( scope === ScreenNode.SIZE ) {
+
+			output = uniform( screenSizeVec || ( screenSizeVec = new Vector2() ) );
+
+		} else if ( scope === ScreenNode.VIEWPORT ) {
+
+			output = uniform( viewportVec || ( viewportVec = new Vector4() ) );
+
+		} else {
+
+			output = vec2( screenCoordinate.div( screenSize ) );
+
+		}
+
+		return output;
+
+	}
+
+	generate( builder ) {
+
+		if ( this.scope === ScreenNode.COORDINATE ) {
+
+			let coord = builder.getFragCoord();
+
+			if ( builder.isFlipY() ) {
+
+				// follow webgpu standards
+
+				const size = builder.getNodeProperties( screenSize ).outputNode.build( builder );
+
+				coord = `${ builder.getType( 'vec2' ) }( ${ coord }.x, ${ size }.y - ${ coord }.y )`;
+
+			}
+
+			return coord;
+
+		}
+
+		return super.generate( builder );
+
+	}
+
+}
+
+ScreenNode.COORDINATE = 'coordinate';
+ScreenNode.VIEWPORT = 'viewport';
+ScreenNode.SIZE = 'size';
+ScreenNode.UV = 'uv';
+
+export default ScreenNode;
+
+// Screen
+
+export const screenUV = /*@__PURE__*/ nodeImmutable( ScreenNode, ScreenNode.UV );
+export const screenSize = /*@__PURE__*/ nodeImmutable( ScreenNode, ScreenNode.SIZE );
+export const screenCoordinate = /*@__PURE__*/ nodeImmutable( ScreenNode, ScreenNode.COORDINATE );
+
+// Viewport
+
+export const viewport = /*@__PURE__*/ nodeImmutable( ScreenNode, ScreenNode.VIEWPORT );
+export const viewportSize = viewport.zw;
+export const viewportCoordinate = /*@__PURE__*/ screenCoordinate.sub( viewport.xy );
+export const viewportUV = /*@__PURE__*/ viewportCoordinate.div( viewportSize );
+
+// Deprecated
+
+export const viewportResolution = /*@__PURE__*/ ( Fn( () => { // @deprecated, r169
+
+	console.warn( 'TSL.ViewportNode: "viewportResolution" is deprecated. Use "screenSize" instead.' );
+
+	return screenSize;
+
+}, 'vec2' ).once() )();
+
+export const viewportTopLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
+
+	console.warn( 'TSL.ViewportNode: "viewportTopLeft" is deprecated. Use "screenUV" instead.' );
+
+	return screenUV;
+
+}, 'vec2' ).once() )();
+
+export const viewportBottomLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
+
+	console.warn( 'TSL.ViewportNode: "viewportBottomLeft" is deprecated. Use "screenUV.flipY()" instead.' );
+
+	return screenUV.flipY();
+
+}, 'vec2' ).once() )();

src/nodes/display/ViewportDepthTextureNode.js

@@ -1,6 +1,6 @@
 import ViewportTextureNode from './ViewportTextureNode.js';
 import { nodeProxy } from '../tsl/TSLBase.js';
-import { viewportUV } from './ViewportNode.js';
+import { screenUV } from './ScreenNode.js';
 
 import { DepthTexture } from '../../textures/DepthTexture.js';
 
@@ -14,7 +14,7 @@ class ViewportDepthTextureNode extends ViewportTextureNode {
 
 	}
 
-	constructor( uvNode = viewportUV, levelNode = null ) {
+	constructor( uvNode = screenUV, levelNode = null ) {
 
 		if ( sharedDepthbuffer === null ) {
 

src/nodes/display/ViewportNode.js

@@ -1,153 +0,0 @@
-import Node from '../core/Node.js';
-import { NodeUpdateType } from '../core/constants.js';
-import { uniform } from '../core/UniformNode.js';
-import { Fn, nodeImmutable, vec2 } from '../tsl/TSLBase.js';
-
-import { Vector2 } from '../../math/Vector2.js';
-import { Vector4 } from '../../math/Vector4.js';
-
-let resolution, viewportResult;
-
-class ViewportNode extends Node {
-
-	static get type() {
-
-		return 'ViewportNode';
-
-	}
-
-	constructor( scope ) {
-
-		super();
-
-		this.scope = scope;
-
-		this.isViewportNode = true;
-
-	}
-
-	getNodeType() {
-
-		if ( this.scope === ViewportNode.VIEWPORT ) return 'vec4';
-		else return 'vec2';
-
-	}
-
-	getUpdateType() {
-
-		let updateType = NodeUpdateType.NONE;
-
-		if ( this.scope === ViewportNode.RESOLUTION || this.scope === ViewportNode.VIEWPORT ) {
-
-			updateType = NodeUpdateType.RENDER;
-
-		}
-
-		this.updateType = updateType;
-
-		return updateType;
-
-	}
-
-	update( { renderer } ) {
-
-		if ( this.scope === ViewportNode.VIEWPORT ) {
-
-			renderer.getViewport( viewportResult );
-
-		} else {
-
-			const renderTarget = renderer.getRenderTarget();
-
-			if ( renderTarget !== null ) {
-
-				resolution.width = renderTarget.width;
-				resolution.height = renderTarget.height;
-
-			} else {
-
-				renderer.getDrawingBufferSize( resolution );
-
-			}
-
-		}
-
-	}
-
-	setup( /*builder*/ ) {
-
-		const scope = this.scope;
-
-		let output = null;
-
-		if ( scope === ViewportNode.RESOLUTION ) {
-
-			output = uniform( resolution || ( resolution = new Vector2() ) );
-
-		} else if ( scope === ViewportNode.VIEWPORT ) {
-
-			output = uniform( viewportResult || ( viewportResult = new Vector4() ) );
-
-		} else {
-
-			output = vec2( viewportCoordinate.div( viewportResolution ) );
-
-		}
-
-		return output;
-
-	}
-
-	generate( builder ) {
-
-		if ( this.scope === ViewportNode.COORDINATE ) {
-
-			let coord = builder.getFragCoord();
-
-			if ( builder.isFlipY() ) {
-
-				// follow webgpu standards
-
-				const resolution = builder.getNodeProperties( viewportResolution ).outputNode.build( builder );
-
-				coord = `${ builder.getType( 'vec2' ) }( ${ coord }.x, ${ resolution }.y - ${ coord }.y )`;
-
-			}
-
-			return coord;
-
-		}
-
-		return super.generate( builder );
-
-	}
-
-}
-
-ViewportNode.COORDINATE = 'coordinate';
-ViewportNode.RESOLUTION = 'resolution';
-ViewportNode.VIEWPORT = 'viewport';
-ViewportNode.UV = 'uv';
-
-export default ViewportNode;
-
-export const viewportCoordinate = /*@__PURE__*/ nodeImmutable( ViewportNode, ViewportNode.COORDINATE );
-export const viewportResolution = /*@__PURE__*/ nodeImmutable( ViewportNode, ViewportNode.RESOLUTION );
-export const viewport = /*@__PURE__*/ nodeImmutable( ViewportNode, ViewportNode.VIEWPORT );
-export const viewportUV = /*@__PURE__*/ nodeImmutable( ViewportNode, ViewportNode.UV );
-
-export const viewportTopLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
-
-	console.warn( 'TSL.ViewportNode: "viewportTopLeft" is deprecated. Use "viewportUV" instead.' );
-
-	return viewportUV;
-
-}, 'vec2' ).once() )();
-
-export const viewportBottomLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
-
-	console.warn( 'TSL.ViewportNode: "viewportBottomLeft" is deprecated. Use "viewportUV.flipY()" instead.' );
-
-	return viewportUV.flipY();
-
-}, 'vec2' ).once() )();

src/nodes/display/ViewportSharedTextureNode.js

@@ -1,6 +1,6 @@
 import ViewportTextureNode from './ViewportTextureNode.js';
 import { nodeProxy } from '../tsl/TSLBase.js';
-import { viewportUV } from './ViewportNode.js';
+import { screenUV } from './ScreenNode.js';
 
 import { FramebufferTexture } from '../../textures/FramebufferTexture.js';
 
@@ -14,7 +14,7 @@ class ViewportSharedTextureNode extends ViewportTextureNode {
 
 	}
 
-	constructor( uvNode = viewportUV, levelNode = null ) {
+	constructor( uvNode = screenUV, levelNode = null ) {
 
 		if ( _sharedFramebuffer === null ) {
 

src/nodes/display/ViewportTextureNode.js

@@ -1,7 +1,7 @@
 import TextureNode from '../accessors/TextureNode.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { nodeProxy } from '../tsl/TSLBase.js';
-import { viewportUV } from './ViewportNode.js';
+import { screenUV } from './ScreenNode.js';
 
 import { Vector2 } from '../../math/Vector2.js';
 import { FramebufferTexture } from '../../textures/FramebufferTexture.js';
@@ -17,7 +17,7 @@ class ViewportTextureNode extends TextureNode {
 
 	}
 
-	constructor( uvNode = viewportUV, levelNode = null, framebufferTexture = null ) {
+	constructor( uvNode = screenUV, levelNode = null, framebufferTexture = null ) {
 
 		if ( framebufferTexture === null ) {
 

src/nodes/functions/PhysicalLightingModel.js

@@ -16,7 +16,7 @@ import { mix, normalize, refract, length, clamp, log2, log, exp, smoothstep } fr
 import { div } from '../math/OperatorNode.js';
 import { cameraPosition, cameraProjectionMatrix, cameraViewMatrix } from '../accessors/Camera.js';
 import { modelWorldMatrix } from '../accessors/ModelNode.js';
-import { viewportResolution } from '../display/ViewportNode.js';
+import { screenSize } from '../display/ScreenNode.js';
 import { viewportMipTexture } from '../display/ViewportTextureNode.js';
 import { textureBicubic } from '../accessors/TextureBicubic.js';
 import { Loop } from '../utils/LoopNode.js';
@@ -74,7 +74,7 @@ const getTransmissionSample = /*@__PURE__*/ Fn( ( [ fragCoord, roughness, ior ]
 	const transmissionSample = singleViewportMipTexture.uv( fragCoord );
 	//const transmissionSample = viewportMipTexture( fragCoord );
 
-	const lod = log2( float( viewportResolution.x ) ).mul( applyIorToRoughness( roughness, ior ) );
+	const lod = log2( float( screenSize.x ) ).mul( applyIorToRoughness( roughness, ior ) );
 
 	return textureBicubic( transmissionSample, lod );
 

src/nodes/lighting/AnalyticLightNode.js

@@ -13,7 +13,7 @@ import { DepthTexture } from '../../textures/DepthTexture.js';
 import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
 import QuadMesh from '../../renderers/common/QuadMesh.js';
 import { Loop } from '../utils/LoopNode.js';
-import { viewportCoordinate } from '../display/ViewportNode.js';
+import { screenCoordinate } from '../display/ScreenNode.js';
 import { HalfFloatType, LessCompare, RGFormat, VSMShadowMap, WebGPUCoordinateSystem } from '../../constants.js';
 
 const BasicShadowMap = Fn( ( { depthTexture, shadowCoord } ) => {
@@ -141,7 +141,7 @@ const VSMShadowMapNode = Fn( ( { depthTexture, shadowCoord } ) => {
 
 } );
 
-const VSMPassVertical = Fn( ( { samples, radius, resolution, shadowPass } ) => {
+const VSMPassVertical = Fn( ( { samples, radius, size, shadowPass } ) => {
 
 	const mean = float( 0 ).toVar();
 	const squaredMean = float( 0 ).toVar();
@@ -153,7 +153,7 @@ const VSMPassVertical = Fn( ( { samples, radius, resolution, shadowPass } ) => {
 
 		const uvOffset = uvStart.add( float( i ).mul( uvStride ) );
 
-		const depth = shadowPass.uv( add( viewportCoordinate.xy, vec2( 0, uvOffset ).mul( radius ) ).div( resolution ) ).x;
+		const depth = shadowPass.uv( add( screenCoordinate.xy, vec2( 0, uvOffset ).mul( radius ) ).div( size ) ).x;
 		mean.addAssign( depth );
 		squaredMean.addAssign( depth.mul( depth ) );
 
@@ -167,7 +167,7 @@ const VSMPassVertical = Fn( ( { samples, radius, resolution, shadowPass } ) => {
 
 } );
 
-const VSMPassHorizontal = Fn( ( { samples, radius, resolution, shadowPass } ) => {
+const VSMPassHorizontal = Fn( ( { samples, radius, size, shadowPass } ) => {
 
 	const mean = float( 0 ).toVar();
 	const squaredMean = float( 0 ).toVar();
@@ -179,7 +179,7 @@ const VSMPassHorizontal = Fn( ( { samples, radius, resolution, shadowPass } ) =>
 
 		const uvOffset = uvStart.add( float( i ).mul( uvStride ) );
 
-		const distribution = shadowPass.uv( add( viewportCoordinate.xy, vec2( uvOffset, 0 ).mul( radius ) ).div( resolution ) );
+		const distribution = shadowPass.uv( add( screenCoordinate.xy, vec2( uvOffset, 0 ).mul( radius ) ).div( size ) );
 		mean.addAssign( distribution.x );
 		squaredMean.addAssign( add( distribution.y.mul( distribution.y ), distribution.x.mul( distribution.x ) ) );
 
@@ -289,14 +289,14 @@ class AnalyticLightNode extends LightingNode {
 
 				const samples = reference( 'blurSamples', 'float', shadow );
 				const radius = reference( 'radius', 'float', shadow );
-				const resolution = reference( 'mapSize', 'vec2', shadow );
+				const size = reference( 'mapSize', 'vec2', shadow );
 
 				let material = this.vsmMaterialVertical || ( this.vsmMaterialVertical = new NodeMaterial() );
-				material.fragmentNode = VSMPassVertical( { samples, radius, resolution, shadowPass: shadowPassVertical } ).context( builder.getSharedContext() );
+				material.fragmentNode = VSMPassVertical( { samples, radius, size, shadowPass: shadowPassVertical } ).context( builder.getSharedContext() );
 				material.name = 'VSMVertical';
 
 				material = this.vsmMaterialHorizontal || ( this.vsmMaterialHorizontal = new NodeMaterial() );
-				material.fragmentNode = VSMPassHorizontal( { samples, radius, resolution, shadowPass: shadowPassHorizontal } ).context( builder.getSharedContext() );
+				material.fragmentNode = VSMPassHorizontal( { samples, radius, size, shadowPass: shadowPassHorizontal } ).context( builder.getSharedContext() );
 				material.name = 'VSMHorizontal';
 
 			}

src/nodes/utils/ReflectorNode.js

@@ -1,7 +1,7 @@
 import TextureNode from '../accessors/TextureNode.js';
 import { nodeObject } from '../tsl/TSLBase.js';
 import { NodeUpdateType } from '../core/constants.js';
-import { viewportUV } from '../display/ViewportNode.js';
+import { screenUV } from '../display/ScreenNode.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 = viewportUV.flipX();
+const _defaultUV = screenUV.flipX();
 
 let _inReflector = false;
 

src/nodes/utils/ViewportUtils.js

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

src/renderers/common/nodes/Nodes.js

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