SDF！这特效牛不牛？

什么是SDF

SDF(Signed Distance Field)，有向距离场 ，用于表示空间中各点距离物体表面的距离。SDF技术已经被应用于字体渲染、Ray Marching、物理引擎等领域。

SDF 如何运用在 2D 游戏渲染？在 2D 图像里，SDF 表示的是图片中每个像素距离图片轮廓的距离，通过 SDF 可以很方便地对图片的轮廓施加特效。

如何生成SDF

目前有线性时间生成 SDF 的算法，这里使用了开源的TinySDF。
TinySDF计算SDF纹理完全在CPU上运行，对于小图可以直接运行时生成对应SDF纹理。考虑到苹果手机某些场合无法开启 JIT，对于大图可以采用离线生成的方式或者分帧计算的方式获取 SDF 纹理。

外发光之类的特效可能会超出原图的边缘，在计算 SDF 纹理前需要对原图进行扩边。SDF 信息生成后是一个和扩边后图片大小相同的二维数据，可以用该数组生成内存纹理，赋值给材质进行渲染。

简单起见，本文 Demo 直接将 SDF 纹理作为alpha通道和原图合并，不适合原图里本身有较大区域半透明像素的图片。

基于SDF的shader

变形

代码 & Demo

代码已经上架 Cocos Store 先免费放几天，欢迎大家白漂！感谢支持

源码地址：http://store.cocos.com/app/detail/2875

[论坛讨论帖]
https://forum.cocos.org/t/topic/

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

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