創作內容

14 GP

【教學】距離場教學 第九章 - 進階形狀

作者:樂小呈│2021-07-31 16:28:08│巴幣:28│人氣:175
標準化空間,大小為 10、距離場上色、距離環

更多進階形狀
目前為止,扣掉使用組合情況我們也只有三種形狀距離場,但有了進階的空間操作後,我們就能畫出更複雜的形狀了。

扇形
扇形,簡單來說就是將圓形剔除掉多餘的角度。我們先建立一個函數接收 uv、半徑以及開闊度數,將度數轉換成弧度,再來是將 uv 標準化取得方向。


首先我們要做的是判斷 uv 是不是在扇形弧度範為之內。

標準化向量的 x 分量就是朝 x 軸進行點積投影的結果,也是 cos(theta) 會產生的數值,我們可以透過這點來判斷 uv 是不是在弧度範圍內。


使用形弧度的 cos 值與標準化 uv 的 x 值進行判斷。


取得正確的扇形範圍後,我們要把距離計算補回去,扇形的距離就是半徑而已。



扇形本身的距離計算完成了,接下來我們要計算兩側的硬邊的距離,側邊就和之前線段的計算一樣,唯一不同的是距離計算只有在形狀單側。

首先我們要取得側邊的向量,由於我們已經有弧度了,所以只需要使用 sincos 函數取得就好。


再來就是將 uv 投影至側邊向量上,並根據投影大小判斷要使用哪部分的距離值,這部分的計算和線段大同小異,所以就不多贅述。



現在上半部的計算正確了,因為扇形是對稱的,所以下半部只需要透過鏡像操作就可以完成。



至於要將扇形放在不同位置或是轉向不同角度,只需要事先完成操作就好,這也是為甚麼我一開始省略掉這部分,將角度這項元素加入扇形計算只會讓情況更複雜。



正多邊形
相信一些人應該在前幾篇的進階空間操作中就對正多邊形有想法了,沒錯,就是放射狀平鋪 ! 接下來教學會帶各位真正實作一次正多邊形的距離場。

首先回到放射函數那裡,我們要讓他回傳其他必要的參數以利後續計算 - 表面法線


讓放射函數傳出表面法線,使用 out 傳出放射平餔一半角度時產生出的向量,並另外建立一個和原本一樣不需要 out 的多載。



在多邊形計算前先將 uv 放射平餔,並且接收表面法線。


然後我們只需要將 uv 投影至法線上,就能夠取得與多邊形表面的距離了。


將 uv 投影至表面法線,並像圓形計算一樣減去多邊形半徑。




大功告成 ? 不對,從圖片中看的出來,三角形很明顯超出我們要的半徑了。

造成這種錯誤的原因是,因為我們距離計算方法是取得表面距離後直接減去半徑,半徑計算出的結果變成中心點到最近表面的距離,也就是形狀的內切圓。


正確的計算中,半徑應該要是正多邊形的外切圓,為了修正這點我們必須先將原本的半徑投影到表面法線上,這樣才能取得正確的半徑。


將建立一個 x 為半徑的向量投影到法線上,並乘上原本的半徑,完成正確的表面距離計算。



以上教了額外幾種進階形狀,有了這些形狀又組合出更多效果了,如果還想知道怎麼畫出更多形狀的話,這裡提供一個參考資料。

Inigo Quilez

章節題目
多邊形的部分還有一步驟沒完成,你們知道是什麼的 ~


在來,請嘗試用到本章為止教到的部分,自由發揮 :D

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 1 篇留言

御安鴨·摸頭害鴨哭
膜拜

07-31 21:55

樂小呈
[e16]07-31 21:56
我要留言提醒:您尚未登入,請先登入再留言

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

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

追蹤私訊切換新版閱覽

作品資料夾

airsky00大家
與一個罪犯談判的方式,就他媽誰理他!看更多我要大聲說9小時前


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

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