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

【问题标题】：How to add motion blur (non-zero exposure time rendering) in Three.js?如何在 Three.js 中添加运动模糊（非零曝光时间渲染）？
【发布时间】：2016-01-14 01:13:08
【问题描述】：

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

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

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

非常感谢任何帮助！

【问题讨论】：

标签： three.js glsl webgl post-processing

【解决方案1】：

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

创建一个包含N 图像的FIFO。
在每个场景内重绘（假设 fps 不变）
1. 如果 FIFO 已满，则丢弃最旧的图像
2. 将原始渲染场景图像放入FIFO
3. 将FIFO中的所有图像混合在一起
  
  如果您有很大的N，那么为了加快速度您还可以将累积混合图像存储在 FIFO 中的所有图像中。向其中添加插入的图像并从中减去删除图像。但是目标图像必须有足够的颜色位来保存结果。在这种情况下，您会渲染除以N 的累积图像。
4. 将混合后的图像渲染到屏幕上

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

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

【讨论】：