cocos creator 1.x 中使用自定义shader

最新推荐文章于 2024-08-15 17:20:34 发布
最新推荐文章于 2024-08-15 17:20:34 发布
阅读量1.7w 收藏
点赞数 8
分类专栏： 游戏开发 文章标签： 游戏 shader cocos-creator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeng0991/article/details/72973664
版权

为了减少游戏资源，游戏中免不了会使用一些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));
			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;

为了避免同一个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");
    },
});

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

这里写图片描述

运行效果：

这里写图片描述

2018,06.25更新

异步方法

之前的方法是把shader放在js文件中，好处是可以同步加载；不好的地方就是，没法使用通用的glsl文件，书写时无法利于ide对glsl语言的语法提示，下面是扩展了一种异步的加载方式，可以使用标准的glsl的shader文件。

通用的glsl shader 文件：

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;
}


#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;
}

扩展之后的ShaderUtils文件：

/**
 * used to change the shader of sprite
 * e.g. ShaderUtils.useShader(cc.Sprite, shader name);
 */

var ShaderUtils = {
	shaderMap: {}, // shader string map
	shaderPrograms: {},	//shader propgram map

	getGlPropgram: function(vert, frag) {
		var glProgram = new cc.GLProgram();
		glProgram.initWithString(vert, frag);
		if (!cc.sys.isNative) {  
			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;
	},

	// sync
	setShader: function(sprite, shaderName) {
		var glProgram = this.shaderPrograms[shaderName];
		if (!glProgram) {
			var vert = require(cc.js.formatStr("%s.vert", shaderName));
			var frag = require(cc.js.formatStr("%s.frag", shaderName));
			glProgram = this.getGlPropgram(vert, frag);
			this.shaderPrograms[shaderName] = glProgram;
		}
		sprite._sgNode.setShaderProgram(glProgram);
		return glProgram;
	},

	// async
	useShader: function(sprite, shaderName, cb) {
		var glProgram = this.shaderPrograms[shaderName];
		if (glProgram) {
			sprite._sgNode.setShaderProgram(glProgram);
			if (cb) {
				cb(glProgram);
			}
			return;
		}

		// vart shader
		var vert = cc.js.formatStr("shader/%s.vert", shaderName);
		if (this.shaderMap[vert]) {
			this.onLoadShader(vert, shaderName, cb);
		} else {
			cc.loader.loadRes(vert, function (err, shaderStr){
				if (err) {
					console.error('load %s fail, error: ', err);
					return;
				}
				this.shaderMap[vert] = shaderStr;
				this.onLoadShader(sprite, shaderName, cb);
			}.bind(this));
		}

		// frag shader
		var frag = cc.js.formatStr("shader/%s.frag", shaderName);
		if (this.shaderMap[frag]) {
			this.onLoadShader(frag, shaderName, cb);
		} else {
			cc.loader.loadRes(frag, function (err, shaderStr){
				if (err) {
					console.error('load %s fail, error: ', err);
					return;
				}
				this.shaderMap[frag] = shaderStr;
				this.onLoadShader(sprite, shaderName, cb);
			}.bind(this));
		}
	},

	onLoadShader: function(sprite, shaderName, cb) {
		var vert = cc.js.formatStr("shader/%s.vert", shaderName);
		var frag = cc.js.formatStr("shader/%s.frag", shaderName);
		if (this.shaderMap[vert] && this.shaderMap[frag]) {
			var glProgram = this.getGlPropgram(this.shaderMap[vert], this.shaderMap[frag]);
			this.shaderPrograms[shaderName] = glProgram;
			sprite._sgNode.setShaderProgram(glProgram);
			if (cb) {
				cb(glProgram);
			}
		}
	}
};

module.exports = ShaderUtils;

使用跟之前的一致，不过如果要获得创建的 glProgram, 在 update 更新数据，需要使用穿入一个函数，gl将作为函数参数返回，例如：

    onLoad: function() {
	    this.startTime = Date.now();
        this.atkAreaInfo = {
            color: {x: 1, y: 0, z: 0},
            minR: 0.05,
            maxR: 0.3,
            dura: 1,
        };
        ShaderUtils.usePropram(this.sp, "atk_circle", function(glPropgram){
			this.aaShaderPro= glPropgram;
        }.bind(this));
    },
    update: function(dt) {
		this.aaShaderPro.use();
		this.time = (Date.now() - this.startTime) / 1000;
        if (cc.sys.isNative) {
            var state = cc.GLProgramState.getOrCreateWithGLProgram(this.aaShaderPro);
            state.setUniformFloat('saturation', this.atkAreaInfo.dura);
            state.setUniformFloat('maxRadius', this.atkAreaInfo.maxR);
            state.setUniformFloat('minRadius', this.atkAreaInfo.minR);
            state.setUniformVec3('areaColor', this.atkAreaInfo.color);
            glState.setUniformFloat("time", this.time);
        } else {
            var saturation = this.aaShaderPro.getUniformLocationForName('saturation');
            var maxRadius = this.aaShaderPro.getUniformLocationForName('maxRadius');
            var minRadius = this.aaShaderPro.getUniformLocationForName('minRadius');
            var areaColor = this.aaShaderPro.getUniformLocationForName('areaColor');
            var time = this.program.getUniformLocationForName("time");
            this.aaShaderPro.setUniformLocationWith1f(saturation, this.atkAreaInfo.dura);
            this.aaShaderPro.setUniformLocationWith1f(maxRadius, this.atkAreaInfo.maxR);
            this.aaShaderPro.setUniformLocationWith1f(minRadius, this.atkAreaInfo.minR);
            this.aaShaderPro.setUniformLocationWith3f(areaColor, this.atkAreaInfo.color.x, this.atkAreaInfo.color.y, this.atkAreaInfo.color.z);
            this.program.setUniformLocationWith1f(time, this.time);
        }
    }
丿寒风
关注
专栏目录
【CocosCreator】Shader学习之准备篇
u011992102的博客
05-22 5054
【CocosCreator】Shader学习之准备篇写在前面准备开始自定义材质添加材质创建一个shader基类自定义shader 写在前面 最近比较空闲，准备趁着这个时候把shader研究一下。前几年写过Unity的Shader，但两三年不用发现忘得都差不多了，这次从头开始查资料发现都比较零散，所以就在这里记录一下，方便日后回顾。 本文使用的环境是：CocosCreator 2.0.8 注意：Co...
cocos creator 2.x Shader ——Typescript版，通用模板支持shadertoy和1.x失效shader
Sinmere的专栏
01-07 2122
cocos-creator-shader-assembler简介 cocos2.x js 版本已经有了，现在补个TypeScript版本，按照我自己的想法增加了支持，设计更加懒，现在DEMO因为懒得搞，没几个。 项目地址 https://github.com/Sinmere/cocos-creator-shader-assembler 首先感谢论坛中奎特尔星球代言人、panda、Colin、小叔...
用于cocoscreator的shader工具
08-12
用于cocos creator的shader工具，支持类似于Unity3D Shader语法
cocos creator 中使用自定义shader
一入編程深似海!
07-17 3630
为了减少游戏资源，游戏中免不了会使用一些shader，下面是一个将图片变灰shader，以此来看看如何在cocos creator中使用和管理shader。 shader文件管理 在assets中新建一个文件夹resources，然后在resources中新建一个Shader文件夹。将所shader文件放在Shader文件夹中。 现在在Shader文件夹中新建两个文件gray.vert.js...
深度剖析Cocos Creator中的Shader编程：从入门到精通，打造绚丽视觉效果！
最新发布
阿拉丁Mr的博客
08-15 1066
通过本文的详细讲解，相信你已经对Cocos Creator中的Shader编程有了初步的认识和了解。Shader编程是一门既有趣又充满挑战的技术，它能够让你的游戏和应用在视觉上脱颖而出。希望你在未来的开发过程中，能够灵活运用Shader编程，创造出更多令人惊叹的视觉效果！
cocos creator 中使用shader实现流光
热门推荐
寒风的技术博客
04-14 1万+
在论坛中有水友用多边形遮罩做了一个流光，这里分享一个用shader写的流光特效。 原理 将图片中指定区域的颜色亮度增大，或者加上颜色，然后在 update 中去更新这个高亮的区域。 代码 下面是 shader 内容， 关于 ShaderUtils 可以参考我之前的这篇博客。 顶点 shader： module.exports = ` attribute vec4 a_pos...
cocos creator实例--Creator 2.1.2的ShaderHelper
标题
12-16 415
ShaderHelper 组件在 2.0.x 版本中有不少伙伴在使用，其实这里要感谢「Colin」大神，我是在他的git开源版本基本上修改而来的；同时要感谢「大掌教」，ShaderHelper中集成了大多数Shader特效是在「大掌教」的仓库中搬运过来的。 这一次，我仍然做一名搬运工，将 Cocos Creator 2.1.2 范例合集中的 custom_material 案例认...
creator2.4.4shader特效.zip
03-05
在Cocos Creator中，可以利用GLSL语言编写自定义Shader，实现线性渐变、径向渐变等多种渐变效果，提升场景的艺术感。 2. 文字波浪运动特效：此特效使得文字在视觉上产生波浪般的动态效果，增加了交互性和趣味性。...
CocosCreator Shader Editor 编辑器
11-19
在CocosCreator中，你可以使用Shader编辑器来实现或调整这一效果，增强游戏的视觉真实感。 7. **与其他系统集成**： CocosCreator的Shader系统能够与动画系统、粒子系统、物理系统等无缝集成，使得动态效果和交互...
如何让CocosCreator3.x引擎启动提速60%
楚游香的博客
11-29 1439
背景一个采用Cocos Creator 3.4.2引擎开发的3D游戏，除了主游戏外，还有一个精简版游戏。精简版运行在小游戏平台，功能非常简单，所以要求启动速度一定要快。首先在Creator项目设置中仅留下WebGL 1.0、基础3D功能、基础2D功能、用户界面、运行状态统计这几个模块，其它的全部去掉。此时 Reelase 构建后，引擎自身文件cc.js是 2M 大小，在iPhone7手机上...
CocosCreator 正多边形遮罩Shader
01-22
在CocosCreator中，创建和应用自定义Shader相对简单。首先，你需要编写GLSL代码，这是Shader语言，包括顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。这两个着色器定义了如何处理输入的顶点数据以及...
CocosCreator Effect第三方控件（shader的使用）
03-30
##当前功能： 支持拖拽方式添加Effect效果到Creator项目 支持Creator WebGL 和 Native原生版本 新增加20个Shader特效 新增加160个Shadertoy的特效 ##日志： 优化Shader代码的写法，更易于阅读修改 ##ToDo: textureCube的支持 对声音的支持 BuffABC模式的支持
cocos shader 按钮置灰，变灰。命中目标，目标会闪一下效果
03-23
cocos shader 按钮置灰，变灰。命中目标，目标会闪一下效果
cocos中自带shader的例子
12-17
压缩包里包含cocos的shader例子和使用方法介绍，是学习shader的好东东。
cocos creater shader
12-09
主要就是shader是图片置灰，这里的压缩包就是一个小小的案例
cocos creator hsl shader
06-26
cocos creator hsl shader cocos creator 1.9.x 用的色相饱和度亮度插件
cocos creator shader用法
丶祁寒的专栏
06-14 8766
var nativeVertShader = "attribute vec4 a_position;\n" + "attribute vec2 a_texCoord;\n" + "attribute vec4 a_color;\n" + "varying vec4 v_fragm
麒麟子Cocos Creator 3D研究笔记十一：实用Shader之单张纹理实现武器动态发光
15 年专注游戏引擎与游戏开发，分享实用方案、经验与干货教程！
09-01 3492
零、别看广告，看疗效 阿子最近沉迷于学英语和写代码，可HIGH了。 一看时间，竟然已经十天没发稿了。 但这不能怪阿子，要怪就怪Cocos Creator 3D可玩性太高了，我竟然有一丝丝沉迷。 突然好想轮播一遍影帝们的台词 渣渣辉：你知道我这五年是怎么过的吗？这五年.....我每天都躲在家里玩Cocos Creator 3D，你是不知道，它对一个男人来说，有多重要。 轱舔乐：大嘎吼，我系轱舔乐，介里有磊没有玩过的船新版本，几需三番钟，磊造会干我一样，爱向节款引擎。 山鸡：是兄弟，就来砍我.
【Cocos2d-x】shader语法注意事项
shjy的专栏
03-29 868
1. 不要用隐式类型转换 例子1： int i = 5; // 没问题 float r = i * 0.05; // 有问题 例子2： float a = 0; // 定义和赋值float不能不加".0" 以上两个例子在OpenGL上没任何问题，但在移动端测试表明，在OpenGL es上会编译失败。 2. 不能用循环，for和while都不能 G...
制作 cocos creator 3.x 水面 shader
05-11
制作水面 shader 可以通过以下步骤实现： 1. 创建一个 Plane 节点，用于作为水面。 2. 创建一个材质，将材质的 Shader Type 设置为 Custom。 3. 在自定义 Shader 中，需要实现以下内容： - 读取贴图（例如海浪、噪波、反射等）。 - 计算出水面的高度。 - 计算出水面的法线。 - 计算出反射向量。 - 计算出折射向量。 - 根据反射向量和折射向量，进行反射和折射的计算。 - 对反射和折射的结果进行混合，得到最终的颜色。 4. 在 Shader 中，可以使用一些内置的变量来实现一些特效，例如： - _Time：当前时间。 - _WorldSpaceCameraPos：相机的世界坐标。 - _MainTex_ST：贴图的缩放和平移。 - _ReflectionTex：反射贴图。 - _RefractionTex：折射贴图。 5. 最后，将自定义 Shader 应用到材质中即可。 需要注意的是，制作水面 shader 需要一定的数学和物理基础，对于初学者来说可能有一定难度，需要耐心学习和实践。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值