Three.js FilmPass噪点异常求助：闲置/切后台后噪点图案化偏移

我在使用Three.js的FilmPass实现老电影噪点效果时（代码如下），遇到一个异常：打开Demo后将页面置于后台，或让电脑闲置约15分钟，返回页面时，FilmPass生成的噪点会出现偏移并形成固定重复的图案（类似条纹状效果），环境为最新版Chrome。我猜测这和requestAnimationFrame的机制有关，但不知道如何调整修复，希望得到解决思路。

相关代码：

// Old Film Look
filmPass = new THREE.FilmPass();
composer.addPass(filmPass);

Chrome会对后台页面限制requestAnimationFrame的触发频率（降至约1次/秒），而FilmPass的噪点动画依赖时间增量（deltaTime）更新偏移量。长时间后台运行后，累计的时间计算可能出现精度偏差，或者FilmPass的随机种子未随时间正确更新，导致噪点失去随机性，形成重复图案。

• 页面激活时重置FilmPass时间参数
  监听页面visibilitychange事件，当页面从后台回到前台时，手动重置FilmPass的时间变量，让它从当前时间重新计算噪点偏移，避免累计误差：

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && filmPass) {
      filmPass.uniforms.time.value = performance.now() / 1000;
    }
  });
  

• 强制更新随机种子
  FilmPass的噪点生成依赖随机值，后台低帧率可能导致随机种子未及时更新。页面激活时手动重置随机相关的uniform变量（具体变量名需对应Three.js版本的FilmPass源码）：

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && filmPass) {
      filmPass.uniforms.rand.value = Math.random();
    }
  });
  

• 自定义时间增量计算
  不依赖Three.js内置时钟，改用performance.now()直接计算时间差，确保deltaTime的准确性，避免后台帧率限制带来的时间累计错误：

  let lastTime = performance.now();
  function render() {
    requestAnimationFrame(render);
    const currentTime = performance.now();
    const deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;
    
    if (filmPass) {
      filmPass.uniforms.time.value += deltaTime;
    }
    
    composer.render(deltaTime);
  }
  render();
  

• 后台时暂停FilmPass动画
  渲染循环中判断页面状态，后台时不更新FilmPass的时间变量，回到前台后再恢复，避免不必要的时间累计：

  let lastTime = performance.now();
  function render() {
    requestAnimationFrame(render);
    if (document.hidden) {
      composer.render();
      return;
    }
    const currentTime = performance.now();
    const deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;
    filmPass.uniforms.time.value += deltaTime;
    composer.render(deltaTime);
  }
  render();
  

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