如何在Three.js中添加运动模糊（非零曝光时间渲染）？

Question

我正在努力实现这个效果：

https://dl.dropboxusercontent.com/u/8554242/dmitri/projects/MotionBlurDemo/MotionBlurDemo.html

但我需要将它应用于我的Three.js场景，特别是点云物质（粒子）或单个粒子。

任何帮助都非常感谢！

Answer 1

如果您想要“物理上正确的”方法，那么

1. 创建N图片的 FIFO 。

2. 在每个场景重绘中（假设常量fps）

   1. 如果 FIFO 已经完全抛出最旧的图像
   2. 将原始渲染的场景图像放在 FIFO
   中

   3. 将 FIFO 中的所有图像混合在一起

      如果你有大N那么加快速度你可以将累积混合图像存储在FIFO内的所有图像中。将插入的图像添加到其中并减去从中删除的图像。但目标图像必须有足够的颜色位来保存结果。在这种情况下，您渲染累积图像除以N。

   4. 将混合图像渲染到屏幕

对于常数 fps ，曝光时间为t=N/fps。如果您没有 fps ，那么您需要使用可变大小 FIFO 并将渲染时间与图像一起存储。如果 FIFO 内的图像渲染时间总和超过曝光时间，则抛出最旧的图像...

这种方法需要相当多的内存（图像 FIFO ），但不需要任何额外的处理。大多数模糊效果会在几何着色器内部伪造所有这些，或者通过 CPU 来模糊或渲染影响性能的移动对象，有时渲染时有点复杂。