From 3e6ab2d9c7f2d8e8d798aa5e1f628e25149e808c Mon Sep 17 00:00:00 2001
From: Renaud Rohlinger <renaud.rohlinger@gmail.com>
Date: Sat, 24 Aug 2024 22:28:00 +0900
Subject: [PATCH] TSL: Prevent `viewportBottomLeft` breaking change and cleanup
 (#29223)

---
 examples/jsm/objects/Water2Mesh.js | 4 ++--
 examples/webgpu_materials.html     | 4 ++--
 src/nodes/Nodes.js                 | 2 +-
 src/nodes/display/ViewportNode.js  | 8 ++++++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/examples/jsm/objects/Water2Mesh.js b/examples/jsm/objects/Water2Mesh.js
index dd40eca6a708a1..29092ff2a16190 100644
--- a/examples/jsm/objects/Water2Mesh.js
+++ b/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, viewportTopLeft } 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, viewportUV } 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 = viewportTopLeft.add( offset );
+			const refractorUV = viewportUV.add( offset );
 			const refractionSampler = viewportSharedTexture( viewportSafeUV( refractorUV ) );
 
 			// calculate final uv coords
diff --git a/examples/webgpu_materials.html b/examples/webgpu_materials.html
index 39fec77dd1ed42..b1a009fbbc3dcd 100644
--- a/examples/webgpu_materials.html
+++ b/examples/webgpu_materials.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportBottomLeft, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
+			import { Fn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -206,7 +206,7 @@
 
 				// Screen Projection Texture
 				material = new THREE.MeshBasicNodeMaterial();
-				material.colorNode = texture( uvTexture, viewportBottomLeft );
+				material.colorNode = texture( uvTexture, viewportUV.flipY() );
 				materials.push( material );
 
 				// Loop
diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js
index 0a423a01b726f7..bc7666270272bf 100644
--- a/src/nodes/Nodes.js
+++ b/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, viewportUV, viewportTopLeft } from './display/ViewportNode.js';
+export { default as ViewportNode, viewport, viewportCoordinate, viewportResolution, viewportUV, viewportTopLeft, viewportBottomLeft } 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';
diff --git a/src/nodes/display/ViewportNode.js b/src/nodes/display/ViewportNode.js
index 33f16dfa522341..73da5c318b7f35 100644
--- a/src/nodes/display/ViewportNode.js
+++ b/src/nodes/display/ViewportNode.js
@@ -130,4 +130,12 @@ export const viewportTopLeft = /*@__PURE__*/ ( Fn( () => { // @deprecated, r168
 
 }, '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() )();
+
 addNodeClass( 'ViewportNode', ViewportNode );