shader实现描边效果

来源：互联网发布：数控车床编程实例编辑：程序博客网时间：2024/05/21 02:48

描边效果在项目中是常用到的，通常称作轮阔渲染。非opengl的方法是通过CCRenderTexture动态创建纯色纹理，加入到要设置描述效果的图片后面，达到描述效果，该方法要绘制多次，效率不是很好。下面介绍下通shader language来实现描述效果。

glsl语言代码是是操作GPU的命令，需要其它语言加载和调用，下面通过cocos2dx引擎的加载顶点着色器和片段着色器来实现描边效果。

lua调用glsl代码块:

local pProgram = cc.GLProgram:createWithFilenames("default.vsh","shader/outline.fsh")local glprogramState = cc.GLProgramState:getOrCreateWithGLProgram(pProgram)glprogramState:setUniformVec3("u_outlineColor",{x=0, y=255, z=0})glprogramState:setUniformFloat("u_threshold",1)glprogramState:setUniformFloat("u_radius",0.01)spimg:setGLProgramState(glprogramState)

参数说明：

u_outlinecolor:描述颜色设置(table属性一定是xyz,不能是rgb)

u_threshold:设置描述的模糊值

u_radius:轮阔的大小值。

片段着色器代码块(outline.fsh):

varying vec2 v_texCoord;varying vec4 v_fragmentColor;uniform vec3 u_outlineColor;uniform float u_threshold;uniform float u_radius;void main(){    float radius = u_radius;    vec4 accum = vec4(0.0);    vec4 normal = vec4(0.0);    normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y - radius));    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y - radius));    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y + radius));    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y + radius));    accum *= u_threshold;    accum.rgb =  u_outlineColor * accum.a;    accum.a = 0.0;    normal = ( accum * (1.0 - normal.a)) + (normal * normal.a);    gl_FragColor = v_fragmentColor * normal;}

效果图:

1 0