Material 使用纯色在使用 THREE.ACESFilmicToneMapping 时会被烧焦

Question

我们正在更新我们的 three.js 应用程序设置，以便它使用 THREE.ACESFilmicToneMapping（因为我们的场景使用来自 EXR 环境贴图的 IBL）。

在那个过程中，materials 使用纹理现在看起来很棒（地图颜色在更改之前被洗掉了，如下图所示）。

与 renderer.toneMapping = THREE.LinearToneMapping（默认）

和renderer.toneMapping = THREE.ACESFilmicToneMapping

但是，问题是纯色（没有任何贴图）现在看起来很烧焦...

与 renderer.toneMapping = THREE.LinearToneMapping（默认）

和renderer.toneMapping = THREE.ACESFilmicToneMapping

例如，现在完全不可能得到亮黄色或绿色。调低 renderer.toneMappingExposure 或 material.envMapIntensity 会有所帮助，但带有纹理的 material 会变得太暗……即。提供任何给定参数，material 使用纯色要么太亮，要么 material 使用纹理太暗。

我不确定我是否遗漏了什么，但看起来此设置中会有问题。是否还有我们忽略的任何其他参数导致此结果？

否则，我们将使用 GLTFLoader 加载所有模型，并且根据 GLTFLoader 的文档我们有 renderer.outputEncoding = THREE.sRGBEncoding;。我们的环境贴图是加载了 EXRLoader:

的等距柱状 EXR

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;
  },
  ...
)

Answer 1

简短的回答是，这是预期的行为，在 lightning/colors 中总会有权衡。因此，必须根据具体 setup/application 和期望的结果根据经验 select 进行设置。

直接来自关于我上面的问题：

You may need to go to the three.js forums for this question. There is no quick fix to add HDR lighting to colors that are already 100% saturated. Lighting is not a simple topic, and different tonemapping methods make different tradeoffs here.

Material 使用纯色在使用 THREE.ACESFilmicToneMapping 时会被烧焦

Material using plain colours getting burnt when using THREE.ACESFilmicToneMapping

colors

three.js

gltf