創作內容

13 GP

【教學】距離場教學 第零章 - 基本設置

作者:is樂小呈│2021-07-28 14:57:22│巴幣:44│人氣:158
前置作業和注意事項

教學開始前的前置作業,後面部分不會在重複,請視情況自己執行

設置資料
環境 Unity 2D
版本 Unity 2019.4.2f1
使用語言 Shaderlab (HLSL、CG)、C#
腳本工具 Visual Studio Code
紀錄工具 Unity Recorder
攝影機比例 1 : 1

初始設置
首先在場景建立一個 Quad 作為渲染目標,設置一顆材質球和 Image Shader,並隨便放一張 Texture 確保 Material 能夠渲染。


選 quad 的原因是因為它的大小固定 1 unit,不像 sprite 會受到 texture 影響,但事實上這個著色器也能夠用在 SpriteRenderer 上,沒有硬性規定要使用哪種。

把 camera 的 size 改為 0.5,讓圖能夠剛好填滿 game view。


也可以直接在 scene view 看效果,這項設置的目的只是我要錄影的關係而已。然後要注意 game View 中只有在 paly mode 時才看的到時間相關的著色器變數效果 。

腳本設置
開啟腳本,如論你要用什麼工具都可以,我這裡使用的是 vscode。

為了確保渲染精度,我們會在片段 frag 著色器上面進行計算,所需的資料只有 uv。首先繪製出 uv 空間,其他部分保持不動就好。



標準化空間
原本的 uv 空間是從左下開始,從 0 ~ 1 的數值範圍,我們希望將圖畫在正中心,所以要將原點設置回圖片的中心,將範圍變成 -1 ~ 1。

這裡提供一個變數 scale,作為空間大小的輸入值,先用 1 即可,之後視情況更改。



教學內容偏長,極度不建議把全部東西都寫在同一個腳本裡,可以自己視情況使用新的腳本,只要記得完成初始設置以及複製使用到的距離場函數就好。

以上就是教學開始前的初步設置,後面的部分將省略這項作業,請注意每篇開頭的提醒。

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

相關創作

同標籤作品搜尋:SDF|Shader

留言共 4 篇留言

御安鴨鴨
有點好奇i.uv.xy裡的xy是指什麼?是指使用xy象限嗎?
仔細看了一下標準化空間的那段code...好像...怎麼有股濃濃的ntr味道www
應該是我會錯意了www
這是我的理解不知道正不正確:
一家之主scale,有個老婆uv。有一天老婆uv發現家裡醬油沒了(未指定植),於是uv跑去i家借醬油,但是i並不只是想要借醬油這麼簡單,於是i與uv發生了xxx關係,於是uv體內有了i的種(i.uv),結果連醬油都沒借到,反倒是scale氣沖沖拿著東西(值1)跑到i家理論,但是說不過i,scale只好堅強的帶uv回家,並且生下了原本應該是i家的col(-1,1)

08-03 04:47

is樂小呈
xy是平面座標的xy軸08-03 09:03
is樂小呈
沒有,反了是原本的 i.uv 變成 scale 的形狀08-03 09:03
御安鴨鴨
可喜可賀可喜可賀

08-03 04:48

御安鴨鴨
另外:float uv = spaceNormalize (i.uv,scale);
這邊的i.uv有點搞不太懂,是單純給他一個0還是(0,0)帶進去?或是兩個東西其實是一樣的??

08-03 04:53

is樂小呈
emmm 有點難解釋,他不是給定 "一個" 值,而是好幾個08-03 09:04
is樂小呈
你就想像成區間吧,原本的 i.uv 是 0~1的區間,spaceNormalize 就是把 0~1 變成 -1~108-03 09:05
is樂小呈
這部分要有一些著色器知識比較好懂08-03 09:05
御安鴨鴨
等等該不會是:(x,y), √x²+y²求值??

08-03 05:11

is樂小呈
nope ,這是後面才會用到的距離計算,現在沒有08-03 09:06
我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:【教學】距離場的數學原理... 後一篇:【教學】距離場教學 第一...

追蹤私訊切換新版閱覽

作品資料夾

turkeyc00秋天
你來了嗎?看更多我要大聲說4小時前


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

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