創作內容

14 GP

【教學】距離場教學 第五章 - 更多形狀

作者:is樂小呈│2021-07-29 15:18:43│巴幣:31│人氣:113
標準化空間,大小為 10、距離場上色、距離環

矩形和線段
從開始到現在我們只有畫出圓形,為了讓事情有趣起來我們需要更多形狀。

線段
如果我們想畫出由兩個點連接而成的線段,情況就開始複雜了,要如何計算點到線段的距離 ?

首先我們可以將一條線段拆解為三個部分,線頭、線段、線尾,並判斷點最靠近的是線條的哪個部分。只要透過點積 dot product 進行投影,就能取的需要的數值。

透過兩點相減,取的線段指向的向量後,將要計算的位置投影至線段上。如此一來,我們就能透過投影結果,判斷出位置最接近的是線段的哪一部分


首先我們取得線段朝向的方向以及它的長度,用來後續計算。


再來將輸入的點投影至方向的向量上就能夠取得長度參考。


最後我們使用判斷式檢查長度,如果小於 0 就代表點離起點最近,反之大於線段長度就代表離線尾最近。距離線兩端的距離就和圓形計算一樣,記得要減去厚度。



線的兩端有了,接者我們需要將它連接起來,所以得計算黑色範圍的距離。點到線中段的距離計算也很簡單,同樣只需要使用投影的方法,但這次是投影到線段的法向量上。


使用外積 corss 函數取得線段朝向的法向量,並將點投影至法向量上的結果就是我們要的距離。不過這裡要注意的是,線段另一邊的投影結果會是負的,但我們不需要負的距離所以得進行絕對值。最後減去線段厚度就大功告成了。



線段還要注意的是,線頭線尾如果在同一點上的話,會導致無法預料的錯誤 (除以 0),我這裡沒有添加防呆計算,所以使用時要注意。

矩形
矩形的距離場,如果你們有做出(或思考)初步理解的題目的話,那作法大概是 uv.x > -size.x * 0.5 &&...,進行四次判斷檢查位置是不是在矩形內部。

而教學這裡即將讓你們接觸的就是距離場的第一個特性 - 空間操作性,一個落在空間中心的矩形,他會被四等分並平均分佈在四個象限中,意思是矩形完全對稱於座標軸。

距離場中我們不在乎點的真實位置,只在乎它相對於形狀最接近表面的距離,這代表我們不必真的在四個象限中進行計算,什麼意思呢 ? 請看下面的示意圖


我們可以使用絕對值將落在其他三個象限的位置全部映射到第一象限,這樣一來我們只需要在第一象限計算距離就好。

使用 abs 函數將輸入絕對值,並減去矩形大小,但兩個邊各自的的長度不同,所以最後要再使用 max 函數取得最近邊的距離。



於是矩形的距離場也大功告成 ?

不對,聰明的你們應該能看出問題,雖然矩形本身沒問題,但距離環告訴我們斜角的距離計算有誤。


章節題目

請試寫出正確的矩形距離場,提示 : 和線段一樣分成三等份。


第六章 - 位移旋轉
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5222467
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:SDF|Shader

留言共 1 篇留言

is樂小呈
基礎的部分差不多到這,接下來就是真正有趣的東西了[e2]

07-29 15:42

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

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

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

追蹤私訊切換新版閱覽

作品資料夾

huaing123垃圾霸凌仔
每次跟家裡人出去玩,總是沒好事= =看更多我要大聲說昨天23:26


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

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