Cocos 實(shí)現(xiàn)圖像描邊shader
stroke.fsh：描邊片段著色器
varying vec4 v_fragmentColor; // vertex shader傳入，setColor設(shè)置的顏色 ?
varying vec2 v_texCoord; // 紋理坐標(biāo) ?
uniform float outlineSize; // 描邊寬度，以像素為單位 ?
uniform vec3 outlineColor; // 描邊顏色 ?
uniform vec2 textureSize; // 紋理大小（寬和高），為了計(jì)算周?chē)鼽c(diǎn)的紋理坐標(biāo)，必須傳入它，因?yàn)榧y理坐標(biāo)范圍是0~1 ?
uniform vec3 foregroundColor; // 主要用于字體，可傳可不傳，不傳默認(rèn)為白色 ?
// 判斷在這個(gè)角度上距離為outlineSize那一點(diǎn)是不是透明 ?
int getIsStrokeWithAngel(float angel) ?
{ ?
? ?int stroke = 0; ?
? ?float rad = angel * 0.01745329252; // 這個(gè)浮點(diǎn)數(shù)是 pi / 180，角度轉(zhuǎn)弧度 ?
? ?float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize * cos(rad) / textureSize.x, v_texCoord.y + outlineSize * sin(rad) / textureSize.y)).a; // 這句比較難懂，outlineSize * cos(rad)可以理解為在x軸上投影，除以textureSize.x是因?yàn)閠exture2D接收的是一個(gè)0~1的紋理坐標(biāo)，而不是像素坐標(biāo) ?
? ?if (a >= 0.5)// 我把a(bǔ)lpha值大于0.5都視為不透明，小于0.5都視為透明 ?
? ?{ ?
? ? ? ?stroke = 1; ?
? ?} ?
? ?return stroke; ?
} ?
?
void main() ?
{ ?
? ?vec4 myC = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)); // 正在處理的這個(gè)像素點(diǎn)的顏色 ?
? ?myC.rgb *= foregroundColor; ?
? ?if (myC.a >= 0.5) // 不透明，不管，直接返回 ?
? ?{ ?
? ? ? ?gl_FragColor = v_fragmentColor * myC; ?
? ? ? ?return; ?
? ?} ?
? ?// 這里肯定有朋友會(huì)問(wèn)，一個(gè)for循環(huán)就搞定啦，怎么這么麻煩！其實(shí)我一開(kāi)始也是用for的，但后來(lái)在安卓某些機(jī)型（如小米4）會(huì)直接崩潰，查找資料發(fā)現(xiàn)OpenGL es并不是很支持循環(huán)，while和for都不要用 ?
? ?int strokeCount = 0; ?
? ?strokeCount += getIsStrokeWithAngel(0.0); ?
? ?strokeCount += getIsStrokeWithAngel(30.0); ?
? ?strokeCount += getIsStrokeWithAngel(60.0); ?
? ?strokeCount += getIsStrokeWithAngel(90.0); ?
? ?strokeCount += getIsStrokeWithAngel(120.0); ?
? ?strokeCount += getIsStrokeWithAngel(150.0); ?
? ?strokeCount += getIsStrokeWithAngel(180.0); ?
? ?strokeCount += getIsStrokeWithAngel(210.0); ?
? ?strokeCount += getIsStrokeWithAngel(240.0); ?
? ?strokeCount += getIsStrokeWithAngel(270.0); ?
? ?strokeCount += getIsStrokeWithAngel(300.0); ?
? ?strokeCount += getIsStrokeWithAngel(330.0); ?
?
? ?if (strokeCount > 0) // 四周?chē)辽儆幸粋€(gè)點(diǎn)是不透明的，這個(gè)點(diǎn)要設(shè)成描邊顏色 ?
? ?{ ?
? ? ? ?myC.rgb = outlineColor; ?
? ? ? ?myC.a = 1.0; ?
? ?} ?
?
? ?gl_FragColor = v_fragmentColor * myC; ?
} ?utilShader.cpp：
const char* shaderNameStroke = "ShjyShader_Stroke"; ?
?
namespace utilShader ?
{ ?
// 傳入描邊寬度（像素為單位），描邊顏色，圖片大小，獲得GLProgramState ?
? ?cocos2d::GLProgramState* getStrokeProgramState( float outlineSize, cocos2d::Color3B outlineColor, cocos2d::Size textureSize, cocos2d::Color3B foregroundColor/* = cocos2d::Color3B::WHITE*/ ) ?
? ?{ ?
? ? ? ?auto glprogram = GLProgramCache::getInstance()->getGLProgram(shaderNameStroke); ?
? ? ? ?if (!glprogram) ?
? ? ? ?{ ?
? ? ? ? ? ?std::string fragmentSource = FileUtils::getInstance()->getStringFromFile(FileUtils::getInstance()->fullPathForFilename("shaders/stroke.fsh")); ?
? ? ? ? ? ?glprogram = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragmentSource.c_str()); ?
? ? ? ? ? ?GLProgramCache::getInstance()->addGLProgram(glprogram, shaderNameStroke); ?
? ? ? ?} ?
? ? ? ? ?
? ? ? ?auto glprogramState = GLProgramState::create(glprogram); ?
? ? ? ? ?
? ? ? ?glprogramState->setUniformFloat("outlineSize", outlineSize); ?
? ? ? ?glprogramState->setUniformVec3("outlineColor", Vec3(outlineColor.r / 255.0f, outlineColor.g / 255.0f, outlineColor.b / 255.0f)); ?
? ? ? ?glprogramState->setUniformVec2("textureSize", Vec2(textureSize.width, textureSize.height)); ?
? ? ? ?glprogramState->setUniformVec3("foregroundColor", Vec3(foregroundColor.r / 255.0f, foregroundColor.g / 255.0f, foregroundColor.b / 255.0f)); ?
?
? ? ? ?return glprogramState; ?
? ?} ?
} ?調(diào)用的地方
Sprite* spr = Sprite::create("elephant1_Diffuse.png"); ?
spr->setPosition(200, 200); ?
spr->setGLProgramState(utilShader::getStrokeProgramState(5, Color3B::GREEN, spr->getContentSize())); ?
this->addChild(spr, 1); ?
應(yīng)該預(yù)先計(jì)算好sin和cos值，無(wú)需每次計(jì)算。優(yōu)化后的 stroke.fsh 如下：
varying vec4 v_fragmentColor; ?
varying vec2 v_texCoord; ?
uniform float outlineSize; ?
uniform vec3 outlineColor; ?
uniform vec2 textureSize; ?
uniform vec3 foregroundColor; ?
?
const float cosArray[12] = {1, 0.866, 0.5, 0, -0.5, -0.866, -0.1, -0.866, -0.5, 0, 0.5, 0.866}; ?
const float sinArray[12] = {0, 0.5, 0.866, 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5}; ?
?
int getIsStrokeWithAngelIndex(int index) ?
{ ?
? ?int stroke = 0; ?
? ?float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize * cosArray[index] / textureSize.x, v_texCoord.y + outlineSize * sinArray[index] / textureSize.y)).a; ?
? ?if (a >= 0.5) ?
? ?{ ?
? ? ? ?stroke = 1; ?
? ?} ?
?
? ?return stroke; ?
} ?
?
void main() ?
{ ?
? ?vec4 myC = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)); ?
? ?myC.rgb *= foregroundColor; ?
? ?if (myC.a >= 0.5) ?
? ?{ ?
? ? ? ?gl_FragColor = v_fragmentColor * myC; ?
? ? ? ?return; ?
? ?} ?
?
? ?int strokeCount = 0; ?
? ?strokeCount += getIsStrokeWithAngelIndex(0); ?
? ?strokeCount += getIsStrokeWithAngelIndex(1); ?
? ?strokeCount += getIsStrokeWithAngelIndex(2); ?
? ?strokeCount += getIsStrokeWithAngelIndex(3); ?
? ?strokeCount += getIsStrokeWithAngelIndex(4); ?
? ?strokeCount += getIsStrokeWithAngelIndex(5); ?
? ?strokeCount += getIsStrokeWithAngelIndex(6); ?
? ?strokeCount += getIsStrokeWithAngelIndex(7); ?
? ?strokeCount += getIsStrokeWithAngelIndex(8); ?
? ?strokeCount += getIsStrokeWithAngelIndex(9); ?
? ?strokeCount += getIsStrokeWithAngelIndex(10); ?
? ?strokeCount += getIsStrokeWithAngelIndex(11); ?
?
? ?bool stroke = false; ?
? ?if (strokeCount > 0) ?
? ?{ ?
? ? ? ?stroke = true; ?
? ?} ?
?
? ?if (stroke) ?
? ?{ ?
? ? ? ?myC.rgb = outlineColor; ?
? ? ? ?myC.a = 1.0; ?
? ?} ?
?
? ?gl_FragColor = v_fragmentColor * myC; ?
} ?標(biāo)簽：
