TSL: Introduce `viewportSafeUV()` (#29025)

* TSL: Introduce `viewportSafeUV()`

* Update webgpu_refraction.jpg

examples/webgpu_refraction.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { viewportSharedTexture, texture, uv } from 'three/tsl';
+			import { viewportSafeUV, viewportSharedTexture, viewportTopLeft, texture, uv } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -63,11 +63,11 @@
 
 				// refractor
 
-				const verticalRefractor = viewportSharedTexture();
-
 				const verticalNormalScale = 0.1;
 				const verticalUVOffset = texture( floorNormal, uv().mul( 5 ) ).xy.mul( 2 ).sub( 1 ).mul( verticalNormalScale );
-				verticalRefractor.uvNode = verticalRefractor.uvNode.add( verticalUVOffset );
+
+				const refractorUV = viewportTopLeft.add( verticalUVOffset );
+				const verticalRefractor = viewportSharedTexture( viewportSafeUV( refractorUV ) );
 
 				const planeGeo = new THREE.PlaneGeometry( 100.1, 100.1 );
 
@@ -126,7 +126,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( /*{ antialias: true }*/ );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

src/nodes/Nodes.js

@@ -64,6 +64,7 @@ export { default as PackingNode, directionToColor, colorToDirection } from './ut
 export { default as RemapNode, remap, remapClamp } from './utils/RemapNode.js';
 export * from './utils/UVUtils.js';
 export * from './utils/SpriteUtils.js';
+export * from './utils/ViewportUtils.js';
 export { default as RotateNode, rotate } from './utils/RotateNode.js';
 export { default as SetNode } from './utils/SetNode.js';
 export { default as SplitNode } from './utils/SplitNode.js';

src/nodes/utils/ViewportUtils.js

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