在 OpenGL ES 2.0 中应用高斯模糊时如何修复奇怪的伪影答案

【问题标题】：How to fix strange artifacts when applying Gaussian blur in OpenGL ES 2.0在 OpenGL ES 2.0 中应用高斯模糊时如何修复奇怪的伪影
【发布时间】：2019-06-22 06:57:16
【问题描述】：

在 OpenGL ES 2.0（使用 QT）中应用高斯模糊来实现光晕效果时，我遇到了奇怪的伪影，如下所示。左边是开启绽放效果，右边是关闭效果：

奇怪的是，这种伪影仅在我渲染某些线条时才会发生，如下图所示。就其价值而言，这些线条实际上是以恒定像素宽度渲染到屏幕上的四边形。没有其他物体有任何可见的伪影，只有预期的高斯模糊，更奇怪的是，我一直在渲染的大多数其他线条看起来都很好。您可以在左图中看到，左侧的青色线在没有任何奇怪的伪影的情况下被渲染。

这是我整理的着色器：

顶点着色器：

#ifdef GL_ES
precision mediump int;
precision mediump float;
#endif

attribute vec3 aPos;
attribute vec2 aTexCoords;

varying vec2 blurTextureCoords[11];
varying vec2 texCoords;

uniform vec2 screenRes; // image width
uniform int effectType;

void main(void){

    // Set GL position
    gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0); 
    texCoords = aTexCoords;


    if(effectType == 2){
        // Horizontal blur
        vec2 centerTexCoords = vec2(aPos.x, aPos.y)*0.5 + 0.5; // Coordinates of center of texture
        float pixelSize = 1.0 / screenRes.x;

        // Fill out texture coord array
        for(int i=-5; i<=5; i++){
            float i_float = float(i);
            blurTextureCoords[i+5] = centerTexCoords + vec2(pixelSize * i_float, 0.0);
        }
    }
    else if(effectType == 3){
        // Vertical blur
        vec2 centerTexCoords = vec2(aPos.x, aPos.y)*0.5 + 0.5; // Coordinates of center of texture
        float pixelSize = 1.0 / screenRes.y;

        // Fill out texture coord array
        for(int i=-5; i<=5; i++){
            float i_float = float(i);
            blurTextureCoords[i+5] = centerTexCoords + vec2(0.0, pixelSize * i_float);
        }
    }
}

片段着色器

#ifdef GL_ES
precision mediump int;
precision mediump float;
#endif

varying vec2 blurTextureCoords[11];
varying vec2 texCoords;

uniform sampler2D screenTexture;
uniform sampler2D sceneTexture;
uniform int effectType;

void main(void){
    vec4 color = texture2D(screenTexture, texCoords);

    // Different effects
    if(effectType == 2 || effectType == 3){
        // Blur
        gl_FragColor = vec4(0.0);
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[0]) * 0.0093;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[1]) * 0.028002;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[2]) * 0.065984;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[3]) * 0.121703;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[4]) * 0.175713;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[5]) * 0.198596;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[6]) * 0.175713;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[7]) * 0.121703;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[8]) * 0.065984;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[9]) * 0.028002;
        gl_FragColor += texture2D(screenTexture, blurTextureCoords[10]) * 0.0093;
    }
    else{
        gl_FragColor = color;
    }
}

我一直无法在我的代码的其他部分找到任何奇怪的东西，而且只有这些特定的行被弄乱了，这真的很奇怪。有什么想法吗？

【问题讨论】：

标签： c++ qt opengl-es framebuffer gaussianblur

【解决方案1】：

解决了这个问题！我需要将采样纹理坐标的颜色值限制在 0 和 1 之间，因为我使用的是 HDR，并且这些值会使高斯模糊效果饱和。

【讨论】：