cocos2dx shader实现的简单滤镜 基于3.0版本
2014-07-03 15:02
691 查看
我们的目的是让sprite可以添加滤镜效果,当然你也可以用在其它地方,只要有了shader的算法,其它就简单了
网上查找n多资料和自己总结摸索,实现了hsl和明度及外发光和描边效果 , 其中描边的算法不是很好,谁知道好的请告诉我
部分代码不是原创,这里就不贴原文地址了
转载请注明本篇地址 http://blog.csdn.net/u014635337/article/details/36655047
首先是shader文件
用法不贴了,2.3和3.0差别太多,自己研究下吧 ,我们的目的是让sprite可以添加滤镜效果,所以继承sprite关键点提示
2.3直接重构draw
3.0重构draw后还要写回调onDraw,因为3.0的draw只是放到渲染队列中去,注意重构draw的目的是为了将放入渲染队列的类型改为 Customcommand 它可以传入自己写的回调函数onDraw,然后适当的时候渲染队列回调onDraw,真正的渲染代码在onDraw里
不要太感谢我哈! FoxGame
原文地址 http://blog.csdn.net/u014635337/article/details/36655047
网上查找n多资料和自己总结摸索,实现了hsl和明度及外发光和描边效果 , 其中描边的算法不是很好,谁知道好的请告诉我
部分代码不是原创,这里就不贴原文地址了
转载请注明本篇地址 http://blog.csdn.net/u014635337/article/details/36655047
首先是shader文件
ccShader_Filter_vert.h /* * provide fliter cocos2dx 3.0 * Copyright (c) 2014.06 * Author yl */ " \n\ attribute vec4 a_position; \n\ attribute vec2 a_texCoord; \n\ attribute vec4 a_color; \n\ \n\ #ifdef GL_ES \n\ varying lowp vec4 v_fragmentColor; \n\ varying mediump vec2 v_texCoord; \n\ #else \n\ varying vec4 v_fragmentColor; \n\ varying vec2 v_texCoord; \n\ #endif \n\ \n\ void main() \n\ { \n\ gl_Position = CC_MVPMatrix * a_position; \n\ v_fragmentColor = a_color; \n\ v_texCoord = a_texCoord; \n\ } \n\ ";
ccShader_Filter_frag.h /* * provide fliter cocos2dx 3.0 * Copyright (c) 2014.06 * Author yl */ " \n\ #ifdef GL_ES \n\ precision mediumpfloat; \n\ #endif \n\ \n\ varying vec4 v_fragmentColor; \n\ varying vec2 v_texCoord; \n\ uniform sampler2D CC_Texture0; \n\ \n\ uniformfloat Hue; \n\ uniformfloat Sat; \n\ uniformfloat Lig; \n\ uniformfloat Bri; \n\ uniform vec2 TextureSize; \n\ uniform vec3 GlowColor; \n\ uniformfloat GlowRange; \n\ uniformfloat GlowExpand; \n\ uniform vec3 OutlineColor; \n\ uniformfloat OutlineRange; \n\ \n\ float Hue_2_RGB(float v1,float v2, float vH ) \n\ { \n\ float ret; \n\ if ( vH < 0.0 ) \n\ vH +=1.0; \n\ if ( vH > 1.0 ) \n\ vH -=1.0; \n\ if ( ( 6.0 * vH ) <1.0 ) \n\ ret = ( v1 + ( v2 - v1 ) *6.0 * vH ); \n\ else if ( (2.0 * vH ) < 1.0 ) \n\ ret = ( v2 ); \n\ else if ( (3.0 * vH ) < 2.0 ) \n\ ret = ( v1 + ( v2 - v1 ) * ( (2.0 / 3.0 ) - vH ) *6.0 ); \n\ else \n\ ret = v1; \n\ return ret; \n\ } \n\ \n\ void main(void) \n\ { \n\ vec4 color = texture2D(CC_Texture0, v_texCoord); \n\ float R, G, B, A; \n\ R = color.r; \n\ G = color.g; \n\ B = color.b; \n\ A = color.a; \n\ \n\ if( A != 0.0 ) \n\ { \n\ if( Hue != 0.0 || Sat !=0.0 || Lig != 0.0 ) \n\ { \n\ float Cmax, Cmin; \n\ float D; \n\ float H, S, L; \n\ \n\ Cmax = max (R, max (G, B)); \n\ Cmin = min (R, min (G, B)); \n\ L = (Cmax + Cmin) /2.0; \n\ \n\ if (Cmax == Cmin) \n\ { \n\ H =0.0; \n\ S =0.0; \n\ } \n\ else \n\ { \n\ D = Cmax - Cmin; \n\ if (L < 0.5) \n\ { \n\ S = D / (Cmax + Cmin); \n\ } \n\ else \n\ { \n\ S = D / (2.0 - (Cmax + Cmin)); \n\ } \n\ \n\ if (R == Cmax) \n\ { \n\ H = (G - B) / D; \n\ } \n\ else \n\ { \n\ if (G == Cmax) \n\ { \n\ H =2.0 + (B - R) /D; \n\ } \n\ else \n\ { \n\ H =4.0 + (R - G) / D; \n\ } \n\ } \n\ H = H /6.0; \n\ } \n\ \n\ // modify H/S/L values \n\ H += Hue; \n\ S += Sat; \n\ L += Lig; \n\ \n\ if (H < 0.0) \n\ { \n\ H = H +1.0; \n\ } \n\ \n\ H = clamp(H,0.0, 1.0); \n\ S = clamp(S,0.0, 1.0); \n\ L = clamp(L,0.0, 1.0); \n\ \n\ // convert back to RGB \n\ float var_2, var_1; \n\ \n\ if (S == 0.0) \n\ { \n\ R = L; \n\ G = L; \n\ B = L; \n\ } \n\ else \n\ { \n\ if ( L < 0.5 ) \n\ { \n\ var_2 = L * (1.0 + S ); \n\ } \n\ else \n\ { \n\ var_2 = ( L + S ) - ( S * L ); \n\ } \n\ \n\ var_1 =2.0 * L - var_2; \n\ \n\ R = Hue_2_RGB( var_1, var_2, H + (1.0 / 3.0 ) ); \n\ G = Hue_2_RGB( var_1, var_2, H ); \n\ B = Hue_2_RGB( var_1, var_2, H - (1.0 / 3.0 ) ); \n\ } \n\ } \n\ \n\ \n\ if ( Bri != 0.0 ) \n\ { \n\ if ( Bri > 0.0 ) \n\ { \n\ R = R + (255.0 - R) /255.0 * Bri; \n\ G = G + (255.0 - G) /255.0 * Bri; \n\ B = B + (255.0 - B) /255.0 * Bri; \n\ } \n\ else \n\ { \n\ R = R + R /255.0 * Bri; \n\ G = G + G /255.0 * Bri; \n\ B = B + B /255.0 * Bri; \n\ } \n\ } \n\ } \n\ else \n\ { \n\ \n\ if( GlowRange > 0.0 ) \n\ { \n\ float samplerPre = 2.0; \n\ float radiusX = 1.0 / TextureSize.x; \n\ float radiusY = 1.0 / TextureSize.y; \n\ float glowAlpha = 0.0; \n\ float count = 0.0; \n\ for( float i = -GlowRange ; i <= GlowRange ; i += samplerPre ) \n\ { \n\ for( float j = -GlowRange ; j <= GlowRange ; j += samplerPre ) \n\ { \n\ vec2 samplerTexCoord = vec2( v_texCoord.x + j * radiusX , v_texCoord.y + i * radiusY ); \n\ if( samplerTexCoord.x < 0.0 || samplerTexCoord.x > 1.0 || samplerTexCoord.y <0.0 || samplerTexCoord.y > 1.0 ) \n\ glowAlpha +=0.0; \n\ else \n\ glowAlpha += texture2D( CC_Texture0, samplerTexCoord ).a; \n\ count +=1.0; \n\ } \n\ } \n\ glowAlpha /= count; \n\ R = GlowColor.r; \n\ G = GlowColor.g; \n\ B = GlowColor.b; \n\ A = glowAlpha * GlowExpand; \n\ } \n\ \n\ \n\ if( OutlineRange > 0.0 ) \n\ { \n\ float radiusX = 1.0 / TextureSize.x; \n\ float radiusY = 1.0 / TextureSize.y; \n\ bool outline = false; \n\ for( float i = -OutlineRange ; i <= OutlineRange ; i ++ ) \n\ { \n\ for( float j = -OutlineRange ; j <= OutlineRange ; j ++ ) \n\ { \n\ vec2 samplerTexCoord = vec2( v_texCoord.x + j * radiusX , v_texCoord.y + i * radiusY ); \n\ if( samplerTexCoord.x >= 0.0 && samplerTexCoord.x <= 1.0 && samplerTexCoord.y >=0.0 && samplerTexCoord.y <= 1.0 ) \n\ { \n\ if( texture2D( CC_Texture0, samplerTexCoord ).a >0.0 ) \n\ { \n\ outline =true; \n\ break; \n\ } \n\ } \n\ } \n\ } \n\ if( outline ) \n\ { \n\ R = OutlineColor.r; \n\ G = OutlineColor.g; \n\ B = OutlineColor.b; \n\ A =255.0; \n\ } \n\ } \n\ } \n\ gl_FragColor = vec4( R , G , B , A ); \n\ } \n\ ";
用法不贴了,2.3和3.0差别太多,自己研究下吧 ,我们的目的是让sprite可以添加滤镜效果,所以继承sprite关键点提示
2.3直接重构draw
3.0重构draw后还要写回调onDraw,因为3.0的draw只是放到渲染队列中去,注意重构draw的目的是为了将放入渲染队列的类型改为 Customcommand 它可以传入自己写的回调函数onDraw,然后适当的时候渲染队列回调onDraw,真正的渲染代码在onDraw里
不要太感谢我哈! FoxGame
原文地址 http://blog.csdn.net/u014635337/article/details/36655047
相关文章推荐
- cocos2dx3.2版本利用shader实现sprite灰态图的正确方法
- 基于MVC,实现简单的书籍信息管理,其中,模型 (M) 采用一般的JavaBean、视图 (V)采用JSP、控制 (C) 采用Servlet实现。另外,对于视图部分的JSP中,需要提供两种版本,即一般
- 第一个简单小游戏的实现过程(打飞机)------------cocos2d-x 3.0版本(6.30)
- cocos2dx3.0系统文本描边的shader实现方式
- 基于简单seq to seq 的聊天机器人+代码实现 (tensorfow 1.1版本)
- 基于jmeter3.0版本的csv data set config二次开发(实现从指定行开始读取)
- 基于 XMPP协议的服务器端 文件互传的简单实现 (转)
- 基于Ant+Velocity的简单代码生成器的思路与实现
- 基于逻辑运算的简单权限系统(原理,设计,实现) VBS 版
- 基于逻辑运算的简单权限系统(实现) JS 版
- 一个简单的Ejb 3.0 实现
- 基于逻辑运算的简单权限系统(实现) JS 版
- 基于逻辑运算的简单权限系统(原理,设计,实现) VBS 版
- 基于Java实现简单Http服务器之一
- 基于SHAREPOINT 实现简单的进销存
- 基于Ant+Velocity的简单代码生成器的思路与实现
- 简单的颜色查看页面代码——基于DOM的实现
- 基于web的QQ实现代码(asp) ——在网叶(web)上实现简单QQ功能(转)
- 一个简单的AJAX实现,基于C#的ASP.Net,包括服务器端的程序代码
- .net平台 基于 XMPP协议的即时消息服务端简单实现