Skip to content

Commit 8ebbaba

Browse files
sunagsunag
authored
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
1 parent 1d126cf commit 8ebbaba

38 files changed

+261
-233
lines changed

‎examples/jsm/objects/Water2Mesh.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Vector2,
66
Vector3
77
} from 'three';
8-
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';
8+
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';
99

1010
/**
1111
* References:
@@ -141,7 +141,7 @@ class WaterNode extends TempNode {
141141
this.waterBody.add( reflectionSampler.target );
142142
reflectionSampler.uvNode = reflectionSampler.uvNode.add( offset );
143143

144-
const refractorUV = viewportUV.add( offset );
144+
const refractorUV = screenUV.add( offset );
145145
const refractionSampler = viewportSharedTexture( viewportSafeUV( refractorUV ) );
146146

147147
// calculate final uv coords

‎examples/jsm/transpiler/GLSLDecoder.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ class GLSLDecoder {
226226

227227
this._currentFunction = null;
228228

229-
this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( viewportCoordinate.x, viewportCoordinate.y.oneMinus(), viewportCoordinate.z );' );
229+
this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( screenCoordinate.x, screenCoordinate.y.oneMinus(), screenCoordinate.z );' );
230230

231231
}
232232

‎examples/jsm/transpiler/ShaderToyDecoder.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ class ShaderToyDecoder extends GLSLDecoder {
88
super();
99

1010
this.addPolyfill( 'iTime', 'float iTime = timerGlobal();' );
11-
this.addPolyfill( 'iResolution', 'vec2 iResolution = viewportResolution;' );
12-
this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( viewportCoordinate.x, viewportResolution.y - viewportCoordinate.y, viewportCoordinate.z );' );
11+
this.addPolyfill( 'iResolution', 'vec2 iResolution = screenSize;' );
12+
this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( screenCoordinate.x, screenSize.y - screenCoordinate.y, screenCoordinate.z );' );
1313

1414
}
1515

‎examples/screenshots/webgpu_animation_retargeting.jpg‎

29 Bytes
Loading

‎examples/webgpu_animation_retargeting.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<script type="module">
2525

2626
import * as THREE from 'three';
27-
import { color, viewportUV, reflector } from 'three/tsl';
27+
import { color, screenUV, hue, timerLocal, reflector } from 'three/tsl';
2828

2929
import Stats from 'three/addons/libs/stats.module.js';
3030

@@ -59,7 +59,7 @@
5959

6060
// scene
6161
const scene = new THREE.Scene();
62-
scene.backgroundNode = viewportUV.distance( .5 ).mix( color( 0x0175ad ), color( 0x02274f ) );
62+
scene.backgroundNode = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), timerLocal( .1 ) ), hue( color( 0x02274f ), timerLocal( .5 ) ) );
6363

6464
const helpers = new THREE.Group();
6565
helpers.visible = false;

‎examples/webgpu_backdrop.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script type="module">
2626

2727
import * as THREE from 'three';
28-
import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
28+
import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, screenUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
2929

3030
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
3131

@@ -43,7 +43,7 @@
4343
camera.position.set( 1, 2, 3 );
4444

4545
scene = new THREE.Scene();
46-
scene.backgroundNode = viewportUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
46+
scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
4747
camera.lookAt( 0, 1, 0 );
4848

4949
clock = new THREE.Clock();
@@ -107,8 +107,8 @@
107107
addBackdropSphere( grayscale( viewportSharedTexture().rgb ) );
108108
addBackdropSphere( saturation( viewportSharedTexture().rgb, 10 ), oscSine() );
109109
addBackdropSphere( overlay( viewportSharedTexture().rgb, checker( uv().mul( 10 ) ) ) );
110-
addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 40 ).floor().div( 40 ) ) ) );
111-
addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
110+
addBackdropSphere( viewportSharedTexture( viewportSafeUV( screenUV.mul( 40 ).floor().div( 40 ) ) ) );
111+
addBackdropSphere( viewportSharedTexture( viewportSafeUV( screenUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
112112
addBackdropSphere( vec3( 0, 0, viewportSharedTexture().b ) );
113113

114114
// renderer

‎examples/webgpu_backdrop_area.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script type="module">
2626

2727
import * as THREE from 'three';
28-
import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, textureBicubic, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
28+
import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, textureBicubic, viewportMipTexture, screenUV, checker, uv, modelScale } from 'three/tsl';
2929

3030
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3131

@@ -106,7 +106,7 @@
106106
bicubicMaterial.side = THREE.DoubleSide;
107107

108108
const pixelMaterial = new THREE.MeshBasicNodeMaterial();
109-
pixelMaterial.backdropNode = viewportSharedTexture( viewportUV.mul( 100 ).floor().div( 100 ) );
109+
pixelMaterial.backdropNode = viewportSharedTexture( screenUV.mul( 100 ).floor().div( 100 ) );
110110
pixelMaterial.transparent = true;
111111

112112
// box / floor

‎examples/webgpu_backdrop_water.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script type="module">
2626

2727
import * as THREE from 'three';
28-
import { color, vec2, pass, linearDepth, normalWorld, gaussianBlur, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
28+
import { color, vec2, pass, linearDepth, normalWorld, gaussianBlur, triplanarTexture, texture, objectPosition, screenUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
2929

3030
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
3131

@@ -148,14 +148,14 @@
148148
const depthWater = viewportLinearDepth.sub( depth );
149149
const depthEffect = depthWater.remapClamp( - .002, .04 );
150150

151-
const refractionUV = viewportUV.add( vec2( 0, waterIntensity.mul( .1 ) ) );
151+
const refractionUV = screenUV.add( vec2( 0, waterIntensity.mul( .1 ) ) );
152152

153153
// linearDepth( viewportDepthTexture( uv ) ) return the linear depth of the scene
154154
const depthTestForRefraction = linearDepth( viewportDepthTexture( refractionUV ) ).sub( depth );
155155

156156
const depthRefraction = depthTestForRefraction.remapClamp( 0, .1 );
157157

158-
const finalUV = depthTestForRefraction.lessThan( 0 ).select( viewportUV, refractionUV );
158+
const finalUV = depthTestForRefraction.lessThan( 0 ).select( screenUV, refractionUV );
159159

160160
const viewportTexture = viewportSharedTexture( finalUV );
161161

@@ -226,7 +226,7 @@
226226
const scenePassColorBlurred = gaussianBlur( scenePassColor );
227227
scenePassColorBlurred.directionNode = waterMask.select( scenePassDepth, scenePass.getLinearDepthNode().mul( 5 ) );
228228

229-
const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
229+
const vignet = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
230230

231231
postProcessing = new THREE.PostProcessing( renderer );
232232
postProcessing.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignet ) );

‎examples/webgpu_compute_audio.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<script type="module">
3030

3131
import * as THREE from 'three';
32-
import { Fn, uniform, storage, storageObject, instanceIndex, float, texture, viewportUV, color } from 'three/tsl';
32+
import { Fn, uniform, storage, storageObject, instanceIndex, float, texture, screenUV, color } from 'three/tsl';
3333

3434
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3535

@@ -170,7 +170,7 @@
170170

171171
analyserTexture = new THREE.DataTexture( analyserBuffer, analyserBuffer.length, 1, THREE.RedFormat );
172172

173-
const spectrum = texture( analyserTexture, viewportUV.x ).x.mul( viewportUV.y );
173+
const spectrum = texture( analyserTexture, screenUV.x ).x.mul( screenUV.y );
174174
const backgroundNode = color( 0x0000FF ).mul( spectrum );
175175

176176

‎examples/webgpu_compute_particles_snow.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script type="module">
2626

2727
import * as THREE from 'three';
28-
import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';
28+
import { Fn, texture, vec3, pass, color, uint, screenUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';
2929

3030
import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
3131

@@ -261,7 +261,7 @@
261261

262262
//
263263

264-
scene.backgroundNode = viewportUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
264+
scene.backgroundNode = screenUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );
265265

266266
//
267267

@@ -295,7 +295,7 @@
295295

296296
const scenePass = pass( scene, camera );
297297
const scenePassColor = scenePass.getTextureNode();
298-
const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
298+
const vignet = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
299299

300300
const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
301301
const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 3 );

0 commit comments

Comments
 (0)