[Shader筆記] 連你阿罵都能看得懂的Shader介紹
這邊停止維護了～歡迎到新家找我玩：
https://studio-frontend-one.vercel.app/
目錄：
- 什麼是Shader
- Shader的工作
- Shader的組件
前言：
前陣子每天都會在google上爬文，找看看有沒有哪些文章能簡單的幫助我入門shader這個大坑。但找了很久、繞了好不少路，也看了許多大神寫了很多教學分享文章，依舊對shader是什麼，到底要如何運作感到懞懞懂懂、一知半解，所以找到這系列影片非常開心地希望可以分享給大家(不過整理成這篇文章時我還參考了”Unity Shader入門精要” 這本書)，我會盡量用比較口語化的方式介紹專有名詞，希望是一個連你阿母都能看得懂的教學ξ( ✿＞◡❛)
正文：
什麼是Shader：
當我們想要求電腦執行任何操作時，可以給出一個指令來命令電腦執行，這樣的一組指令我們稱之為程式（program）
而用來繪製螢幕上內容的程式則稱之為著色器（Shader）
不同於以往所見的程式(Java、C++、Java script)，Shader由GPU負責運算
那什麼是GPU？跟CPU有什麼差別？
GPU也就是大家口中所謂的顯卡，是專門負責計算電腦中圖形處理、圖像處理的電腦硬體，全名是Graphic Processing Unit 中文叫做圖形運算單元。
不同於CPU，他們之間最大的差別在於“運作方式”、“內核數量”。
1.內核數量(數量差異)：
CPU就像是左邊的肌肉，他們的數量或許沒有GPU來的多，但是個能力都遠遠超過左邊。
2.運作方式(處理事情的方法)：
CPU處理多件事情的時候他們會按照順序，一件一件執行。
GPU處理事情時則會“多件事情同時處理“。
所以…
CPU擅長處理單一且複雜的邏輯運算
GPU擅長處理大量且簡單的邏輯運算
OK!現在我們知道Shader具體是什麼了，
不過根據功能的不同，Shader還可以再細分成
- Vertex Shader 頂點著色器
- Pixel Shader (fragment shader) 片元著色器
- Geometry shader 幾何著色器
- Compute shader 計算著色器
- Tessellation/hull 細分曲面著色器
當我看到一連串種類的Shader時，我的內心是崩潰的
為了讓你不跟我一樣崩潰，我們先來了解電腦在繪製3D物件時的過程吧～
電腦在繪製物件時，會把一個3D物件拆成兩個部分來處理，一個是物體的形狀一個是物體看起來的顏色、材質、光照。
舉例來說，如果我們今天想要畫一張撲克牌我們會需要
1.物體的形狀 — 點的數量、點的位置、點的順序
- 點的數量：以撲克牌來說我們會需要四個點來畫出一個長方形
- 點的位置：點的位置可以影響撲克牌的形狀、旋轉、大小
- 點的順序：就算我們有這個物體所有的點，如果畫圖的順序不同最後得到的圖形也不會相同
2.物體的材質— 顏色、光照、圖案…
直觀的來看就是物體出現在螢幕上每個像素的顏色
- 材質：以撲克牌舉例的話，我們可能會需要看起來像塑膠的材質
有點反光但不到像是鏡子那樣強烈的反射 - 光照：我們的3D物件需不需要時時刻刻都受到光照影響，
如果受到影響則還有反射、折射、漫射一大堆光學參數可以調整 - 圖案：撲克牌上的花色、顏色等等
Shader的工作：
那麼Shader到底在電腦裡扮演著什麼樣的角色呢？
一句話講完：渲染管線裡其中一個環節…………..
好拉我知道這個模凌兩可又抽象的答案應該沒幾個人可以接受，
所以我們一步一步來
簡單描述：
渲染：渲染指的是電腦透過軟體將3D模型顯示在螢幕上的過程
管線：模組化的工作流程
恩？你說你還是沒搞懂渲染管線到底是幹嘛的？
沒關係我還有
更親民版的答案：
假設今天上美術課老師要求我們畫一隻彩虹小馬，厲害的同學可能在還沒聽完老師的要求以前就迅速的畫完了一隻完整度蠻高的小馬，但緊接著老師馬上又提出了下一個要求 『給一萬隻』
然後全班可能就傻眼了，不過我相信聰明的你可能馬上就想到方法了，如果先畫好一張再把資料上傳到電腦上，利用電腦列印一萬次，很快就可以達到老師的要求。
其實我們今天介紹的Shader就是在做這樣類似的事情，只不過他是模組化繪圖過程裡的其中一部分，還可以隨時因應不同的情況，畫出不太一樣的彩虹小馬
不過說得再多都不如直接看比較快，以下分享一個網站，裡面許多特效、電腦動畫全部只依靠短短的幾行程式碼(Shader Language)、跟一兩張貼圖製作而成
shader toy
Yap這就是shader的魅力，短短的幾行代碼，就可以製造出千奇百怪的效果
參考資料：
更深入的渲染管線可以參考這篇：
3D图形学基础
Lingtonke（柯灵杰） 现在AR、VR技术正值风口，催生了一大批相关的APP，使得3D图像学不再是游戏开发人员的专属知识，而是更多的普及开来。…
zhuanlan.zhihu.com
基礎的Shader架構可以參考這篇：
shader筆記系列文章：
基本知識篇
[Shader筆記]透明物體(Z-Test、Z-Write、Z-Buffer、Alpha Blending)
[Shader筆記] 程序化圖案 Procedural pattern
實作篇
