Examples: Add support for reversed depth to post processing modules. (#32773)

examples/jsm/shaders/SAOShader.js

@@ -86,6 +86,17 @@ const SAOShader = {
 
 		#include <packing>
 
+		#ifdef USE_REVERSED_DEPTH_BUFFER
+
+			const float depthThreshold = 0.0 + EPSILON;
+
+		#else
+
+			const float depthThreshold = 1.0 - EPSILON;
+
+		#endif
+
+
 		vec4 getDefaultColor( const in vec2 screenPosition ) {
 			#if DIFFUSE_TEXTURE == 1
 			return texture2D( tDiffuse, vUv );
@@ -153,7 +164,7 @@ const SAOShader = {
 				angle += ANGLE_STEP;
 
 				float sampleDepth = getDepth( sampleUv );
-				if( sampleDepth >= ( 1.0 - EPSILON ) ) {
+				if( sampleDepth >= depthThreshold ) {
 					continue;
 				}
 
@@ -170,7 +181,7 @@ const SAOShader = {
 
 		void main() {
 			float centerDepth = getDepth( vUv );
-			if( centerDepth >= ( 1.0 - EPSILON ) ) {
+			if( centerDepth >= depthThreshold ) {
 				discard;
 			}
 

examples/jsm/shaders/SSAOShader.js

@@ -79,6 +79,16 @@ const SSAOShader = {
 
 		#include <packing>
 
+		#ifdef USE_REVERSED_DEPTH_BUFFER
+
+			const float depthThreshold = 0.0;
+
+		#else
+
+			const float depthThreshold = 1.0;
+
+		#endif
+
 		float getDepth( const in vec2 screenPosition ) {
 
 			return texture2D( tDepth, screenPosition ).x;
@@ -137,7 +147,7 @@ const SSAOShader = {
 
 			float depth = getDepth( vUv );
 
-			if ( depth == 1.0 ) {
+			if ( depth == depthThreshold ) {
 
 				gl_FragColor = vec4( 1.0 ); // don't influence background
 

src/renderers/shaders/ShaderChunk/packing.glsl.js

@@ -82,8 +82,16 @@ float viewZToOrthographicDepth( const in float viewZ, const in float near, const
 }
 
 float orthographicDepthToViewZ( const in float depth, const in float near, const in float far ) {
-	// maps orthographic depth in [ 0, 1 ] to viewZ
-	return depth * ( near - far ) - near;
+
+	#ifdef USE_REVERSED_DEPTH_BUFFER
+	
+		return depth * ( far - near ) - far;
+
+	#else
+
+		return depth * ( near - far ) - near;
+
+	#endif
 }
 
 // NOTE: https://twitter.com/gonnavis/status/1377183786949959682
@@ -94,7 +102,15 @@ float viewZToPerspectiveDepth( const in float viewZ, const in float near, const
 }
 
 float perspectiveDepthToViewZ( const in float depth, const in float near, const in float far ) {
-	// maps perspective depth in [ 0, 1 ] to viewZ
-	return ( near * far ) / ( ( far - near ) * depth - far );
+	
+	#ifdef USE_REVERSED_DEPTH_BUFFER
+
+		return ( near * far ) / ( ( near - far ) * depth - near );
+
+	#else
+
+		return ( near * far ) / ( ( far - near ) * depth - far );
+
+	#endif
 }
 `;

src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js

@@ -134,22 +134,12 @@ export default /* glsl */`
 				// Use IGN to rotate sampling pattern per pixel
 				float phi = interleavedGradientNoise( gl_FragCoord.xy ) * PI2;
 
-				#ifdef USE_REVERSED_DEPTH_BUFFER
-
-					float dp = 1.0 - shadowCoord.z;
-
-				#else
-
-					float dp = shadowCoord.z;
-
-				#endif
-
 				shadow = (
-					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 0, 5, phi ) * radius, dp ) ) +
-					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 1, 5, phi ) * radius, dp ) ) +
-					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 2, 5, phi ) * radius, dp ) ) +
-					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 3, 5, phi ) * radius, dp ) ) +
-					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 4, 5, phi ) * radius, dp ) )
+					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 0, 5, phi ) * radius, shadowCoord.z ) ) +
+					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 1, 5, phi ) * radius, shadowCoord.z ) ) +
+					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 2, 5, phi ) * radius, shadowCoord.z ) ) +
+					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 3, 5, phi ) * radius, shadowCoord.z ) ) +
+					texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( 4, 5, phi ) * radius, shadowCoord.z ) )
 				) * 0.2;
 
 			}