創作內容

11 GP

【教學】距離場教學 十七章 - 進階上色

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

進階上色
目前為止的距離場圖形只有用到兩種顏色,距離場內和距離場外,不過我們還可以使用更多種顏色來繪製距離場圖形。

組合上色
首先我們可以讓不同距離場有各自的顏色,例如紅色的矩形和綠色的圓形,只需要判斷點是在哪個距離場中即可。回到一般的距離場計算,先繪製出兩個疊加圖形的距離。



複習一下組合疊加是怎麼計算的,我們透過取小值來合併兩個距離場形狀。


因此,如果想讓形狀有各自顏色,只需要在判斷的時候也一併區分要繪製的像素顏色就好。




可以看到,雖然形狀現在有各自的顏色,但是內部交界處的效果和想像的不同,主要是因為距離場內測的計算不太正確,但是在只有單色時這個問題不會影響結果。

這個問題沒辦法修復,因為內側的交界情況難以預測,所以組合上色通常會是在三維空間中繪製距離場時才使用的,因為三維中不會看到形狀內部的情況。

所以當我們要在二維中使用組合上色時,必須避免兩個發生交界的形狀使用不同顏色。

覆蓋上色
和上個上色方法的效果類似,只不過這次是直接將新顏色覆蓋上去,使用距離來插值新顏色和舊 (背景) 顏色就能達到覆蓋的效果。


首先將顏色指定為背景,上色時使用形狀的距離一層一層覆蓋上去即可。



使用這種做法就不用擔心交界的問題了,唯一的限制只有順序會直接影像結果,後畫的形狀會蓋過先前的所有圖形。

計算上色
在前面的章節有提到,我們能夠透過參數對距離場的任何計算進行操作,甚至是顏色也行。再次使用線段舉例,我們可以讓線的兩端在不同顏色間產生過度。


同樣使用投影的距離值作為讓色參考,首先讓原本的線段函數回傳投影值。


建立一個接收和回傳顏色的線段函數多載,並調用原本的函數取得距離和投影值,將投影的數值除以線段長度取得比例,並使用比例值當作插值的權重。


最後調用上色的距離場函數繪製線段。



而當然和其他修改一樣,計算上色也不局限於線段,實際上可以將任何數值作為插值的權重,像是角度,以圓環為例將弧度作為顏色插值的權重。



噪聲上色
使用噪聲計算來替顏色進行微小修改,讓顏色不要那麼單調,不過噪聲的計算已經超出教學的範圍了,所以這裡提供簡單的噪聲算法做為參考。



將計算結果作為顏色上的噪點。



其實噪聲的數值範圍可以在小一點,這裡設 0.4 的範圍主要還是方便展示而已,實際上 0.1 ~ 0.2 就夠了,你們也可以換個顏色看看,向是棕色或灰色就會產生木質和金屬的質感。

貼圖上色
除了單一的顏色以外,我們也可以使用紋理貼圖為距離場著色,而距離場的運算特性同樣也能輕易地做到。首先添加一項 texture 屬性給著色器,並自行放上喜歡的圖片。


再來是建立一像貼圖著色的距離場計算函式,輸入貼圖和形狀參數回傳顏色。



註 : 圖片拉長的原因是 texture clamp 造成的,不用擔心。

由於空間操作的關係,我們函數計算的 uv 輸入是經過縮放的,因此我們得先將圖片放大回原本的大小。

放大的部分很簡單,在開頭幾章的縮放操作中就有提到了,只需要除以大小即可,不過要注意矩形距離場輸入的大小為直徑,所以還得再次除以二才能將 uv 變回原本的大小。



現在大小正確了但位置不正確,因為 uv 是從空間中心的 (0, 0) 開始的,所以紋理的 uv 運算也會從空間正中心開始,我們得要將 uv 朝正確的方向偏移。


偏移的部分相信各位還沒忘,要往左下角偏移的話就用加的,只要加上形狀大小即可。



接著只剩一步 - 完成距離場計算,我們的目的是透過貼圖為距離場著色,也代表只有距離場會使用到貼圖的顏色,其他部分都不需要。

如何剔除不需要的部分 ? 只要使用計算出的距離值就可以了,我們可以透過距離直當作上色的遮罩,將不需要的部分過濾掉,對貼圖顏色和背景顏色進行插值就能完成。



大功告成,如此一來我們就能為距離場畫上貼圖了,並且直接和空間操作相容,如果想繪製不同圖形也只需要修改距離場算法即可。



雖然這樣就很不錯了,但其實可以再更進一步,目前的上色算法是每次計算距離場上色就會強制貼圖顏色蓋上去,因此當上色時遇到半透明貼圖,那他的透明度會沒有效果,所以我們可以將上色計算加入不透明運算,原理就不多解釋了。



以上就是進階的距離場上色方法,只要搭配進階上色使用又能夠畫出更精緻的圖形了。

十八章 - 分形繪製
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5226426
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

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

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

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

追蹤私訊切換新版閱覽

作品資料夾

lin881205大家
小屋不定期更新西洋歌曲推廣與Reddit鬼故事翻譯唷!歡迎進來參觀。看更多我要大聲說昨天21:52


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

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