滿懷期待用了一段時間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
};
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