Three.JS:GLSL着色器中的高斯模糊

时间:2017-08-11 02:23:11

标签: three.js glsl blur fragment-shader texture2d

我有这个vert / frag着色器,它使用顶点数据和两个纹理。

我正在尝试应用后模糊效果,但之后只有矩形。

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;
}

断枝:

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);
}

在将纹理应用于texture2D / sampler2D之前,我怎么能'烘焙'所有东西? 也许我需要创建另一个模糊着色器并将texture2D传递给它?

0 个答案:

没有答案