쉐이딩(Shading)에 대해

3D 게임 엔진의 변화 모습을 포스팅 하다보니 문득 이런 생각이 들더군요. 너무 간략하게 글을 끝내지는 않았나. 스크린샷 위주로 구성되어 내용 생략이 많으면 너무 아쉽지 않을까. 하는 생각이 말이지요. 그래서 이번 글에선 그런 아쉬움을 조금이라도 덜어보기 위해 쉐이딩에 대해 한 번 정리해 보겠습니다. ^^

 

플레이 하고싶은 게임의 시스템 요구사항이나, 혹은 에어로 기술이 적용된 비스타나 윈도7 같은 운영체제의 최소사양을 살펴보다 보면 픽셀 쉐이더(Pixel Shader)란 단어가 자주 눈에 들어옵니다. 게임의 경우엔 ‘픽셀 쉐이더가 지원되는 그래픽 카드여야 이 게임을 실행할 수 있다’라고 적혀있고, 윈도 비스타나 윈도 7같은 경우엔 ‘Pixel Shader 2.0이 지원되는 그래픽 카드여야만 에어로 효과를 실행할 수 있다’라는 말이 적혀있음을 발견할 수 있습니다.

 

그런데 여기에서 말하는 “픽셀 쉐이더 (Pixel Shader)”란 대체 뭘 말하는 걸까요. 픽셀이야 익히 들었던 것처럼 비트맵 이미지의 한 점 한 점을 말할테니 쉽게 추측해 볼 수 있겠군요. 그럼 쉐이더의 의미만 알게 된다면 이게 뭘 하기 위한건지 알아낼 수 있겠군요. ‘쉐이더 (Shader)’로 단어끝에 –er 이 붙는걸 보니 ~을 하는 무언가, 즉, 쉐이딩을 구현해 주는 하나의 기술이나 소프트웨어적 장치겠군요. 그럼 픽셀 단위로 쉐이딩을 해주는 기술이라 보면 간단하겠군요.

 

여기까지 흐름을 잘 따라 오셨다면, 이제 남은일이 무엇인지는 잘 아시겠지요. 그것은 바로 쉐이딩이 과연 무엇인지 그 의미를 함께 살펴보는 것입니다. 이게 뭘 말하는 건지만 알면 픽셀 쉐이더까지 확장시켜 볼 수 있겠지요. ^^

 

 

쉐이딩의 의미

 

쉐이딩이란 3D 모델이나 일러스트레이션에서 명도, 빛의 어두운 정도를 달리해서 거리감을 표현하는 방법을 말합니다. 쉽게 말하면 멀면 어둡고, 가까울 경우 더 밝게 표현하는 방법을 말합니다. 거리감을 위해 그림자를 나타내는 방법이라고 해야할까요. 이제 아래쪽에서 좀 더 자세한 내용을 살펴보겠습니다.

 

 

드로잉에서의 의미

 

드로잉, 스케치, 그리기에서 말하는 쉐이딩이란 어두운 부분은 더 진하게 재료를 사용하고, 밝은 부분은 가볍게 재료를 사용 해서 음영을 주는 방법을 말합니다. 이 때 쉐이딩 기술에는 직각으로 교차된 선을 간격을 바꾸면서 지속적으로 그려내 그림자를 나타내는 크로스 해치등이 있습니다. 선의 간격이 좁은 부분은 그림자가 짙은 부분이 되고, 선의 간격이 넓은 부분은 밝은 부분이 되겠지요.

 

물체에 빛이 가해지는 방법을 고려해서 음영을 주기 때문에 깊이가 있는 것처럼 느껴지는 그림을 그릴 수 있습니다.

 

 

컴퓨터 그래픽

 

컴퓨터 그래픽에서 말하는 쉐이딩이란 빛의 각도와 광원의 거리를 고려하여 색을 변화시켜 실사 같은 효과를 얻는 과정을 말합니다. 쉐이딩은 렌더링 과정중 이루어 집니다.

 

간단한 예

쉐이딩은 3차원 모델 표면의 색을 그 표면과 광원이 이루는 각도에 근거해 변화시킵니다.


아래쪽에 있는 첫번째 이미지의 경우 사각형이 하나 렌더되어(그려져) 있지만, 각면의 색이 모두 동일합니다. 입체로서 알아보기 쉽게끔 경계선도 함께 렌더되어(그려져) 있습니다.


두번째 이미지는 같은 모델을 경계선 없이 렌더링한(표시한) 모습입니다. 면과 면의 경계를 알기 어려울 뿐만 아니라, 입체감도 전혀 없음을 알 수 있습니다.


세번째 이미지는 쉐이딩이 적용되어 있습니다. 덕분에 이미지가 좀 더 사실감 있고 면과 면을 구분하기도 쉽습니다.

 

  

렌더링된 상자의 모습. 쉐이딩(음영)이 적용되어 있지 않지만 경계선을 사용해 면을 구분하고 있습니다.

같은 상자 이미지에서 경계선을 제거한 모습입니다.같은 이미지에 쉐이딩이 적용된 모습입니다. 광원과의 각도에 따라 3면의 색상이 변경됩니다.

 

광원

광원에는 아래와 같이 다양한 종류가 있습니다.

  • 엠비언트 라이트(Ambient Light, 환경광) - 씬내의 모든 오브젝트를 동일하게 비춥니다. 특히 광원의 위치를 정하지 않고 전체가 동일한 밝기가 될 수 있도록 쉐이딩은 적용하지 않습니다.
  • 디렉셔널 라이트(Directional Light, 평행 광원) - 설정한 방향에서 평행으로 균일한 광선을 비춥니다. 태양광선과 같은 매우 먼 광원을 상정한 것으로, 쉐이딩은 행해지지만 글 후반부에서 설명하는 거리 감쇠(distance falloff)는 발생하지 않습니다.
  • 포인트 라이트(Point Light, 점광원) – 하나의 점, 포인트로부터 빛이 발생해 모든 방향으로 빛이 퍼져 나갑니다.
  • 스포트 라이트(Spotlight) – 하나의 점으로부터 빛이 발생해 원뿔형으로 빛이 퍼져 나갑니다.
  • 에어리어 라이트(Area Light, 면광원) – 점이 아닌 하나의 면으로부터 빛이 발생해 거기로부터 지정한 방향으로 광선이 퍼져 나갑니다.
  • 볼륨 라이트(Volume Light) - 공간내에서 설정한 거리의 범위내만 닿는 광원 입니다.

 

쉐이딩은 이 광원들이 하나의 장면(Scene)안에서 객체와 이루는 각도에 근거해 추가됩니다. 물론, 이런 여러 광원들은 하나의 씬에 결합될 수 있고 실제로 그렇게 많이 사용되기도 합니다. 렌더러는 그런 다음 이 광원들이 어떻게 결합되어야 할지를 수정 및 추가해 화면에 알맞게 표시될 수 있게끔 2D 이미지를 생성해 냅니다.

 

 

거리 감쇠(Distance Falloff)

 

이론적으로는 평행으로 2개의 면이 있을 때, 태양광선과 같이 원거리의 광원으로부터 오는 빛의 조도(밝기)는 동일합니다. 이 경우 다른 객체나 면이 멀리 떨어져 있더라도 조도는 일정합니다.

 

아래의 그림은 2개의 직사각형을 다른 광원에서 비추었을 때 나타나는 쉐이딩의 모습을 보여주고 있습니다. 왼쪽의 이미지에서는 두 직사각형 모두 앞쪽 면은 같은 색임을 알 수 있습니다. 오른쪽의 이미지에서는 앞쪽 직사각형의 정면이 약간 더 밝고 뒷쪽 직사각형의 정면이 좀 더 어두움을 알 수 있습니다. 바닥의 층같은 경우도 가까이에서 점점 더 멀어질수록 색상이 밝은쪽에서 점점 더 어두워지고 있음을 알 수 있습니다. 오른쪽 이미지의 광원은 광원으로부터의 거리가 멀어질수록 광선이 감쇠하는 설정이 적용되어 있습니다. 한마디로 가까울수록 밝고 멀수록 어둡게 만드는 것이지요. 이걸 가리켜 거리 감쇠 (distance falloff)라고 부르며, 광원을 늘리지 않고도 보다 사실적인 화상을 얻을 수 있습니다.

 

OpenGL 렌더러로 두 상자를 렌더링한 모습입니다. 하나의 상자가 좀 더 멀리 떨어져 있음에도 불구하고 두 상자의 앞면은 같은색임을 알 수 있습니다.같은 모델이 ARRIS CAD를 사용해 렌더링된 모습입니다. 거리 감쇠(Distance Falloff)가 적용되어 눈에 더 가까운 면이 밝게 표시되어 보입니다.

 

 

디스턴스 폴오프, 거리 감쇠(Distance Falloff)는 다음과 같은 몇 가지 방법으로 계산될 수 있습니다:

  • 선형(1차) - 광원과의 거리를 x 로 했을 때, 거기에 닿는 빛의 양을 x 에 비례해 줄입니다.
  • 2차 - 실세계에서의 빛의 성질에 가깝습니다.광원으로부터의 거리가 2배가 되면, 닿는 빛의 양은4분의1이 됩니다.
  • n차 - 광원과의 거리를 x (으)로 했을 때, 거기에 닿는 빛의 양을 1/xn 로 합니다.
  • 이것 이외의 수학적 함수를 사용할 수도 있습니다.

 

 

Flat Shading과 매끄러운(Smooth) 쉐이딩

 

플랫 쉐이딩(Flat shading)은 3D 컴퓨터 그래픽에서 사용되는 라이팅 기법중 하나 입니다. 한 객체상에 존재하는 각각의 폴리곤(다각형)에 법선 벡터와 광원의 방향과 각도에 근거해 쉐이딩을 적용하는 것으로, 색은 각각의 다각형(면)을 비추는 빛의 세기에 따라 결정됩니다. 고급 쉐이딩 기법을 위해선 많은 자원과 컴퓨팅 파워를 필요로 하기 때문에, 빠른 속도로 렌더링 하기위해 이 기법이 사용되었습니다. 하지만 21세기인 오늘날 일반적인 그래픽 카드로도 매우 빠른 속도로 매끄러운 쉐이딩이 가능하기 때문에 성능적인 이유로 플랫 쉐이딩(Flat shading)을 사용하는 경우는 줄어들고 있습니다.

 

플랫 쉐이딩(Flat shading)의 단점은 매끄러운 곡면을 표현하고 싶은 경우에도 작은 평면이 줄지어 있는 외형을 표현할 수 밖에 없다는 점입니다. 물론 이런점도 곡면이 아닌 직각으로만 이루어진 도형을 그리고자 하는 경우라면 적절하게 사용될 수 있습니다. 예술가들의 경우 때때로 자신들이 만들고 있는 평면 모델의 (직각으로 이루어진) 다각형적 외형을 위해 Flat shading을 사용하기도 합니다.

 

좀 더 발전된 사실적인 라이팅과 쉐이딩 기법에는 고러드 쉐이딩(Gouraud shading)과 퐁 쉐이딩(Phong shading)등이 있습니다.

 

▲ 플랫 쉐이딩(Flat shading)과 퐁 쉐이딩(Phong shading)의 예

 

위키백과를 참고해 좀 더 보기 좋은 형태로 3차원 컴퓨터 그래픽에서 사용되는 “쉐이딩(Shading. 혹은 셰이딩이라고 불리기도함)”의 의미에 대해 한 번 정리해 봤습니다. 알기쉽게 정리해 보려 했는데 (제 자신의 이해를 정리함과 동시에, 처음보는 분도 이해하기 쉽도록) 잘 되었는지 모르겠군요. ^_^

 

다른 여러 분야와 마찬가지로 3D 그래픽 분야에도 이해하기 어려운 복잡한 개념들이 여럿 있지만, 쉽게 풀어쓰려 노력한다면 해당 분야에 경험이 없는 분들도 글을 읽는것 만으로 일정 단계의 개념을 이해하고, 확장하고, 적용하는데 도움이 되지 않을까 생각합니다.

 

최종 수정일:
서지스윈

서지스윈

IT와 기술을 이해하고, 유용한 소프트웨어를 발견하도록 돕고 싶습니다. 윈도우(Windows), 맥(macOS), 리눅스(Linux), 스마트폰 앱, 웹 서비스, 기획 시리즈물까지. 더 많은 것을 발견하고, 더 많은 것을 해보세요.