I am using these three shader files to generate outlines around sprites:
Outline.vsh
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 * CC_MVMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
OutlineNoMVP.vsh
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;
}
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 = 1.0;
normal = ( accum * (1.0 - normal.a)) + (normal * normal.a);
gl_FragColor = v_fragmentColor * normal;
}
I am using the following function:
function setOutline(sprite, threshold, radius, red, green, blue)
{
var shader;
if (cc.sys.isNative)
{
shader = new cc.GLProgram(res.OutlineNoMVP_vsh, res.Outline_fsh);
shader.link();
shader.updateUniforms();
var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(shader);
glProgram_state.setUniformFloat(“u_threshold”, threshold);
glProgram_state.setUniformFloat(“u_radius”, radius);
glProgram_state.setUniformVec3(“u_outlineColor”, {x: red, y: green, z: blue});
sprite.setGLProgramState(glProgram_state);
}
else
{
shader = new cc.GLProgram(res.Outline_vsh, res.Outline_fsh);
shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
shader.link();
shader.updateUniforms();
shader.use();
shader.setUniformLocationWith1f(shader.getUniformLocationForName(‘u_threshold’), threshold);
shader.setUniformLocationWith1f(shader.getUniformLocationForName(‘u_radius’), radius);
shader.setUniformLocationWith3f(shader.getUniformLocationForName(‘u_outlineColor’), red, green, blue);
sprite.shaderProgram = shader;
}
}
I am using it like this:
this.spriteTitle = new cc.Sprite(res.Title_png);
this.spriteTitle.setScale(cc.winSize.width / this.spriteTitle.width * 0.65);
this.spriteTitle.setPosition(cc.winSize.width * 0.5, cc.winSize.height * 0.8);
this.spriteTitle.setOpacity(0);
setOutline(this.spriteTitle, 0.9, 0.01, 1, 0, 0);
this.addChild(this.spriteTitle, 10);
I am getting the red outline that I wanted but the transparent parts of the image are rendered black and is blocking the background. Does anybody know how to make the transparent parts transparent again?