Recently delving into GLSL shaders in three.js, I am currently experimenting with creating a simple and efficient blur effect on a mesh texture. Below is the fragment shader code I have been working on:
void blurh(in vec4 inh, out vec4 outh, int r) {
for(int x = -r; x < r+1; x++) {
float coordx = vUv[0] + float(x) / uResolution[0];
coordx = max(0.0, min(1.0, coordx));
inh += texture2D(uTexture, vec2 (coordx, vUv[1]));
}
outh = inh / float(r + r + 1);
}
void blurv(in vec4 inv, out vec4 outv, int r) {
for(int y = -r; y < r+1; y++) {
float coordy = vUv[1] + float(y) / uResolution[1];
coordy = max(0.0, min(1.0, coordy));
inv += texture2D(uTexture, vec2 (vUv[0], coordy));
}
outv = inv / float(r + r + 1);
}
void main() {
int r = 200; // radius
gl_FragColor = texture2D(uTexture, vUv);
blurh(gl_FragColor, gl_FragColor, r);
blurv(gl_FragColor, gl_FragColor, r);
}