three.js中的bloom为什么会模糊？

Question

我目前正在尝试使用three.js进行一些实验，并尝试添加一个bloom效果。然而，当我添加bloom时，它更像是模糊而不是真正的bloom：

代码：

composer = new THREE.EffectComposer(renderer, renderTarget);
effectBloom = new THREE.BloomPass(1, 25, 5);
composer.addPass(renderModel)
composer.addPass(effectBloom);
composer.addPass(copyPass)

并且它正在使用以下方式呈现：

composer.render( delta )

我希望更了解这个问题：

- Kevin Kuyl

---

我看了一下这里的着色器[https://github.com/mrdoob/three.js/blob/b7279adc60d366ff33a3e662576f349720139820/examples/js/shaders/ConvolutionShader.js]。如果没有设置浮点渲染纹理，你应该将黄色调亮。代码[https://github.com/mrdoob/three.js/blob/6ff842c0f4a1fbe99e741ffac6e99ff7749f1f1c/examples/js/postprocessing/BloomPass.js]似乎表明模糊通道只是叠加在一起，这就是第30行材质所做的事情。尝试添加另一个复制通道，使用你的bloom渲染结果，在当前输出上进行覆盖，可能会起作用。 - pailhead

谢谢您的快速回复，我已经将黄色的亮度调高了，还尝试添加了另一个复制通道。但是我对这种编程完全不熟悉，我不确定是通道不起作用还是我做错了什么。可能是后者。如果不麻烦的话，您能简要解释一下通道是如何处理的吗？ - Kevin Kuyl

我已经通过示例找到了解决方案，结果发现解决方案非常简单，而且并不在我的问题中。 “renderer.autoClear = false;” 不过，我以后仍然可以使用这个解释作为参考。 - Kevin Kuyl

简而言之，您在整个屏幕上渲染了两个三角形，然后使用该四边形使用着色器处理临时纹理（缓冲区）。您可以尽情发挥创意。在这里，您将场景渲染到纹理中，然后处理该纹理，并沿途制作副本（例如在一个方向上模糊它，然后使用该临时纹理并在另一个方向上模糊它）。在链的末端，您将结果显示在屏幕上。 - pailhead

你的帮助非常有教育意义，非常感谢 ^^ - Kevin Kuyl

偶然发现了这个网站：http://threejs.org/examples/#webgl_shaders_tonemapping - polyclick

Answer 1

我遇到了类似的问题。Bloom只是使渲染图像模糊。为了解决这个问题，我需要将渲染器的autoClear设置为false：

renderer.autoClear = false;

在我的渲染循环中，我必须在使用composer渲染场景之前手动清除它：

renderer.clear();
composer.render();

请查看我的笔记本以查看此操作： http://codepen.io/jaamo/pen/BoKXrL

- user3201996

---

抱歉，"rip pen example" 的意思不太清楚，请提供更多上下文或详细信息。 - low_rents

Answer 2

“Bloom” 是指一种模糊的图像，叠加在主渲染图像之上。要创建附带图像中所示的效果，您可能需要更多的动态范围。

- pailhead