cocos creator 中使用自定义shader

为了减少游戏资源，游戏中免不了会使用一些shader，下面是一个将图片变灰shader，以此来看看如何在cocos creator中使用和管理shader。

shader文件管理

在assets中新建一个文件夹resources，然后在resources中新建一个Shader文件夹。将所shader文件放在Shader文件夹中。

现在在Shader文件夹中新建两个文件gray.vert.js和gray.frag.js，内容如下：

// gray.vert.js
module.exports =
`
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
`

// gray.frag.js
module.exports =
`
#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
gl_FragColor.w = c.w;
}
`

shader使用

为了方便使用，写一个ShaderUtils，使用时只需要传入修改shader的Sprite和shader的名字。

// ShaderUtils.js
var ShaderUtils = {
shaderPrograms: {},

setShader: function(sprite, shaderName) {
var glProgram = this.shaderPrograms[shaderName];
if (!glProgram) {
glProgram = new cc.GLProgram();
var vert = require(cc.js.formatStr("%s.vert", shaderName));
var frag = require(cc.js.formatStr("%s.frag", shaderName));
if (cc.sys.isNative) {
glProgram.initWithString(vert, frag);
} else {
glProgram.initWithVertexShaderByteArray(vert, frag);
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();
this.shaderPrograms[shaderName] = glProgram;
}
sprite._sgNode.setShaderProgram(glProgram);
},
};

module.exports = ShaderUtils;

为了避免同一个shader程序多次创建，这里做了一个缓冲，若是已有的就不再创建，直接使用。

方便对比，在HelloWorld的场景中再加一个Sprite，绑定到spGray，在spGray上使用上面写的shader。

// HelloWorld.js
var ShaderUtils = require("ShaderUtils");

cc.Class({
extends: cc.Component,

properties: {
spGray: cc.Sprite
},

onLoad: function () {
ShaderUtils.setShader(this.spGray, "gray");
},

update: function (dt) {

},
});

效果如图：

spine上使用shader

有人在论坛里问，怎么把shader用在龙骨上，这里补充下。

var ShaderUtils = require("ShaderUtils");

cc.Class({
extends: cc.Component,

properties: {
sp: sp.Skeleton
},

onLoad: function () {
ShaderUtils.setShader(this.sp, "gray");
},
});

如图，下编辑器中加入龙骨，骨骼动画直接用的官方实例。



运行效果：