cocos creator shader用法

满怀期待用了一段时间cocos creator， 比较令人失望，文档不够全， 接口太乱，经常遇到和原cocos2d接口不匹配问题， 导致学习成本增加。作为一个初学者我不知道后面还会有什么坑。所以决定暂时先退出cocos creator 使用。从stduio到creator触控总是令人比较失望。

2016.8.17修正新版本1.2.0出现的浏览器shader不显示问题

Shader.js 

1.2.0 

var vertShader = "attribute vec4 a_position;\n"
                    + "attribute vec2 a_texCoord;\n"
                    + "attribute vec4 a_color;\n"
                    + "varying vec4 v_fragmentColor;\n"
                    + "varying vec2 v_texCoord;\n"
                    + "void main()\n"
                    + "{\n"
                    + "gl_Position = CC_PMatrix * a_position;\n"
                    + "v_fragmentColor = a_color;\n"
                    + "v_texCoord = a_texCoord;\n"
                    + "}";


var fragShader = "varying vec4 v_fragmentColor;\n"
                + "varying vec2 v_texCoord;\n"
                + "void main()\n"
                + "{\n"
                +   "   gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);\n"
                + "}";




var ShaderArray = {
    GreyShader : require("GreyShader")
}

function getOrCreateWithGLProgram(shader, glProgramName){
    var fs = shader.frag;
    var vs = shader.vert;
    var glProgram = new cc.GLProgram();
    if (cc.sys.isNative) {
        cc.log("use native GLProgram");
        glProgram.initWithString(vs == null? vertShader : vs, fs == null? fragShader : fs);
        glProgram.link();
        glProgram.updateUniforms();
    } else {
        cc.log("use webgl GLProgram");
        glProgram.initWithVertexShaderByteArray(vs == null? vertShader : vs, fs == null? fragShader : fs);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
        glProgram.link();
        glProgram.updateUniforms();
    }
    return glProgram;
}

function setGLProgram(node, glShaderName) {
    var shader = ShaderArray[glShaderName];
    var fs = fragShader;
    if (shader == null){
        cc.log("%s shader is nil", glShaderName);
        return;
    }   
    var glProgram = getOrCreateWithGLProgram(shader, glShaderName);

    setProgram(node._sgNode, glProgram);
}

function setProgram(node, program) {

    if (cc.sys.isNative) {
        var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(program);
        node.setGLProgramState(glProgram_state);
    } else {
        node.setShaderProgram(program);
    }

    var children = node.children;
    if (!children) return;

    for (var i = 0; i < children.length; i++) {
        setProgram(children[i], program);
    }
} 

module.exports = {
    setGLProgram: setGLProgram
};

以前版本

Shader.js

var nativeVertShader = "attribute vec4 a_position;\n"
                    + "attribute vec2 a_texCoord;\n"
                    + "attribute vec4 a_color;\n"
                    + "varying vec4 v_fragmentColor;\n"
                    + "varying vec2 v_texCoord;\n"
                    + "void main()\n"
                    + "{\n"
                    + "gl_Position = CC_PMatrix * a_position;\n"
                    + "v_fragmentColor = a_color;\n"
                    + "v_texCoord = a_texCoord;\n"
                    + "}";

var webVertShader = "attribute vec4 a_position;\n"
                    + "attribute vec2 a_texCoord;\n"
                    + "attribute vec4 a_color;\n"
                    + "varying vec4 v_fragmentColor;\n"
                    + "varying vec2 v_texCoord;\n"
                    + "void main()\n"
                    + "{\n"
                    + "gl_Position = ( CC_PMatrix * CC_MVMatrix ) * a_position;\n"
                    + "v_fragmentColor = a_color;\n"
                    + "v_texCoord = a_texCoord;\n"
                    + "}";


var fragShader = "varying vec4 v_fragmentColor;\n"
                + "varying vec2 v_texCoord;\n"
                + "void main()\n"
                + "{\n"
                +   "   gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);\n"
                + "}";

var ShaderArray = {
    GreyShader : require("GreyShader")
}

function getOrCreateWithGLProgram(shader, glProgramName){
    var fs = shader.frag;
    var glProgram = new cc.GLProgram();
    if (cc.sys.isNative) {
        var vs = shader.nvert;
        cc.log("use native GLProgram");
        glProgram.initWithString(vs == null? nativeVertShader : vs, fs == null? fragShader : fs);
        glProgram.link();
        glProgram.updateUniforms();
    } else {
        var vs = shader.wvert;
        glProgram.initWithVertexShaderByteArray(vs == null? webVertShader : vs, fs == null? fragShader : fs);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
        glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
        glProgram.link();
        glProgram.updateUniforms();
    }
    return glProgram;
}

function setGLProgram(node, glShaderName) {
    var shader = ShaderArray[glShaderName];
    var fs = fragShader;
    if (shader == null){
        cc.log("%s shader is nil", glShaderName);
        return;
    }   
    var glProgram = getOrCreateWithGLProgram(shader, glShaderName);

    setProgram(node._sgNode, glProgram);
}

function setProgram(node, program) {

    if (cc.sys.isNative) {
        var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(program);
        node.setGLProgramState(glProgram_state);
    } else {
        node.setShaderProgram(program);
    }

    var children = node.children;
    if (!children) return;

    for (var i = 0; i < children.length; i++) {
        setProgram(children[i], program);
    }
} 

module.exports = {
    setGLProgram: setGLProgram
};

GreyShader.js

var frag = "varying vec4 v_fragmentColor;\n"
                + "varying vec2 v_texCoord;\n"
                + "void main()\n"
                + "{\n"
                +   "   vec4 col = texture2D(CC_Texture0, v_texCoord);\n"
                +   "   float grey = dot(col.rgb, vec3(0.299, 0.587, 0.114));\n"
                +   "   gl_FragColor = vec4(grey, grey, grey, col.a);\n"
                + "}";

function setUniforms(node){

}

module.exports = {
    frag: frag,
    vert: null,
    setUniforms: setUniforms
};

LoginScene.js

var Shader = require("../../Shader/Shader.js");
cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    // use this for initialization
    onLoad: function () {
        var node = cc.find("LoginBg/login_enterBtn", this.node);
        var actionBy = cc.rotateBy(12, 360);
        node.runAction(cc.repeatForever(actionBy));
        Shader.setGLProgram(node, "GreyShader");
    },   
});

浏览器效果图：

模拟器：

初学狗逼js。

github: https://github.com/lovehappy108/CocosCreatorShader.git