|
|
@@ -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;
|
|
|
|
|
|
//
|