[포니 게임 개발] 37. 외곽선 그리기 완결

 

 

 

 

 

 

 

 

 

 

 

며칠 고민한 끝에 깔끔한 외곽선을 그리는데 성ㅋ공! 했습니다.

의외로 해결책은 단순했어요. 노말맵 그릴때 여분의 알파채널에 Material ID도 같이 새겨넣고, 외곽선을 추출할때 두 정보를 모두 이용하는것이죠! 이를 통해 보다 확실한 외곽선 그리기가 가능해졌답니다.

더불에 소벨 필터는 근방 9개 지점의 텍스쳐를 가져와야 하므로 훨씬 단순한 코드는 없을까 고민하다 상하좌우와 현재지점까지 해서 총 5개의 지점만 참조하여 외곽선을 구분하도록 코드를 수정했습니다.

 

 

 

 

수정한 셰이더 코드는 다음과 같아요.

sampler에는 MatID가 알파채널에 그려진 노말맵이 들어옵니다.

상하좌우의 MatID가 다르면 외곽선이구요,

노말값의 기울기(변화량)가 급변하면 외곽선입니다.

 

노말값의 기울기는 (왼쪽 픽셀 - 중앙 픽셀) 과 (중앙 픽셀 - 오른쪽 픽셀) 값을 비교하여 구합니다.

이 두 값이 유사하면 기울기가 거의 변동이 없는 것이므로 외곽선이 아니고,

이 두 값의 차가 특정 값(threshold) 이상 나면 외곽선인것으로 검출하도록 한거죠.

이는 가로로 뿐만아니라 세로로도 검출해주어야 합니다. 그래서 가로 세로의 기울기 변화량을 제곱해서 합했습니다.

 

단 문제는 외곽선 굵기가 기껏해야 1픽셀~2픽셀로 밖에 나오지 않는다는건데, 굵기를 어떻게 조절할지 고민이네요. 더 굵게 하고 싶으면 상하좌우 1텍셀이 아니라 주변에 더 넓은 범위의 텍셀을 참조하면 되긴 할텐데 너무 느려질 것이고, 아니면 렌더 패스를 한 번 더 늘려서 외곽선만 따로 그려주고, 그 외곽선에 블러를 먹여서 두껍게한다음 그려줘도 될텐데...

 

 

float SimpleEdgeFilter(sampler samp, float2 Tex, float2 dist) { float4 left, top, right, bottom, center; center = tex2D(samp, Tex); // 알파채널이 0이면 외곽선 그리기를 수행하지 않습니다 if(center.a == 0) return 0; // 상하좌우 MatID가 다르면 외곽선 left = tex2D(samp, Tex - float2(-dist.x, 0)); if(center.a != left.a) return 1; top = tex2D(samp, Tex - float2(0, -dist.y)); if(center.a != top.a) return 1; right = tex2D(samp, Tex - float2( dist.x, 0)); if(center.a != right.a) return 1; bottom = tex2D(samp, Tex - float2(0, dist.y)); if(center.a != bottom.a) return 1; // 가로, 세로 기울기가 급변하는 지점은 외곽선 float3 dW = left.rgb + right.rgb - 2 * center.rgb; float3 dH = top.rgb + bottom.rgb - 2 * center.rgb; float lW = length(dW); float lH = length(dH); return sqrt(lW*lW + lH*lH) > 0.05; }