UGUI优化之路- Text的文字描边优化

UGUI优化之路- Text的文字描边优化

UGUI自带的Text组件依然是最常用的文本组件，TMP虽然具备一定优势，但在显示玩家可以自定义输入的文子场景下，UGUI的Text组件依然是最佳选择。

问题背景

• 美术对文字描边效果要求高
  • 在大量聊天文本显示或平贴在界面上（没有底板）时，效果比较差，有种糊糊的感觉，特别是小字号的描边效果，会更差
• 频繁的文字刷新场景下对性能产生了不可忽视的影响
  • UGUI的Text描边实现，是向4个方向生成Mesh，叠在文字下面，模拟描边的效果
    
    可以看到在没有描边的时候，使用4个顶点来显示一个文字。如果开启描边的话，就会在左上、左下、右上、右下分别生成1个黑色的文字，用来模拟描边，不但顶点数量暴涨到30个，而且效果还不好，可以看到，黑色的描边并没有很好的包裹住文字。

另外一个常用的方案是使用Outline8对方案去优化描边的效果，Outline8 其实就是往8个方向去生成mesh，用量去堆效果，可想而知顶点数量会更加爆炸，一个字要54个顶点，对性能稍微有点要求的项目肯定是扛不住的。

解决方案

有没有不怎么吃性能，又描边效果好的方案呢？查阅了一些资料文章，还真找到个两全其美的（虽然增加了一点点GPU复杂度），即在Shader上去实现描边效果。

以下全部修改均在渲染文字的Shader上实现和修改
1、新增一个Pass用来绘制描边

• Vertex阶段：根据描边大小对顶点和UV进行外扩

• Fragment阶段：从当前像素向四周8方向进行采样，并累加Alpha值
  
  注意点：采样范围其实是一个圆，而不是方形的，经过实践圆形的采样比方形的效果更好

• 采样偏移会采样到相邻字符的问题：