glfx 彩色网格

原文链接: glfx 彩色网格

上一篇: glfx 透镜

下一篇: gl-matrix 简单瞅瞅

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 angle;
uniform float scale;
uniform vec2 texSize;
varying vec2 texCoord;
float pattern(float angle) {
  float s = sin(angle), c = cos(angle);
  vec2 tex = texCoord * texSize - center;
  vec2 point = vec2(c * tex.x - s * tex.y, s * tex.x + c * tex.y) * scale;
  return (sin(point.x) * sin(point.y)) * 4.0;
}
void main() {
  vec4 color = texture2D(texture, texCoord);
  vec3 cmy = 1.0 - color.rgb;
  float k = min(cmy.x, min(cmy.y, cmy.z));
  cmy = (cmy - k) / (1.0 - k);
  cmy = clamp(cmy * 10.0 - 3.0 + vec3(pattern(angle + 0.26179),
                                      pattern(angle + 1.30899), pattern(angle)),
              0.0, 1.0);
  k = clamp(k * 10.0 - 5.0 + pattern(angle + 0.78539), 0.0, 1.0);
  gl_FragColor = vec4(1.0 - cmy - k, color.a);
}
`;