沒想到Graphics組件也能被玩出花來,先看看效果!
鏈接:https://store.cocos.com/app/detail/3199
不僅授人以魚,還有授人以漁!下面是GT大佬對cc.Graphics
組件自定義渲染Demo的詳解。
背景
一直好奇 Cocos Creator cc.Graphics
組件是如何渲染的,最近打算學習下官方的源碼。於是打開cc.Graphics
默認的 Shader 看了下,好傢伙原來cc.Graphics
和SDF
有很緊密的聯繫。
本文簡單介紹下利用SDF
信息自定義渲染cc.Graphics
的一般方法,附上幾個例子。本文所有內容基於 Cocos Creator 2.4.2。
看看shader
cc.Graphics
默認的shader在下面位置(根據引擎安裝位置和版本有所不同)
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);
// 計算AA(反走樣)距離,如果平臺支持fwidth就儘量用,AA更加準確
#if CC_SUPPORT_standard_derivatives
float aa = fwidth(v_dist);
#else
float aa = 0.05;
#endif
// 在v_dist = 1或者-1附近進行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
畫一個簡單圖形,把v_dist
的內容輸出看一下
// 用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默認shader代碼
void main () {
// v_dist作爲顏色值輸出(取絕對值避免負數不顯示)
gl_FragColor = vec4(abs(v_dist));
return;
}
右圖abs(v_dist)
中間黑(值是0),兩邊白(值是1),實際上v_dist
的值範圍是[-1, 1]。輸出負數會被當0處理看不出效果,所以用abs
將v_dist
變成正數輸出。v_dist
和上一篇提到的SDF
是同類數據,在這裏表示當前片元到graphcis中線的距離,1或-1表示最邊緣,0表示在中線上。
改改 Shader
從紋理文件採樣
和普通的cc.Sprite
不同,cc.Graphics
沒有組裝uv信息傳到 Shader。
可以將v_dist
從[-1, 1]映射到[0, 1]區間,然後直接在紋理上採樣。
下面的代碼大部分和原始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]區間映射到[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
映射到某個顏色。
這裏我們提供一個調色板函數實現這個映射,函數內部可以實現任何自己想要的漸變色。
// 一個彩虹色的色板,輸入t的範圍是[0, 1], 輸出一個顏色值
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 () {
// ...其他都一樣
// 用一個Pallete函數完成映射,函數背後可以是採樣,或者其他靜態、動態紋理
// o = texture2D(texture, vec2(D, 0.5));
o.rgb = Pallete(D);
// ...其他都一樣
}
順便推薦一個在線漸變色配色網站:http://dev.thi.ng/gradients/
上面代碼中的色板係數從該網站獲得。
Demo和源碼
[論壇討論帖]
https://forum.cocos.org/t/topic/119268
[線上Demo體驗地址]
https://caogtaa.gitee.io/ccdemos/?scene=SceneGraphics
Demo 中還有更多基於cc.Graphics
的 Shader 效果,包括 Mesh 可視化、外發光、僞3D,留給下次詳細介紹。歡迎來論壇留言討論!
更多精彩,請關注GT大佬公衆號
本文分享自微信公衆號 - Creator星球遊戲開發社區(creator-star)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。