用three.js构建自己的后处理渲染器第一篇---抗锯齿的选择

说到渲染引擎就不得不提到延迟渲染，基本上一个引擎如果没有实现延迟渲染就不能说是一个好的渲染引擎，不过可惜的是three.js并没有实现延迟渲染（ps：呼吁作者赶紧实现mrt吧）。由于没有mrt和延迟渲染，本来不打算写后处理的，但是即使没有，我们也希望能实现一些炫酷的效果，那就在现在的基础上对three.js进行简单的改造来实现一套高性能的后处理渲染器吧。
要实现后处理我们首先要考虑需求，是否要兼顾移动端，是否要兼顾大屏（4k），是否要支持webgl1，是否要在各种显卡中都有一个还算不错的性能。目前我主要考虑的是：性能要好，可以兼顾大屏，不打算完美支持webgl1，尽量多使用webgl2的特性。后面所有的性能测试为都以N卡作为性能测试指标，先不管AMD卡（AMD抗锯齿的处理性能会高些的，但是动态处理性能会偏低，这里有很多细节问题）
好了，我们关心的是好的性能，尽量多使用webgl2的特性，尽量能兼顾大屏（这里主要是要注意显存问题），现在开始准备我们的渲染器吧
要完成一个后处理渲染器，我们首先要考虑抗锯齿，常用的有超采样技术和多重采样技术，具体可以看这个介绍 添加链接描述
three.js已经实现了SSAA，SMAA，TAA这三种超采样技术，效果都还不错，具体实现three.js都有例子，就不详细说明了。SSAA抗锯齿效果是最好的，但是性能最差，现实情况下根本无法使用。SMAA性能会好一些，2000个物体差不多掉15帧吧（SMAA比FXAA计算稍微复杂一些，SMAA研究的少，不知道能不能解决line的锯齿问题，如果知道的欢迎留言）。SMAA效果基本可以接受，但是2000个物体掉的帧率还是有点多，这个也不是我们首选的。TAA效果很好，如果场景里面很少动的东西，它是个不错的选择，如果有运动的物体或者动画等等，基本上抗锯齿就没效果了，理论上应该可以实现动态的TAA，但是用目前的技术很难实现。所以TAA先不考虑加入我们的后处理渲染器（真实使用场景下一般都有动画或者贴图流动效果，所以TAA无法使用）。
SMAA:效果不错，开销15帧左右（2000物体）
SSAA：效果最好，开销太大 （2000物体基本已经没有了帧率）

TAA：效果基本和SSAA差不多，但目前只有静止的时候才有效果

再来看看多重采样MSAA，这个特性必须使用webgl2，是webgl提供的方式，和浏览器自身的抗锯齿原理一样，效果不错，和正常渲染的结果没有区别，性能开销也不是太大，前提是我们不要使用stencilbuffer。而且three.js MSAA这块的释放有些小问题，详细可以在deallocateRenderTarget这个接口中进行修改。现在我们可以把MSAA作为主要的抗锯齿技术。MSAA虽然性能开销不大，但是唯一的不足是比较吃显存，如果是大屏，而且显卡不好的话还是容易崩，无法开启。因此我们还要继续选择一个开销小不吃显存的抗锯齿（当然也可以考虑SMAA，目前由于帧率开销较大（2000物体掉了15帧左右），我们不考虑加入SMAA）
MSAA：基本没有帧率开销，效果不错，但是耗费显存（2000物体）

最后的备选方案就是FXAA了，FXAA可以参考这个文章：添加链接描述讲的很详细，FXAA性能开销很小，但是效果很一般，特别是细线的锯齿没法解决，转动摄影机边缘的闪动效果也无法解决，而且还有一个问题是由于FXAA就是靠边缘模糊抗锯齿，所以必然导致画面会略有模糊。但是它最大的好处是开销很小而且不耗费显存，并且集成到后处理渲染器中最简单。但是当显存不足显卡太差的时候它还是个不错的选择。因此需要加入FXAA。
FXAA：效果一般，开销很小，无法解决线的锯齿问题，带来模糊（2000物体）
我们看了下各大引擎，基本每个引擎都实现了FXAA，还有很多引擎实现了FXAA3，FXAA3效果会好一些，但是依然无法解决线的问题。cesium的抗锯齿就是完全采用FXAA3，效果还可以接受，所以目前我们把cesium的fxaa3_11拿过来用，最终引擎选择使用MSAA加FXAA3_11的抗锯齿策略（当然SMAA和TAA也可以选择）。
未完待续，欢迎提问。