본문 바로가기

나의 플랫폼/안드로이드

[ Android Opengl es 2.0 ] Blur 효과

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
 드뎌!!!! Blur효과를 냈습니다. 
아마 이런 것 가지고 하시는 분들 계시겠지만, 저한테는 너무 기분 좋은 일이네요.^^

이 효과를 내고 싶어도... 낼 수가 없었던  지금까지의 고생이 오늘 해결 되었네요.

Opengl es 2.0으로 했구요. 
FrameShader 소스 부분의 컬러 값을 변경하면 됩니다.

 

String fShaderStr =

            "precision mediump float;                            \n" +

            "varying vec2 v_texCoord;                            \n" +         // 이건 texture index 배열이죠. DrawElement에서 사용

            "uniform sampler2D s_lightMap;                       \n" +     //  이미지 텍스쳐 입니다.

            "uniform float u_blurAmount;                       \n" +          // Blur을 먹이기 위해 Object간의 간격을 조절

            "uniform int u_blurFlag;                       \n" +                 // 테스트를 위해 Blur 먹인 것과 아닌 것을 구분하는 Flag

            "void main()                                         \n" +

            "{                                                   \n" +

            "                                                   \n" +

            "  vec4 lightColor;                                  \n" +

            "                                                    \n" +

"   highp vec4 color = vec4(0,0,0,1); \n" +              // 색깔을 받을 변수
// Blur를 가우스 공식에 의해 변경을 시켜주는 거지요. 

            "  if ( u_blurFlag == "+ENABLE_BLUR+"){  \n " +

            "       highp vec2 gaussFilter[7];   \n" +

            "       gaussFilter[0] = vec2(-3.0, 0.015625); \n" +

            "       gaussFilter[1] = vec2(-2.0, 0.09375); \n" +

            "       gaussFilter[2] = vec2(-1.0, 0.234375); \n" +

            "       gaussFilter[3] = vec2(0.0, 0.3125); \n" +

            "       gaussFilter[4] = vec2(1.0, 0.234375); \n" +

            "       gaussFilter[5] = vec2(2.0, 0.09375); \n" +

            "      gaussFilter[6] = vec2(3.0, 0.015625); \n" +

            "                                                   \n" +

            "       highp float blurSize = u_blurAmount * 1.0; \n" +

            "                                                   \n" +

            "    for( int i = 0; i < 7; i++ ) \n" +

            "         color += texture2D( s_lightMap, vec2( v_texCoord.x+gaussFilter[i].x*blurSize, v_texCoord.y+gaussFilter[i].x*blurSize ) )*gaussFilter[i].y; \n" +

            "  }else{   \n " +

            "   color = texture2D( s_lightMap, v_texCoord );  \n" +

            "   }  \n" +

            "  gl_FragColor = color ;   \n" +

            "}                                                    \n";


결과 화면:


위 쪽은 기본 이미지.
밑 쪽은 Blur 값을 넣은 이미지 입니다.

blurAmount를 0.01f로 줬을 때 나오는 결과구요.

더 주게 되면 Blur Object가 더욱 벌어져서 이상하게 보여버립니다.

이렇게요^^

왠지 오늘 너무 행복한 하루 네요~~^^

더 궁금한 거 있으시면 댓글 달아주세요 ㅎ

모두 추운 날씨 몸 조심하시고
즐코딩하세요~ ㅎ