opengl - 如何模糊图像的边缘
问题描述
我想模糊图像的边缘,我采用的方法是将图像渲染到帧缓冲区,然后对其应用高斯模糊。
比我试图将实际图像覆盖在模糊图像之上,但这种方法似乎不起作用。
因为这不会在边缘周围产生模糊效果,但模糊的图像会移开。
请建议我可以实现此目的的方法,或者您是否可以向我展示如何在片段着色器中完成此操作。
编码
// Generate frame buffers
glGenFramebuffers(2, pingpongFBO);
glGenTextures(2, pingpongBuffer);
for (unsigned int i = 0; i < 2; i++)
{
glBindFramebuffer(GL_FRAMEBUFFER, pingpongFBO[i]);
glBindTexture(GL_TEXTURE_2D, pingpongBuffer[i]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA16F, SCR_WIDTH, SCR_HEIGHT, 0, GL_RGBA,
GL_FLOAT, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D,pingpongBuffer[i],0);
}
// blur the image
bool horizontal = true, first_iteration = true;
float blurValue = 6;
GLint drawFrameBuffer;
int amount = blurValue;
shaderBlur.use();
shaderBlur.setInt("image", 0);
glDisable(GL_DEPTH_TEST);
glActiveTexture(GL_TEXTURE0);
glBindFramebuffer(GL_FRAMEBUFFER, pingpongFBO[horizontal]);
glClearColor(1.0, 1.0, 1.0, 0.0);
glClear(GL_COLOR_BUFFER_BIT);
glBindFramebuffer(GL_FRAMEBUFFER, pingpongFBO[!horizontal]);
glClearColor(1.0, 1.0, 1.0, 0.0);
glClear(GL_COLOR_BUFFER_BIT);
for (unsigned int i = 0; i < amount; i++)
{
shaderBlur.setInt("horizontal", horizontal);
glBindFramebuffer(GL_FRAMEBUFFER, pingpongFBO[horizontal]);
if (first_iteration)
{
glBindTexture(GL_TEXTURE_2D, image.textureID);
glGenerateMipmap(GL_TEXTURE_2D);
}
else
{
glBindTexture(GL_TEXTURE_2D, pingpongBuffer[!horizontal]);
glGenerateMipmap(GL_TEXTURE_2D);
}
renderQuadInner();
horizontal = !horizontal;
if (first_iteration)
first_iteration = false;
}
// Map the image
shader.use();
shader.setInt("u_tex", 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0); // the default frame buffer
glClearColor(0.0, 0.0, 0.0, 0.0);
glClear(GL_COLOR_BUFFER_BIT);
glBindTexture(GL_TEXTURE_2D, pingpongBuffer[horizontal]); // the blurred image
renderQuad();
glBindTexture(GL_TEXTURE_2D, image.textureID); // the actual image
renderQuad();
模糊着色器
#version 330 core
out vec4 FragColor;
in vec2 TexCoords;
uniform sampler2D image;
uniform bool horizontal;
float offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );
uniform float weight[3] = float[] (0.2270270270, 0.316216162, 0.0702702703);
void main()
{
vec2 tex_offset = 3.0 / textureSize(image, 0); // gets size of single texel
vec4 result = texture(image, TexCoords).rgba * weight[0];
vec2 uv = TexCoords.xy;
if(horizontal)
{
for(int i = 1; i < 3; ++i)
{
result += texture(image, TexCoords + vec2(tex_offset.x * i, 0.0)).rgba * weight[i];
result += texture(image, TexCoords - vec2(tex_offset.x * i, 0.0)).rgba * weight[i];
}
}
else
{
for(int i = 1; i < 3; ++i)
{
result += texture(image, TexCoords + vec2(0.0, tex_offset.y * i)).rgba * weight[i];
result += texture(image, TexCoords - vec2(0.0, tex_offset.y * i)).rgba * weight[i];
}
}
FragColor = vec4(result);
}
解决方案
推荐阅读
- arrays - 通过指针数组获取输入
- php - Laravel 123 中的数组推送
- reactjs - 将 React Markdown NPM 导入 Codepen 会返回空白页
- javascript - 深度优先搜索的深拷贝对象
- python - Django DRF在自定义装饰器中获取请求查询参数,应用于viewsets.ViewSet中的函数
- javascript - 无法将 Ajax 数据传递到 HTML 表中
- laravel - SPA 和外部用户的相同 API 路由
- python - 在 Odoo12 中从 Jquery 调用 python 函数?
- flutter - 收到 fcm onBackgroundMessage 后颤振打开应用程序
- json - 即使 application/json 标头存在,lambda 函数中的 event.body 也不是对象