今天来介绍下图像马赛克的算法原理。首先我们先来看一张原图和一张由它处理得到的马赛克的图：
原图
效果图
通过观察我们可以发现，马赛克效果就是将原图进行了一定形状的分割。在每个分割出来的形状中用同一个颜色填充得到。而这个颜色一般取分割得到形状的中心点像素的颜色。既然已经知道了原理，我们就来分析下实现马赛克算法的步骤。下面以正六边形为例。
我们先来看一下正六边形马赛克的结构：
正六边形网格图
我们要做的就是将一张图分割成上图所示的蜂窝状，并且用正六边形的中心点像素值来填充整个六边形。
分割的方法我们可以参照下面这张图：
画布分割示意图
如上图所示，我们假设蓝色方框就是我们的画布，我们可以把它分割成长宽比为
因为我们已经知道了某个点是属于哪个矩形框（对应于矩形框的左上点）。通过观察我们可以得知，如果我们我们的点属于某个矩形框，且该矩形框左上点的点横纵坐标都为偶数或都为奇数的话。则我们的正六边形中心位于该点所在矩形框的左上点或者右下点。反之，如果横纵坐标是一奇一偶的话。则我们的六边形中心位于该点所在矩形框的左下点或右上点。
因此要判断画布上的某个点属于哪个正六边形，直接通过该点和所在矩形框的可能属于的那两个正六边形中点进行距离计算。离得比较近的那个中心点就是的像素值就是该点的像素值。
下面附上片段着色器代码（其中offset用来控制六边形边长的长度）：
#ifdef OPENGL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#endif
varying vec2 v_texCoord;
uniform sampler2D texture;
uniform vec2 textureSize;
uniform float offset;
#define texcoordOut v_texCoord
void main()
{
const float TR = 0.866; // root(3)/2
const float PI6 = 0.5236; // Pi/6
float x = texcoordOut.x * textureSize.x;
float y = texcoordOut.y * textureSize.y;
int wx = int(x/(1.5*offset));
int wy = int(y/(TR*offset));
vec2 v1 = vec2(0.0, 0.0);
vec2 v2 = vec2(0.0, 0.0);
vec2 vn = vec2(0.0, 0.0);
if(wx/2 * 2 == wx)
{
if(wy/2 * 2 == wy)
{
v1 = vec2(offset * 1.5 * float(wx), offset * TR * float(wy)); // 左上点
v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * (float(wy) + 1.0)); // 右下点
}
else
{
v1 = vec2(offset * 1.5 * float(wx), offset * TR * ( float(wy) + 1.0 )); // 左下点
v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * float(wy)); // 右上点
}
}
else
{
if(wy/2 * 2 == wy)
{
v1 = vec2(offset * 1.5 * float(wx), offset * TR * (float(wy) + 1.0)); // 左下点
v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * float(wy)); // 右上点
}
else
{
v1 = vec2(offset * 1.5 * float(wx), offset * TR * float(wy) ); // 左上点
v2 = vec2(offset * 1.5 * (float(wx) + 1.0), offset * TR * (float(wy) + 1.0)); // 右下点
}
}
// 计算实际点离左右两个六边形中点的距离
float s1 = sqrt( pow(v1.x-x, 2.0) + pow(v1.y-y, 2.0) );
float s2 = sqrt( pow(v2.x-x, 2.0) + pow(v2.y-y, 2.0) );
if(s1 < s2) vn = v1;
else vn = v2;
vn = vn / textureSize;
gl_FragColor = texture2D(texture, vn);
}
