CocosCreator1.x使用自定义流光shader

最新推荐文章于 2021-07-05 17:49:13 发布

妖妖天下

最新推荐文章于 2021-07-05 17:49:13 发布

阅读量535

点赞数

分类专栏： Cocos Creator shader

本文链接：https://blog.csdn.net/tqy19921202/article/details/104059522

版权

Cocos Creator 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

shader

3 篇文章 0 订阅

订阅专栏

1.x使用shader与2.x使用shader有所不同，2.x的使用例子很多，1.x少些，这里列出使用流光shader例子。

1.创建顶点shader

代码：

module.exports =

`
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}
`

2.创建片段shader

代码：

module.exports =

#ifdef GL_ES

precision mediump float;

#endif

varying vec2 v_texCoord;

uniform float sys_time;

void main()

{

vec4 src_color = texture2D(CC_Texture0, v_texCoord).rgba;

float width = 0.2;

float start = sys_time * 1.2;

float strength = 0.02;

float offset = 0.2;

if( v_texCoord.x < (start - offset * v_texCoord.y) && v_texCoord.x > (start - offset * v_texCoord.y - width))

{

vec3 improve = strength * vec3(255, 255, 255);

vec3 result = improve * vec3( src_color.r, src_color.g, src_color.b);

gl_FragColor = vec4(result, src_color.a);

} else {

gl_FragColor = src_color;

}

3.为了方便使用，写一个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));
			glProgram.initWithString(vert, frag);
			if (!cc.sys.isNative) {  
				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);
		return glProgram;
	},
};

module.exports = ShaderUtils;