diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 9eb2f6724..ac912958b 100644 --- a/examples-testing/changes.patch +++ b/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'; diff --git a/src-testing/changes.patch b/src-testing/changes.patch index c32701479..7f9ed51d7 100644 --- a/src-testing/changes.patch +++ b/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 = 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 = 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 { } } diff --git a/three.js b/three.js index 1d126cf52..8ebbaba91 160000 --- a/three.js +++ b/three.js @@ -1 +1 @@ -Subproject commit 1d126cf52281fd1266d240d86d7162b5e4236265 +Subproject commit 8ebbaba9125ff81a0276b7a8f84a4fac866c6c3d diff --git a/types/three/src/nodes/Nodes.d.ts b/types/three/src/nodes/Nodes.d.ts index c829208f9..a5621f30f 100644 --- a/types/three/src/nodes/Nodes.d.ts +++ b/types/three/src/nodes/Nodes.d.ts @@ -116,6 +116,7 @@ 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"; @@ -123,7 +124,6 @@ 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"; diff --git a/types/three/src/nodes/TSL.d.ts b/types/three/src/nodes/TSL.d.ts index e44d3eb0d..c43aeb602 100644 --- a/types/three/src/nodes/TSL.d.ts +++ b/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"; diff --git a/types/three/src/nodes/display/ScreenNode.d.ts b/types/three/src/nodes/display/ScreenNode.d.ts new file mode 100644 index 000000000..f9ed102fc --- /dev/null +++ b/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; +export const screenSize: ShaderNodeObject; +export const screenCoordinate: ShaderNodeObject; + +// Viewport + +export const viewport: ShaderNodeObject; +export const viewportSize: ShaderNodeObject; +export const viewportCoordinate: ShaderNodeObject; +export const viewportUV: ShaderNodeObject; + +// Deprecated + +/** + * @deprecated "viewportTopLeft" is deprecated. Use "viewportUV" instead. + */ +export const viewportTopLeft: ShaderNodeObject; + +/** + * @deprecated "viewportBottomLeft" is deprecated. Use "viewportUV.flipY()" instead. + */ +export const viewportBottomLeft: ShaderNodeObject; diff --git a/types/three/src/nodes/display/ViewportNode.d.ts b/types/three/src/nodes/display/ViewportNode.d.ts deleted file mode 100644 index 26e5b281e..000000000 --- a/types/three/src/nodes/display/ViewportNode.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -import Node from "../core/Node.js"; -import { ShaderNodeObject } from "../tsl/TSLCore.js"; - -export type ViewportNodeScope = - | typeof ViewportNode.COORDINATE - | typeof ViewportNode.RESOLUTION - | typeof ViewportNode.VIEWPORT - | typeof ViewportNode.UV; - -declare class ViewportNode extends Node { - scope: ViewportNodeScope; - - readonly isViewportNode: true; - - constructor(scope: ViewportNodeScope); - - static COORDINATE: "coordinate"; - static RESOLUTION: "resolution"; - static VIEWPORT: "viewport"; - static UV: "uv"; -} - -export default ViewportNode; - -export const viewportCoordinate: ShaderNodeObject; -export const viewportResolution: ShaderNodeObject; -export const viewport: ShaderNodeObject; -export const viewportUV: ShaderNodeObject; - -/** - * @deprecated "viewportTopLeft" is deprecated. Use "viewportUV" instead. - */ -export const viewportTopLeft: ShaderNodeObject; - -/** - * @deprecated "viewportBottomLeft" is deprecated. Use "viewportUV.flipY()" instead. - */ -export const viewportBottomLeft: ShaderNodeObject;