創作內容

11 GP

【教學】距離場教學 十六章 - 進階繪圖

作者:樂小呈│2021-08-02 16:05:10│巴幣:22│人氣:177
標準化空間,大小為 10

進階繪圖

更進階的圖形繪製方法,透過距離場邊緣的過度範圍來作出修改。

光暈
畫出了精美的圖形和富有層次感的動畫之後,我們還能做什麼讓距離場看起來更酷 ? 還用說,當然是添加一個發光效果啊 !

而且距離場的繪製特性讓我們能很方便的給圖形添加光暈效果,不需要複雜的額外計算,為了解說其原理讓我們先回到一開始的矩形,但這次不將距離值無條件進位。

可以看到在圖形的外圍有一個短暫的過度,那是距離在 0 ~ 1 時所產生的。


我們可以利用這段過度的漸層,只要將他的強度弱化看起來就會像微微散發的光暈。

首先我們將要做為光暈的部分獨立出來,可以使用剃除的算法來達到,將完整的距離值剃除掉進行進位後距離值,就可以取的邊緣過度的部分了。



接下來我們要將這段光暈的強度減弱,為了做出非線性的弱化需要使用 pow 函數。



最後只需要將他添加回原本的距離場上,進行上色就完成了。



膨脹
目前為止的多邊形距離場都是菱角分明的,如果想要讓形狀的頂點別那麼尖銳怎麼辦 ? 同樣,距離場特性能夠簡單的幫助我們做到。

再次回到一開始的形狀,我們能夠明顯的看到在原本形狀之外,因為距離計算的原因過度部分的頂點是個圓角。


只是過渡的部分會被後續無條件進位給剃除掉,所以我們在最終圖形中看不到,如果要將這部分也加入圖案的話,我們可以讓形狀膨脹。

只要在單個形狀計算完成後,再次減去膨脹值就可以做到了。



可以看到中間的主形狀因此獲得圓角了,只要再進行進位剃除後就大功告成。



輪廓線
最後的進階繪圖,為圖形添加輪廓線條,這部份將透過閥值函數來達成,首先添加外輪廓顏色和厚度的屬性。



回到一開始的地方,但是這次使用 step 將過度變為硬邊。



最後我們將外輪廓上色後,添加回原本的形狀就有不同顏色的輪廓線了。



以上就是透過形狀邊緣的過度進行操作的教學,不過使用這種作法時有幾個點要注意。
  • 我們是透過距離場邊緣的漸變來做出操作,所以效果的大小不受圖形本身的大小引響,而是固定的距離。因此一個大小為零的 "點" 也會產生效果。如果距離場有動畫的話,會需要搭配動畫開關或減弱這些修改,比免出現多餘的色點。
  • 反鋸齒的算法因為回傳距離值經過修改,所以會導致操作無效,所以進行這類操作以前要先將數值隔離。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5226422
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:SDF|Shader

留言共 1 篇留言

鏡野七罪

08-02 16:44

樂小呈
[e38]08-02 16:46
我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:【教學】距離場教學 十五... 後一篇:【教學】距離場教學 十七...

追蹤私訊切換新版閱覽

作品資料夾

airsky00大家
剩下十人了,能寫完嗎?加油啊~~看更多我要大聲說21小時前


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

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