創作內容

13 GP

【教學】距離場教學 十五章 - 修正鋸齒

作者:is樂小呈│2021-08-02 16:03:53│巴幣:26│人氣:63
標準化空間,大小為 10、距離場上色

反鋸齒修正
在繪製圖形的過程中,相信各位都有注意到圖形的邊緣會是塊狀的,在視覺上相當不美觀,所以要想辦法將它修正。當我們把畫面放大時可以很清楚的看到的鋸齒。


簡單解釋一下導致邊緣鋸齒原因。這是因為我們的上色方法透過無條件進位 ceil 和範圍限制 saturate 將距離值簡單的分割成兩種數值,透過 0 和 1 來判斷上不上色。


當像素上色只有畫與不畫時,就注定了圖形會有醜陋的鋸齒邊緣。

SmoothStep
為了避免邊緣鋸齒,我們可以善用距離值來做出平滑的過度,首先要做的就是將原本只有兩種可能的上色,修改為能夠根據距離回傳適當過度值的計算。

回顧一下沒有無條件進位時畫出的圖形,可以看到原本的邊緣有一段在 0 ~ 1 之間的距離過度。



利用這段過度就能夠畫出平滑的邊緣了,我們可以使用平滑函數 SmoothStep 取代原本的進位 ceil 達成目的。


但我們不需要那麼寬的過度範圍,只需要在邊緣有微小的柔和過度就好,可以為函數所以提供一個適當的數值作為過度範圍。


透過平滑函數計算正確的過度值後,再使用插值回傳顏色。


將上色方法替換為反鋸齒後就能看到平滑的圖形邊緣了,注意現在不需要無條件進位了。



雖然現在不會再出現邊緣鋸齒,但將 "視角" 放到很近時反而會看到平滑函數的過度範圍。


這是因為在上面的計算中我們將過度範圍設置成定值,視角遠時這個範圍過小不會注意到,但當我們離圖形很近時,這個範圍就顯得過大了。

所以實際繪製時我們不應該使用定值作為過度範圍,我們可以透過像素之間計算出的距離值差距作為範圍,當差距大時(畫面遠)使用較大的範圍,反之畫面近時使用較小範圍。

要怎麼取得其他像素計算出的距離值呢 ? 可以透過著色器中的特殊函數 fwidth 做到,這個函數能夠自動插值相鄰像素計算時輸入進去的參數。

將本為定值的過度範圍改為與鄰近像素計算出的距離插值。


現在就算視角離圖片很接近也依然能有清晰平滑的過度了 !

以上就是對距離場圖形進行反鋸齒修正的做法。最後再提醒一次,因為反鋸齒的運算會需要透過微小的距離差異作為平滑範圍,這也代表計算中不能有任何進位或捨去等運算,否則會導致反鋸齒計算的效果不如預期。


引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5226420
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

13喜歡★angus945 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【教學】距離場教學 十四... 後一篇:【教學】距離場教學 十六...

追蹤私訊切換新版閱覽

作品資料夾

A108324049大家
小屋中的耽美血族小說更新了!!!喜歡奇幻耽美的你不能錯過QAQ看更多我要大聲說13小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】