본문 바로가기
유니티 엔진

Making the Post Effect : Blur - 2 (Post Effect 만들기 기본 : 블러 만들기 2 )

by 대마왕J 2015. 12. 24.

그럼 이제 가우시안 공식에 의거한 블러를 만들어 봅시다.

 

일단 결과물은 이케 나와요

 

 

여기서 달라진건 offs2 와 offs3가 생겼다는거. 음 뭐. 왜 만들었는지는 아시겠죠

 

 

이게 이후의 버텍스 셰이더와 픽셀 셰이더의 모습입니다.

 

일단 버텍스 셰이더에서 늘어난걸 보죠

 

첨에  offs라는 UV를 만들때

 

half4 coords = blurFilter.xyxy* 3.0;

o.offs = v.uv.xyxy + coords * half4(1.0h,1.0h,-1.0h,-1.0h);

 

를 써서 만들었으니, 기본 UV를 '가로로 좌우 3픽셀씩 이동한 UV' 를 만든 것을 알 수 있습니다.

 

그래서 이번엔 추가로

coords -= blurFilter.xyxy ;

로 가로로 1픽셀씩  오히려 줄여주고
    o.offs2 = v.uv.xyxy + coords * half4(1.0h,1.0h,-1.0h,-1.0h);

그렇게 두 번째 UV를 만들고 ... 이제 2픽셀씩 이동한 UV죠.

 

coords -= blurFilter.xyxy ;
    o.offs3 = v.uv.xyxy + coords * half4(1.0h,1.0h,-1.0h,-1.0h);

 

이걸로 다시 한 픽셀씩 이동한 UV를 만들어서 넘겼습니다. 좌우로 3 2 1 0 1 2 3 인 UV가 생긴것이라 할 수 있죠

 

그걸 픽셀셰이더에서 연산했습니다.

 

 

half4 color = tex2D(_MainTex, i.uv) *half4(0.324,0.324,0.324,1);    

이게 안 변한 , 즉 0 이동한 UV 입니다. 이건 가장 높은 값인 0.324 가우시안 샘플링값을 넣었구요. 알파는 여기서 1 줍니다.
      
      half4 tapA = tex2D(_MainTex, i.offs.xy)*half4(0.0205,0.0205,0.0205,0);
    half4 tapB = tex2D(_MainTex, i.offs.zw)*half4(0.0205,0.0205,0.0205,0);
    color += (tapA + tapB) ;

첫 번째 uv는 가로로 3픽셀씩 이동한거니까 가장 어두운 값을 줍니다.
    
    half4 tapC = tex2D(_MainTex, i.offs2.xy)* half4(0.0855,0.0855,0.0855,0);
    half4 tapD = tex2D(_MainTex, i.offs2.zw)* half4(0.0855,0.0855,0.0855,0);
      color += (tapC + tapD) ;

두 번째 uv는 가로로 2픽셀씩 이동한거니까 조금 덜 어두운 값을 줍니다.
      
      half4 tapE = tex2D(_MainTex, i.offs3.xy)* half4(0.232,0.232,0.232,0);
    half4 tapF = tex2D(_MainTex, i.offs3.zw)* half4(0.232,0.232,0.232,0);
      color += (tapE + tapF) ;

 

      

세 번째 UV는 다시 가로로 1픽셀씩 이동한거고 더더 덜 어두운 값을 줍니다.

 

그리고 모두 더하면 밝기가 1이 되므로

 

 

 

결과가 이케 나오는 겁니다. 이제 이걸 세로로 똑같이 한 번만 더 해주면 되겠죠?

 

뭐 근데 그 전에 이 아마추어같은 코드좀 정리해 봅시다...

뭐 그냥 저래도 되긴 하지만.

 

 

 

for 문으로 좀 정리해서 짧아져 봤습니다. ..

 

이제 저걸 세로로 다시 한 번 해주면 완전한 블러가 되겠죠

 

 

 

 

 

 

반응형

댓글