2019-11-3 seo達人
說到渲染引擎就不得不提到延遲渲染，基本上一個引擎如果沒有實現延遲渲染就不能說是一個好的渲染引擎，不過可惜的是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這個接口中進行修改?，F在我們可以把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也可以選擇）。