SDF！这特效牛不牛？

什么是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

这是我的公众号，关注有更多精彩，一起交个朋友吧！

Creator全平台游戏开发教程 PDF 免费下载（800+页）
编写高效 TS 的一些建议
Creator 3.0 折纸效果！超赞
隔壁老王，带你入坑腾讯联机对战引擎！
更新！Creator最佳文字书写解决方案！