創作內容

32 GP

【教學】距離場的數學原理以及圖形繪製方法

作者:樂小呈│2021-07-27 15:53:58│巴幣:1,121│人氣:562
序章
為了能支撐住畫面渲染的效能消耗,GPU 中通常會有多個核心,用來同時間平行運算數個像素的顏色。也因為並行的關係,正常情況下每個像素的運算是被孤立的,像素不能和其他像素溝通,只能夠知道自己所需的訊息,例如 : 位置。

在這種限制之下,也使得一種特別的運算方式得以實現 - 距離場 Signed Distance Function

這是一種能夠描述空間中任意位置對於虛擬形狀最接近表面的距離的函數,看似單純但距離場的組合特性以及空間操作性為它帶來無限的可能。運用在圖像渲染中可以不靠一張貼圖就 "計算出" 複雜的形狀,甚至是分形。也因此 SDF 算法是深受 programming artists 喜愛的數學工具,尤其在 shadertoy 上能看到各種令人驚豔的藝術創作。

這個教學會從頭解說距離場的數學原理,如何使用距離場繪製圖形和動畫,並最終帶各位製作出一個完整的 2D 距離場動畫。

是的,純靠數學計算,實時渲染

基礎知識
閱讀這篇教學會需要基本的著色器以及線性代數知識,才能夠有效運用,裡面會省略基本的著色器數值特性,以及線代的數學算式。但就算不懂這些基礎也沒關西,可以只讀解說邏輯的部分,它仍然很有趣。

著色器的部分需要了解的有
  • 著色器的變數計算特性以及函數功能
  • 向量空間與色彩空間的轉換特性
線性代數需要了解的部分有
  • 線性代數的圖形意義以及向量空間的邏輯
  • 合成矩陣運算順序對結果造成的影響
  • dot product (點積、內積) 的向量投影性質
  • cross product (叉積、外積) 的表面法線計算

章節題目
根據教學進度,中間會穿插一些測驗題,會附上結果的圖,但不會有程式碼,請加油 :P

錯誤備註
由於作者本人學藝不精,對著色器的知識不夠齊全,教學中有些部分自作聰明將判斷式改為 lerp step 等函數運算,但事實上這對效能的幫助不大,甚至還會造成負優化,所以在過程中看到這部分的修改時可以忽略沒關係 (如果我沒刪乾淨)


教學頁面
第零章 - 基本設置
第一章 - 初步理解
第二章 - 距離計算
第三章 - 距離上色
第四章 - 距離辨識
第五章 - 更多形狀
第六章 - 位移旋轉
第七章 - 形狀組合
第八章 - 空間操作
第九章 - 進階形狀
第十章 - 組合範例
十一章 - 動畫方法
十二章 - 動畫範例
十三章 - 動畫緩動
十四章 - 動畫時間
十五章 - 修正鋸齒
十六章 - 進階繪圖
十七章 - 進階上色
十八章 - 分形繪製
十九章 - 最終範例


特別感謝
派大星教授加博士先生 (嗚嗚我好想你

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

相關創作

同標籤作品搜尋:著色器|Shader|距離場教學|數學

留言共 7 篇留言

樂小呈
這是一萬 GP 感謝的第四個系列,也是壓軸,但這系列ㄉ閱讀門檻就比較高了[e7]
完整教學就像上面列的有 20 章,接下來一兩周會慢慢搬完[e19]
https://home.gamer.com.tw/creationDetail.php?sn=5217718

07-27 15:56

在意你就輸了
期待後續更新

07-27 17:00

樂小呈
敬請期待 [e7]07-27 18:05
%%鼠 拒收病婿
[e32][e32][e32][e32][e32]

07-27 18:04

樂小呈
[e19]07-27 18:05
潘柏爾
看得霧煞煞XD
你快變成亞洲sebastian league了

07-27 18:39

樂小呈
真的超佩服他的,我還差的遠拉www07-27 19:06
蜥智(CizaHuang)
好期待之後的更新!

07-27 21:28

樂小呈
敬請期待 ~~07-27 21:31
♙♲⚙\~O_O~/⚙♲♙
只用過CUDA玩GPGPU、openGL、webGL、知道rendering pipeline,但沒在寫unity的話,看這系列是不是直接出局啊?

07-30 21:32

樂小呈
應該不會,算法通用的07-30 21:35
樂小呈
如果你會 glsl 的話也可以直接到 shadertoy 上做,只是要改些關鍵字而已 float2 > vec207-30 21:35
御安鴨·摸頭害鴨哭
我好興奮啊!

08-03 02:29

樂小呈
[e38]08-03 09:07
我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:【筆記】設計模式筆記 -... 後一篇:【教學】距離場教學 第零...

追蹤私訊切換新版閱覽

作品資料夾

huaing123孬種🙂
讓我等到這麼晚,然後還是夾著尾巴落跑了⋯⋯敢連續兩週搞我、卻不敢承擔至少補償一點的責任?🙂看更多我要大聲說昨天01:55


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

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