一、什么是shader?

shader專業(yè)直譯名詞是：著色器，著色程序，渲染。

它是代替固定渲染管線來實(shí)現(xiàn)圖像渲染的可編輯程序，可編輯就代表了它的多態(tài)性，可以實(shí)現(xiàn)各種各樣的圖像效果而不用受顯卡的固定渲染管線限制。

其中Vertex Shader（頂點(diǎn)著色器）主要負(fù)責(zé)頂點(diǎn)的幾何關(guān)系等的運(yùn)算，Pixel Shader（像素著色器）主要負(fù)責(zé)片源顏色等的計(jì)算。

理解上Shader是一段代碼，通過編程告訴GPU如何繪制頂點(diǎn)和顏色，從而實(shí)現(xiàn)各種各樣的圖像效果

上下文的理解都參照了《博客園》昵稱叫“gamedaybyday”的《CocosCreator Shader筆記》這篇文章，并不是說這篇文章寫的有多完整，而是它為我指明了shader入門方向，這非常重要，非常感謝，再次感謝。

二、cocosCreator中的shader基礎(chǔ)

在cocoscreator2.x中，每一個(gè)cc.Sprite組件和cc.Label組件都有一個(gè)默認(rèn)Materials材質(zhì)屬性

每個(gè)材質(zhì)，都對(duì)應(yīng)一個(gè)shader，編輯器有默認(rèn)的materials目錄（存放材質(zhì)），和effects程序目錄（存放shader）

選中一個(gè)shader，就可以在屬性檢查器里預(yù)覽其代碼

既然shader是一段編程，那么就有對(duì)應(yīng)的編程語言，我暫時(shí)理解為和C++,java等語言差不多shader語言有3種：

1.基于OpenGL的OpenGL Shading Language，簡稱GLSL。

2.基于DirectX的High Level Shading Language,簡稱HLSL。

3. NVIDIA公司的C for Graphic，簡稱Cg語言。

cocos結(jié)合了YAML和GLSL，使用一種單源碼嵌入式領(lǐng)域特定語言Cocos Effect；

YAML?是一種標(biāo)記語言，語法和其他高級(jí)語言類似，可以簡單表達(dá)清單、散列表，標(biāo)量等數(shù)據(jù)形態(tài)。特別適合用來表達(dá)或編輯數(shù)據(jù)結(jié)構(gòu)、各種配置文件、傾印調(diào)試內(nèi)容、文件大綱（例如：許多電子郵件標(biāo)題格式和YAML非常接近）。YAML 的配置文件后綴為?.yml，runoob.yml?。

在cocos Effect中，YAML 部分聲明流程控制清單, GLSL 部分聲明實(shí)際的 shader 片段，這兩部分內(nèi)容上相互補(bǔ)充, 共同構(gòu)成了一個(gè)完整的渲染流程描述

關(guān)于cocos Effect語法：https://docs.cocos.com/creator3d/manual/zh/material-system/effect-syntax.html

官網(wǎng)其實(shí)介紹的很詳細(xì)，不過這里還是跟著官網(wǎng)介紹記錄一下。

shader編輯官方推薦使用VSCode，在vscode中安裝Cocos Effect插件，該插件可以高亮effect文件，方便閱讀和編輯代碼

在解析官方自帶的shader內(nèi)容之前，先得熟悉下聲明渲染流程控制清單的YAML語法和片段語言GLSL的語法。

這部分專門在CocosCreator2.x_Shader(二)中介紹

工欲善其事，必先利其器，心急吃不了熱豆腐啊，還是得一步一步來...加油