gldx 三角形模糊

原文链接: gldx 三角形模糊

上一篇: glfx 聚焦模糊

下一篇: glfx 旋涡

在两个方向上各做一次, 输入的半径取值为 [0, max(w,h)]

  simpleShader.call(this, gl.triangleBlur, {
    delta: [radius / this.width, 0]
  });
  simpleShader.call(this, gl.triangleBlur, {
    delta: [0, radius / this.height]
  });

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 delta;
varying vec2 texCoord;
${getHlsl("noise3d")} 
void main() {
  vec4 color = vec4(0.0);
  float total =
      0.0; /* randomize the lookup values to hide the fixed number of samples */
  float offset = snoise(vec3(12.9898, 78.233, 151.7182));
  for (float t = -30.0; t <= 30.0; t++) {
    float percent = (t + offset - 0.5) / 30.0;
    float weight = 1.0 - abs(percent);
    vec4 sample =
        texture2D(texture, texCoord +
                               delta * percent); /* switch to pre-multiplied
                                                    alpha to correctly blur
                                                    transparent images */
    sample.rgb *= sample.a;
    color += sample * weight;
    total += weight;
  }
  gl_FragColor = color / total; /* switch back from pre-multiplied alpha */
  gl_FragColor.rgb /= gl_FragColor.a + 0.00001;
}
`;