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