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

Question

我正在尝试实现这种效果：

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

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

非常感谢任何帮助！

Answer 1

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

1. 创建图像的FIFO。N

2. 在每个场景内重绘（假设恒定 fps）

   1. 如果FIFO已满，则丢弃最旧的图像
   2. 将原始渲染的场景图像放入FIFO

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

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

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

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

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