cocos 一个描边shader

最新推荐文章于 2024-09-25 19:59:12 发布

原创最新推荐文章于 2024-09-25 19:59:12 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#描边 #cocos #图片描边 #描边shader

cocos2d-x 同时被 3 个专栏收录

24 篇文章

订阅专栏

Quick-cocos2d-x

22 篇文章

订阅专栏

Lua

19 篇文章

订阅专栏

本文介绍了一种通过OpenGL ES Shader实现描边效果的方法。该方法避免了使用循环，并通过检查不同角度上的像素透明度来确定描边的位置。此外，还提供了如何在不同设备上设置描边宽度的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考帖子：http://blog.youkuaiyun.com/u011281572/article/details/44999609

优化了效率，

shader:

varying vec4 v_fragmentColor; // vertex shader传入，setColor设置的颜色
varying vec2 v_texCoord; // 纹理坐标
uniform vec2 outlineSize; // 描边宽度，以像素为单位
uniform vec3 outlineColor; // 描边颜色
uniform vec3 foregroundColor; // 主要用于字体，可传可不传，不传默认为白色
// 判断在这个角度上距离为outlineSize那一点是不是透明
int getIsStrokeWithAngel(float cosangel, float sinangel)
{
	int stroke = 0;
	float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize.x * cosangel, v_texCoord.y + outlineSize.y * sinangel)).a; // 这句比较难懂，outlineSize * cos(rad)可以理解为在x轴上投影，除以textureSize.x是因为texture2D接收的是一个0~1的纹理坐标，而不是像素坐标
	if (a >= 0.5)// 我把alpha值大于0.5都视为不透明，小于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;
	}
	// 这里肯定有朋友会问，一个for循环就搞定啦，怎么这么麻烦！其实我一开始也是用for的，但后来在安卓某些机型（如小米4）会直接崩溃，查找资料发现OpenGL es并不是很支持循环，while和for都不要用
	int strokeCount = 0;
	strokeCount += getIsStrokeWithAngel( 1.0, 0.0);//0
	strokeCount += getIsStrokeWithAngel( 0.9659258262, 0.2588190451);//15
	strokeCount += getIsStrokeWithAngel( 0.8660254037, 0.5);//30
	strokeCount += getIsStrokeWithAngel( 0.7071067811, 0.7071067811);//45
	strokeCount += getIsStrokeWithAngel( 0.5, 0.8660254037);//60
	strokeCount += getIsStrokeWithAngel( 0.2588190451, 0.9659258262);//75
	strokeCount += getIsStrokeWithAngel( 0.0, 1.0);//90
	strokeCount += getIsStrokeWithAngel(-0.2588190451, 0.9659258262);//105
	strokeCount += getIsStrokeWithAngel(-0.5, 0.8660254037);//120
	strokeCount += getIsStrokeWithAngel(-0.7071067811, 0.7071067811);//135
	strokeCount += getIsStrokeWithAngel(-0.8660254037, 0.5);//150
	strokeCount += getIsStrokeWithAngel(-0.9659258262, 0.2588190451);//165
	strokeCount += getIsStrokeWithAngel(-1.0, 0.0);//180
	strokeCount += getIsStrokeWithAngel(-0.9659258262, -0.2588190451);//195
	strokeCount += getIsStrokeWithAngel(-0.8660254037, -0.5);//210
	strokeCount += getIsStrokeWithAngel(-0.7071067811, -0.7071067811);//225
	strokeCount += getIsStrokeWithAngel(-0.5, -0.8660254037);//240
	strokeCount += getIsStrokeWithAngel(-0.2588190451, -0.9659258262);//255
	strokeCount += getIsStrokeWithAngel(0.0, -1.0);//270
	strokeCount += getIsStrokeWithAngel(0.2588190451, -0.9659258262);//285
	strokeCount += getIsStrokeWithAngel(0.5, -0.8660254037);//300
	strokeCount += getIsStrokeWithAngel(0.7071067811, -0.7071067811);//315
	strokeCount += getIsStrokeWithAngel(0.8660254037, -0.5);//330
	strokeCount += getIsStrokeWithAngel(0.9659258262, -0.2588190451);//345

	if (strokeCount > 0) // 四周围至少有一个点是不透明的，这个点要设成描边颜色
	{
		myC.rgb = outlineColor;
		myC.a = 1.0;
	}

	gl_FragColor = v_fragmentColor * myC;
}

使用代码：

local glProgramState = node:getGLProgramState();	
local texSize = node:getTexture():getContentSize();
if node:isTextureRectRotated() then
	glProgramState:setUniformVec2("outlineSize", cc.p(6 / texSize.height, 6 / texSize.width));
else
	glProgramState:setUniformVec2("outlineSize", cc.p(6 / texSize.width, 6 / texSize.height));
end

glProgramState:setUniformVec3("outlineColor", cc.vec3(0,0,0));
glProgramState:setUniformVec3("foregroundColor", cc.vec3(1,1,1));