大神駕到 | 麒麟子帶你初識Cocos Shader
一、什么是Cocos Shader
可能有朋友會感到奇怪，百度上搜不到Cocos Shader。
那就對了，因為Cocos Shader 是 Cocos Creator 3D Shader的簡稱。
是麒麟子為了方便社區(qū)交流，而發(fā)明的縮寫。
Cocos Creator 2D 和 Cocos Creator 3D合并后，材質系統(tǒng)和編輯器都將只有一個版本。
而從目前的技術架構和官方透露的信息來看。
合并后，技術框架采用目前Cocos Creator 3D的技術框架，因為它更成熟，更前沿，能更好地支持3D和2D。
合并后，編輯器名稱改為 Cocos Creator 3.0，將不再有3D這樣的稱呼。因為只有一個版本。
最終Cocos Creator 的 Shader，就是現(xiàn)在Cocos Creator 3D的Shader。
綜上所述！
我們現(xiàn)在就叫Cocos Creator 3D Shader 為 Cocos Shader，是一個很科學的做法。
Cocos Shader不僅僅指著色器代碼，實際上它包含了三個東西。
這三個東西的共同作用下，我們能夠渲染出想要的效果。
「材質(material)」 「效果代碼(effect)」 「參數(shù)(uniform、sampler等）」
二、Cocos材質使用步驟
1. 創(chuàng)建一個material材質文件
2. 指定一個要用到的effect和對應的technique
可以簡單理解為 一個 effect 對應多個 technique，effect + technique 決定了渲染手法。
比如 builtin-standard 包含 opaque 和 transparent 兩個 technique，前者用于實體，后者用于半透明物體。
3. 設置好面板上的參數(shù)
面板參數(shù)很多，但不要怕，麒麟子在這里逐一解釋一下(不需要在今天就全部弄明白，隨著學習的深入，這些參數(shù)都會明白的）。
「USE LIGHTMAP」：勾選上這個選項后，表示你的模型接受LIGHTMAP處理，這個是配合場景的光照圖烘焙功能的 「USE VERTEX COLOR」：是否使用頂點顏色 「USE NORMAL MAP」：是否使用法線圖 「HAS SECOND UV」: 是否擁有第二套UV 「USE ALBEDO MAP」：是否使用顏色貼圖 「PBR UV」：選擇PBR使用第一套還是第二套UV，默認是第一套 「USE PBR MAP」：是否需要使用PBR貼圖，如果使用了PBR貼圖，那貼圖的通道將和occlusion,roughness,metallic值相乘作為最終的值。 「USE METALLIC ROUGHNESS MAP」：是否使用金屬度和粗燥度貼圖 「USE OCCLUSION MAP」：是否使用occlusion貼圖 「USE EMISSIVE MAP」：是否使用自發(fā)光貼圖 「USE ALPHA TEST」: 是否開啟ALPHA TEST 「Tilling Offset」：紋理的縮放和偏移，xy為縮放，zw為偏移 「Albedo」: 顏色，會和albedoMap相乘 「AlbedoScale」: 不同通道的縮放值 這個我也沒有用過 「Occlusion、Roughness、Metallic、Emissive、EmissiveScale」：這幾個的作用對應上面的那堆Map，會和那堆MAP的通道相乘作為最終結果。如果沒有指定那堆Map貼圖，則直接使用這個值。 我們用得最多的就是METALLIC和ROUGHNESS，調節(jié)這兩個的值，就可以很明顯改變一個物體的反射強度和高光強度。
4. 渲染狀態(tài)
除了這堆 uniforms 外，偶爾我們還需要改動渲染狀態(tài)。
但渲染狀態(tài)我們一般是不需要改動其它的。
因為面片順序的關系，如果出現(xiàn)前后背面裁剪不對的情況。可以修改 CullMode 來解決。如下圖所示：
三、最簡單的Shader builtin-unlit
從面板上我們就可以看出來，unlit比standard少了很多東西。他沒有PBR光照相關的東西，最復雜的效果就是渲染一個半透明帶貼圖的物體。
我們后面的教程都將逐步在unlit這個effect上添加內容，也漸進式地掌握Cocos Shader的內容。
請大家打開「builtin-unlit.effect」，打開方式如下圖所示：
「Assets窗口 -> internal -> builtin-unlit -> Reveal In Explorer」（在資源管理器中打開）我們來逐一分解各部分的內容。
1. 定義部分
定義部分也就是文件最開始的部分，它描述了這個effect所具備的technique、pass結構以及外部變量和渲染狀態(tài)。如下圖：
- name：對應的就是每一個 technique 名字。
可以看到，builtin-unlit定義了
opaque transparent add alpha-blend
四個 technique，每個 technique 只有一個 pass，這里補充解釋一下pass。
有一些效果，我們需要多次渲染同一個物體才能實現(xiàn)，這個時候就需要多pass，大部分情況下，只需要一個pass就能搞定了。
區(qū)域1：面板可見常量
定義面板上可見的常量，也就是說，shader 中定義好的 uniform，如果要讓面板可見，就需要在這個部分做引出。
區(qū)域2：入口函數(shù)
定義的是vs和fs分別使用哪個入口函數(shù)。也就是說，你可以給每個pass指定不同的vs和fs shader。
區(qū)域3：深度讀寫開關
我們可以控制是否做深度測試和是否寫入深度。
一般情況下，實體對象，深度測試和深度寫入都會開啟，但像技能特效中的半透明效果，就只進行深度測試，而不進行深度寫入。
其余更復雜的情況，則需要根據(jù)具體需求來決定。
區(qū)域4：Alpha混合控制
這個在以前的UI面板上大家見過了，就是控制與目標緩沖區(qū)的混合方式。
區(qū)域5：光柵化參數(shù)
和之前提到的渲染狀態(tài)面板中的ClullMode是同一個東西。
2. unlit-vs（即頂點著色器部分）
如下圖所示
大家會發(fā)現(xiàn)，「#if USE_VERTEX_COLOR ... #endi」f這樣的宏定義，這個宏定義會出現(xiàn)在材質面板上。
和C++等語言中的宏定義一樣，如果這個宏沒有被定義（即面板上不勾選），那這部分的代碼相當于不存在。
所以，在宏定義中聲明的變量，一定要在宏定義中使用，否則會報錯。
找到所有的out變量，就能找到vert函數(shù)輸出了哪些東西。在unlit中我們可以找到
out float factor_fog（霧效因子） out lowp vec4 v_color (頂點顏色) out vec2 v_uv (頂點uv)
三個輸出結果，vert函數(shù)本身則特別簡單，這里就不多解釋。
3、unlit-fs（即像素著色器部分）
如下圖所示：
寫fs的時候，只需要注意一點。那就是vs的out即為fs的in，在寫的時候也要注意宏的匹配，否則會發(fā)生編譯錯誤。
fs只輸出1個東西，那就是顏色 ，vec4 frag的返回值就是我們最終要輸出的顏色。
通過vs傳過來的uv和參數(shù)，我們進行紋理采樣，并做一系列的運算，即可獲得我們想要的效果。
大家可以嘗試在 「o = CC_APPLY_FOG(o,factor_fog)」 之前，對o.rgb進行一些運算，就能立即看到顏色發(fā)生了變化。
四、結束語
本文對 Cocos Shader 做了一個大概的介紹，使大家掌握材質的使用，材質面板參數(shù)的含義和effect文件的內容。
感謝麒麟子大神的精彩講解，歡迎大家向公眾號投稿或提供白名單轉載，愿我們在成長的道路上砥礪前行，共同進步！
