Cocos Creator Shader工具

十一就這樣過去了，沒什麼大成就，但還是寫個總結吧。前幾天用Cocos Creator寫一個demo，涉及到了shader開發，而cocos一直沒有好用的shader工具，就心血來潮要自己開發一個。花了兩天時間，類比Unity Shader完成了一套基本的材質架構，由於不知道怎麼擴充編輯器，就沒寫工具，後面等Cocos Creator的編輯器擴充功能更完善一些再說。

源碼已經放到github了，戳這裡。shader的文法類似於Unity Shader，詳細的說明已經寫在github項目首頁了，大致如下：

Shader "SimpleShader" {    Properties{ // 材質屬性        _MainTex("Main Tex", texture) = "";        _Color("Main Color", color) = (1, 1, 1, 1);    }    SubShader{        Pass{            // 變種shader宏列表。shader會根據宏的排列組合，產生不同版本的shader            variants = (ENABLE_COLOR, ENABLE_TEXTURE);            // 頂點著色器源碼            vsh = `                attribute vec4 a_position;                attribute vec2 a_texCoord;                varying vec2 v_texCoord;                void main()                {                    gl_Position = CC_PMatrix * a_position;                    v_texCoord = a_texCoord;                }            `;            // 片段著色器源碼            fsh = `            #ifdef GL_ES                precision mediump float;            #endif            #ifdef ENABLE_TEXTURE                varying vec2 v_texCoord;                uniform sampler2D _MainTex;            #endif            #ifdef ENABLE_COLOR                uniform vec4 _Color;            #endif                void main()                {                    vec4 color = vec4(1, 1, 1, 1);            #ifdef ENABLE_TEXTURE                    color = texture2D(_MainTex, v_texCoord);            #endif            #ifdef ENABLE_COLOR                    color *= _Color;            #endif                    gl_FragColor = color;                }            `;        }    }}

材質格式如下：

{    "shaderPath" : "resources/shaders/simple-shader.shader",    "values" : {        "_MainTex" : "resources/textures/tex00.jpg",        "_Color" : [1, 0, 0, 1]    },    "variants" : ["ENABLE_COLOR", "ENABLE_TEXTURE"]}

源碼中包含一套簡單的材質架構，和一個shader(非glsl)文法解析器。工具會根據shader檔案中提供的變種宏列表，產生不同的著色器對象(GLProgram)，材質系統用宏列表去匹配合適的著色器對象，然後合成GLProgramState，最後賦予Node。