Three.js从r152升级至r153后粒子变亮，如何不降级恢复原效果？

问题背景 #

将Three.js从r152升级到r153后，粒子效果明显变亮，排查后确认问题出在late()函数中，官方迁移指南未提及相关解决方案，需在不降级的前提下恢复原有粒子效果。

原因分析 #

r153版本对EffectComposer的默认帧缓冲格式做了调整：当禁用THREE.ColorManagement.enabled = false时，帧缓冲格式从sRGB改为了Linear，这导致后期处理流程（尤其是UnrealBloomPass）的亮度计算逻辑与r152不一致，最终出现粒子过亮的现象。

解决方案 #

创建EffectComposer时，手动指定帧缓冲的颜色空间为sRGB，与r152版本保持一致，具体修改如下：

在late()函数中，替换原有的composer初始化代码：

原代码：

composer = new EffectComposer(renderer)
composer.setSize(window.innerWidth, window.innerHeight)

修改为：

// 手动指定帧缓冲格式为sRGB，匹配r152行为
const renderTargetParams = {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.SRGBColorSpace,
  stencilBuffer: false
};
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParams);

composer = new EffectComposer(renderer, renderTarget);
composer.setSize(window.innerWidth, window.innerHeight);

修改后，后期处理的颜色空间逻辑与r152完全一致，粒子亮度即可恢复到升级前的效果。

内容的提问来源于stack exchange，提问作者nano71.com