|
8 | 8 | <style> |
9 | 9 |
|
10 | 10 | #info { |
11 | | - background-color: #0066ff; |
| 11 | + background-color: #4080cc; |
12 | 12 | } |
13 | 13 |
|
14 | 14 | </style> |
|
61 | 61 | renderer = new THREE.WebGPURenderer( { antialias: true } ); |
62 | 62 | renderer.setPixelRatio( window.devicePixelRatio ); |
63 | 63 | 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 |
65 | 65 | container.appendChild( renderer.domElement ); |
66 | 66 |
|
67 | 67 | // post processing |
68 | 68 |
|
69 | | - // render scene pass ( the same of css ) |
| 69 | + // render scene pass |
70 | 70 | const scenePass = pass( scene, camera ); |
71 | 71 | const scenePassViewZ = scenePass.getViewZNode(); |
72 | 72 |
|
73 | | - // background color |
74 | | - const backgroundColor = color( 0x0066ff ); |
| 73 | + // fog color |
| 74 | + const fogColor = color( 0x4080cc ); // in sRGB color space |
75 | 75 |
|
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 ); |
78 | 78 | const fogFactor = rangeFogFactor( 2.7, 4 ).context( { getViewZ: () => scenePassViewZ } ); |
79 | 79 |
|
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 ); |
82 | 82 |
|
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 ); |
85 | 85 |
|
86 | 86 | postProcessing = new THREE.PostProcessing( renderer ); |
| 87 | + postProcessing.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform |
87 | 88 | postProcessing.outputNode = compose; |
88 | 89 |
|
89 | 90 | // |
|
0 commit comments