Three.JS: Gaussian blur in GLSL shader

问题

I have this vert/frag shader, which is using vertex data and two textures.

I am trying to apply post blur effect, but having only rectangles after it.

vert:

attribute float type;
attribute float size;
attribute float phase;
attribute float increment;

uniform float time;
uniform vec2 resolution;
uniform sampler2D textureA;
uniform sampler2D textureB;

varying float t;

void main() {

    t = type;

    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );

    if(t == 0.) { 
        gl_PointSize = size * 0.8;
    } else {
        gl_PointSize = size * sin(phase + time * increment) * 12.;
    }
    gl_Position = projectionMatrix * mvPosition;
}

frag:

uniform float time;
uniform vec2 resolution;
uniform sampler2D textureA;
uniform sampler2D textureB;
varying float t;

uniform sampler2D texture;

vec4 blur2D(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {

    vec4 color = vec4(0.0);
    vec2 off1 = vec2(1.3846153846) * direction;
    vec2 off2 = vec2(3.2307692308) * direction;
    color += texture2D(image, uv) * 0.2270270270;
    color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
    color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
    color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
    color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
    return color;
}

void main() {

    vec2 direction = vec2(1., 0.);
    vec2 uv = vec2(gl_FragCoord.xy / resolution.xy);

    gl_FragColor = vec4(vec3(1.0, 1.0, 1.0), 1.);

    if(t == 0.){
        gl_FragColor = gl_FragColor * texture2D(textureA, gl_PointCoord);
    } else {
        gl_FragColor = gl_FragColor * texture2D(textureB, gl_PointCoord);
    }
    gl_FragColor = blur2D(texture, uv, resolution.xy, direction);
}

How could I 'bake' everything before applying blurring to texture2D/sampler2D? Maybe I need to create another blur shader and pass texture2D to it?

来源：https://stackoverflow.com/questions/45625986/three-js-gaussian-blur-in-glsl-shader

标签

three.js

glsl

blur

fragment-shader

texture2d