本章為大家?guī)眈R賽克/像素化特效。

馬賽克和像素化特效有點類似糕韧，只不過程度不同，視乎格子的數(shù)量多少澳化，可以認為是馬賽克持寄，也可以認為是像素化

2d-sprite-mosaic.gif

一源梭、馬賽克特效原理

馬賽克的原理很簡單，一句話形容就是 m x n 方塊內(nèi)取同一顏色 稍味，具體為兩個步驟：

1. 將紋理分成 m x n 個方塊
2. 方塊內(nèi)取同一個顏色

至此废麻，本章完，你已經(jīng)可以根據(jù)這個原理去實現(xiàn)效果了模庐。

二烛愧、馬賽克代碼實現(xiàn)

將紋理分成 m x n 個方塊 ，m 和 n 應該屬于外部控制，因此我們將這兩個屬性設(shè)置為uniform變量屑彻，并定義如下：

uniform Mosaic {
  // X軸方塊數(shù)量
  float xBlockCount;
  // Y軸方塊數(shù)量
  float yBlockCount;
}

那么我們又如何實現(xiàn)方塊內(nèi)取同一個顏色呢？其中一種解決方案

1. 計算頂點所在方塊
2. 取該方塊內(nèi)某一點顶吮，代表該方塊的顏色

舉個例子：

圖中A點社牲，B點，我們很明顯知道它是落在方塊 (1,0) 上悴了，按照上面的操作搏恤，實際上，A湃交，B兩點采用的是方塊(1,0) 的顏色熟空，這里也可以變相理解為 A，B兩點的坐標映射（或者叫投影）到格子(1,0) 的坐標 搞莺。

explain

抽象一下息罗，實際的問題就變?yōu)椋?/p>

我們怎么計算某個點的映射格子呢？這里才沧，我們嘗試分步計算

2.1 計算點在X軸上坐落的格子

首先迈喉，X軸上，每個格子的寬度可以這樣子求解

float blockWidth = 1.0 / xBlockCount;

為了避免 xBlockCount 為 0 的問題温圆，導致出現(xiàn)除以 0 的問題挨摸，我們可以這樣子優(yōu)化一下：

// 計算x軸格子寬度
float xCount;
if (xBlockCount <= 0.0) {
  xCount = 1.0;
} else {
  xCount = xBlockCount;
}
float blockWidth = 1.0 / xCount;

然后，用點的X坐標除以格子的寬度岁歉，然后向下取整得运，就可以得出點在X軸上哪個格子了

float blockXIndex = floor(v_uv0.x / blockWidth); 

2.2 計算點在Y軸上坐落的格子

同理，我們也可以求出點在Y軸上的哪個格子：

// 同理锅移，求出當前 v_uv0 在y軸上的哪個格子
float yCount; 
if (yBlockCount <= 0.0) {
  yCount = 1.0;
} else {
  yCount = yBlockCount;
}
float blockHeight = 1.0 / yCount;
float blockYIndex = floor(v_uv0.y / blockHeight);

2.3 計算格子顏色

現(xiàn)在我們知道點是坐落格子是 (blockXIndex, blockYIndex) 熔掺，那么這個格子取什么顏色呢？

一般而言非剃，我們?nèi)「褡又行狞c所在顏色作為格子的顏色瞬女，當然你也可以有不同的實現(xiàn)。

計算格子中心點其實也很好算

// X：格子寬度 * 格子索引 + 半個格子的寬度
// Y：格子高度 * 格子索引 + 半個格子的高度
vec2 pos = vec2(blockWidth * blockXIndex + blockWidth * 0.5, blockHeight * blockYIndex + blockHeight * 0.5);

// 即
vec2 pos = vec2(blockWidth * (blockXIndex + 0.5), blockHeight * (blockYIndex + 0.5));

OK努潘，現(xiàn)在我們可以得出了完整的映射代碼

code

通過上面這份代碼诽偷，我們就可以將頂點映射到不同格子，并且實現(xiàn)同一個格子顯示同一個顏色（顏色為格子中心點的顏色）了疯坤。

2.4 應用映射

在 片段著色器 中應用一下映射剛剛的映射函數(shù)报慕，更新每個 uv0 的實際映射坐標：

CCProgram fs

加上一些我們在 Cocos Creator Shader Effect 系列 - 3 - Effect 文件調(diào)試 中說到的調(diào)試手段，你就能得到馬賽克的效果了

2d-sprite-mosaic.gif

三压怠、總結(jié)

從上面的動圖眠冈，你可以看到，視乎格子數(shù)量多少，一定程度上可以叫馬賽克蜗顽，在另外一個程度上布卡，也可以叫像素化，重點在于 格子數(shù)量 這個變量雇盖，實際使用的時候忿等，我們可以根據(jù)自己的需求去進行控制。

另外一個點就是崔挖，本張我們介紹了點映射或者叫 點投影 贸街，這是一個很好玩的操作，不同的投影方式能產(chǎn)生不同的效果狸相，可以想點什么效果薛匪，去試試玩~

OK，本章完脓鹃，完整代碼在我的 Github 倉庫 或 Gitee 倉庫 中可以找到逸尖。

下一篇：

• ??Cocos Creator Shader Effect 系列 - 6 - 內(nèi)發(fā)光特效

上一篇：

• ??Cocos Creator Shader Effect 系列 - 4 - 老照片特效