three.js使用UnrealBloomPass后黑屏报WebGL尺寸超限错误如何解决

你遇到的报错本质是UnrealBloomPass 内部创建的后处理帧缓冲尺寸异常，和场景中使用的纹理图片尺寸无关，所以之前调整纹理尺寸无法解决问题，按照以下步骤逐一排查即可：

• 1. 校验初始化顺序与尺寸参数 #

  必须保证WebGLRenderer先完成视口尺寸配置，再初始化EffectComposer和UnrealBloomPass，Pass的尺寸参数必须和渲染器、Composer的尺寸严格匹配，禁止传入0、负数或超出浏览器支持上限的数值：

  // 正确初始化流程示例
  const renderer = new THREE.WebGLRenderer()
  // 先配置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  // 初始化Composer自动继承渲染器尺寸
  const effectComposer = new EffectComposer(renderer)
  // BloomPass第一个参数必须和渲染器尺寸完全一致
  const unrealBloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // 发光强度
    0.4, // 光晕半径
    0.85 // 亮度阈值
  )
  effectComposer.addPass(unrealBloomPass)
  

• 2. 同步窗口resize事件的尺寸更新 #

  如果监听了窗口大小变化事件，必须同步更新所有相关实例的尺寸，不要遗漏BloomPass的尺寸设置：

  window.addEventListener('resize', () => {
    const width = window.innerWidth
    const height = window.innerHeight
    // 更新渲染器
    renderer.setSize(width, height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    // 更新Composer
    effectComposer.setSize(width, height)
    effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    // 单独更新BloomPass尺寸，非常容易遗漏
    unrealBloomPass.setSize(width, height)
  })
  

• 3. 排除无效尺寸参数 #

  • 不要使用未挂载完成的DOM节点的offsetWidth/offsetHeight作为尺寸参数，DOM未渲染时这两个值为0，会直接触发帧缓冲大小为0的错误
  • 必须限制渲染像素比不超过2，高DPI设备下如果像素比为3，叠加大窗口尺寸会超出浏览器支持的最大渲染缓冲上限，触发尺寸超出范围的报错

• 4. 校验版本一致性 #

  确保导入的three核心库和UnrealBloomPass的版本完全匹配，不同版本的Pass参数计算逻辑存在差异，也可能引发尺寸计算异常。

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