什么是SDF
SDF(Signed Distance Field)，有向距离场 ，用于表示空间中各点距离物体表面的距离。SDF技术已经被应用于字体渲染、Ray Marching、物理引擎等领域。
在 ShaderToy 上可以找到大量用 SDF 渲染的作品，ShaderToy 创办人 Inigo Quilez 大神是运用SDF的专家，本文封面就摘自他的博客，用 SDF 和 Ray Marching 技术渲染的基本几何图形。
SDF 如何运用在 2D 游戏渲染？在 2D 图像里，SDF 表示的是图片中每个像素距离图片轮廓的距离，通过 SDF 可以很方便地对图片的轮廓施加特效。
如何生成SDF
目前有线性时间生成 SDF 的算法，这里使用了开源的TinySDF。
TinySDF计算SDF纹理完全在CPU上运行，对于小图可以直接运行时生成对应SDF纹理。考虑到苹果手机某些场合无法开启 JIT，对于大图可以采用离线生成的方式或者分帧计算的方式获取 SDF 纹理。
外发光之类的特效可能会超出原图的边缘，在计算 SDF 纹理前需要对原图进行扩边。SDF 信息生成后是一个和扩边后图片大小相同的二维数据，可以用该数组生成内存纹理，赋值给材质进行渲染。
简单起见，本文 Demo 直接将 SDF 纹理作为alpha通道和原图合并，不适合原图里本身有较大区域半透明像素的图片。
基于SDF的shader
轮廓Bloom
外发光
用 SDF 实现 2D 外发光的优势是 SDF 纹理计算是一次性的，之后通过 shader 渲染的成本非常低。实现原理和 Bloom 类似，加上原图的混合即可。
变形
在两个SDF纹理之间插值，可以实现轮廓的变形
代码 & Demo
代码已经上架 Cocos Store 先免费放几天，欢迎大家白漂！感谢支持
源码地址：http://store.cocos.com/app/detail/2875
[论坛讨论帖]
https://forum.cocos.org/t/topic/110559
这是我的公众号，关注有更多精彩，一起交个朋友吧！
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
