Skip to content

Commit 6dfdfb3

Browse files
authored
Examples: Improve comments in webgpu_custom_fog_background (#31626)
* Improve comments * Update screenshot
1 parent dfb14d3 commit 6dfdfb3

File tree

2 files changed

+12
-11
lines changed

2 files changed

+12
-11
lines changed
-2.36 KB
Loading

examples/webgpu_custom_fog_background.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<style>
99

1010
#info {
11-
background-color: #0066ff;
11+
background-color: #4080cc;
1212
}
1313

1414
</style>
@@ -61,29 +61,30 @@
6161
renderer = new THREE.WebGPURenderer( { antialias: true } );
6262
renderer.setPixelRatio( window.devicePixelRatio );
6363
renderer.setSize( window.innerWidth, window.innerHeight );
64-
//renderer.toneMapping = THREE.ACESFilmicToneMapping; // apply tone mapping in post processing
64+
renderer.toneMapping = THREE.NoToneMapping; // apply tone mapping in post processing, instead
6565
container.appendChild( renderer.domElement );
6666

6767
// post processing
6868

69-
// render scene pass ( the same of css )
69+
// render scene pass
7070
const scenePass = pass( scene, camera );
7171
const scenePassViewZ = scenePass.getViewZNode();
7272

73-
// background color
74-
const backgroundColor = color( 0x0066ff );
73+
// fog color
74+
const fogColor = color( 0x4080cc ); // in sRGB color space
7575

76-
// get fog factor from scene pass context
77-
// equivalent to: scene.fog = new THREE.Fog( 0x0066ff, 2.7, 4 );
76+
// get fog factor from the scene pass context
77+
// equivalent to: scene.fog = new THREE.Fog( 0x4080cc, 2.7, 4 );
7878
const fogFactor = rangeFogFactor( 2.7, 4 ).context( { getViewZ: () => scenePassViewZ } );
7979

80-
// tone mapping scene pass
81-
const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping );
80+
// tone-mapped scene pass
81+
const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping, 1 );
8282

83-
// mix fog from fog factor and background color
84-
const compose = fogFactor.mix( scenePassTM, backgroundColor );
83+
// mix fog using fog factor and fog color
84+
const compose = fogFactor.mix( scenePassTM, fogColor );
8585

8686
postProcessing = new THREE.PostProcessing( renderer );
87+
postProcessing.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform
8788
postProcessing.outputNode = compose;
8889

8990
//

0 commit comments

Comments
 (0)