2019-11-3 seo達人
說到渲染引擎就不得不提到延遲渲染，基本上一個引擎如果沒有實現(xiàn)延遲渲染就不能說是一個好的渲染引擎，不過可惜的是three.js并沒有實現(xiàn)延遲渲染（ps：呼吁作者趕緊實現(xiàn)mrt吧）。由于沒有mrt和延遲渲染，本來不打算寫后處理的，但是即使沒有，我們也希望能實現(xiàn)一些炫酷的效果，那就在現(xiàn)在的基礎(chǔ)上對three.js進行簡單的改造來實現(xiàn)一套高性能的后處理渲染器吧。
要實現(xiàn)后處理我們首先要考慮需求，是否要兼顧移動端，是否要兼顧大屏（4k），是否要支持webgl1，是否要在各種顯卡中都有一個還算不錯的性能。目前我主要考慮的是：性能要好，可以兼顧大屏，不打算完美支持webgl1，盡量多使用webgl2的特性。后面所有的性能測試為都以N卡作為性能測試指標，先不管AMD卡（AMD抗鋸齒的處理性能會高些的，但是動態(tài)處理性能會偏低，這里有很多細節(jié)問題）
好了，我們關(guān)心的是好的性能，盡量多使用webgl2的特性，盡量能兼顧大屏（這里主要是要注意顯存問題），現(xiàn)在開始準備我們的渲染器吧
要完成一個后處理渲染器，我們首先要考慮抗鋸齒，常用的有超采樣技術(shù)和多重采樣技術(shù)，具體可以看這個介紹 添加鏈接描述
three.js已經(jīng)實現(xiàn)了SSAA，SMAA，TAA這三種超采樣技術(shù)，效果都還不錯，具體實現(xiàn)three.js都有例子，就不詳細說明了。SSAA抗鋸齒效果是最好的，但是性能最差，現(xiàn)實情況下根本無法使用。SMAA性能會好一些，2000個物體差不多掉15幀吧（SMAA比FXAA計算稍微復(fù)雜一些，SMAA研究的少，不知道能不能解決line的鋸齒問題，如果知道的歡迎留言）。SMAA效果基本可以接受，但是2000個物體掉的幀率還是有點多，這個也不是我們首選的。TAA效果很好，如果場景里面很少動的東西，它是個不錯的選擇，如果有運動的物體或者動畫等等，基本上抗鋸齒就沒效果了，理論上應(yīng)該可以實現(xiàn)動態(tài)的TAA，但是用目前的技術(shù)很難實現(xiàn)。所以TAA先不考慮加入我們的后處理渲染器（真實使用場景下一般都有動畫或者貼圖流動效果，所以TAA無法使用）。
SMAA:效果不錯，開銷15幀左右（2000物體）
SSAA：效果最好，開銷太大 （2000物體基本已經(jīng)沒有了幀率）
TAA：效果基本和SSAA差不多，但目前只有靜止的時候才有效果
再來看看多重采樣MSAA，這個特性必須使用webgl2，是webgl提供的方式，和瀏覽器自身的抗鋸齒原理一樣，效果不錯，和正常渲染的結(jié)果沒有區(qū)別，性能開銷也不是太大，前提是我們不要使用stencilbuffer。而且three.js MSAA這塊的釋放有些小問題，詳細可以在deallocateRenderTarget這個接口中進行修改。現(xiàn)在我們可以把MSAA作為主要的抗鋸齒技術(shù)。MSAA雖然性能開銷不大，但是唯一的不足是比較吃顯存，如果是大屏，而且顯卡不好的話還是容易崩，無法開啟。因此我們還要繼續(xù)選擇一個開銷小不吃顯存的抗鋸齒（當然也可以考慮SMAA，目前由于幀率開銷較大（2000物體掉了15幀左右），我們不考慮加入SMAA）
MSAA：基本沒有幀率開銷，效果不錯，但是耗費顯存（2000物體）
最后的備選方案就是FXAA了，F(xiàn)XAA可以參考這個文章：添加鏈接描述講的很詳細，F(xiàn)XAA性能開銷很小，但是效果很一般，特別是細線的鋸齒沒法解決，轉(zhuǎn)動攝影機邊緣的閃動效果也無法解決，而且還有一個問題是由于FXAA就是靠邊緣模糊抗鋸齒，所以必然導(dǎo)致畫面會略有模糊。但是它最大的好處是開銷很小而且不耗費顯存，并且集成到后處理渲染器中最簡單。但是當顯存不足顯卡太差的時候它還是個不錯的選擇。因此需要加入FXAA。
FXAA：效果一般，開銷很小，無法解決線的鋸齒問題，帶來模糊（2000物體）
我們看了下各大引擎，基本每個引擎都實現(xiàn)了FXAA，還有很多引擎實現(xiàn)了FXAA3，F(xiàn)XAA3效果會好一些，但是依然無法解決線的問題。cesium的抗鋸齒就是完全采用FXAA3，效果還可以接受，所以目前我們把cesium的fxaa3_11拿過來用，最終引擎選擇使用MSAA加FXAA3_11的抗鋸齒策略（當然SMAA和TAA也可以選擇）。
藍藍設(shè)計的小編 http://www.0391cbd.com