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。