Javascript （Three.js）Bloom效应性能

如果没有水华效应，则速度为50-60fps

renderer.render( scene, camera );

camera.layers.set( BLOOM_SCENE );
bloomComposer.render();
camera.layers.set( ENTIRE_SCENE );
finalComposer.render();   

然后，在添加bloom效果后只需10 fps

renderer.render( scene, camera );

camera.layers.set( BLOOM_SCENE );
bloomComposer.render();
camera.layers.set( ENTIRE_SCENE );
finalComposer.render();   

我怎样才能修好它？演示链接在这里

---

这里有几个不同的问题

场景中有大量立方体。每个立方体都是独特的材质和形状。要使场景保持快速，需要将DrawCall的数量保持在500左右，多边形的数量保持在150万左右或以下。 这称为“绘制调用边界”。 有一些应对策略。。。例如，使用硬件实例化和/或像THREE.BAS这样的库对多维数据集进行实例化。这些技术可以通过单个绘制调用渲染大量对象，并可能对您有所帮助

（）

（）

下一步： 调整大小处理程序总是根据窗口的边界调整大小。。不是实际画布的大小。您也没有调整代码中实际渲染过程的大小。每个具有宽度/高度参数的过程还需要调整大小，以及effectsComposer本身，并且当前总是调整大小以适应窗口的大小。。不是要渲染的实际画布区域的大小

相反，请尝试类似于

renderer.resize（renderer.domElement.width，renderer.domElement.height，false）

的方法，然后通过css规则控制画布的大小调整，然后确保设置了blurPass大小，并且还设置了effectsComposer大小。resize方法上的“false”参数阻止THREE设置画布样式的宽度/高度，并允许您显式控制画布样式。否则，当三个人试图将画布的CSS更改为您要传递的新宽度/高度时，您可能会遇到大小更改触发额外大小调整的问题。 此问题导致您渲染全窗口大小的画布和效果，无论其显示大小如何

下一个问题是blur/bloom本身就是一个成本高昂的操作。。因为它需要将整个帧缓冲区缩小几倍，以生成模糊/开花版本的效果。上述尺寸问题加剧了这一问题^

下一步。。。我不知道你在用什么硬件，但如果是视网膜显示器。。devicePixelRatio将大于1，在这种情况下，会进一步加剧显示大小问题，因为在视网膜显示器上，devicePixelRatio为2将导致渲染器渲染的devicePixelRatio为1的4倍。你可能想考虑使用1而不是从窗口中得到的任何东西。 所有这些问题都是相互影响的。GPU只能做这么多，所以你必须聪明地管理它们，以及你给它们施加什么样的负载

---

希望这有帮助。

这里有一些不同的问题

场景中有大量立方体。每个立方体都是独特的材质和形状。要使场景保持快速，需要将DrawCall的数量保持在500左右，多边形的数量保持在150万左右或以下。 这称为“绘制调用边界”。 有一些应对策略。。。例如，使用硬件实例化和/或像THREE.BAS这样的库对多维数据集进行实例化。这些技术可以通过单个绘制调用渲染大量对象，并可能对您有所帮助

（）

（）

下一步： 调整大小处理程序总是根据窗口的边界调整大小。。不是实际画布的大小。您也没有调整代码中实际渲染过程的大小。每个具有宽度/高度参数的过程还需要调整大小，以及effectsComposer本身，并且当前总是调整大小以适应窗口的大小。。不是要渲染的实际画布区域的大小

相反，请尝试类似于

renderer.resize（renderer.domElement.width，renderer.domElement.height，false）

的方法，然后通过css规则控制画布的大小调整，然后确保设置了blurPass大小，并且还设置了effectsComposer大小。resize方法上的“false”参数阻止THREE设置画布样式的宽度/高度，并允许您显式控制画布样式。否则，当三个人试图将画布的CSS更改为您要传递的新宽度/高度时，您可能会遇到大小更改触发额外大小调整的问题。 此问题导致您渲染全窗口大小的画布和效果，无论其显示大小如何

下一个问题是blur/bloom本身就是一个成本高昂的操作。。因为它需要将整个帧缓冲区缩小几倍，以生成模糊/开花版本的效果。上述尺寸问题加剧了这一问题^

下一步。。。我不知道你在用什么硬件，但如果是视网膜显示器。。devicePixelRatio将大于1，在这种情况下，会进一步加剧显示大小问题，因为在视网膜显示器上，devicePixelRatio为2将导致渲染器渲染的devicePixelRatio为1的4倍。你可能想考虑使用1而不是从窗口中得到的任何东西。 所有这些问题都是相互影响的。GPU只能做这么多，所以你必须聪明地管理它们，以及你给它们施加什么样的负载

希望这有帮助