如何使用無正方形的glsl着色器來模糊圖像？

Question

我想用高斯模糊算法模糊圖像。我使用以下着色器：

頂點着色器

attribute vec4 position; 
attribute vec4 inputTextureCoordinate; 

const int GAUSSIAN_SAMPLES = 9; 

uniform float texelWidthOffset; 
uniform float texelHeightOffset; 

varying vec2 textureCoordinate; 
varying vec2 blurCoordinates[GAUSSIAN_SAMPLES]; 

void main() 
{ 
    gl_Position = position; 
    textureCoordinate = inputTextureCoordinate.xy; 

    // Calculate the positions for the blur 
    int multiplier = 0; 
    vec2 blurStep; 
    vec2 singleStepOffset = vec2(texelHeightOffset, texelWidthOffset); 

    for (int i = 0; i < GAUSSIAN_SAMPLES; i++) 
    { 
     multiplier = (i - ((GAUSSIAN_SAMPLES - 1)/2)); 
     // Blur in x (horizontal) 
     blurStep = float(multiplier) * singleStepOffset; 
     blurCoordinates[i] = inputTextureCoordinate.xy + blurStep; 
    } 
} 

片段着色器

uniform sampler2D inputImageTexture; 

const lowp int GAUSSIAN_SAMPLES = 9; 

varying highp vec2 textureCoordinate; 
varying highp vec2 blurCoordinates[GAUSSIAN_SAMPLES]; 

void main() 
{ 
    lowp vec3 sum = vec3(0.0); 
    lowp vec4 fragColor=texture2D(inputImageTexture,textureCoordinate); 

    sum += texture2D(inputImageTexture, blurCoordinates[0]).rgb * 0.05; 
    sum += texture2D(inputImageTexture, blurCoordinates[1]).rgb * 0.09; 
    sum += texture2D(inputImageTexture, blurCoordinates[2]).rgb * 0.12; 
    sum += texture2D(inputImageTexture, blurCoordinates[3]).rgb * 0.15; 
    sum += texture2D(inputImageTexture, blurCoordinates[4]).rgb * 0.18; 
    sum += texture2D(inputImageTexture, blurCoordinates[5]).rgb * 0.15; 
    sum += texture2D(inputImageTexture, blurCoordinates[6]).rgb * 0.12; 
    sum += texture2D(inputImageTexture, blurCoordinates[7]).rgb * 0.09; 
    sum += texture2D(inputImageTexture, blurCoordinates[8]).rgb * 0.05; 

    gl_FragColor = vec4(sum,fragColor.a); 
} 

我使用該代碼來加載和編譯的着色器

public static int loadShader(final String strSource, final int iType) { 
     int[] compiled = new int[1]; 
     int iShader = GLES20.glCreateShader(iType); 
     GLES20.glShaderSource(iShader, strSource); 
     GLES20.glCompileShader(iShader); 
     GLES20.glGetShaderiv(iShader, GLES20.GL_COMPILE_STATUS, compiled, 0); 
     if (compiled[0] == 0) { 
      Log.d("Load Shader Failed", "Compilation\n" + GLES20.glGetShaderInfoLog(iShader)); 
      return 0; 
     } 
     return iShader; 
    } 

    public static int loadProgram(final String strVSource, final String strFSource) { 
     int iVShader; 
     int iFShader; 
     int iProgId; 
     int[] link = new int[1]; 
     iVShader = loadShader(strVSource, GLES20.GL_VERTEX_SHADER); 
     if (iVShader == 0) { 
      Log.d("Load Program", "Vertex Shader Failed"); 
      return 0; 
     } 
     iFShader = loadShader(strFSource, GLES20.GL_FRAGMENT_SHADER); 
     if (iFShader == 0) { 
      Log.d("Load Program", "Fragment Shader Failed"); 
      return 0; 
     } 

     iProgId = GLES20.glCreateProgram(); 

     GLES20.glAttachShader(iProgId, iVShader); 
     GLES20.glAttachShader(iProgId, iFShader); 

     GLES20.glLinkProgram(iProgId); 

     GLES20.glGetProgramiv(iProgId, GLES20.GL_LINK_STATUS, link, 0); 
     if (link[0] <= 0) { 
      Log.d("Load Program", "Linking Failed"); 
      return 0; 
     } 
     GLES20.glDeleteShader(iVShader); 
     GLES20.glDeleteShader(iFShader); 
     return iProgId; 
    } 

這產生的圖像與很多模糊的正方形。

不過。如何得到這樣的東西？

Answer 1

vec2(texelHeightOffset, texelWidthOffset); 

反轉，從而導致模糊內核是錯誤的。

將其更改爲：

vec2(texelWidthOffset, texelHeightOffset); 

而且你正在做一個對角線模糊範圍在+ - （尺寸/ 2）* pixelSize， 完成你想要的平滑模糊，你必須做出一個正方形內核：

kernHSize = (sqrt(GAUSSIAN_SAMPLES)-1)/2; 
for(y=-kernHSize; y<kernHSize; y++) 
    for(x=-kernHSize; x<kernHSize; x++) 
     blurCoordinates[y*kernHSize+x] = inputTextureCoordinate.xy + vec2(x*texelWidthOffset,y*texelHeightOffset); 

那麼，正確的內核COEF可能是：

{1/16,1/8,1/16,1/8,1/4,1/8,1/16,1/8,1/16}