位置: 编程技术 - 正文

【Cocos2d-x】图片描边的一种比较好的shader实现方法(cocos2d官网)

编辑:rootadmin

推荐整理分享【Cocos2d-x】图片描边的一种比较好的shader实现方法(cocos2d官网),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:cocos2d怎么用,cocos2dx视频教程,cocos2d-x教程,cocos 2d x,cocos2dx官方教程,cocos2dx 图集,cocos2dx 图集,cocos 2d x,内容如对您有帮助,希望把文章链接给更多的朋友!

图片描边需求如下:

1. 可指定描边宽度 2. 可指定描边颜色3. 可用于字体

图片描边我所知道的方式有以下几种:

1. Cocos2d-x 3.x中,字体用FreeType库,字体描边可以用FreeType自带的描边功能,实际效果没测过,但只能用于字体。

2. 用RenderTexture,方法大概是把原图做一圈的偏移,渲染到同一张纹理上,他们相隔中心点的距离都是r,最后再把自己渲染到中间,核心代码大概这样:

这种方法可以作为一个比较好的解决方案,但是我认为这种方式在生成描边图片时,需要绘制多个图片,效率不是很好。

3. Cocos2d-x 3.x的ShaderTest有个描边的例子,是用shader实现的,不过那个程序有些不友好:描边宽度不是传像素进去,而是一个0~1的数字,是一个比例,就是说大的图片描边大,小的图片描边小,而且同一个图片不同位置的描边也宽窄不一(这在长比宽大很多的图片尤其明显),而且描边的颜色也深浅不一。

以下我分享一种我认为比较好的描边算法:

在片段着色器里面,对于每个像素:1. 如果它是不透明的像素,则不管,维持原本颜色;2. 如果透明,是度判断它四周有没有不透明的像素,如果有,则把它设成描边颜色,否则保持透明。

我为代码加了比较详细的注释,希望大家能理解

【Cocos2d-x】图片描边的一种比较好的shader实现方法(cocos2d官网)

stroke.fsh:描边片段着色器

我的utilShader.cpp:

调用的地方:

效果:

效果还算是比较好的,经测试,此算法在安卓多个机型上也表现良好。

这样一套完整的描边算法就完成了,如果描述有不当之处,或有更优方法,欢迎吐槽。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

谢谢complex_ok的吐槽,应该预先计算好sin和cos&#;,无需每次计算。优化后的 stroke.fsh 如下:

本帖地址:

glViewport()函数和glOrtho()函数的理解 在OpenGL中有两个比较重要的投影变换函数,glViewport和glOrtho。glOrtho是创建一个正交平行的视景体。一般用于物体不会因为离屏幕的远近而产生大小的变

【Cocos2d-x】shader语法注意事项 1.不要用隐式类型转换例子1:inti=5;//没问题floatr=i*0.;//有问题例子2:floata=0;//定义和赋值float不能不加.0以上两个例子在OpenGL上没任何问题,但在移动端

OpenGL Framebuffer Object (FBO) 在OpenGL中,OpenGLContext有一个默认的FBO用来绘制图像,但是我们也可以创建新的用户定义的Framebuffers,这样我们可以绘制到自定义的framebuffer,而不会影响到

本文链接地址:https://www.jiuchutong.com/biancheng/373062.html 转载请保留说明!

上一篇:UIView基类的简述(uiview继承哪个类)

下一篇:glViewport()函数和glOrtho()函数的理解(glortho函数)

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络