Shader : 외곽선 그리기(Sprite Outline)

게임에서 마우스가 over되거나 이미지가 선택되었음을 표시하는 방법으로 이미지에 외곽선을 그리는 방법을 사용한다.

예)League of Legend

위 효과를 2D에서 Shader를 이용하여 내려 한다.

Theory

fragment shader에서 현재 fragment의 상, 하, 좌, 우 fragment의 알파값을 읽어서 해당 fragment가 외곽에 있는 것인지 식별한다.

외곽에 있는것으로 식별된 fragment는 기존 texture의 rgb가 아닌 외곽선 rgb값을 가지도록 한다.

Code

#ifdef GL_ES

precision lowp float;

#endif

varying vec2 v_texCoord;

void main()

{

    vec4 color = texture2D(CC_Texture0, v_texCoord);

//    gl_FragColor = color;

    

    float aa = 4.0*color.a;

    aa -= texture2D(CC_Texture0, v_texCoord + vec2(0.01, 0.0)).a;

    aa -= texture2D(CC_Texture0, v_texCoord + vec2(-0.01, 0.0)).a;

    aa -= texture2D(CC_Texture0, v_texCoord + vec2(0.0, 0.01)).a;

    aa -= texture2D(CC_Texture0, v_texCoord + vec2(0.0, -0.01)).a;

    vec4 col;

    if(aa == 0.0)

        col = color;

    else

        col = vec4(1.0, 0.0, 0.0, aa);

    gl_FragColor = col;

}

Cocos2d-x에서 사용된 예

위 코드에서 v_texCoord에 더하는 vec2의 값이 커질수록 외곽선의 굵기가 굵어진다.

Result

->