如何提升Three.js中EffectComposer的分辨率？解决皮肤效果模糊问题

我之前也踩过这个坑！用EffectComposer给虚拟形象加皮肤效果后画面变得模糊，光调pixelRatio确实不一定能彻底解决，结合你提到的法线贴图示例的分辨率差异，大概率是这几个细节没处理到位：

• 确保EffectComposer的渲染目标尺寸匹配实际像素
  很多人会直接用window.innerWidth和window.innerHeight设置composer尺寸，但忽略了要乘以设备像素比devicePixelRatio，而且要做整数化处理（避免非整数尺寸导致的模糊）。代码示例：

  const pixelRatio = window.devicePixelRatio;
  const targetWidth = Math.floor(window.innerWidth * pixelRatio);
  const targetHeight = Math.floor(window.innerHeight * pixelRatio);
  
  // 初始化时设置
  const composer = new EffectComposer(renderer);
  composer.setSize(targetWidth, targetHeight);
  
  // 窗口 resize 时同步更新
  window.addEventListener('resize', () => {
    const newWidth = Math.floor(window.innerWidth * pixelRatio);
    const newHeight = Math.floor(window.innerHeight * pixelRatio);
    composer.setSize(newWidth, newHeight);
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
  

• 检查RenderPass及后期通道的配置
  有些后期处理通道（比如皮肤效果相关的自定义pass，或者官方的UnrealBloomPass）会自行创建渲染目标，要确保这些目标的尺寸同样基于devicePixelRatio。另外，创建RenderPass时，要保证它的输出和composer的渲染目标匹配：

  const renderPass = new RenderPass(scene, camera);
  // 确保清除颜色等参数正确，避免渲染层级混乱
  renderPass.clearColor = new THREE.Color(0x000000);
  renderPass.clearAlpha = 1;
  composer.addPass(renderPass);
  

• 修正纹理采样的过滤设置
  如果虚拟形象的皮肤纹理本身因为MIP映射导致模糊，可以调整纹理的过滤模式：

  const skinTexture = new THREE.TextureLoader().load('skin.png');
  skinTexture.minFilter = THREE.LinearFilter; // 替代默认的LinearMipmapLinearFilter
  skinTexture.generateMipmaps = false; // 不需要MIP映射时可以关闭，减少模糊概率
  

• 对齐官方示例的核心逻辑
  你提到同一法线贴图示例的不同实现有分辨率差异，大概率是示例中是否同步了devicePixelRatio与所有渲染目标的尺寸绑定。官方示例通常会在初始化和resize事件中，确保composer、renderer以及各个pass的尺寸完全匹配，不会出现缩放断层。

按照这几点调整后，应该能解决后期处理导致的模糊问题。核心就是让EffectComposer的所有渲染目标，都和屏幕的实际物理像素保持一致，而不是只依赖全局的pixelRatio设置。

内容的提问来源于stack exchange，提问作者Igor Almeida