关于Three.js中场景过暗的颜色偏差以及伽马修正的总结

        在Three.js中Renderer通常有Linear和sRGB两种。当项目导入GLTF时，默认使用LinearSRGBColorSpace而非SRGBColorSpace。由于版本更新，命名空间可能存在变化，如不是colorspace而是encoding。

        因此在项目场景中使用renderer.outputEncoding = THREE.sRGBEncoding;可以进行颜色的纠正。多篇博客也指出，自发光存在材质丢失和饱和度过高的问题。

        我在开发过程中，需要对scene中的gltf模型以及灯光等进行变化，以及高光后期处理。发现了场景变化会导致“renderer.outputEncoding = THREE.sRGBEncoding”失效。最终定位在effectcomposer中。effectcomposer在添加Renderpass的时候导致了功能的失效问题。因此需要进行后期的伽马矫正。具体的参照方法于下图所示

参照链接：在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南-CSDN博客

其中代码部分根据Three版本不同存在差异，部分可能无法生效。

composer = new EffectComposer(renderer);

composer.renderTarget1.texture.outputColorSpace = THREE.sRGBEncoding;
composer.renderTarget2.texture.outputColorSpace = THREE.sRGBEncoding;
composer.renderTarget1.texture.encoding = THREE.sRGBEncoding;
composer.renderTarget2.texture.encoding = THREE.sRGBEncoding;

目前可行的代码如下：主要是参照官网进行了gamma修正

 composer = new EffectComposer(renderer)
      composer.renderer.outputColorSpace=SRGBColorSpace
      composer.renderTarget1.texture.colorSpace = SRGBColorSpace
      composer.renderTarget2.texture.colorSpace = SRGBColorSpace
      composer.setSize(window.innerWidth, window.innerHeight)
      // 新建一个场景通道  为了覆盖到原理来的场景上
      renderPass = new RenderPass(scene, camera)
      composer.addPass(renderPass);
      // 物体边缘发光通道 --应用的宽高-应用的场景-应用的相机-应用的模型==计算位置
      outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera,
          selectedObjects)
      outlinePass.selectedObjects = selectedObjects
      outlinePass.edgeStrength = 10.0 // 边框的亮度
      outlinePass.edgeGlow = 1 // 光晕[0,1]
      outlinePass.usePatternTexture = false // 是否使用父级的材质
      outlinePass.edgeThickness = 1.0 // 边框宽度
      outlinePass.downSampleRatio = 1 // 边框弯曲度
      outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
      outlinePass.visibleEdgeColor = new THREE.Color(1, 0, 0)
      outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
      outlinePass.clear = true
      composer.addPass(outlinePass)
      // 自定义的着色器通道 作为参数
      let effectFXAA = new ShaderPass(FXAAShader)
      effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
      effectFXAA.renderToScreen = true
      composer.addPass(effectFXAA)
      console.error(composer)
      // // 创建伽马校正通道
      const gammaPass = new ShaderPass(GammaCorrectionShader);
      composer.addPass(gammaPass);