Question

我希望使用以下片段着色器模糊我的背景：

varying vec4 vColor;
varying vec2 vTexCoord;

uniform vec2 screenSize;

uniform sampler2D u_texture;
uniform vec4 v_time;

const float RADIUS = 0.75;

const float SOFTNESS = 0.6;

const float blurSize = 1.0/1000.0;

void main() {

    vec4 texColor = vec4(0.0); // texture2D(u_texture, vTexCoord)
    texColor += texture2D(u_texture, vTexCoord - 4.0*blurSize) * 0.05;
    texColor += texture2D(u_texture, vTexCoord - 3.0*blurSize) * 0.09;
    texColor += texture2D(u_texture, vTexCoord - 2.0*blurSize) * 0.12;
    texColor += texture2D(u_texture, vTexCoord - blurSize) * 0.15;
    texColor += texture2D(u_texture, vTexCoord) * 0.16;
    texColor += texture2D(u_texture, vTexCoord + blurSize) * 0.15;
    texColor += texture2D(u_texture, vTexCoord + 2.0*blurSize) * 0.12;
    texColor += texture2D(u_texture, vTexCoord + 3.0*blurSize) * 0.09;
    texColor += texture2D(u_texture, vTexCoord + 4.0*blurSize) * 0.05;

    vec4 timedColor = (vColor + v_time);

    vec2 position = (gl_FragCoord.xy / screenSize.xy) - vec2(0.5);
    float len = length(position);

    float vignette = smoothstep(RADIUS, RADIUS-SOFTNESS, len);

    texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette, 0.5);

    gl_FragColor = vec4(texColor.rgb * timedColor.rgb, texColor.a);
}

但问题在于着色器模糊了所有屏幕..我应该写什么才能让它专注于我的背景纹理而不是所有屏幕？

Answer 1

片段着色器适用于使用该着色器绘制的三角形的每个像素。可能是您将着色器应用于错误的三角形，问题不是着色器。

那个着色器对我来说很奇怪。

vTexCoord - blurSize

vTexCoord - 是vec2

blurSize - 是float

如果你写一些东西，代码会更正确

vTexCoord - vec2(blurSize, 0.0)

Answer 2

好的，我要回答我的问题。

我希望我的着色器程序仅模糊背景纹理而不是所有屏幕。所以我创建了两个着色器程序，一个用于背景，另一个用于其余。当程序绘制背景时，它会切换到背景着色器，然后切换到默认着色器。

简单就是这样。

GLSL - 仅对一个纹理起作用

2 个答案: