【分享】基于SDF的2D shader

什么是SDF

SDF(Signed Distance Field),有向距离场,用于表示空间中各点距离物体表面的距离。
在2D图像里,通过SDF可以很方便地获取到图片的轮廓并实现一些效果。



如何生成SDF

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

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

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


基于SDF的shader

轮廓Bloom

bloom1 bloom2

外发光

用SDF实现2D外发光的优势是SDF纹理计算是一次性的,之后通过shader渲染的成本非常低。
实现原理和Bloom类似,加上原图的混合即可。

outline1 outline2

变形

在两个SDF纹理之间插值,可以实现轮廓的变形

morph1

Demo地址

线上体验

http://caogtaa.gitee.io/ccdemos/?scene=SceneSDF

代码

https://github.com/caogtaa/CCBatchingTricks/tree/master/assets/Demo/SDF

参考

https://zhuanlan.zhihu.com/p/65421383
https://shaderfun.com/2018/07/01/signed-distance-fields-part-7-some-simple-effects/
https://github.com/mapbox/tiny-sdf

101赞

Cool​:+1::+1:

1赞

穴到了 。。。

1赞

感谢分享 :grinning:

1赞

双击666

1赞

插眼马克一下

1赞

除了6我还能说啥

1赞

大神,牛批

1赞

大佬!!!

1赞

:+1::+1::+1::+1::+1::+1:

1赞

牛皮五个字!

1赞

带佬!!!!!!!!!!!!!

1赞

牛批!!!!!

1赞

变形有点意思啊

确实第一次看到的时候我有点惊讶还能这么玩

为了方便预览效果,把工程提交到gitee page上了,包含往期所有分享内容的Demo。地址:

http://caogtaa.gitee.io/ccdemos

本文Demo入口见下图:

1赞

大佬NB666!!!

\color{red}{穴道了}

战略插眼~~

大佬牛b学废了