SDF！這特效牛不牛？

什么是SDF

SDF(Signed Distance Field)，有向距離場 ，用于表示空間中各點距離物體表面的距離。SDF技術(shù)已經(jīng)被應(yīng)用于字體渲染、Ray Marching、物理引擎等領(lǐng)域。

在 ShaderToy 上可以找到大量用 SDF 渲染的作品，ShaderToy 創(chuàng)辦人 Inigo Quilez 大神是運用SDF的專家，本文封面就摘自他的博客，用 SDF 和 Ray Marching 技術(shù)渲染的基本幾何圖形。

SDF 如何運用在 2D 游戲渲染？在 2D 圖像里，SDF 表示的是圖片中每個像素距離圖片輪廓的距離，通過 SDF 可以很方便地對圖片的輪廓施加特效。

如何生成SDF

目前有線性時間生成 SDF 的算法，這里使用了開源的TinySDF。
TinySDF計算SDF紋理完全在CPU上運行，對于小圖可以直接運行時生成對應(yīng)SDF紋理。考慮到蘋果手機某些場合無法開啟 JIT，對于大圖可以采用離線生成的方式或者分幀計算的方式獲取 SDF 紋理。

外發(fā)光之類的特效可能會超出原圖的邊緣，在計算 SDF 紋理前需要對原圖進行擴邊。SDF 信息生成后是一個和擴邊后圖片大小相同的二維數(shù)據(jù)，可以用該數(shù)組生成內(nèi)存紋理，賦值給材質(zhì)進行渲染。

簡單起見，本文 Demo 直接將 SDF 紋理作為alpha通道和原圖合并，不適合原圖里本身有較大區(qū)域半透明像素的圖片。

基于SDF的shader

輪廓Bloom

外發(fā)光

用 SDF 實現(xiàn) 2D 外發(fā)光的優(yōu)勢是 SDF 紋理計算是一次性的，之后通過 shader 渲染的成本非常低。實現(xiàn)原理和 Bloom 類似，加上原圖的混合即可。

變形

在兩個SDF紋理之間插值，可以實現(xiàn)輪廓的變形

代碼 & Demo

代碼已經(jīng)上架 Cocos Store 先免費放幾天，歡迎大家白漂！感謝支持

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

[論壇討論帖]
https://forum.cocos.org/t/topic/110559

這是我的公眾號，關(guān)注有更多精彩，一起交個朋友吧！

• Creator全平臺游戲開發(fā)教程 PDF 免費下載（800+頁）
  
• 編寫高效 TS 的一些建議
  
• Creator 3.0 折紙效果！超贊
  
• 隔壁老王，帶你入坑騰訊聯(lián)機對戰(zhàn)引擎！
  
• 更新！Creator最佳文字書寫解決方案！