如何借助pmndrs/postprocessing获取RenderPass信息与真实场景三角面数？

因为postprocessing库会通过单个全屏三角面渲染所有后期效果，最终renderer.info.triangles会被覆盖为1，但你可以在场景渲染完成、后期效果启动前读取到真实的三角面数据，有两种简洁的实现方式：

方式一：利用RenderPass的afterRender事件 #

postprocessing的RenderPass内置了afterRender事件，会在场景渲染完成后触发，此时renderer.info里的统计值还没被后期效果覆盖：

import { RenderPass, EffectComposer, EffectPass } from 'postprocessing';

// 创建场景渲染通道
const renderPass = new RenderPass(scene, camera);

// 监听场景渲染完成事件
renderPass.addEventListener('afterRender', (event) => {
  // 读取真实的场景三角面数
  const realTriangleCount = event.renderer.info.triangles;
  console.log('当前场景三角面数:', realTriangleCount);
  
  // 可以把值保存到全局变量或组件状态里供后续使用
  window.sceneTriangleCount = realTriangleCount;
});

// 构建后期管线
const composer = new EffectComposer(renderer);
composer.addPass(renderPass);
// 后续添加你的后期效果通道
composer.addPass(new EffectPass(camera, /* 你的效果比如BloomEffect等 */));

方式二：自定义统计通道 #

如果你需要更灵活的控制，可以自定义一个无渲染的通道，插入到RenderPass之后、所有后期效果通道之前：

import { Pass, EffectComposer, RenderPass, EffectPass } from 'postprocessing';

class TriangleCountPass extends Pass {
  constructor() {
    super('TriangleCountPass');
    this.needsSwap = false; // 不需要交换帧缓冲，仅做数据读取
    this.triangleCount = 0; // 存储最新的三角面数
  }

  render(renderer) {
    // 读取场景渲染后的三角面统计值
    this.triangleCount = renderer.info.triangles;
    console.log('当前场景三角面数:', this.triangleCount);
  }
}

// 构建管线
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new TriangleCountPass());
composer.addPass(new EffectPass(camera, /* 你的后期效果 */));

// 后续可通过composer.passes[1].triangleCount获取最新值

关键注意点 #

• 每次渲染前建议调用renderer.info.reset()，确保统计的是当前帧的准确数据，避免累加历史值：

  function animate() {
    requestAnimationFrame(animate);
    renderer.info.reset(); // 重置统计
    composer.render();
  }
  

• 如果有多相机/多RenderPass的场景，需要在每个RenderPass的afterRender事件里分别统计，或者按需累加数值

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