[Shader筆記]程序化圖案 Procedural pattern

“ shader development using Unity” + Unity shader 入門精要筆記

詹閔翔
Eric’s publication
3 min readAug 11, 2019

--

p.s
1. 如果看不到程式碼,建議使用Chrom閱讀
2. 看這篇文章之前需要具備對shader的基本架構、渲染管線的理解,
你可以參考這篇文章

Line Pattern

作法:定義貼圖的顯示區域

以此範例為例,我定義了一個0.37 ~ 0.6的值域,只要貼圖的X座標在這個區域之外就設定透明度為0

透明物體的寫法可以參考我這篇文章:[Shader筆記]透明物體(Z-Test、Z-Write、Z-Buffer、Alpha Blending)

程式源碼:

Union Pattern

作法:跟LineShader大同小異,只是在另外增加一個y的值域而已

程式源碼:

Circle Pattern

作法:

定義一個圓的中心(_Center)、半徑(_Radius), 如果貼圖座標相對於中心點的距離小於半徑,則返回Alpha值1,其餘為0

程式源碼:

Circle Fading Edges

函數:y = smoothstep(e0,e1,x)

from:https://thebookofshaders.com/glossary/?search=smoothstep

實心版:

作法:

定義三個值域

  • alpha值固定為1:中間沒有模糊的區域
  • alpha值為smoothstep曲線(1~0):邊緣模糊的區域
  • alpha值固定為0 : 圓形以外的區域

程式源碼(實心版): 全部程式碼

中空版:

作法:

只需要兩層值域

  • alpha值為smoothstep曲線(1~0):中心透明到邊緣的區域
  • alpha值固定為0 : 圓形以外的區域

程式源碼:

--

--

詹閔翔
Eric’s publication

現職專案管理與RD部門經理。畢業於國立台北科技大學 互動設計系。專注於各種可能的技術解決方案,喜歡從技術的角度解決問題,也喜歡接觸各種新科技跟open source專案與時代一起進化,並樂於將所見所聞製作成人人都能輕鬆理解的教學文章分享於網路平台。目前主力為軟體架構工程與系統開發