cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)
在Sprite中使用Shader做特殊的颜色处理比较简单,只需要把Shader程序绑定到Sprite上即可:
sprite.shaderProgram = alphaTestShader;
Cocos2d内置了一些Shader,详细可以看代码:
其中,CCShaderCache缓存了一些Shader实例,而GLProgram则对gl的api做了简单的封装让接口更友好。
需要注意的是,使用GLProgram编译shader程序时,cocos2d会自动加入了一些参数。
_compileShader: function (shader, type, source) { if (!source || !shader) return false; //var preStr = (type == this._glContext.VERTEX_SHADER) ? "precision highp float;\n" : "precision mediump float;\n"; source = "precision highp float; \n" + "uniform mat4 CC_PMatrix; \n" + "uniform mat4 CC_MVMatrix; \n" + "uniform mat4 CC_MVPMatrix; \n" + "uniform vec4 CC_Time; \n" + "uniform vec4 CC_SinTime; \n" + "uniform vec4 CC_CosTime; \n" + "uniform vec4 CC_Random01; \n" + "//CC INCLUDES END \n" + source; this._glContext.shaderSource(shader, source); this._glContext.compileShader(shader); var status = this._glContext.getShaderParameter(shader, this._glContext.COMPILE_STATUS); if (!status) { cc.log("cocos2d: ERROR: Failed to compile shader:\n" + this._glContext.getShaderSource(shader)); if (type == this._glContext.VERTEX_SHADER) cc.log("cocos2d: \n" + this.vertexShaderLog()); else cc.log("cocos2d: \n" + this.fragmentShaderLog()); } return ( status == 1 ); }
另外,绑定到sprite之后,cocos2d会自动设置一些值,我们只需要事先做个绑定即可,而这个绑定操作,也是有友好封装的。具体可以顺藤摸瓜看代码。
program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION); program.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR); program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
在sprite上做效果,无非就是一些颜色变换或者说是滤镜而已。由于cocos没有原生的滤镜,不像flash那么方便,那么我们就要自己动手丰衣足食了。
下边实现两个灰度和造旧sepia的效果,类似Flash的ShaderFilter一样。
(绿色球就是原图,上下2个小球分别用不同的sepia参数得到的造旧效果)
var sugar4 = Sugar.create(0,0,2); sugar4.x = size.width/4; sugar4.y = size.height/1.5; this.addChild(sugar4); sugar4.scale = 3; var sugar = Sugar.create(0,0,2); sugar.x = size.width/2; sugar.y = size.height/2; this.addChild(sugar); sugar.scale = 3; var sugar2 = Sugar.create(0,0,2); sugar2.x = size.width/3; sugar2.y = size.height/3; this.addChild(sugar2); sugar2.scale = 2; var sugar3 = Sugar.create(0,0,2); sugar3.x = size.width/3*2; sugar3.y = size.height/3*2; this.addChild(sugar3); sugar3.scale = 2; Filter.grayScale(sugar); Filter.sepia(sugar2, 0.5); Filter.sepia(sugar3, 0.9);
Filter类的代码:
/** * Created by kenkozheng on 2014/11/4. */ /** * 只能用于控制Sprite的色调等,目标是实现类似Flash的内置基本滤镜 * 静态类 */ var Filter = { DEFAULT_VERTEX_SHADER: "attribute vec4 a_position; \n" + "attribute vec2 a_texCoord; \n" + "varying mediump vec2 v_texCoord; \n" + "void main() \n" + "{ \n" + " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n" + " v_texCoord = a_texCoord; \n" + "}", GRAY_SCALE_FRAGMENT_SHADER: "varying vec2 v_texCoord; \n" + "uniform sampler2D CC_Texture0; \n" + "void main() \n" + "{ \n" + " vec4 texColor = texture2D(CC_Texture0, v_texCoord); \n" + " float gray = texColor.r * 0.299 + texColor.g * 0.587 + texColor.b * 0.114; \n" + " gl_FragColor = vec4(gray, gray, gray, texColor.a); \n" + "}", SEPIA_FRAGMENT_SHADER: "varying vec2 v_texCoord; \n" + "uniform sampler2D CC_Texture0; \n" + "uniform float u_degree; \n" + "void main() \n" + "{ \n" + " vec4 texColor = texture2D(CC_Texture0, v_texCoord); \n" + " float r = texColor.r * 0.393 + texColor.g * 0.769 + texColor.b * 0.189; \n" + " float g = texColor.r * 0.349 + texColor.g * 0.686 + texColor.b * 0.168; \n" + " float b = texColor.r * 0.272 + texColor.g * 0.534 + texColor.b * 0.131; \n" + " gl_FragColor = mix(texColor, vec4(r, g, b, texColor.a), u_degree); \n" + "}", programs:{}, /** * 灰度 * @param sprite */ grayScale: function (sprite) { var program = Filter.programs["grayScale"]; if(!program){ program = new cc.GLProgram(); program.initWithVertexShaderByteArray(Filter.DEFAULT_VERTEX_SHADER, Filter.GRAY_SCALE_FRAGMENT_SHADER); program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION); //cocos会做初始化的工作 program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS); program.link(); program.updateUniforms(); Filter.programs["grayScale"] = program; } gl.useProgram(program.getProgram()); sprite.shaderProgram = program; }, /** * 造旧 * @param sprite * @param degree 旧的程度 0~1 */ sepia: function (sprite, degree) { var program = Filter.programs["sepia"+degree]; if(!program){ program = new cc.GLProgram(); program.initWithVertexShaderByteArray(Filter.DEFAULT_VERTEX_SHADER, Filter.SEPIA_FRAGMENT_SHADER); program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION); //cocos会做初始化的工作 program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS); program.link(); program.updateUniforms(); var degreeLocation = program.getUniformLocationForName("u_degree"); program.setUniformLocationF32(degreeLocation, degree); Filter.programs["sepia"+degree] = program; } gl.useProgram(program.getProgram()); sprite.shaderProgram = program; } };
转载于:https://www.cnblogs.com/kenkofox/p/4074047.html
cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)相关推荐
- 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
http://blog.csdn.net/mobanchengshuang/article/details/38731035 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
JS组件系列--BootstrapTable 行内编辑解决方案:x-editable 参考文章: (1)JS组件系列--BootstrapTable 行内编辑解决方案:x-editable (2)ht ...
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能:彻底解决高度问题
阅读目录 一.问题追踪 二.效果预览 三.源码解析 1.源码各个方法解释 2.对于上述抛出的ie和谷歌的兼容性问题的解析 3.项目中的使用 4.扩展 四.总结 正文 前言:一年前,博主分享过一篇关于b ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
- JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽 原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列--两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查 参考文章: (1)JS组件系列--BootstrapTable+Kno ...
最新文章
- asch相关的linux基础知识分享
- Android实战处理带+号的电话号码在Arabic语言中的正确显示
- 数据绑定(三)为Binding指定绑定源的几种方法
- 自动化设备的软件框架
- Javascript学习总结 - JS基础系列 二
- 【Java】《Java面向对象编程的三大特性》阅读笔记
- 送书《R语言数据分析和可视化》 | 这个为生信学习和生信作图打造的开源R教程真香!!!...
- 你的不好意思,正在摧毁你
- 《FLUENT 14.0超级学习手册》——3.2 Gambit的应用
- 珍藏多年的技术资源搜索网站——程序员必备
- Ubuntu 9.04下安装飞信LibFetion V1.1版
- 线性分类器定义和局限性
- matplotlib is required for plotting.
- 记住键盘快捷键大全 提高电脑操作速度
- win10輸入法去掉语言栏?win10輸入法切换简体繁体?
- 求一个整数的各个位数
- Python爬虫从入门到精通:(36)CrawlSpider实现深度爬取_Python涛哥
- java学习中,DVD管理系统纯代码(java 学习中的小记录)
- 如何修改aix服务器lv的名称,aix 更改lv的大小 smitty extendlv
- 20190121——不羡神仙 Java设计模式