webgl_reverse_depth_buffer: Use post-processing and add note for use of floating point depth. (#30941)

examples/webgl_reverse_depth_buffer.html

@@ -62,17 +62,15 @@
 				text-align: center;
 			}
 
-			#depth-warning {
+			#info_note {
 				position: absolute;
-				top: 40px;
+				top: 24px;
 				width: 100%;
 				padding: 10px;
 				box-sizing: border-box;
 				text-align: center;
-				color: #ff5555;
-				font-weight: bold;
+				color: rgba(255, 255, 255, 0.8);
 				z-index: 2;
-				display: none;
 			}
 		</style>
 	</head>
@@ -87,8 +85,8 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - reverse depth buffer<br/>
 		</div>
 
-		<div id="depth-warning">
-			Warning: Your browser's WebGL provides less than 24-bit depth buffer precision. This example may not display correctly.
+		<div id="info_note">
+			Note: For best results, a floating-point depth buffer should be used with post-processing. See <a href="https://developer.nvidia.com/blog/visualizing-depth-precision" target="_blank" rel="noopener">Visualizing Depth Precision</a>.
 		</div>
 
 		<script type="importmap">
@@ -105,10 +103,20 @@
 			import * as THREE from 'three';
 
 			import Stats from 'three/addons/libs/stats.module.js';
+			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let stats, camera, scene, normalRenderer, logarithmicRenderer, reverseRenderer;
+			let stats, camera, scene;
+			let normalRenderer, logarithmicRenderer, reverseRenderer;
+			let normalComposer, logarithmicComposer, reverseComposer;
 			const meshes = [];
 
+			const renderTarget = new THREE.WebGLRenderTarget();
+			renderTarget.type = THREE.UnsignedByteType;
+			renderTarget.depthTexture = new THREE.DepthTexture();
+			renderTarget.depthTexture.type = THREE.FloatType;
+
 			init();
 			animate();
 
@@ -206,6 +214,10 @@
 				normalRenderer.domElement.style.position = 'relative';
 				normalContainer.appendChild( normalRenderer.domElement );
 
+				normalComposer = new EffectComposer( normalRenderer, renderTarget );
+				normalComposer.addPass( new RenderPass( scene, camera ) );
+				normalComposer.addPass( new OutputPass() );
+
 				const logarithmicContainer = document.getElementById( 'container_logarithmic' );
 				logarithmicRenderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );
 				logarithmicRenderer.setPixelRatio( window.devicePixelRatio );
@@ -213,6 +225,10 @@
 				logarithmicRenderer.domElement.style.position = 'relative';
 				logarithmicContainer.appendChild( logarithmicRenderer.domElement );
 
+				logarithmicComposer = new EffectComposer( logarithmicRenderer, renderTarget );
+				logarithmicComposer.addPass( new RenderPass( scene, camera ) );
+				logarithmicComposer.addPass( new OutputPass() );
+
 				const reverseContainer = document.getElementById( 'container_reverse' );
 				reverseRenderer = new THREE.WebGLRenderer( { reverseDepthBuffer: true } );
 				reverseRenderer.setPixelRatio( window.devicePixelRatio );
@@ -220,18 +236,12 @@
 				reverseRenderer.domElement.style.position = 'relative';
 				reverseContainer.appendChild( reverseRenderer.domElement );
 
-				// Check depth buffer precision
-				const gl = normalRenderer.getContext();
-
-				const depthBits = gl.getParameter( gl.DEPTH_BITS );
-
-				if ( depthBits < 24 ) {
-
-					document.getElementById( 'depth-warning' ).style.display = 'block';
-
-				}
+				reverseComposer = new EffectComposer( reverseRenderer, renderTarget );
+				reverseComposer.addPass( new RenderPass( scene, camera ) );
+				reverseComposer.addPass( new OutputPass() );
 
 				window.addEventListener( 'resize', onWindowResize );
+				onWindowResize();
 
 			}
 
@@ -255,9 +265,9 @@
 
 			function render() {
 
-				normalRenderer.render( scene, camera );
-				logarithmicRenderer.render( scene, camera );
-				reverseRenderer.render( scene, camera );
+				normalComposer.render();
+				logarithmicComposer.render();
+				reverseComposer.render();
 
 				stats.update();
 
@@ -265,9 +275,17 @@
 
 			function onWindowResize() {
 
-				normalRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
-				logarithmicRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
-				reverseRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
+				const width = 0.33 * window.innerWidth;
+				const height = window.innerHeight;
+				const dpr = window.devicePixelRatio;
+
+				normalComposer.setSize( width * dpr, height * dpr );
+				logarithmicComposer.setSize( width * dpr, height * dpr );
+				reverseComposer.setSize( width * dpr, height * dpr );
+
+				normalRenderer.setSize( width, height );
+				logarithmicRenderer.setSize( width, height );
+				reverseRenderer.setSize( width, height );
 
 				camera.aspect = 0.33 * window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();