SSRNode: Support logarithmic depth. (#29941)

* GTAONode: Clean up. * SSRNode: Support logarithmic depth.
mrdoob · Nov 21, 2024 · 7531915 · 7531915
1 parent dce25de
commit 7531915
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/examples/jsm/tsl/display/GTAONode.js b/examples/jsm/tsl/display/GTAONode.js
@@ -27,17 +27,6 @@ class GTAONode extends TempNode {
 
 		this.resolutionScale = 1;
 
-		this.cameraNear = reference( 'near', 'float', camera );
-		this.cameraFar = reference( 'far', 'float', camera );
-
-		this.radius = uniform( 0.25 );
-		this.resolution = uniform( new Vector2() );
-		this.thickness = uniform( 1 );
-		this.distanceExponent = uniform( 1 );
-		this.distanceFallOff = uniform( 1 );
-		this.scale = uniform( 1 );
-		this.samples = uniform( 16 );
-
 		this.updateBeforeType = NodeUpdateType.FRAME;
 
 		// render targets
@@ -47,9 +36,19 @@ class GTAONode extends TempNode {
 
 		// uniforms
 
+		this.radius = uniform( 0.25 );
+		this.resolution = uniform( new Vector2() );
+		this.thickness = uniform( 1 );
+		this.distanceExponent = uniform( 1 );
+		this.distanceFallOff = uniform( 1 );
+		this.scale = uniform( 1 );
+		this.samples = uniform( 16 );
+
 		this._noiseNode = texture( generateMagicSquareNoise() );
 		this._cameraProjectionMatrix = uniform( camera.projectionMatrix );
 		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+		this._cameraNear = reference( 'near', 'float', camera );
+		this._cameraFar = reference( 'far', 'float', camera );
 
 		// materials
 
@@ -112,13 +111,13 @@ class GTAONode extends TempNode {
 
 		const sampleDepth = ( uv ) => {
 
-			const depth = this.depthNode.uv( uv ).x;
+			const depth = this.depthNode.uv( uv ).r;
 
 			if ( builder.renderer.logarithmicDepthBuffer === true ) {
 
-				const viewZ = logarithmicDepthToViewZ( depth, this.cameraNear, this.cameraFar );
+				const viewZ = logarithmicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
 
-				return viewZToPerspectiveDepth( viewZ, this.cameraNear, this.cameraFar );
+				return viewZToPerspectiveDepth( viewZ, this._cameraNear, this._cameraFar );
 
 			}
 

diff --git a/examples/jsm/tsl/display/SSRNode.js b/examples/jsm/tsl/display/SSRNode.js
@@ -1,5 +1,5 @@
 import { NearestFilter, RenderTarget, Vector2 } from 'three';
-import { getScreenPosition, getViewPosition, sqrt, mul, div, cross, float, Continue, Break, Loop, int, max, abs, sub, If, dot, reflect, normalize, screenCoordinate, QuadMesh, TempNode, nodeObject, Fn, NodeUpdateType, passTexture, NodeMaterial, uv, uniform, perspectiveDepthToViewZ, orthographicDepthToViewZ, vec2, vec3, vec4, PostProcessingUtils } from 'three/tsl';
+import { reference, viewZToPerspectiveDepth, logarithmicDepthToViewZ, getScreenPosition, getViewPosition, sqrt, mul, div, cross, float, Continue, Break, Loop, int, max, abs, sub, If, dot, reflect, normalize, screenCoordinate, QuadMesh, TempNode, nodeObject, Fn, NodeUpdateType, passTexture, NodeMaterial, uv, uniform, perspectiveDepthToViewZ, orthographicDepthToViewZ, vec2, vec3, vec4, PostProcessingUtils } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 const _size = /*@__PURE__*/ new Vector2();
@@ -42,10 +42,10 @@ class SSRNode extends TempNode {
 		this.thickness = uniform( 0.1 ); // controls the cutoff between what counts as a possible reflection hit and what does not
 		this.opacity = uniform( 1 ); // controls the transparency of the reflected colors
 
-		this._cameraNear = uniform( camera.near );
-		this._cameraFar = uniform( camera.far );
 		this._cameraProjectionMatrix = uniform( camera.projectionMatrix );
 		this._cameraProjectionMatrixInverse = uniform( camera.projectionMatrixInverse );
+		this._cameraNear = reference( 'near', 'float', camera );
+		this._cameraFar = reference( 'far', 'float', camera );
 		this._isPerspectiveCamera = uniform( camera.isPerspectiveCamera ? 1 : 0 );
 		this._resolution = uniform( new Vector2() );
 		this._maxStep = uniform( 0 );
@@ -151,6 +151,22 @@ class SSRNode extends TempNode {
 
 		} );
 
+		const sampleDepth = ( uv ) => {
+
+			const depth = this.depthNode.uv( uv ).r;
+
+			if ( builder.renderer.logarithmicDepthBuffer === true ) {
+
+				const viewZ = logarithmicDepthToViewZ( depth, this._cameraNear, this._cameraFar );
+
+				return viewZToPerspectiveDepth( viewZ, this._cameraNear, this._cameraFar );
+
+			}
+
+			return depth;
+
+		};
+
 		const ssr = Fn( () => {
 
 			const metalness = this.metalnessNode.uv( uvNode ).r;
@@ -159,7 +175,7 @@ class SSRNode extends TempNode {
 			metalness.equal( 0.0 ).discard();
 
 			// compute some standard FX entities
-			const depth = this.depthNode.uv( uvNode ).r.toVar();
+			const depth = sampleDepth( uvNode ).toVar();
 			const viewPosition = getViewPosition( uvNode, depth, this._cameraProjectionMatrixInverse ).toVar();
 			const viewNormal = this.normalNode.rgb.normalize().toVar();
 
@@ -240,7 +256,7 @@ class SSRNode extends TempNode {
 
 				// compute new uv, depth, viewZ and viewPosition for the new location on the ray
 				const uvNode = xy.div( this._resolution );
-				const d = this.depthNode.uv( uvNode ).r.toVar();
+				const d = sampleDepth( uvNode ).toVar();
 				const vZ = getViewZ( d ).toVar();
 				const vP = getViewPosition( uvNode, d, this._cameraProjectionMatrixInverse ).toVar();