glfx 透镜

原文链接: glfx 透镜

上一篇: glfx 旋涡

下一篇: glfx 彩色网格

强度-1,1 可以表示为凹透镜或者凸透镜

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 float radius;
uniform float strength;
uniform vec2 center;
uniform sampler2D texture;
uniform vec2 texSize;
varying vec2 texCoord;
void main() {
  vec2 coord = texCoord * texSize;
  coord -= center;
  float distance = length(coord);
  if (distance < radius) {
    float percent = distance / radius;
    if (strength > 0.0) {
      coord *= mix(1.0, smoothstep(0.0, radius / distance, percent),
                   strength * 0.75);
    } else {
      coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance,
                   1.0 - percent);
    }
  }
  coord += center;
  gl_FragColor = texture2D(texture, coord / texSize);
  vec2 clampedCoord = clamp(coord, vec2(0.0), texSize);
  if (coord !=
      clampedCoord) { /* fade to transparent if we are outside the image */
    gl_FragColor.a *= max(0.0, 1.0 - length(coord - clampedCoord));
  }
}
`;