原文链接: glfx 聚焦模糊
上一篇: glfx 光圈效果
下一篇: gldx 三角形模糊
随机算法可以随便换
强度是0-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 sampler2D texture;
uniform vec2 center;
uniform float strength;
uniform vec2 texSize;
varying vec2 texCoord;
${getHlsl("noise3d")}
void main() {
vec4 color = vec4(0.0);
float total = 0.0;
vec2 toCenter =
center - texCoord * texSize; /* randomize the lookup values to hide the
fixed number of samples */
float offset = snoise(vec3(12.9898, 78.233, 151.7182));
for (float t = 0.0; t <= 40.0; t++) {
float percent = (t + offset) / 40.0;
float weight = 4.0 * (percent - percent * percent);
vec4 sample = texture2D(texture, texCoord +
toCenter * percent * strength /
texSize); /* 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;
}
`;