glfx 正六边形马赛克模糊效果

原文链接: glfx 正六边形马赛克模糊效果

上一篇: 正则表达式实现富文本打字机效果

下一篇: glfx 亮度和对比度

计算中心后将六边形内的颜色设置为中心值

scale是像素大小, 还需要图像中心, 和图像大小, 用来计算每个六边形的位置

const vert = `
precision highp float;
attribute vec2 vertex;
attribute vec2 uv;
varying vec2 texCoord;
void main() {
  texCoord=uv;
  gl_Position = vec4(vertex, 0.0, 1.0);
}
`;

const frag = `
precision highp float;
uniform sampler2D texture;
uniform vec2 center;
uniform float scale;
uniform vec2 texSize;
varying vec2 texCoord;
void main() {
  // vec2 texCoord = gl_FragCoord.xy;
  vec2 tex = (texCoord * texSize - center) / scale;
  tex.y /= 0.866025404;
  tex.x -= tex.y * 0.5;
  vec2 a;
  if (tex.x + tex.y - floor(tex.x) - floor(tex.y) < 1.0)
    a = vec2(floor(tex.x), floor(tex.y));
  else
    a = vec2(ceil(tex.x), ceil(tex.y));
  vec2 b = vec2(ceil(tex.x), floor(tex.y));
  vec2 c = vec2(floor(tex.x), ceil(tex.y));
  vec3 TEX = vec3(tex.x, tex.y, 1.0 - tex.x - tex.y);
  vec3 A = vec3(a.x, a.y, 1.0 - a.x - a.y);
  vec3 B = vec3(b.x, b.y, 1.0 - b.x - b.y);
  vec3 C = vec3(c.x, c.y, 1.0 - c.x - c.y);
  float alen = length(TEX - A);
  float blen = length(TEX - B);
  float clen = length(TEX - C);
  vec2 choice;
  if (alen < blen) {
    if (alen < clen)
      choice = a;
    else
      choice = c;
  } else {
    if (blen < clen)
      choice = b;
    else
      choice = c;
  }
  choice.x += choice.y * 0.5;
  choice.y *= 0.866025404;
  choice *= scale / texSize;
  gl_FragColor = texture2D(texture, choice + center / texSize);
  // gl_FragColor = texture2D(texture,  texCoord);
}
`;