Мы обновляем настройку нашего приложения three. js, чтобы оно использовало THREE.ACESFilmicToneMapping
(потому что наша сцена использует IBL из карты среды EXR).
В этом процессе материалы, использующие текстуры, теперь отлично выглядит (цвета карты были размыты перед изменением, как показано ниже).
с renderer.toneMapping = THREE.LinearToneMapping
(по умолчанию)
with renderer.toneMapping = THREE.ACESFilmicToneMapping
However, the problem is that plain colours (without any maps) are now looking burnt...
with renderer.toneMapping = THREE.LinearToneMapping
(default)
with renderer.toneMapping = THREE.ACESFilmicToneMapping
It's now totally impossible to get bright yellow or green for example. Turning down the renderer.toneMappingExposure
or the material.envMapIntensity
can help, but materials with textures then get way too dark... Ie. provided any given parameter, material using plain colours are either too bright, or material using textures are too dark.
I'm not sure if I am missing something, but this looks like there would be an issue in this setup. Would there be any other parameter that we are overlooking that is causing this result?
Otherwise, we are loading all our models using the GLTFLoader
, and we have renderer.outputEncoding = THREE.sRGBEncoding;
as per the documentation of the GLTFLoader
.
Our environment map is an equirectangular EXR loaded with EXRLoader
:
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader';
const envMapLoader = new EXRLoader();
envMapLoader.load(
environmentMapUrl,
rawTexture => {
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
const envMapTarget = pmremGenerator.fromEquirectangular(rawTexture);
const { texture } = envMapTarget;
return texture;
},
...
)