webgl错误中的高斯模糊

Question

我试图在webgl中编写一个简单的高斯模糊着色器。我已经对此进行了很多搜索，我想我理解它背后的想法。给定这个3X3内核。如何将其应用于我的顶点着色器？

这是我目前的输出

[ 0.0625  0.125  0.0625 ]
[ 0.125   0.25   0.125  ]
[ 0.0625  0.125  0.0625 ]

特别是如何获取相邻像素？

这种逻辑甚至有意义吗？

precision mediump float;
varying vec2 vUV;

uniform sampler2D uTexture;

void main(){
     gl_FragColor = texture2D(uTexture, vUV + vec2(????,????)*0.0625;


}

我应该在上面的vec2（）中放什么？说如果我想获得内核的左上角纹理值。假设我应该写vUv为（20,20）以获得（19,19）

     gl_FragColor = vec4(0.0);
     gl_FragColor += texture2D(uTexture, vUV  +  vec2(vUV.x-1.0,vUV.y-1.0))*0.0625;
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x,vUV.y-1.0))*0.125;    
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x+1.0,vUV.y-1.0))*0.0625;

     gl_FragColor += texture2D(uTexture, vUV  +  vec2(vUV.x-1.0,vUV.y))*0.125;
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x,vUV.y))*0.25; 
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x+1.0,vUV.y))*0.125;    


     gl_FragColor += texture2D(uTexture, vUV  +  vec2(vUV.x-1.0,vUV.y+1.0))*0.0625;
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x,vUV.y+1.0))*0.125;    
     gl_FragColor += texture2D(uTexture, vUV + vec2(vUV.x+1.0,vUV.y+1.0))*0.0625;   

Answer 1

用于通过来查找纹理的纹理坐标texture2D必须在[0.0，1.0]范围内。

也可以看看

• opengl纹理坐标如何工作？
• WebGL基础知识，WebGL 3D-纹理。

为了使着色器正常工作，您必须定义一个统一变量，该变量包含用于创建模糊效果的纹理像素的偏移量：

uniform vec2 offs_blur;

使用此偏移量进行9个纹理查找：

gl_FragColor = vec4(0.0);
gl_FragColor += texture2D(uTexture, vUV + vec2(-offs_blur.x, -offs_blur.y))*0.0625;
gl_FragColor += texture2D(uTexture, vUV + vec2(         0.0, -offs_blur.y))*0.125;  
gl_FragColor += texture2D(uTexture, vUV + vec2( offs_blur.x, -offs_blur.y))*0.0625;

gl_FragColor += texture2D(uTexture, vUV + vec2(-offs_blur.x,          0.0))*0.125;
gl_FragColor += texture2D(uTexture, vUV + vec2(         0.0,          0.0))*0.25;   
gl_FragColor += texture2D(uTexture, vUV + vec2( offs_blur.x,          0.0))*0.125;  


gl_FragColor += texture2D(uTexture, vUV + vec2(-offs_blur.x, offs_blur.y))*0.0625;
gl_FragColor += texture2D(uTexture, vUV + vec2(         0.0, offs_blur.y))*0.125;   
gl_FragColor += texture2D(uTexture, vUV + vec2( offs_blur.x, offs_blur.y))*0.0625;  

到相邻纹理像素的偏移是纹理大小的倒数（1 / width，1 / height）。
但是，偏移不必是到相邻纹理像素的确切偏移，即可获得模糊效果。如果增加偏移量，模糊效果将增强。当然，这会导致质量下降。随着偏移量的增加，伪影和条带效应将增长。为了避免这种情况，您必须增加要查找的纹素的数量（例如，查找5x5纹素）

这样设置制服：

offs_blur = gl.getUniformLocation(program,"offs_blur");

var blur = 20.0;
gl.uniform2fv(offs_blur,[blur/image.width, blur/image.height]);

请参阅示例，该示例将答案中的建议应用于您问题的原始代码：

uniform vec2 offs_blur;