着色器中的图像模糊效果

Question

我想在我的游戏中实现像屏幕模糊这样的图像效果，但我有一个问题，它只会使屏幕略微变暗。

这是FBO的类：

GLuint m_fbo;
GLuint m_fboTexture;
GLuint m_fboDepthBuffer;

void FBO::Initialize(float width, float height)
{
    glGenFramebuffersEXT(1, &m_fbo);
    glGenTextures(1, &m_fboTexture);
    glGenRenderbuffersEXT(1, &m_fboDepthBuffer);

    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);

    glEnable(GL_TEXTURE_2D);
    glBindTexture(GL_TEXTURE_2D, m_fboTexture);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glGenerateMipmapEXT(GL_TEXTURE_2D);

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, (GLuint)width, (GLuint)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, 0);
    glFramebufferTexture2DEXT(GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT0_EXT, GL_TEXTURE_2D, m_fboTexture, 0);

    glBindRenderbufferEXT(GL_RENDERBUFFER_EXT, m_fboDepthBuffer);
    glRenderbufferStorageEXT(GL_RENDERBUFFER_EXT, GL_DEPTH_COMPONENT24, (GLuint)width, (GLuint)height);
    glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT_EXT, GL_RENDERBUFFER_EXT, m_fboDepthBuffer);

    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);

    glDisable(GL_TEXTURE_2D);
}

void FBO::Bind()
{
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);
}

void FBO::UnBind()
{
   glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);
}

void FBO::Clear()
{
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);
}

这是我在主类中设置它的方法。

FBO m_fbo;//create an object

//initialize size
m_fbo.Initiliazie(screen_width, screen_height);

在我的渲染函数中，我这样做：

void Render()
{
   SetShaderProgram();//start shader program

   m_fbo.Bind();

   SetShaderImageSampler("texture", 0, m_fbo.m_fboTexture);
   SetShaderUniformVec2("size", (float)SCREEN_WIDTH, (float)SCREEN_HEIGHT);
   SetShaderUniformInt("kernel_size", ksize);

   //draws my texture
   m_spriteBatch->Draw(RecTangle(0, 0, (float)SCREEN_WIDTH, (float)SCREEN_HEIGHT));

   m_fbo.UnBind();

   EndShaderProgram();//end shader program
}

SetShaderImageSampler函数的作用：

void SetShaderImageSampler(char *sSamplerName, U32 nSlot, GLuint nHandle)
{
    glEnable(GL_TEXTURE_2D);
    glActiveTexture(GL_TEXTURE0 + nSlot);
    glBindTexture(GL_TEXTURE_2D, nHandle);
    U32 nSamplerLoc = glGetUniformLocation(m_shaderProgram, sSamplerName);
    glUniform1iARB(nSamplerLoc, nSlot);
}

这是我的精灵批量绘制。

void SpriteBatch::Draw(RecTangle rect)
{
    //draws it depending on its center
    float left = -(rect.right/2.0f);
    float right = left + (rect.right);
    float top = -(rect.bottom/2.0f);
    float bottom = top + (rect.bottom);

    //vertices: Vertex(x, y, z, u, v) coordinates
    m_vertex[0] = Vertex(left,  top,    0, 0, 0);
    m_vertex[1] = Vertex(right, top,    0, 1, 0);
    m_vertex[2] = Vertex(right, bottom, 0, 1, 1);
    m_vertex[3] = Vertex(left,  bottom, 0, 0, 1);

    glEnableClientState(GL_VERTEX_ARRAY);
    glVertexPointer(3, GL_FLOAT, sizeof(Vertex), &m_vertex[0].m_fX);

    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glTexCoordPointer(2, GL_FLOAT, sizeof(Vertex), &m_vertex[0].m_fU);

    glDrawArrays(GL_QUADS, 0, 4);

    glDisableClientState(GL_VERTEX_ARRAY);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);

    glColor4f(0.5f, 0.5f, 0.5f, 0.5f);
}

这是我的片段着色器。

uniform sampler2D texture;
uniform vec2 size;
uniform int kernel_size;

void main (void)  
{ 
    vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
    vec2 st = gl_TexCoord[0].st;
    vec2 texel = 1.0/size;

    int sum = 0;
    for(int i=-kernel_size; i <= kernel_size; i++) 
    {
            vec4 value = texture2D(texture, st + vec2(0.0, texel.y * i));
            int factor = kernel_size+1 - abs((float)i);
            color += value * factor;
            sum += factor;
    }
    color /= sum;

    gl_FragColor = color;
    gl_FragColor.a = 1.0;
}

它的效果不是很好。我尝试更改着色器以执行其他操作，但无论如何它只会略微变暗。

- Jose

---

https://dev59.com/82Yq5IYBdhLWcg3w5Um8#14108694 - junaidsidhu

Answer 1

解绑应该这样做：

glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);

- Mortennobel

---

哇，我没看到那个。好了，它不再是黑色的了。现在我尝试做一些屏幕模糊，但它没有任何反应。我更新了问题。 - Jose

Answer 2

也许你没有包含足够的代码，但我没有看到你在Render方法中实际渲染任何东西。

你有一些调用，其中第一个我假设激活了上下文，然后你绑定了帧缓冲区并链接了着色器变量，但接下来我期望调用某个方法来以某种方式渲染四边形/网格（例如使用glBegin/glEnd部分或顶点缓冲区绑定和渲染）。

- Graham McIntyre

---

我没有包含它，因为我认为它不是必要的。这是我第一次做图像效果，所以我不确定如何初始化它。但就在EndShaderProgram之后，我会绘制一些物体，比如一个立方体和一个地板平面，它们有自己的着色器。所以我不确定屏幕模糊是否应该与其他对象的着色器放在一起，还是模糊需要有自己的着色器。我会更新渲染的其余部分，这样你就可以看到我在说什么了。 - Jose

Answer 3

通常要进行后期处理效果，您需要在帧缓冲处于激活状态下渲染场景。然后使用后期处理（模糊）着色器，以及绑定了帧缓冲纹理的采样器，渲染完整的屏幕四边形。

- Graham McIntyre

---

谢谢回复。我完全忘记渲染四边形了。现在我已经渲染了它，但是它只是变暗而不是模糊。我已经更新了我的问题。 - Jose

Answer 4

没事了，我已经把它搞定了。我在错误的地方调用了Bind和UnBind。

- Jose