TSL: Introduce screenUV, screenSize, screenCoordinate and viewport revision

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_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';