2012-09-04 2 views
1

저는 Instagram 응용 프로그램과 비슷한 흐림 효과를 위해 GPUImage 프레임 워크를 사용했습니다.이 프레임 워크에서는 사진 라이브러리에서 사진을 가져 오기위한 뷰를 만든 다음 효과를 적용했습니다.원 대신 사각형 위에 작동하도록 GPUImageGaussianSelectiveBlurFilter를 수정하려면 어떻게해야합니까?

효과 중 하나는 선택적인 흐림 효과로 이미지의 작은 부분 만 명확하고 나머지는 흐려집니다. GPUImageGaussianSelectiveBlurFilter는 흐려지지 않도록 이미지의 원형 부분을 선택합니다.

대신 날카로운 영역을 직사각형 모양으로 변경하려면 어떻게해야합니까?

+0

다음은 힌트입니다. GPUImageGaussianSelectiveBlurFilter의 사용자 정의 프래그먼트 셰이더의 가운데 두 줄은 초점이 맞는 영역의 모양을 제어합니다. 이 작업을 쉽게 수행 할 수 있도록 변경해야합니다. –

+0

고맙습니다 브래드, 방금 그 두 줄을 수정했는데 지금은 직사각형 커팅을했습니다. 코드가 도움이되었습니다. 다시 한 번 감사드립니다 :) – 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))에서 현재 픽셀의 좌표까지의 거리를 계산합니다. 마지막 행은 중심점으로부터의 거리가 두 개의 임계 값, 내부 투명 원 및 외부 완전 흐려진 원 사이를 이동할 때 부드럽게 0과 1 사이를 보간하기 위해 smoothstep() GLSL 함수를 사용합니다. 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

그것을했다 ... 나는 직사각형의 효과에 대한 코드는 길의 대답은 정확히 정확하지 않기 때문에 이러한 2 선

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

관련 문제