2012-09-04 93 views
1

我已經使用了GPUImage框架來模擬類似於Instagram應用程序的模糊效果,其中我已經制作了一個從照片庫中獲取照片的視圖,然後對其施加了影響。如何修改GPUImageGaussianSelectiveBlurFilter以在矩形而不是圓上操作?

一方式的效果是選擇性的模糊效果,其中只有圖像的一小部分是清楚的其餘部分是模糊的。 GPUImageGaussianSelectiveBlurFilter選擇圖像的圓形部分以避免模糊。

我該如何改變這一點,使銳利的區域形狀爲矩形?

+0

這提示:中間兩行GPUImageGaussianSelectiveBlurFilter的定製片段着色器控制對焦區域的形狀。你應該能夠改變這些很容易做到這一點。 –

+0

Thanx Brad,只是修改了這兩行,現在我有一個矩形切割,你的代碼幫了我很多。再次感謝:) – IronManGill

回答

3

因爲吉爾的回答是不完全正確的,因爲這似乎是在問了個遍,我我會在上面澄清我的評論。

片段着色器用於通過默認選擇性模糊具有下面的代碼:

varying highp vec2 textureCoordinate; 
varying highp vec2 textureCoordinate2; 

uniform sampler2D inputImageTexture; 
uniform sampler2D inputImageTexture2; 

uniform lowp float excludeCircleRadius; 
uniform lowp vec2 excludeCirclePoint; 
uniform lowp float excludeBlurSize; 
uniform highp float aspectRatio; 

void main() 
{ 
    lowp vec4 sharpImageColor = texture2D(inputImageTexture, textureCoordinate); 
    lowp vec4 blurredImageColor = texture2D(inputImageTexture2, textureCoordinate2); 

    highp vec2 textureCoordinateToUse = vec2(textureCoordinate2.x, (textureCoordinate2.y * aspectRatio + 0.5 - 0.5 * aspectRatio)); 
    highp float distanceFromCenter = distance(excludeCirclePoint, textureCoordinateToUse); 

    gl_FragColor = mix(sharpImageColor, blurredImageColor, smoothstep(excludeCircleRadius - excludeBlurSize, excludeCircleRadius, distanceFromCenter)); 
} 

該片段着色器需要在一個像素顏色值從兩個原始清晰圖像和高斯模糊圖像的版本。然後根據最後三行的邏輯將它們混合在一起。

第一和這些行的第二計算從中心的距離的座標所指定((0.5,0.5)在默認情況下,該圖像的死點歸一化座標)到當前像素的座標。最後一行使用GLSL函數在距離中心點的距離在兩個閾值,內部清晰圓圈和外部完全模糊圓圈之間移動時,在0和1之間平滑插值。然後mix()操作員從smoothstep()獲取輸出並在模糊和清晰的彩色像素顏色之間淡入以產生適當的輸出。

如果你只是想修改這個來產生一個正方形的形狀而不是圓形的,你需要調整片段着色器中的兩條中心線,以便在線性X或Y座標上作爲距離的基礎,而不是畢達哥拉斯距離中心點。要做到這一點,改變着色器閱讀:

varying highp vec2 textureCoordinate; 
varying highp vec2 textureCoordinate2; 

uniform sampler2D inputImageTexture; 
uniform sampler2D inputImageTexture2; 

uniform lowp float excludeCircleRadius; 
uniform lowp vec2 excludeCirclePoint; 
uniform lowp float excludeBlurSize; 
uniform highp float aspectRatio; 

void main() 
{ 
    lowp vec4 sharpImageColor = texture2D(inputImageTexture, textureCoordinate); 
    lowp vec4 blurredImageColor = texture2D(inputImageTexture2, textureCoordinate2); 

    highp vec2 textureCoordinateToUse = vec2(textureCoordinate2.x, (textureCoordinate2.y * aspectRatio + 0.5 - 0.5 * aspectRatio)); 

    textureCoordinateToUse = abs(excludeCirclePoint - textureCoordinateToUse); 
    highp float distanceFromCenter = max(textureCoordinateToUse.x, textureCoordinateToUse.y); 

    gl_FragColor = mix(sharpImageColor, blurredImageColor, smoothstep(excludeCircleRadius - excludeBlurSize, excludeCircleRadius, distanceFromCenter)); 
} 

是吉爾提到的線是爲過濾器只需輸入參數,並且完全不控制其圓度。

我留下了進一步的修改,以便爲讀者生成一個通用的矩形形狀作爲練習,但是這應該爲您如何做到這一點提供了基礎,並對該着色器中的線條做了更多解釋。

0

誰幹的,爲矩形效果的代碼只是在這兩條線

blurFilter = [[GPUImageGaussianSelectiveBlurFilter alloc] init]; 
     [(GPUImageGaussianSelectiveBlurFilter*)blurFilter  setExcludeCircleRadius:80.0/320.0]; 
     [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setExcludeCirclePoint:CGPointMake(0.5f, 0.5f)]; 
     // [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setBlurSize:0.0f];   [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setAspectRatio:0.0f]; 
+1

在哪裏你在代碼中設置一個矩形區域? – Nikita

+0

@nik好吧,我有很多代碼,我把它放在這裏... :)如果你想我可以提供給你... – IronManGill

+0

我會很高興... – Nikita

相關問題