引擎版本：3.8.5

環境： Windows

簡介

---

在Cocos Creator中，游戲炫彩繽紛的效果是借助著色器(Shader)來實現的。

Cocos主要基于OpenGL ES，而Shader的編寫則是在可編程渲染管線中基于修改：頂點著色器(Vertex) 和 片段著色器(Fragment) 完成的。

Cocos官方，為了簡化著色器的復雜配置，更多靈活性，以及能夠通過編譯器進行可視化管理等等，在Cocos Creator中，實現Shader主要借助兩個文件：EffectAsset 和 Material材質。

兩者都屬于資源文件，簡單的理解：

一、EffectAsset 負責Shader的編寫、配置和各種屬性定義等

二、Material材質 負責對EffectAsset的數據包裝，并將一些屬性數據可視化顯示在屬性檢查器中，方便用戶管理和操作。

可以認為：在Cocos Creator中，想實現各種不同的渲染效果；需要通過Effect配置屬性和著色器編寫，通過材質來實現對Effect的包裝，進而顯示出不同的效果。

兩者是相輔相成的，缺一不可的。

學習的困惑

---

初次接觸材質和Effect的時候，我一臉的茫然。

畢竟從事游戲開發，像OpenGL、渲染、Shader等這些專業的術語，即使不曾使用，在面試中也是無法擺脫的。

當我第一次看到Material材質的屬性配置：

第一次看到Effect的屬性配置：

即使有著官方文檔的加持，我也是一臉的茫然，不知道這些到底代表著什么，以及如何使用。

再到后來，慢慢的明白：看似好像沒有接觸使用過它們，但實際上它們就像是空氣一樣，在你的周圍彌漫。

因為不管怎樣，游戲客戶端中所展現的任何可視性的效果都是渲染。

如果從細節上來說，比如：

在Creator 2.4.x版本中，關于某個Sprite的屬性顯示：

在Creator 3.8.x版本中，關于某個Sprite的屬性顯示：

這些都是官方對渲染組件的默認配置，前者展示了默認的材質配置，而后者雖然沒有顯示出來，但依然會默認配置。

稍微延伸下，為什么CocosCreator針對于組件的設定，分為UI組件和渲染組件呢，原因也在這里。

困惑、畏難這些都是難免的，早晚都需要經歷和學習，這里提前預祝您的成功。

注：當你慢慢開始學習的時候，你可能會想我一樣：哦，原來是這樣子！

編譯器創建

---

接下來，我們繼續說明材質Material和EffectAsset。在編譯器中，它們都是支持編譯器創建的。

材質的構建

主要有兩種：

一、物理材質：Physics Material，主要用于記錄物體的物理屬性相關，被用于碰撞系統。

二、普通材質： Material，主要被用于管理Effect資源，并控制著色效果的展示。

以普通材質Material為例，創建后的屬性如下圖所示：

主要屬性有：

• sphere: 材質的預覽效果，可選擇box、sphere、capsule等進行預覽
• Light: 指的是是否啟用光照效果
• Effect: 指的是材質當前使用的著色器，可通過下拉框進行選擇
• Technique: 指的是材質使用著色器中的哪種技術
• Pass… 指的是Effect中Technique所包含的Pass流程，每種Technique可以包含多個Pass
• USE INSTANCING 指的是Effect中宏定義的開關

針對于Technique、Pass和宏定義這三個參數，是在Effect中使用 YAML語言配置的參數屬性。

EffectAsset的構建

著色器資源的創建，編譯器同樣支持兩種：

一、傳統無光照著色器： Effect，同文字描述所言，沒有光照效果的實現。

二、表面著色器：Surface Effect， 基于PBR的著色器。

PBR全稱：Physically Based Rendering 基于物理的光照模型

CocosCreator 從 v3.0 開始提供了基于物理渲染（PBR）的光照著色器：builtin-standard.effect。

它可根據現實中光線傳播原理和能量守恒定律，模擬出近似于真實物理光照的效果，主要用于3D。

這里以構建無光照的著色器為例，創建后的屬性如下：

主要屬性部分有：

• shaders : 當前的著色器名稱相關
• Precompile Combinations 預處理宏定義組合相關，通過on/off的開關來決定是否是否啟用
• GLSL 300 ES/100 Output 著色器的輸出模式和預覽

這里要說明下：

一、宏定義的組合可以更靈活的實現不同著色器效果的實現，并實現復用性。

二、300 ES 和 100 是引擎主要用于適配不同的WebGL版本和硬件支持。

前者基于WebGL 2.0標準，支持更多的圖形功能、更復雜著色器功能實現和更高的性能化；而后者主要基于WebGL 1.0標準，功能有限，主要用于向下兼容舊的硬件和瀏覽器。

三、輸出的代碼是引擎根據Effect提供的配置參數，解析后生成的。

在實際的編寫中，我們只需關注：

• CCEffect屬性的配置

• CCProgram著色器片段的編寫

寫到最后

今天的文章暫且就告一段落，因為貪多嚼不爛。

另外，總結了幾個小小的想法或者說是建議，主要有這么幾點：

一、Shader的使用，由于游戲引擎的封裝的便利性，很可能導致我們認為這是一門很遙遠的技術，不是不用，而是沒有關注過。

二、請不要過于的追求極致性，還有真正的了解，便開始了各種底層的學習，先模仿再創造，先完成再完美。

三、CocosShader效果的實現需要借助Material來，我們通過代碼實現Effect效果也是通過獲取材質來設置屬性。

四、Effect的實現主要兩部分： 一是通過CCEffect配置屬性 二是通過CCProgram編寫著色器片段。

理解可能有誤，但依然希望能夠幫助到您，感謝!