tangent space, 접선 공간

접선 공간(tangent space)란 무었인가?

탄젠트 공간은 접선공간, 표면공간, 텍스쳐 공간 등 여러 단어로 불리는데 접선 공간으로 통일합니다.

접선 공간에 대한 설명은 아래와 같다.

- 텍스쳐 위에서의 좌표계. (텍스쳐 공간이라고 불리는 이유)

그림 참조 : http://standards.sedris.org/18026/text/ISOIEC_18026E_SRF/image022.jpg

- 한 점의 법선벡터, 접선(탄젠트)벡터, 그리고 그 둘을 외적한 바이노멀 벡터를 축으로 하는 공간

- 오브젝트 공간에 있는 어떤 점의 normal을 수직축으로 하는 공간. (표면 공간이라고 불리는 이유)

- 평면을 만들 수 있는 세 점으로 평면을 만들고 그 평면의 수직인 법선 벡터를 구할 수 있는데,

   이 벡터를 알면 평면이 어떤 식으로 기울어져(기울기) 있는지 알 수 있다.

  직각삼각형을 생각해 보자(∠)

  밑면이 X축, 높이가 Y축, 그리고 빗면이(경사진면) 기울기가 되는데

  밑면과 빗면사이의 끼인각을 θ 라 하면 tanθ  = 높이/밑면이고 기울기란 

  X축에 대한 Y축의 비율이므로 tanθ 값이 곧 기울기가 된다. (탄젠트 공간이라고 불리는 이유)

  기울기란 어떤 직선이 수평으로 증가한 크기만큼 수직으로 얼마나 증가했는지를 나타내는 값이다.

  위 직각삼각형에서는 수평 직선을 a라고 하고 수직 직선을 b라고 한다면 수평직선의 증감 대

  수직 직선의 증감은 b/a이며 이를 기울기라 하고 위 그림에서는 c라고 한다.

  그런데 위 삼각비 공식에서 높이(b)/밑변(a) 값이 곧 tanB 이므로 기울기는 tanB라고 할 수 있다.

그렇다면 위의 접선공간에 대한 설명들을 간단하게 정리해 보자.

3D물체를 2차원 모니터 스크린 상에 표현하기 위해 3차원으로 보이도록 하기위한 

정보가 필요하며, 이 정보가 음영(셰이딩)이다.

이 정보를 표현하기 위해 각 폴리곤 평면에서 수직인 법선으로 폴리곤의 기울기값을 만들고

접선의 나머지 두 축으로 어느방향으로 기울었는지를 알아내는데 이 세개의 축을 접선 좌표계라 하고

이 좌표계가 존재하는 공간을 접선 공간이라고 한다.

법선과 법선의 활용

위에서 접선 공간에 대해 이야기 하면서 법선에 대한 이야기를 간단히 했는데 좀 더 자세히 알아보자.

간단하게 법선이란 폴리곤의 방향 정도로 생각하면 된다. (버텍스의 방향)

그렇다면 폴리곤의 방향(법선)이 왜 중요한가?

위에서도 살짝 언급했지만 3차원 물체를 2차원 컴퓨터 모니터 스크린상에 투영할 경우 

이를 3차원으로 인식하기 위해서는 음영(셰이딩)이 존재해야 한다.

위 그림은 법선정보가 없이 컴퓨터 모니터 스크린상에 투영한 모습이다.

2D인지 3D인지 인식할 수가 없다.

위 그림은 법선정보로 구를 표현한 모습이다.

물체 표면의 굴곡에 따라법선의 방향이 다르다는 걸 볼 수 있다.

만약 물체의 표면이 방향성이 없이 한 방향으로만 보여진다면 2차원 평면처럼 보일 것이다.

뒤에 있는 면이나 앞에 있는 면 혹은 옆에 있는 면이 한 방향으로 보여진다면 앞, 뒤 옆을 구분 할 수 없다.

따라서 물체의 표면을 분간하기 위해서는 물체 표면의 방향을 알아야 하는데 그 방향을 

알아내기 위해서 3차원 축을 기준으로 방향을 설정하는 것이 법선벡터(normal vector)이다.

벡터는 크기와 방향을 가지는 개념인데 법선역시 벡터이기에 크기와 방향을 가진다.

법선은 물체표면에서 수직인 방향을 가지며 수직이라는 방향만이 중요하기에 크기는 정규화 시킨다.

법선은 정점마다 있어서 픽셀단위 조명에서는 이러한 정점에 정의된 법선벡터를 보간해서 사용한다.

하지만 이 방법은 급격히 솟은 곳이나 울퉁불퉁한 곳에서는 아무리 하이폴리곤 이라도

정점과 정점 사이는 선형으로 보간하므로 굴곡 표현이 어려우며 하이폴리곤 그대로 사용하기에는 부담이 크다.

이럴 때 텍스쳐에 눈을 돌려 적당히 해결하는 방법이 있다.

텍스쳐란 폴리곤에 매핑되기 위해 있는 것이고 이는 폴리곤 표면의 색을 나타내기 위한 것이라 생각할 수 있다.

이 색이라는 개념도 셰이더 단계에서 보면 그냥 0~1까지의 값일 뿐이다. 

그렇다면 텍스쳐란 폴리곤 표면의 값을 가리킬 수 있다는 말이 된다.

텍스쳐가 폴리곤 표면의 값을 가리킬 수 있다면 폴리곤 안의 세부적인 기복의 방향도 텍스쳐로 

표현할 수 있다는 개념으로 만든 것이 법선맵 이다.

즉, 법선맵은 물체의 법선 정보를 텍스쳐 이미지 형태의 저장공간에 저장해 둔 파일을 말한다.

즉, 모델의 음영을 표현하기 위해 폴리곤의 갯수를 늘리는 대신 음영을 표현하는 핵심정보인 

법선을 하이폴리곤에서 미리 저장해서 로우 폴리곤에서 사용하는 것이다.

법선맵은 어떤 방식으로 만들어 지는 걸까?

법선맵은 법선 벡터의 섭동방식에 대한 고해상도 정보를 3차원 벡터들의 2차원 배열에 저장한 것이다.

법선맵을 만드는 방법에는 두가지가 있다.

1. 높이값(z)을 이용하여 높이맵을 만들고 이 높이맵에서

   인접한 텍셀들간의 고저차를 비교하여 기울기를 나타내는 미분벡터를 만든다.

이렇게 만들어진 미분벡터 2개(x,y 방향)를 외적하면 법선벡터가 만들어 지는데 이 법선 벡터가 

그 텍셀의 법선벡터가 된다. 이 법선벡터를 저장한 텍스쳐가 법선맵이 된다.

참조 링크 : http://mgun.tistory.com/1639

2. 오브젝트를 저폴리곤과 고폴리곤으로 두개를 만들고 그 차이를 비교해서

   법선맵을 만드는 방식이다. 

하이폴리곤 모델의 법선 정보를 얻기 위해 로우폴리곤 텍셀로부터 하이폴리곤 표면을 향해

반직선을 투영해서 반직선과 하이폴리곤 모델 표면과의 교점을 얻어 법선 정보를 얻는다.

이렇게 얻어진 법선 정보를 로우 폴리곤 모델의 텍셀에 저장한다.

로우폴리곤 모델에서부터 하이폴리곤모델로의 반직선 투영.

각 축에 따라 X축(Red), Y축(Green), Z축(Blue)가 되며 위 그림에서 파란색 화살표가 Z축 반직선을 의미한다.

Z축은 방향이 항상 양이므로(표면에서의 방향이기 때문에) 후에 설명할 법선맵에 색상에 영향을 끼친다.

반직선과 하이폴리곤 모델의 교차점.

위의 이미지에서 붉은 색 점은 로우폴리곤의 텍셀, 즉 텍스쳐 이미지의 픽셀이 위치한

로우 폴리곤의 3차원 모델로부터 하이폴리곤으로 투영된 반직선과 하이폴리곤과의 교점이다.

이 지점의 법선 정보가 우리가 필요한 법선 정보이다.

참조 링크 : 노말맵 Normal Map 이란 무었인가?

이제 위 두가지 방식으로 법선을 만들어 냈으면 그 법선을 저장해야 하는데 법선을 저장하는

방식에도 두가지가 있으며 그에 따라 "오브젝트 공간 법선맵" 과 "접선 공간 법선맵"으로 나뉜다.

법선맵에서 색상은 특정 법선벡터(점의 표면 방향)를 나타낸다.

오브젝트 공간 법선맵의 정보는 오브젝트 방향과 관련되고, 접선 공간 법선 맵의 정보는 물체의 표면과 관련된다.

아래 이미지는 로우폴리곤의 3D 오브젝트에 색상맵으로  법선맵을 매핑한 모습을 보여준다.

(왼)오브젝트 공간 법선매핑, (오)접선 공간 법선매핑

위 이미지는 상위 이미지의 텍스쳐 언래핑 모습을 보여준다.

위 이미지에서 오브젝트 또는 월드 공간 노멀매핑(왼쪽) 또는 접선 공간 법선 매핑(오른쪽)을 구현하기 위해 

정점마다 필요한 로컬 메트릭스를 볼 수 있다.

회색 벡터는 표면 법선을 나타내는데 빨간색, 녹색 및 파란색 벡터는 기본 벡터(기저벡터)를 나타낸다.

월드 또는 오브젝트 공간의 경우 좌표계는 각 정점에 대해 모두 동일하며 오브젝트마다 저장할 수 있다.

반대로 접선 공간에서는  정점당 특정 좌표계가 필요한데 법선 벡터가 이 를 기반으로 정렬되기 때문에 살짝 압축할 수 있다.

(노멀은 탄젠트와 바이탄젠트로 만들 수 있기에 탄젠트와 바이탄젠트만 저장하면 된다는 말.)

즉, 오브젝트 공간에서 법선을 위한 좌표계와 접선 공간에서 법선을 위한 좌표계는 서로 다르며,

오브젝트 공간에서의 법선을 위한 좌표계는 오브젝트마다 동일 하지만 접선을 위한 법선 좌표계는 정점마다 다르다.

오브젝트 공간 법선맵은 오브젝트에 입혀졌을 때 그 때의 모든 표면의 법선 벡터의 xyz를 이미지의 RGB값에

맵핑시켜 저장하기에 xyz가 0~사이의 모든 방향으로 적절하게 분배되어 나오게 되므로 색상 또한 

다양하게 표현되는데, 접선공간 법선은 물체의 표면의 법선이 일반적으로 z방향(표면의 바깥방향)으로

튀어 나오므로 z값이 항상 크다.

오브젝트 공간 법선맵의 장단점

- 법선 벡터가 기준으로 삼는 좌표계가 오브젝트의 로컬 좌표계.

- 오브젝트의 원점이 법선벡터들의 원점.

- 벽이나 건물처럼 표면이 고정적이고 변형되지 않는다면 구현이 쉽고 빠른 오브젝트 공간 좌표계를 

  사용하는 오브젝트 공간 법선맵을 사용하는 것이 더 효과적일 것이다.

- 오브젝트가 변형되면 벡터의 방향이 바뀌기 때문에 오브젝트 공간 법선맵은 사용할 수 없다.

- 좌우대칭 되는 오브젝트의 경우 텍스쳐를 반쪽만 만들어 대칭으로 맵핑하는데, 오브젝트 공간 법선맵은

  기준좌표계가 오브젝트의 로컬좌표계이기 때문에 대칭점에서 법선벡터가 달라서 전체에 대해 법선맵을 만들어야 한다.

접선 공간 법선맵의 장단점

- 오브젝트 공간 법선맵에 비해 비싸다.

- 모델의 변형에 사용할 수 있다. 즉 변환된 평면에서 범프는 유지되어 올바르게 작동한다.

- 모델의 다른 부분에 법선 맵의 부분을 재사용하거나 다른 모델에 사용할 수 있다.

- 법선의 단위길이 속성과 Z를 항상 양의 값으로 제한해 하나의 구성요소를 재구성 할 수 있으며

  두개의 구성요소만 저장하면 된다.

- 접선 공간 법선맵은 기본 지오메트리와 무관하며 이는 텍스쳐가 다른 지오메트리에 사용될 수 있음을 의미한다.

  이 맵은 미러링, 회전, 크기 조절 또는 변형에 상관없이 자동으로 표면에 조정된다.

  스키닝 기법을 사용하는 캐릭터의 경우 정점이 몰핑되면서 법선벡터의 방향이 바뀌게 되는데

  이 떄 고정된 오브젝트의 공간좌표계는 의미가 없다.

  표면의 방향이 계속 바뀌므로 접선 공간 법선맵을 사용해야 한다.

- 만약 벽이나 건물처럼 표면이 고정적이고 변형되지 않는다면 구현이 쉽고 빠른 오브젝트 공간 좌표계를 사용하는

  오느벡트 공간 법선맵을 사용하는 것이 더 효과적일 것이다.

접선 공간 법선맵의 장단점을 보면 법선맵을 사용하는 이유에 대해 적혀있다.

per pixel 라이팅 테크닉이나 다른 여러 셰이더 테크닉에서 픽셀별 normal과 height 정보를 필요로 한다.

이는 우리가 각 텍셀에 대해 하나의 normal 벡터와 n의 방향을 가지고 있어야 한다는 걸 의미한다.

평평한 평면에 범프를 주는것을 생각해봐라.

만약 이러한 노말이 월드공간에서 정의된다면 우리는 normal들을 모델이 조금만 회전하더라도

매번 같이 회전시켜 줘야 한다. 

이처럼 하는 대신 표면의 normal들을 탄젠트 공간 시스템에 정의한다.

그러면 우리는 단지 다른 오브젝트들을 같은 탄젠트 공간 시스템으로 변환시키는 것만 하면 되고

탄젠트 공간에서 계산하면 된다.

위와 같이 정육면체가 있다고 보자.

이 정육면체의 왼쪽과 오른쪽 면의 법선 벡터는 똑같이 Z+이다.

즉, 서로 다른 방향을 가리키고 있음에도 같은 (0,0,1)이다.

오브젝트 공간(좌표계)은 물체마다 정의된 것이라면 이 공간은 표면마다 정의되어 있는 것이다.

표면의 바깥쪽 방향을 법선의 +z로 한다는 명제를 사용하여 법선맵을 만들기 때문에 

표면마다 다른 공간(좌표계)이 존재하는 데 이 공간을 접선공간(탄젠트공간) 또는 표면공간 이라고 한다.

접선 공간은 세 벡터를 축으로 하는데 법선, 접선(x, u), 바이노멀(y, v)이라고 부른다.

접선과 바이노멀은 평면에 있는 벡터이고 법선은 그 평면에 수직인 벡터이다.

위 그림에서는 +z가 법선벡터가 된다.

참조 : Chapter 10. Shiny Little Pixels

결국 오브젝트 공간 법선맵과 접선 공간 법선맵은 용도에 따라 다른 좌표계를 사용하여

법선정보를 저장한 텍스쳐라고 생각하면 된다.

위와 같은 이유로 보통은 접선 공간 법선맵을 주로 사용한다.

그래서 앞으로 적을 법선맵에 대한 내용은 접선 공간 법선맵을 기준으로 한다.

위와 같은 방법으로 법선을 구했다면 이를 텍스쳐로 저장해야 한다.

법선은 벡터이므로 XYZ 세개의 성분이 필요하며,

텍스쳐는 R,G,B채널이 있으므로 각 X,Y,Z값을 대입하여 저장한다.

하지만 텍스처의 각 채널에 가질 수 있는 값의 범위는 0~1 이다.

이곳에 정규화한 단위벡터를 넣어주면 된다.

단위벡터는 크기값이 1인 벡터인데 크기값이 1이라는 것은 (1,0,0)일 수도 있지만

(-1,0,0)이 될 수도 있다는 말이 된다.

즉, 정규화된 법선벡터의 범위가 0~1이 아니라 -1~1이 되어 버리는 것이다.

그렇다면 0~1의 범위만을 포용하는 텍스처에 -1~1의 값을 가지는 벡터값을 어떻게 넣을 것인가?

담을 바구니를 크게 만들지 못한다면 넣을 물건을 작게 만들면 되지 않을까?

즉, -1~1을 0~1의 값으로 변환시키면 된다.

법선맵 RGB = 법선벡터 XYZ * 0.5 + 0.5

이렇게 하면 -1은 0에 맞추어지고 1은 1에 맞추어 진다.

반대로 법선맵 RGB로부터 법선벡터 XYZ를 구하고자 한다면?

위의 식 중 *0.5 + 0.5를 넘겨주면 된다.

법선맵 RGB - 0.5 = 법선벡터 XYZ * 0.5

2*(법선맵 RGB - 0.5) = 2*(법선벡터 XYZ * 0.5)

2*법선맵 RGB - 1.0 = 법선벡터 XYZ * 1.0 = 법선벡터 XYZ

법선맵 RGB * 2 - 1.0 = 법선벡터 XYZ

이렇게 법선 벡터를 텍스쳐에 저장하여 법선 맵을 완성 할 수 있다.

법선맵의 한 텍셀이 하나의 법선을 나타낸다.

참고 : Normal, Tangent, BiTangent Vector 그리고 Unity Normal Map

탄젠트 벡터(접선), 바이노멀 벡터, 법선벡터는 왜 필요한 걸까?

법선맵에서 벡터(0,0,1)은 섭동되지 않은 법선을 뜻하며 조명공식에 이 벡터를 그대로 쓸 수 없어

유효한 벡터로 변환해야 하는데, 그 방법 중 하나가 각 정점에서 법선벡터가 항상 양의 Z축을 가리키게 하는

좌표계를 새로 만드는 것이며 정규 직교 기저를 만들기 위해 세 축이 필요하므로, 

법선 벡터 이외에 각 정점에서 표면에 접하는 두개의 접선벡터가 필요하다.

이러한 방식에 의해 만들어진 좌표계를 탄젠트(접선)공간 또는 정점공간이라고 부른다.

버텍스는 로컬좌표에서 나타내는 법선 벡터를 하나 가지고 있는데 이는 정점 셰이더 에서

[NORMAL]라는 시멘틱스로 얻을 수 있으며 이 법선벡터 값은 위의 그림에서 Z축의 방향을 말한다.

여기에 접선공간을 정의하는 나머지 2개의 축인 U와 V의 로컬좌표에서의 방향은 어떻게 얻을까?

이 또한 정점셰이더에서 [TANGENT] 와 [BINORMAL] 시멘틱스로 얻을 수 있다.

즉, 로컬 좌표에 있는 접선 공간의 각 축의 방향은 이미 알 수 있다.

법선맵의 법선 벡터의 방향은 UVZ좌표에 정의되어 있지만, 세 축의 로컬좌표에서의 방향을 알 수 있으므로

이 방향도 계산 가능하다.

법선 맵의 색은 왜 파란색을 많이 가지고 있을까?

법선맵은 어디까지나 텍스쳐이므로 RGB의 색으로 할 필요가 있다.

법선벡터를 텍스쳐에 저장하는 방법은 위에서 한번 다루었지만 다시 되짚어 보자면,

RGB의 각 성분은 0~(0~255정수) 이므로 마이너스 표현을 할 수 없다.

따라서 0.5를 중심으로 0~0.5까지를 마이너스, 그 이상을 플러스로 하여 다룬다.

위의 그림 중 Z축과 X축이 있는 아래 그림은 법선맵을 횡단면으로 보았을 때의 모습이고

위쪽 그림은 그 컬러이다. X와Y는 방향에 따라 -1.0~1.0의 값을 가지지만 Z는 0.0~1.0의 값을 가진다.

그러므로 X와 Y값인 -1.0~1.0이 0.0~1.0으로 변할 때 Z값인 0.0~1.0 값은 사실 0.5~1.0으로 변한다.

이와 같은 이유로 법선 텍스쳐는 Z값이 X나 Y에 비해 크므로 Z성분인 B(blue)값을 상대적으로 많이 띄게 된다.

셰이더에 들어갈 때는 RGB 성분이 0~1.0으로 변환되어 들어 가는데 이를 XYZ값으로 변환하면 법선맵 방향이 된다.

법선맵은 펼쳐진 폴리곤에 대해 RGB 색성분으로 해당 법선의 방향을 나타내고 있다.

Unity에서 실제 구현 예제 보기

Reference Links
- 삼각함수

- unity normal map 구현 

- normal mapping (법선 매핑)

- Unwrapping and Chart reduction, 번역

- ShaderX1 Tips and Trick, Ch4.

- 탄젠트 공간

- Messing with Tangent Space

- 기울기

- Normal, Tangent, BiTangent Vector 그리고 Unity Normal Map

- 노말맵 관련 팁

- 범프 매핑 다시 정리

- 텍스처 좌표

- Tangent space, wikipedia

- GpgStudy, 탄젠트 스페이스, 종법선... 이 무었인가요?

- GpgStudy, 접선벡터, 탄젠트 공간

- 3D게임 프로그래밍 & 컴퓨터 그래픽을 위한 수학. 189 P.

- 법선 매핑(노멀 맵, Normal Map) 파헤치기

- What does unwrapping a model do any why is it important?

- Make a high/low prop, Unwrap it, bake a normal & AO map & Apply to low poly in 3ds max

- 노말맵(Normal Map)이란 무었인가?

- Object Space Normal Mapping with Skeletal Animation Tutorial

- Normal Map Texture

- What does unwrapping a model do any why is it important?

- Tangent Space and Object Space Normal Maps in Zbrush 2

- tangent space normal mapping