創作內容

10 GP

【教學】距離場教學 第四章 - 距離辨識

作者:is樂小呈│2021-07-29 15:16:51│巴幣:23│人氣:69
標準化空間,大小為 10、距離場上色

繪製距離環
我們為距離場的內外繪製上了不同的顏色用於辨識,但除了形狀自身之外,我們也想知道他位置的距離值,以便我們判斷函數計算正不正確。

因此,我們可以每隔一段距離就畫出一線條,來告訴我們那裏的距離。我們透過取小數函數 frac ,每隔一段距離就畫出重複的圖形。


將函數套用到距離計算上,請注意這裡輸入給函數的 distance 沒有進行無條件進位 :D



呈現這個結果的原因是 frac 會將輸入值取小數,這讓整個距離的範圍在由 0 到 1 之間不斷重複。


雖然它達到了顯示距離的目的,但看起來實在有夠醜的,我們只需要每一段距離畫一條線即可。添加一項屬性作為線條厚度,我們根據厚度繪製適當的線條即可。



而畫線的部分,我們使用閥值函數 step 從原本 0 到 1 的數值中過濾出想要的部分,只有每段的當距離小於厚度閥值時才會畫出線段



好看多了,每隔一段距離畫一圈線段,第幾圈就表示當前的位置是多少。


最後,我們只需要將原本距離場的顏色乘回去就大功告成。



這章教會了你們如何繪製距離環,距離環可以用來檢視函數計算是否正確,後面將會省略重複的部分。

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 0 篇留言

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

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

前一篇:【教學】距離場教學 第三... 後一篇:【教學】距離場教學 第五...

追蹤私訊切換新版閱覽

作品資料夾

cxz0725所有人
平安喜樂看更多我要大聲說昨天14:51


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

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