TSL: Introduce screenUV, screenSize, screenCoordinate and viewport revision

examples-testing/changes.patch

@@ -13143,13 +13143,13 @@ index d0255e43..c924d666 100644
  init();
 
 diff --git a/examples-testing/examples/webgpu_animation_retargeting.ts b/examples-testing/examples/webgpu_animation_retargeting.ts
-index 1d9c5eab..5c4fc4c5 100644
+index efa241df..88a9be23 100644
 --- a/examples-testing/examples/webgpu_animation_retargeting.ts
 +++ b/examples-testing/examples/webgpu_animation_retargeting.ts
 @@ -1,20 +1,20 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
- 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';
 
@@ -13171,7 +13171,7 @@ index 1d9c5eab..5c4fc4c5 100644
          new GLTFLoader().load('./models/gltf/Soldier.glb', resolve, undefined, reject);
      }),
  ]);
-@@ -94,7 +94,13 @@ gui.add(helpers, 'visible').name('helpers');
+@@ -96,7 +96,13 @@ gui.add(helpers, 'visible').name('helpers');
 
  //
 
@@ -13186,7 +13186,7 @@ index 1d9c5eab..5c4fc4c5 100644
      const clip = sourceModel.animations[0];
 
      const helper = new THREE.SkeletonHelper(sourceModel.scene);
-@@ -108,7 +114,7 @@ function getSource(sourceModel) {
+@@ -110,7 +116,7 @@ function getSource(sourceModel) {
      return { clip, skeleton, mixer };
  }
 
@@ -13196,7 +13196,7 @@ index 1d9c5eab..5c4fc4c5 100644
 
      const targetSkelHelper = new THREE.SkeletonHelper(targetModel.scene);
 diff --git a/examples-testing/examples/webgpu_backdrop_area.ts b/examples-testing/examples/webgpu_backdrop_area.ts
-index 97c224ce..579cb796 100644
+index 5ccf2fa1..72225c8d 100644
 --- a/examples-testing/examples/webgpu_backdrop_area.ts
 +++ b/examples-testing/examples/webgpu_backdrop_area.ts
 @@ -1,4 +1,4 @@
@@ -14375,7 +14375,7 @@ index ea9f8658..b81d7761 100644
              }
          });
 diff --git a/examples-testing/examples/webgpu_mrt.ts b/examples-testing/examples/webgpu_mrt.ts
-index 3737c463..de4ee03c 100644
+index a749bd6d..16bcee89 100644
 --- a/examples-testing/examples/webgpu_mrt.ts
 +++ b/examples-testing/examples/webgpu_mrt.ts
 @@ -1,4 +1,4 @@
@@ -14396,18 +14396,18 @@ index 3737c463..de4ee03c 100644
  init();
 
 diff --git a/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts b/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts
-index ace1533a..52bd9288 100644
+index 989361b6..d324a37f 100644
 --- a/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts
 +++ b/examples-testing/examples/webgpu_multiple_rendertargets_readback.ts
 @@ -1,12 +1,31 @@
 -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 * as THREE from 'three/webgpu';
 +import {
 +    mix,
 +    step,
 +    texture,
-+    viewportUV,
++    screenUV,
 +    mrt,
 +    output,
 +    transformedNormalWorld,
@@ -14951,13 +14951,13 @@ index a4f56b17..ce7e7ad3 100644
      compose = sceneMask2.mix(compose, texture(texture2));
 
 diff --git a/examples-testing/examples/webgpu_postprocessing_motion_blur.ts b/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
-index 7e86bb48..c5ac9f2e 100644
+index 1330953c..4f677d85 100644
 --- a/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_motion_blur.ts
 @@ -1,4 +1,4 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
- 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';
 @@ -9,11 +9,11 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -15284,13 +15284,13 @@ index 84e8ba9e..86560654 100644
  init();
  render();
 diff --git a/examples-testing/examples/webgpu_refraction.ts b/examples-testing/examples/webgpu_refraction.ts
-index a410c04f..64814a2b 100644
+index 4ce8b0a7..d41bc6f4 100644
 --- a/examples-testing/examples/webgpu_refraction.ts
 +++ b/examples-testing/examples/webgpu_refraction.ts
 @@ -1,13 +1,13 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
- 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';
 

src-testing/changes.patch

@@ -6734,13 +6734,13 @@ index d2d92cb2..c022f814 100644
          for (const uniform of this.uniforms) {
              const node = uniform.nodeUniform.node;
 diff --git a/src-testing/src/renderers/common/nodes/Nodes.ts b/src-testing/src/renderers/common/nodes/Nodes.ts
-index 9405a1d4..fd9aed09 100644
+index 3ebf6c48..b64e1942 100644
 --- a/src-testing/src/renderers/common/nodes/Nodes.ts
 +++ b/src-testing/src/renderers/common/nodes/Nodes.ts
 @@ -15,6 +15,7 @@ import {
      normalWorld,
      pmremTexture,
-     viewportUV,
+     screenUV,
 +    ShaderNodeObject,
  } from '../../../nodes/TSL.js';
 
@@ -6930,7 +6930,7 @@ index 9405a1d4..fd9aed09 100644
          const sceneData = this.get(scene);
          const background = scene.background;
 
-@@ -239,28 +300,31 @@ class Nodes extends DataMap {
+@@ -239,7 +300,7 @@ class Nodes extends DataMap {
                  let backgroundNode = null;
 
                  if (
@@ -6939,14 +6939,7 @@ index 9405a1d4..fd9aed09 100644
                      background.mapping === EquirectangularReflectionMapping ||
                      background.mapping === EquirectangularRefractionMapping ||
                      background.mapping === CubeUVReflectionMapping
-                 ) {
--                    if (scene.backgroundBlurriness > 0 || background.mapping === CubeUVReflectionMapping) {
--                        backgroundNode = pmremTexture(background, normalWorld);
-+                    if (
-+                        scene.backgroundBlurriness > 0 ||
-+                        (background as CubeTexture).mapping === CubeUVReflectionMapping
-+                    ) {
-+                        backgroundNode = pmremTexture(background as CubeTexture, normalWorld);
+@@ -249,18 +310,18 @@ class Nodes extends DataMap {
                      } else {
                          let envMap;
 
@@ -6961,17 +6954,17 @@ index 9405a1d4..fd9aed09 100644
                          backgroundNode = cubeMapNode(envMap);
                      }
 -                } else if (background.isTexture === true) {
--                    backgroundNode = texture(background, viewportUV.flipY()).setUpdateMatrix(true);
+-                    backgroundNode = texture(background, screenUV.flipY()).setUpdateMatrix(true);
 -                } else if (background.isColor !== true) {
 -                    console.error('WebGPUNodes: Unsupported background configuration.', background);
 +                } else if ((background as Texture).isTexture === true) {
-+                    backgroundNode = texture(background as Texture, viewportUV.flipY()).setUpdateMatrix(true);
++                    backgroundNode = texture(background as Texture, screenUV.flipY()).setUpdateMatrix(true);
 +                } else if ((background as Color).isColor !== true) {
 +                    console.error('WebGPUNodes: Unsupported background configuration.', background as Color);
                  }
 
                  sceneData.backgroundNode = backgroundNode;
-@@ -273,7 +337,7 @@ class Nodes extends DataMap {
+@@ -273,7 +334,7 @@ class Nodes extends DataMap {
          }
      }
 
@@ -6980,7 +6973,7 @@ index 9405a1d4..fd9aed09 100644
          const sceneData = this.get(scene);
          const fog = scene.fog;
 
-@@ -281,9 +345,9 @@ class Nodes extends DataMap {
+@@ -281,9 +342,9 @@ class Nodes extends DataMap {
              if (sceneData.fog !== fog) {
                  let fogNode = null;
 
@@ -6992,7 +6985,7 @@ index 9405a1d4..fd9aed09 100644
                      fogNode = rangeFog(
                          reference('color', 'color', fog),
                          reference('near', 'float', fog),
-@@ -302,7 +366,7 @@ class Nodes extends DataMap {
+@@ -302,7 +363,7 @@ class Nodes extends DataMap {
          }
      }
 
@@ -7001,7 +6994,7 @@ index 9405a1d4..fd9aed09 100644
          const sceneData = this.get(scene);
          const environment = scene.environment;
 
-@@ -310,7 +374,7 @@ class Nodes extends DataMap {
+@@ -310,7 +371,7 @@ class Nodes extends DataMap {
              if (sceneData.environment !== environment) {
                  let environmentNode = null;
 
@@ -7010,7 +7003,7 @@ index 9405a1d4..fd9aed09 100644
                      environmentNode = cubeTexture(environment);
                  } else if (environment.isTexture === true) {
                      environmentNode = texture(environment);
-@@ -327,7 +391,13 @@ class Nodes extends DataMap {
+@@ -327,7 +388,13 @@ class Nodes extends DataMap {
          }
      }
 
@@ -7025,7 +7018,7 @@ index 9405a1d4..fd9aed09 100644
          const nodeFrame = this.nodeFrame;
          nodeFrame.renderer = renderer;
          nodeFrame.scene = scene;
-@@ -338,7 +408,7 @@ class Nodes extends DataMap {
+@@ -338,7 +405,7 @@ class Nodes extends DataMap {
          return nodeFrame;
      }
 
@@ -7034,7 +7027,7 @@ index 9405a1d4..fd9aed09 100644
          return this.getNodeFrame(
              renderObject.renderer,
              renderObject.scene,
-@@ -354,17 +424,17 @@ class Nodes extends DataMap {
+@@ -354,24 +421,27 @@ class Nodes extends DataMap {
          return renderer.toneMapping + ',' + renderer.currentColorSpace;
      }
 
@@ -7050,12 +7043,14 @@ index 9405a1d4..fd9aed09 100644
          const renderer = this.renderer;
          const cacheKey = this.getOutputCacheKey();
 
--        const output = texture(outputTexture, viewportUV).renderOutput(
-+        const output: ShaderNodeObject<Node> = texture(outputTexture, viewportUV).renderOutput(
-             renderer.toneMapping,
-             renderer.currentColorSpace,
-         );
-@@ -374,7 +444,7 @@ class Nodes extends DataMap {
+-        const output = texture(outputTexture, screenUV).renderOutput(renderer.toneMapping, renderer.currentColorSpace);
++        const output: ShaderNodeObject<Node> = texture(outputTexture, screenUV).renderOutput(
++            renderer.toneMapping,
++            renderer.currentColorSpace,
++        );
+
+         outputNodeMap.set(outputTexture, cacheKey);
+
          return output;
      }
 
@@ -7064,7 +7059,7 @@ index 9405a1d4..fd9aed09 100644
          const nodeBuilder = renderObject.getNodeBuilderState();
 
          for (const node of nodeBuilder.updateBeforeNodes) {
-@@ -384,7 +454,7 @@ class Nodes extends DataMap {
+@@ -381,7 +451,7 @@ class Nodes extends DataMap {
          }
      }
 
@@ -7073,7 +7068,7 @@ index 9405a1d4..fd9aed09 100644
          const nodeBuilder = renderObject.getNodeBuilderState();
 
          for (const node of nodeBuilder.updateAfterNodes) {
-@@ -394,7 +464,7 @@ class Nodes extends DataMap {
+@@ -391,7 +461,7 @@ class Nodes extends DataMap {
          }
      }
 
@@ -7082,7 +7077,7 @@ index 9405a1d4..fd9aed09 100644
          const nodeFrame = this.getNodeFrame();
          const nodeBuilder = this.getForCompute(computeNode);
 
-@@ -403,7 +473,7 @@ class Nodes extends DataMap {
+@@ -400,7 +470,7 @@ class Nodes extends DataMap {
          }
      }
 

types/three/src/nodes/Nodes.d.ts

@@ -116,14 +116,14 @@ export { default as PixelationPassNode } from "./display/PixelationPassNode.js";
 export { default as PosterizeNode } from "./display/PosterizeNode.js";
 export { default as RenderOutputNode } from "./display/RenderOutputNode.js";
 export { default as RGBShiftNode } from "./display/RGBShiftNode.js";
+export { default as ScreenNode, ScreenNodeScope } from "./display/ScreenNode.js";
 export { default as SobelOperatorNode } from "./display/SobelOperatorNode.js";
 export { default as SSAAPassNode } from "./display/SSAAPassNode.js";
 export { default as StereoPassNode } from "./display/StereoPassNode.js";
 export { default as ToneMappingNode } from "./display/ToneMappingNode.js";
 export { default as TransitionNode } from "./display/TransitionNode.js";
 export { default as ViewportDepthNode, ViewportDepthNodeScope } from "./display/ViewportDepthNode.js";
 export { default as ViewportDepthTextureNode } from "./display/ViewportDepthTextureNode.js";
-export { default as ViewportNode, ViewportNodeScope } from "./display/ViewportNode.js";
 export { default as ViewportSharedTextureNode } from "./display/ViewportSharedTextureNode.js";
 export { default as ViewportTextureNode } from "./display/ViewportTextureNode.js";
 

types/three/src/nodes/TSL.d.ts

@@ -107,6 +107,7 @@ export * from "./display/PixelationPassNode.js";
 export * from "./display/PosterizeNode.js";
 export * from "./display/RenderOutputNode.js";
 export * from "./display/RGBShiftNode.js";
+export * from "./display/ScreenNode.js";
 export * from "./display/Sepia.js";
 export * from "./display/SobelOperatorNode.js";
 export * from "./display/SSAAPassNode.js";
@@ -115,7 +116,6 @@ export * from "./display/ToneMappingNode.js";
 export * from "./display/TransitionNode.js";
 export * from "./display/ViewportDepthNode.js";
 export * from "./display/ViewportDepthTextureNode.js";
-export * from "./display/ViewportNode.js";
 export * from "./display/ViewportSharedTextureNode.js";
 export * from "./display/ViewportTextureNode.js";
 

types/three/src/nodes/display/ScreenNode.d.ts

@@ -0,0 +1,48 @@
+import Node from "../core/Node.js";
+import { ShaderNodeObject } from "../tsl/TSLCore.js";
+
+export type ScreenNodeScope =
+    | typeof ScreenNode.COORDINATE
+    | typeof ScreenNode.VIEWPORT
+    | typeof ScreenNode.SIZE
+    | typeof ScreenNode.UV;
+
+declare class ScreenNode extends Node {
+    scope: ScreenNodeScope;
+
+    readonly isViewportNode: true;
+
+    constructor(scope: ScreenNodeScope);
+
+    static COORDINATE: "coordinate";
+    static VIEWPORT: "viewport";
+    static SIZE: "size";
+    static UV: "uv";
+}
+
+export default ScreenNode;
+
+// Screen
+
+export const screenUV: ShaderNodeObject<ScreenNode>;
+export const screenSize: ShaderNodeObject<ScreenNode>;
+export const screenCoordinate: ShaderNodeObject<ScreenNode>;
+
+// Viewport
+
+export const viewport: ShaderNodeObject<ScreenNode>;
+export const viewportSize: ShaderNodeObject<Node>;
+export const viewportCoordinate: ShaderNodeObject<Node>;
+export const viewportUV: ShaderNodeObject<Node>;
+
+// Deprecated
+
+/**
+ * @deprecated "viewportTopLeft" is deprecated. Use "viewportUV" instead.
+ */
+export const viewportTopLeft: ShaderNodeObject<ScreenNode>;
+
+/**
+ * @deprecated "viewportBottomLeft" is deprecated. Use "viewportUV.flipY()" instead.
+ */
+export const viewportBottomLeft: ShaderNodeObject<ScreenNode>;