다운샘플링은 했으니 이제 블러를 만들어 봅시다.
블러 만드는 방법은 뭐 몇 가지가 있지만...
일단 주변 7방향을 모두 방향의 값을 모두 받아와 처리하는 방법이 있고...
에이 그건 넘하자나라는 느낌으로 , 가로 블러하고 세로 블러하는 방법으로 두 번 처리해서 만드는 방법이 있는데
이렇게 한 번 가로로만 블러링해 주고
이렇게 세로로 그걸 다시 블러링 해주는 방법이예요.
전 이 두 번째 방법을 쓸겁니다.
이게 더 싸고 편해서요. (첫 번째건 사실 해본적도 없어요)
일단 이 글은 친절한 튜터리얼이 아니므로 결과부터 보고 설명하죠.
사실 친절한 튜터리얼을 만들어서 꼬꼬마들이 따라오게 할 수준의 강의도 아니고...
학교에서 저한테 쉐이더 수업을 이수한 친구들이 '뭐 더 할거 없나' 라고 기웃댈때 보라고 만든거라서
기본적으로 중급 이상의 내용이니까 친절함은 좀 가져다 버릴겁니다.
그래도 솔직히 프로그래머들 책보다는 조금 친절하잖아요? 헤헤헿
어쨌건 일단 이미지를 좌우로 흔들어줍니다.
코드는 다음과 같습니다.
버텍스 셰이더 단계에서 UV를 하나 더 만들어줄 필요가 있습니다.
여기서는 offs란 이름을 썼는데요.
half2 blurFilter = _MainTex_TexelSize.xy * half2(1.0, 0.0);
에서
_MainTex_TexelSize.xy 는 말그대로 화면의 픽셀 = 텍셀 사이즈를 말하는 겁니다. 가로가 1024 면 여기에는 1/1024가 들어가요.
이렇게 후처리할때 많이 쓰죠.
거기다가 1, 0 을 곱해줬으니. 지금은 X 만 있는 겁니다.
half4 coords = blurFilter.xyxy* 3.0;
는 일단 텍셀사이즈를 3으로 늘려준겁니다. 크기를 늘려준거예요. 뭘 하려 그러는걸까낭 ㅎㅎ
그리고 마침 float4 니까 xyxy로 두 번으로 늘려줬습니다. 다 쓸라고 그런 거예요
o.offs = v.uv.xyxy + coords * half4(1.0h,1.0h,-1.0h,-1.0h);
에서 uv를 coord 만큼 이동시켜줬습니다. 즉 텍셀사이즈 3만큼 이동시켜준거죠.
근데 + 방향으로만 이동시키면 곤란하니까 float4로 만들어서 뒤에 xy 한테는 - 를 곱해준 겁니다.
이제 offs은 텍셀사이즈x 텍셀사이즈 y -텍셀사이즈x -텍셀사이즈y 가 되었습니다. 양수 음수 차곡차곡.
이제 이걸 픽셀셰이더로 넘겨 와서
half4 tapA = tex2D(_MainTex, i.offs.xy);
half4 tapB = tex2D(_MainTex, i.offs.zw);
color += (tapA + tapB) ;
로 두 번 텍스 2D 를 해줘서 더해주면
이렇게 가로로 블러된 두 개의 이미지를 만들게 됩니다.
좀 밝아졌죠? 뭐 어쩔 수 없잖아요?
위의 원리를 알아보기 쉽게 우리집 강아지 단비로 시연을 해 봤습니다.
말티즈 5살 남아입니다. 잇힝
이제 다음에 필요한것은 이걸 여러 번 해서 더하는건데...
거기서 필요한 매직 넘버가 있습니다.
바로 가우시안 넘버
우후후 저거예요
저걸 블러된 이미지라 생각해 보면
중심 이미지는 진하고
중심에서 점점 멀어질수록 연하면 블러같잖아요
물론 저걸 단계를 그냥 아주 세밀하게 하면 아주 좋은 블러 . 포토샵 블러랑 같아 지겠죠 가우시안 그거니까.
그치만 우리는 그렇게 전부 단계를 할 수가 없잖아요
그래서 저렇게 7개만 잡아서 처리하는거죠 . 저렇게 아날로그틱한걸 디지털틱하게 중간중간 캡쳐하는걸 '샘플링' 이라고 합니다.
그리고 이 마법의 숫자는
더하면 1이 된다는 놀라운 사실 오우 놀라워라 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 나머지는 담에 할래 귀찮어
'Shader ' 카테고리의 다른 글
Shader Test (0) | 2016.03.26 |
---|---|
저렴한 오버레이 공식 (0) | 2016.02.20 |
uniform half4 _MainTex_TexelSize; (4) | 2015.12.23 |
Making the Post Effect : Downsampling (Post Effect 만들기 기본 : 다운샘플링하기) (0) | 2015.12.19 |
Post Effect 만들기 기본 : 흑백 후처리 (0) | 2015.12.18 |
댓글