CocosCreator特效系列之素描效果

摘要

素描是一種唯美的藝術創作，可以用單色線條來表現事物。那麼 KUOKUO 今天爲大家帶來的就是 CocosCreator 的素描化 Effect。

正文

版本說明

使用 CocosCreator 的 2.2.0 版本演示。

邊緣檢測原理

邊緣檢測是圖像處理和計算機視覺中的基本問題，邊緣檢測的目的是標識圖像中亮度變化明顯的點。好，那我們就研究下如何尋找圖像中亮度變化明顯的點。我們目前能獲得的是像素的 RGBA 這些參數，那麼我們可以通過計算這個亮度變化的導數來確定邊緣。爲簡化起見，我們可以先在一維上分析。

1, 2, 2, 1, 55, 57, 60, 55, 1, 0, 2

如上，我們可以直觀的看出 1 到 55 肯定是個邊緣。原理相信你已經理解了，但是如何讓代碼“知道”這個變化呢？

其實不用知道邊緣，我們只要知道變化強的地方在“增強”後會更突出即可，我們往下看！

3X3拉普拉斯模版

如圖，我們觀察 3X3 的拉普拉斯模板。

我們可以看出它的特點，中心與周圍的差很大！從模板形式容易看出，如果在圖像中一個較亮的區域中出現了一個暗點，那麼用拉普拉斯運算就會使這個點變得更暗。（反着理解也可，因爲我們找的是變化地點。）

代碼

// 四周 3X3 九個格子的偏移量，最後乘以拉普拉斯模板的數據。
float offset = 0.005;
o -= texture(texture, v_uv0 + vec2(-offset, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(offset, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(offset, 0.0)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, 0.0)) * -8.0;
o -= texture(texture, v_uv0 + vec2(offset, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(-offset, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(-offset, 0.0)) * 1.0;

排除白色

將像素突出後，我們能發現變化不明顯的地方全部爲白色，那麼我們排除一下白色即可。（排除的算法寫法不一，大家靈活寫。）

if (o.r > 0.9 && o.g > 0.9 && o.b > 0.9) {
    // 處理白色
} else {
    // 處理外圍
    o = vec4(0, 0, 0, 1);
}

最後效果

結語

Effect 能實現遊戲中很多的炫酷效果，讓我們一起學習！

O(∩_∩)O~~

源碼在我的微信公衆號回覆關鍵詞【特效】即可獲得

微信公衆號