Artoke

노멀 매핑 이야기: 울퉁불퉁하지 않아도 울퉁불퉁하게 보이는 마법

노멀 매핑 이야기: 울퉁불퉁하지 않아도 울퉁불퉁하게 보이는 마법 대표 이미지
출처: 노멀 매핑

노멀 매핑 이야기: 울퉁불퉁하지 않아도 울퉁불퉁하게 보이는 마법

여러분, 벽돌 벽을 본 적 있나요? 벽돌 하나하나는 튀어나와 있고, 그 사이에는 홈이 파여 있어요. 그런데 게임 속 벽돌 벽은 사실 아주 납작한 판일 때가 많아요. 진짜로 튀어나온 게 아닌데도 우리 눈에는 울퉁불퉁하게 보이죠. 어떻게 이런 일이 가능할까요? 바로 오늘 배울 노멀 매핑 덕분이에요.

먼저, '노멀'이 뭐예요?

노멀(normal)은 우리말로 '법선'이라고 해요. 어려운 말 같지만 아주 쉬워요. 어떤 면이 있을 때, 그 면에서 똑바로 위로 뻗은 화살표를 노멀이라고 불러요.

책상 위에 연필을 똑바로 세워 보세요. 그 연필이 바로 책상의 노멀이에요. 바닥에서는 화살표가 하늘을 가리키고, 벽에서는 화살표가 옆을 가리켜요. 이렇게 노멀은 "이 면이 어느 쪽을 바라보고 있나요?"를 알려주는 화살표랍니다.

노멀이 왜 중요할까요?

노멀은 빛과 아주 친한 친구예요. 컴퓨터는 이 화살표를 보고 "여기는 밝게 그릴까, 어둡게 그릴까?"를 정해요.

손전등을 켜고 공을 비춰 보세요. 빛을 정면으로 받는 곳은 밝고, 옆으로 비스듬히 받는 곳은 어두워요. 컴퓨터도 똑같아요. 노멀 화살표가 빛을 정면으로 바라보면 밝게, 화살표가 다른 쪽을 보고 있으면 어둡게 칠해요.

노멀 매핑 이야기: 울퉁불퉁하지 않아도 울퉁불퉁하게 보이는 마법 도식

진짜 울퉁불퉁하게 만들면 안 될까요?

물론 만들 수 있어요. 벽돌 하나하나를 진짜로 튀어나오게 만들면 돼요. 하지만 여기에 큰 문제가 있어요.

3D 모델은 아주 작은 삼각형 수천, 수만 개를 이어 붙여서 만들어요. 이 삼각형을 폴리곤이라고 불러요. 벽돌 하나하나 홈을 진짜로 파려면 삼각형이 엄청나게 많이 필요해요. 삼각형이 많아지면 컴퓨터가 힘들어져서 게임이 느려지고 뚝뚝 끊겨요.

그래서 똑똑한 사람들이 꾀를 냈어요. "진짜로 울퉁불퉁하게 안 만들고, 눈만 속이면 되잖아!"

노멀 매핑: 화살표만 몰래 바꾸기

노멀 매핑의 핵심은 이거예요. 면은 그대로 납작하게 두고, 노멀 화살표만 여기저기 다른 방향으로 바꿔치기 하는 거예요.

납작한 벽에서 어떤 점의 화살표는 살짝 왼쪽으로, 어떤 점은 살짝 오른쪽으로 기울여 놓아요. 그러면 컴퓨터는 빛을 계산할 때 "어? 여기는 화살표가 이쪽을 보네? 그럼 밝게!" "저기는 화살표가 저쪽을 보네? 그럼 어둡게!" 하고 칠해요.

결과적으로 실제로는 평평한데도, 밝고 어두운 부분이 생겨서 우리 눈에는 울퉁불퉁해 보이는 거예요. 마치 종이에 그림자를 그려 넣어 입체처럼 보이게 하는 것과 같아요.

여러 입체 모형에서 뽑아낸 노멀맵을 평평한 판에 입혀 입체처럼 보이게 하는 모습
Rendering using the normal mapping technique. On the left, several solid meshes. On the right, a plane surface with the normal map computed from the meshes on the left. · 출처: 노멀 매핑

노멀맵은 왜 보라색일까요?

노멀 매핑을 쓸 때는 노멀맵이라는 특별한 그림을 사용해요. 이 그림을 처음 보면 깜짝 놀라요. 온통 파랑과 보라색이거든요!

왜 이런 색일까요? 노멀맵은 사실 그림이 아니라 화살표 방향을 색깔로 적어 놓은 지도예요. 화살표에는 세 방향(좌우, 위아래, 앞뒤)이 있는데, 이걸 각각 빨강, 초록, 파랑 색의 세기로 바꿔서 저장해요.

대부분의 화살표는 면에서 똑바로 앞을 보고 있어요. '앞'은 파랑으로 표시하기 때문에, 노멀맵 전체가 푸르스름한 보라색으로 보이는 거예요. 색이 조금씩 다른 부분이 바로 화살표가 살짝 기울어진 곳이랍니다.

왼쪽은 일반 무늬 그림, 가운데는 파란빛 노멀맵, 오른쪽은 그것을 공에 입힌 결과
A texture map (left). The corresponding normal map in tangent space (center). The normal map applied to a sphere in object space (right). · 출처: 노멀 매핑

높은 폴리곤에서 낮은 폴리곤으로 '굽기'

그럼 이 노멀맵은 어디서 얻을까요? 보통은 아주 정교한 모델에서 정보를 뽑아 와요.

먼저 삼각형을 잔뜩 써서 진짜로 울퉁불퉁한 정밀 모델을 만들어요. 그다음 그 모델의 표면 방향 정보를 사진 찍듯이 노멀맵으로 저장해요. 이걸 '굽는다(bake)'고 불러요. 빵을 굽듯이 정보를 그림 한 장에 구워 담는 거죠.

그리고 이 노멀맵을 삼각형이 몇백 개밖에 없는 가벼운 모델에 입혀요. 그러면 가벼운 모델인데도 정밀 모델처럼 디테일이 살아나요. 컴퓨터는 편하고, 우리 눈은 즐겁고, 일석이조예요!

접평면(탄젠트 공간)이라는 도우미

조금 어려운 이야기지만 재밌으니 들어 보세요. 화살표의 방향은 기준이 있어야 정할 수 있어요. 공처럼 둥근 물체는 위치마다 표면이 바라보는 방향이 다 다르죠.

그래서 각 점마다 그 자리에 딱 붙는 평평한 판을 하나 상상해요. 이걸 '접평면' 또는 '탄젠트 공간'이라고 불러요. 공에 스티커를 붙이면, 스티커는 그 점에서 공에 살짝 닿는 평평한 면이 되잖아요? 바로 그런 판이에요.

노멀맵은 이 판을 기준으로 "이만큼 왼쪽, 이만큼 위로 기울여라" 하고 말해 줘요. 그래서 공이든 사람 얼굴이든 어디에나 노멀맵을 붙일 수 있는 거예요.

공 위의 한 점에 살짝 닿는 평평한 접평면을 보여주는 그림
A pictorial representation of the tangent space of a single point x x on a sphere · 출처: 노멀 매핑

빛이 튕기는 방향도 노멀이 정해요

노멀은 밝기만 정하는 게 아니에요. 빛이 어느 쪽으로 튕겨 나갈지도 정해요.

공놀이를 떠올려 보세요. 벽에 공을 던지면 벽에서 튕겨 나오죠. 튕겨 나오는 방향은 벽이 어느 쪽을 향하는지에 따라 달라져요. 빛도 마찬가지예요. 노멀 화살표를 기준으로 빛이 거울처럼 반사돼요. 그래서 노멀을 살짝만 바꿔도 반짝이는 위치가 달라 보인답니다.

노멀 벡터가 빛이 반사되는 방향을 정하는 모습을 보여주는 그림
A graphic depicting how the normal vector determines the reflection of a ray · 출처: 노멀 매핑

정리해 볼까요?

  • 노멀은 면에서 똑바로 뻗은 화살표예요. "어느 쪽을 보는지" 알려줘요.
  • 컴퓨터는 이 화살표를 보고 밝기와 반짝임을 정해요.
  • 진짜로 울퉁불퉁하게 만들면 삼각형이 너무 많아 컴퓨터가 힘들어져요.
  • 노멀 매핑은 면은 납작하게 두고 화살표 방향만 바꿔서 눈을 속여요.
  • 화살표 방향은 노멀맵이라는 푸른 그림에 색으로 저장돼요.
  • 정밀 모델에서 정보를 '구워' 가벼운 모델에 입히면, 적은 삼각형으로도 디테일이 살아나요.

다음에 게임을 할 때 벽돌 벽이나 바위를 자세히 살펴보세요. 사실은 아주 납작한 판인데, 노멀 매핑이라는 마법이 우리 눈을 즐겁게 속이고 있을지도 몰라요. 이제 여러분은 그 비밀을 아는 사람이에요!

출처

광고

리깅 파이프라인 자동화 도구

반복 작업은 스크립트에게. 현업에서 쓰는 리깅 툴 모음.

리깅 도구 보기