小屋創作

日誌2021-07-27 15:53

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

作者:is樂小呈

序章
為了能支撐住畫面渲染的效能消耗,GPU 中通常會有多個核心,用來同時間平行運算數個像素的顏色。也因為並行的關係,正常情況下每個像素的運算是被孤立的,像素不能和其他像素溝通,只能夠知道自己所需的訊息,例如 : 位置。

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

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

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

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

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

著色器的部分需要了解的有
線性代數需要了解的部分有

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

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

Shader中if和for的效率问题以及使用策略

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

也可以到我的個人網站去看

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

31

7

LINE 分享

相關創作

LeetCode - 1819. Number of Different Subsequences GCDs 解題心得

【學習日誌】把物體投影到背景上 8/21

完美著色配方--談X色定理

留言

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

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