使用着色器创建模糊滤镜-访问片段着色器中的相邻像素吗? [英] Creating blur filter with a shader - access adjacent pixels from fragment shader?

问题描述

我想在OpenGL ES 2.0中使用片段着色器创建模糊效果.我感兴趣的算法只是平均模糊-将所有相邻像素相加并除以9进行归一化.

I want to create a blur effect using a fragment shader in OpenGL ES 2.0. The algorithm I am interested in is simply an averaging blur - add all adjacent pixels to myself and divide by 9 to normalize.

但是我有2个问题:

1)这是否要求我先渲染到帧缓冲区，然后再切换渲染目标?还是有更简单的方法

1) does this require me to first render to a framebuffer, then switch rendering targets? Or is there an easier way

2)假设我将我的源"图像绑定为模糊0，然后输出模糊的纹理.如何访问不是我当前正在处理的像素. vert着色器已调用我的像素i，但是我需要访问我周围的像素.如何?以及我怎么知道我是否是边缘保护套(实际上是在屏幕边缘)

2) assume I bind my "source" image to blur as texture 0, and I'm outputting my blurred texture. How do I access the pixels that aren't the one I'm current dealing with. The vert shader has invoked me for pixel i, but I need to access the pixels around me. How? And how do I know if I'm an edge case (literally at edge of screen)

(3:是否有一种更合适的算法来使模糊的毛玻璃看起来更模糊)

(3: is there a more suitable algorithm to get a fuzzy frosted glass looking blur)

推荐答案

详细说明Matias所说的话:

Elaborating a bit more on what Matias said:

1. 是的.将图像渲染为纹理(最好使用FBO完成)，并在第二遍(模糊)中绑定此纹理并从中读取.您无法在一步中执行渲染和模糊传递，因为您无法访问当前正在渲染到的帧缓冲区.这会引入数据依赖性，因为您的邻居还不需要最后的颜色，或者更糟的是，颜色取决于您.

1. Yes. You render the image into a texture (best done using FBOs) and in the second (blur) pass you bind this texture and read from it. You cannot perform the render and blur passes in one step, as you cannot access the framebuffer you're currently rendering into. This would introduce data dependencies, as your neighbours need not have their final color yet, or worse there color depends on you.

您可以在特殊的片段着色器变量gl_FragCoord中获取当前像素的坐标，并将它们用作包含先前渲染图像的纹理的纹理坐标，对于邻居也同样使用gl_FragCoord.x +/- 1和gl_FragCoord.y +/- 1.但是就像Matias所说的那样，您需要分别根据(图像的)宽度和高度来指定这些值，因为纹理坐标位于[0,1]中.通过使用GL_CLAMP_TO_EDGE作为纹理的包装模式，纹理硬件将自动处理边缘情况.因此，在边缘处，您仍然可以获得9个值，但只有6个不同的值(其他3个，实际上位于图像外部的值只是其内部邻居的重复项).

You get the current pixel's coordinates in the special fragment shader variable gl_FragCoord and use these as texture coordinates into the texture containing the previously rendered image and likewise gl_FragCoord.x +/- 1 and gl_FragCoord.y +/- 1 for the neighbours. But like Matias said, you need to devide these values by width and height (of the image) respectively, as texture coordinates are in [0,1]. By using GL_CLAMP_TO_EDGE as wrapping mode for the texture, the edge cases are handled automatically by the texturing hardware. So at an edge you still get 9 values, but only 6 distinct ones (the other 3, the ones actually outside the image, are just duplicates of their inside neighbours).

这篇关于使用着色器创建模糊滤镜-访问片段着色器中的相邻像素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！