Android基于Shader的图像处理(3)-马赛克

完整代码位置:AndroidShaderDemo

1、四边形马赛克
在gpuimage里，马赛克的实现是PixellateFilter。fragment shader如下:

precision mediump float;
uniform sampler2D u_TextureUnit;
varying vec2 v_TextureCoordinates;

uniform float texelWidthOffset;
uniform float texelHeightOffset;

const float pixel = 30.0;

void main()
{
   //四边形
   vec2 uv  = v_TextureCoordinates.xy;
   float dx = pixel * texelWidthOffset;
   float dy = pixel * texelHeightOffset;
   vec2 coord = vec2(dx * floor(uv.x / dx), dy * floor(uv.y / dy));
   vec3 tc = texture2D(u_TextureUnit, coord).xyz;

   gl_FragColor = vec4(tc, 1.0);

}

这里的马赛克形状是四边形的，原理是定义pixel表示一个马赛克块的大小，然后在fragment shader里将这个马赛克块范围内的像素设置为同一个颜色。渲染后的结果:

mosaic.png

2、圆形马赛克
下面实现原型马赛克，原理是找到每个圆形马赛克的圆心，判断当前像素距离圆心的距离是否小于马赛克的半径，如果小于半径，当前像素的颜色就设为圆心的颜色，否则为黑色。fragment shader如下:

precision mediump float;
uniform sampler2D u_TextureUnit;
varying vec2 v_TextureCoordinates;
uniform float texelWidthOffset;
uniform float texelHeightOffset;
const float pixel = 30.0;

void main()
{
   vec2 uv  = v_TextureCoordinates.xy;
   float dx = pixel * texelWidthOffset;
   float dy = pixel * texelHeightOffset;
   // 计算一个马赛克的中心坐标
   vec2 coord = vec2(dx * floor(uv.x / dx) + 0.5 * dx, dy * floor(uv.y / dy) + 0.5 * dy);
   // 计算当前像素距离所在马赛克中心的长度
   vec2 delXY = coord - uv;
   float delL = length(delXY);

   vec4 finalColor;
   if(delL < 0.5 * dx)
   {
      finalColor = texture2D(u_TextureUnit, coord);
   }
   else
   {
      finalColor = vec4(0., 0., 0., 1.);
   }

   gl_FragColor = finalColor;
}

渲染后的结果：

circle_mosaic.png