Skip to content

Commit

Permalink
TSL: Introduce screenUV, screenSize, screenCoordinate and viewport re…
Browse files Browse the repository at this point in the history 
…vision (#1249)

* TSL: Introduce screenUV, screenSize, screenCoordinate and viewport revision

* Update three.js

* Add examples

* Update patch and delete examples

* Update

* Add src

* Update patch and delete src
  • Loading branch information
@Methuselah96
Methuselah96 authored Sep 23, 2024
1 parent f62295e commit 989dc6e
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 83 deletions.
26 changes: 13 additions & 13 deletions examples-testing/changes.patch
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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');

//

Expand All @@ -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 };
}

Expand All @@ -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 @@
Expand Down Expand Up @@ -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 @@
Expand All @@ -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,
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';

Expand Down
53 changes: 24 additions & 29 deletions src-testing/changes.patch
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 (
Expand All @@ -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;

Expand All @@ -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 {
}
}

Expand All @@ -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;

Expand All @@ -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 {
}
}

Expand All @@ -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;

Expand All @@ -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 {
}
}

Expand All @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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 {
}
}

Expand All @@ -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 {
}
}

Expand All @@ -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 {
}
}

Expand Down
2 changes: 1 addition & 1 deletion three.js
Submodule three.js updated 38 files
+2 −2 examples/jsm/objects/Water2Mesh.js
+1 −1 examples/jsm/transpiler/GLSLDecoder.js
+2 −2 examples/jsm/transpiler/ShaderToyDecoder.js
+ − examples/screenshots/webgpu_animation_retargeting.jpg
+2 −2 examples/webgpu_animation_retargeting.html
+4 −4 examples/webgpu_backdrop.html
+2 −2 examples/webgpu_backdrop_area.html
+4 −4 examples/webgpu_backdrop_water.html
+2 −2 examples/webgpu_compute_audio.html
+3 −3 examples/webgpu_compute_particles_snow.html
+2 −2 examples/webgpu_materials.html
+5 −5 examples/webgpu_mrt.html
+2 −2 examples/webgpu_mrt_mask.html
+2 −2 examples/webgpu_multiple_rendertargets.html
+2 −2 examples/webgpu_multiple_rendertargets_readback.html
+2 −2 examples/webgpu_portal.html
+2 −2 examples/webgpu_postprocessing_anamorphic.html
+2 −2 examples/webgpu_postprocessing_motion_blur.html
+2 −2 examples/webgpu_reflection.html
+2 −2 examples/webgpu_refraction.html
+2 −2 examples/webgpu_skinning.html
+2 −2 examples/webgpu_tsl_halftone.html
+1 −1 src/materials/nodes/InstancedPointsNodeMaterial.js
+1 −1 src/materials/nodes/Line2NodeMaterial.js
+1 −1 src/nodes/Nodes.js
+1 −1 src/nodes/TSL.js
+2 −2 src/nodes/display/DotScreenNode.js
+2 −2 src/nodes/display/ParallaxBarrierPassNode.js
+181 −0 src/nodes/display/ScreenNode.js
+2 −2 src/nodes/display/ViewportDepthTextureNode.js
+0 −153 src/nodes/display/ViewportNode.js
+2 −2 src/nodes/display/ViewportSharedTextureNode.js
+2 −2 src/nodes/display/ViewportTextureNode.js
+2 −2 src/nodes/functions/PhysicalLightingModel.js
+8 −8 src/nodes/lighting/AnalyticLightNode.js
+2 −2 src/nodes/utils/ReflectorNode.js
+2 −2 src/nodes/utils/ViewportUtils.js
+3 −3 src/renderers/common/nodes/Nodes.js
2 changes: 1 addition & 1 deletion types/three/src/nodes/Nodes.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion types/three/src/nodes/TSL.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

Expand Down
48 changes: 48 additions & 0 deletions types/three/src/nodes/display/ScreenNode.d.ts
View file
Original file line number Diff line number Diff line change
@@ -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>;
38 changes: 0 additions & 38 deletions types/three/src/nodes/display/ViewportNode.d.ts
View file

This file was deleted.

0 comments on commit 989dc6e

Please sign in to comment.