這5毛特效，做得牛了，好評！
沒想到Graphics組件也能被玩出花來，先看看效果！
鏈接：https://store.cocos.com/app/detail/3199
不僅授人以魚，還有授人以漁！下面是GT大佬對cc.Graphics組件自定義渲染Demo的詳解。
背景
一直好奇 Cocos Creator cc.Graphics組件是如何渲染的，最近打算學(xué)習(xí)下官方的源碼。于是打開cc.Graphics默認(rèn)的 Shader 看了下，好家伙原來cc.Graphics和SDF有很緊密的聯(lián)系。
本文簡單介紹下利用SDF信息自定義渲染cc.Graphics的一般方法，附上幾個(gè)例子。本文所有內(nèi)容基于 Cocos Creator 2.4.2。
看看shader
cc.Graphics默認(rèn)的shader在下面位置（根據(jù)引擎安裝位置和版本有所不同）
C:\CocosDashboard_1.0.12\resources.editors\Creator\2.4.2\resources\static\default-assets\resources\effects\builtin-2d-graphics.effect
片元著色器代碼如下，筆者加了些注釋幫助理解
void main () {
vec4 o = v_color;
// alpha測試，這里不用管
ALPHA_TEST(o);
// 計(jì)算AA(反走樣)距離，如果平臺支持fwidth就盡量用，AA更加準(zhǔn)確
#if CC_SUPPORT_standard_derivatives
float aa = fwidth(v_dist);
#else
float aa = 0.05;
#endif
// 在v_dist = 1或者-1附近進(jìn)行AA處理
float alpha = 1. - smoothstep(-aa, 0., abs(v_dist) - 1.0);
o.rgb *= o.a;
o *= alpha;
gl_FragColor = o;
}
可以看到 Shader 除了做 AA，幾乎啥也沒干，但是v_dist是干什么用的？
先用cc.Graphics畫一個(gè)簡單圖形，把v_dist的內(nèi)容輸出看一下
// 用cc.Graphics畫一條Bezier曲線
graphics.strokeColor = cc.Color.WHITE;
graphics.lineWidth = 40;
graphics.moveTo(-212, -139);
graphics.bezierCurveTo(-213, 111, 38, 236, 246, 75);
graphics.stroke();
// 修改graphics默認(rèn)shader代碼
void main () {
// v_dist作為顏色值輸出（取絕對值避免負(fù)數(shù)不顯示）
gl_FragColor = vec4(abs(v_dist));
return;
}
右圖abs(v_dist)中間黑（值是0），兩邊白（值是1），實(shí)際上v_dist的值范圍是[-1, 1]。輸出負(fù)數(shù)會被當(dāng)0處理看不出效果，所以用abs將v_dist變成正數(shù)輸出。v_dist和上一篇提到的SDF是同類數(shù)據(jù)，在這里表示當(dāng)前片元到graphcis中線的距離，1或-1表示最邊緣，0表示在中線上。
改改 Shader
從紋理文件采樣
和普通的cc.Sprite不同，cc.Graphics沒有組裝uv信息傳到 Shader。
可以將v_dist從[-1, 1]映射到[0, 1]區(qū)間，然后直接在紋理上采樣。
下面的代碼大部分和原始shader相同，增加了texture變量和采樣過程。
// 增加紋理uniform變量
uniform sampler2D texture;
void main () {
vec4 o = v_color;
ALPHA_TEST(o);
#if CC_SUPPORT_standard_derivatives
float aa = fwidth(v_dist);
#else
float aa = 0.05;
#endif
float alpha = smoothstep(aa, -aa, abs(v_dist) - 1.0);
// 將v_dist值從[-1, 1]區(qū)間映射到[0, 1]
float D = v_dist * 0.5 + 0.5;
// 采樣紋理
o = texture2D(texture, vec2(D, 0.5));
o.rgb *= alpha;
gl_FragColor = o;
}
從程序紋理(色板)采樣
和紋理文件采樣的思路一樣，都是將v_dist映射到某個(gè)顏色。
這里我們提供一個(gè)調(diào)色板函數(shù)實(shí)現(xiàn)這個(gè)映射，函數(shù)內(nèi)部可以實(shí)現(xiàn)任何自己想要的漸變色。
// 一個(gè)彩虹色的色板，輸入t的范圍是[0, 1], 輸出一個(gè)顏色值
vec3 Pallete(float t) {
// 滾動動起來
t += cc_time.x;
vec3 dcOffset = vec3(0.5, 0.5, 0.5);
vec3 amp = vec3(1., 1., 1.);
vec3 freq = vec3(1., 1., 1.);
vec3 phase = vec3(0., 0.3333, 0.6666);
return dcOffset + amp * cos(2. * 3.14159 * (freq * t + phase));
}
void main () {
// ...其他都一樣
// 用一個(gè)Pallete函數(shù)完成映射，函數(shù)背后可以是采樣，或者其他靜態(tài)、動態(tài)紋理
// o = texture2D(texture, vec2(D, 0.5));
o.rgb = Pallete(D);
// ...其他都一樣
}
順便推薦一個(gè)在線漸變色配色網(wǎng)站：http://dev.thi.ng/gradients/
上面代碼中的色板系數(shù)從該網(wǎng)站獲得。
Demo和源碼
[論壇討論帖]
https://forum.cocos.org/t/topic/119268
[線上Demo體驗(yàn)地址]
https://caogtaa.gitee.io/ccdemos/?scene=SceneGraphics
Demo 中還有更多基于cc.Graphics的 Shader 效果，包括 Mesh 可視化、外發(fā)光、偽3D，留給下次詳細(xì)介紹
。歡迎來論壇留言討論！
更多精彩，請關(guān)注GT大佬公眾號
