Browse Source

Examples: Improve comments in `webgpu_custom_fog_background` (#31626)

* Improve comments

* Update screenshot
WestLangley 6 months ago
parent
commit
6dfdfb39c7

BIN
examples/screenshots/webgpu_custom_fog_background.jpg


+ 12 - 11
examples/webgpu_custom_fog_background.html

@@ -8,7 +8,7 @@
 		<style>
 
 			#info {
-				background-color: #0066ff;
+				background-color: #4080cc;
 			}
 
 		</style>
@@ -61,29 +61,30 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				//renderer.toneMapping = THREE.ACESFilmicToneMapping; // apply tone mapping in post processing
+				renderer.toneMapping = THREE.NoToneMapping; // apply tone mapping in post processing, instead
 				container.appendChild( renderer.domElement );
 
 				// post processing
 
-				// render scene pass ( the same of css )
+				// render scene pass
 				const scenePass = pass( scene, camera );
 				const scenePassViewZ = scenePass.getViewZNode();
 
-				// background color
-				const backgroundColor = color( 0x0066ff );
+				// fog color
+				const fogColor = color( 0x4080cc ); // in sRGB color space
 
-				// get fog factor from scene pass context
-				// equivalent to: scene.fog = new THREE.Fog( 0x0066ff, 2.7, 4 );
+				// get fog factor from the scene pass context
+				// equivalent to: scene.fog = new THREE.Fog( 0x4080cc, 2.7, 4 );
 				const fogFactor = rangeFogFactor( 2.7, 4 ).context( { getViewZ: () => scenePassViewZ } );
 
-				// tone mapping scene pass
-				const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping );
+				// tone-mapped scene pass
+				const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping, 1 );
 
-				// mix fog from fog factor and background color
-				const compose = fogFactor.mix( scenePassTM, backgroundColor );
+				// mix fog using fog factor and fog color
+				const compose = fogFactor.mix( scenePassTM, fogColor );
 
 				postProcessing = new THREE.PostProcessing( renderer );
+				postProcessing.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform
 				postProcessing.outputNode = compose;
 
 				//

粤ICP备19079148号