創作內容

14 GP

【教學】距離場教學 第三章 - 距離著色

作者:樂小呈│2021-07-29 15:14:48│巴幣:28│人氣:224
標準化空間,大小為 10

內外分辨
原本的黑白太單調了,我們可以為它們上不同顏色 !

建立顏色屬性以及相對應的變數,為了方便區分形狀內外,所以我們用兩種顏色為距離場上色,要用什麼顏色就由你決定吧,記得到屬性面板上調整,教學這裡會使用紅色以及綠色。



顏色和距離可以很直觀想到上色的方法,只需要簡單的判斷距離大於還是小於 0 ,判斷像素是在形狀的內部側還是外側,以此來選擇顏色。我們可以透過簡單的插值函數來達到目的,只需要將距離作為插值的權重來選擇顏色。




呈現這種奇怪結果的原因是我們直接將距離作為 lerp 的權重值,由於距離值的範圍會超出 0 和 1 之間,再加上無條件進位而導致插值計算出奇怪的結果。

所以我們只需要將權重限制在合理的範圍內即可,可以使用限制函數 saturate 將範圍限制在 0 ~ 1 之間。



這篇是基本的上色方法,後面將不再重複

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

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

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

前一篇:【教學】距離場教學 第二... 後一篇:【教學】距離場教學 第四...

追蹤私訊切換新版閱覽

作品資料夾

yvonne40528歡迎來讀新詩ゝω・
是哪一盞清脆光點/指引我穿越一叢叢幽暗怒火/腳步並非已無朦朧/深淵的勸誘依舊格外香甜魅惑看更多我要大聲說5小時前


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

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