3. 물체에 대한 수학 2 - 삼각형과 정점

 

 

물체에 대한 수학 2 - 삼각형과 정점 🤗

 

---

 

지난 영상에 이어 이번 영상은 점에 대한 수학에 관해 이야기하겠습니다. 이전에 이야기했던 것처럼 게임에서의 벡터 공간은 크게

1. 물체를 표현하는 공간

2. 이동을 위한 공간으로 구분되어 관리합니다.

 

해당 공간의 각각 요소들을 점과 벡터로 구분해 부른다고 이야기했습니다. 즉, 벡터는 용도에 따라

1. 물체를 구성하는데 사용하는 점과,

2. 물체를 이동하는데 사용하는 이동 벡터로 나누어집니다.

이를 자세히 알아보기 위해서 두 공간이 어떻게 구성되는지를 설명하겠습니다.

 

먼저 3차원 공간에서 이동 구현을 위해서는 4차원이 필요하다고 했습니다. 그렇지만 4차원 공간을 그림으로 설명할 수 없으므로 어쩔 수 없이 2차원 물체의 2차원 이동을 3차원 공간을 통해 예를 들겠습니다.

 

---

 

지금 보이는 이 3차원 공간으로 2차원 물체와 2차원 이동이 어떻게 구현되는지 설명하겠습니다. 먼저, 그림에서 보이는 것처럼 2차원 물체를 표현하기 위해서 사용하는 공간은 노란색 영역으로 표시되어 있고, 이 영역이 가지는 값은 마지막 차원의 값은 1이 됩니다.

 

이 노란색 공간을 아핀 공간이라 합니다. 그렇다면 왜 아핀 공간은 마지막 차원의 값이 1이 여야 할까요? 그것은 우리가 3차원 공간을 통째로 미뤘을 때 그 미는 힘만큼 정확하게 이동한 평면이 마지막 차원의 값이 1이 되기 때문입니다. 다른 값을 가지는 평면의 경우 우리가 민 만큼 이동하는 효과를 가지지 않습니다. 그러므로 마지막 차원의 값이 1인 공간을 사용하는 것입니다.

 

그렇다면 우리가 미는 양에 대한 표현하는 공간도 별도로 존재해야 합니다. 이 부분은 마지막 차원이 0인 공간입니다. 이렇게 마지막 차원, 높이를 나타내는 마지막 차원의 값이 0과 1로 고정되어 있으므로 점에다가 어떤 벡터를 밀더라도 그 점이 위로 가지는 않습니다. 항상 평행하게 옆으로 움직이게 됩니다. 그러므로 앞선 영상에서 점에다가 벡터를 더해도 항상 점이 된다고 얘기했던 것입니다.

 

이를 수식으로 나타내면 1 + 0 = 1 (점 + 벡터 = 점)이 됩니다. 즉 계산 결과는 항상 마지막 차원의 값만 본다면 우리는 항상 점을 보장받을 수 있습니다. 이런 방식으로 점에서 점을 빼는 것은 벡터를 의미합니다.

 

1 – 1 = 0 (점 - 점 = 벡터) 그리고 0 + 0 = 0 (벡터 + 벡터 = 벡터) 그렇다면 1 + 1 = 2 (점 + 점 = ??) 이것은 점의 영역을 벗어나기 때문에 점과 점은 더할 수 없습니다. 하지만 점과 점을 더할 때 다음 식과 같이 각 점의 앞에 계수를 붙여서 곱해봅시다. 두 계수를 a와 b라고 했을 때 마지막 차원의 값만 본다면 각각의 숫자를 곱한 결과는 a와 b가 됩니다. 그러므로 두 점을 더한 결과는 a+b가 됩니다.

 

Ap1 + bp2 = a(x1, y1, 1) + b(x2, y2, 1)

                 = (ax1, ay1, a) + (bx2, by2, b)

                 = (ax1 + bx2, ay1 + by2, a + b)

만약 a + b가 1이라고 하면 그 두 점을 더했을 경우 항상 점이 된다.는 결론이 도출됩니다.

 

A + b = 1

그렇다면 이 조건을 아예 상시화시켜서 b를 1-a로 바꿔 두 점을 더해봅시다.

P = ap1 + (1-a)p2

 

그렇다면 a 값과 무관하게 마지막 차원의 결과는 1이 됩니다. 이 공식은 점과 점을 더했을 때 언제나 아핀 공간의 점을 보장한다는 점입니다. 그래서 두 점을 조합해서 새로운 점을 조합할 수 있는 공식이 됩니다. 이러한 공식을 수학에서 아핀 조합이라고 합니다.

 

---

 

이러한 아핀 조합이란 물체를 구성하는데 기본이 되고 중요한 역할을 합니다. 먼저 두 점의 조합이 어떤 결과를 가져오는지 살펴보겠습니다.

두 점을 조합했을 때 이 조합으로 만들어진 새로운 점은 계수 a의 범위에 따라 변화시킨다고 했을 때 두 점을 잇는 무한대의 선상에 위치합니다. 두 점을 조합해서 만드는 선을 직선이라고 합니다. 여기서 계수 a의 값이 0이면, 그 생성된 점은 p2를 가리키며 계수 a의 값이 1이면 점 p1을 가리킵니다. 이는 아래 사진과 같습니다.

그래서 0보다 큰 모든 실수를 사용한다고 가정했을 때 점 p2에서 점 p1으로 향하는 무한대의 직선이 생성됩니다. 한쪽은 고정이 되어 있으므로 반직선(Ray)이라고 합니다. 반직선 레이는 게임 제작에서 많이 사용되는 개념입니다. 게임 제작에서 시선 방향에 어떤 장애물이 있는지 목표물이 있는지 탐지하는 기법을 레이 캐스팅이라고 합니다. 이 때 사용하는 레이가 이 반직선 레이의 개념입니다. 즉 레이캐스팅이란 시선 방향에 장애물이나 목표물이 있는지 감지하는 기능입니다.

 

레이 트레이싱이라는 그래픽 용어도 최종 목적지인 화면에서 거꾸로 빛을 탐지해서 들어가는 방식으로 구현되어 있습니다. 최종 목적지가 정해져 있어서 반직선의 개념이 들어가 레이 트레이싱이라고 합니다.

레이 트레이싱 : 모니터 화면에서 거꾸로 빛의 방향을 추적해 렌더링 하는 기법

 

우리가 지정한 두 점 p1과 p2를 생성하기 위해서는 그 계수가 1과 0이 되어야 한다고 했습니다. 그러므로 우리가 사용한 수의 범위를 0에서 1까지로 좁히게 되면 p2에서 p1으로 이어지는 선이 만들어지게 됩니다. 즉 시작과 끝이 정해져 있는 선을 선분(Line Segment)라고 합니다. 여태까지 두 점을 조합해 선을 만들어내는 수학에 대해 알아보았습니다.

 

---

 

이번에는 한 차원 더 높여 면을 생성하는 수학에 대해 알아보겠습니다. 면의 수학은 점을 3개로 조합하는 메커니즘으로 구성됩니다. 점 3개의 계수를 붙인 다음 마찬가지로 끝의 값이 항상 1이 되도록 마지막 계수의 1의 값이 되도록 (1 – a – b)를 붙여줍니다. 이 계산 결과는 점을 보장받고 이에 점을 조합한 결과는 평면을 만들어내게 됩니다. 이는 아래 그림과 같습니다.

이 삼각형이 모여 물체를 생성하고 이것들을 각각 하나씩 그려주는 것이 결국 게임 그래픽의 원리입니다. 이러한 삼각형의 정보를 모아둔 것이 메시입니다. 그렇다면 왜 점으로 물체를 그리지 않고 삼각형으로 그림을 그릴까요?

 

예를 들어 점 100개를 이루어진 물체를 확대하여 가까이 보고 싶으면 점 100개에 대한 정보가 퍼지면서 물체에 대한 밀도가 떨어지게 됩니다. 하지만 삼각형으로 물체가 가지고 있는 영역을 설정한 다음에 삼각형 내부에 픽셀의 계수를 구하고 이것을 칠해주면 정밀하게 보여줄 수 있는 단계를 만들어 낼 수 있습니다. 이렇게 삼각형이 가지고 있는 영역을 픽셀로 변환하는 작업을 픽셀화(레스터라이징)이라고 합니다.

삼각형에 대한 수학은 3개의 점과 각각 점의 대응하는 계수들로 구성되어 있습니다. 이 계수의 범위는 1을 넘어설 수 없으며 0보다 떨어질 수 없습니다. 어떤 점이 1이라면, 나머지 점은 반드시 0이 되어야 합니다. 그러므로 3개의 점의 값을 가지고 방정식을 사용해 만들어진 새로운 점이 삼각형을 구성하는 것이 점 중의 어디에 가까운지 그 비중을 파악할 수 있습니다. 만일 모든 계수의 값이 1/3씩 공평하게 균등하게 퍼져있다면 방정식으로 만들어진 새로운 점은 삼각형의 정 중앙에 위치합니다.

 

이 계수들을 모아 새로운 좌표를 만들 수 있습니다. 이를 무게 중심좌표라고 합니다. 삼각형 내부에 어떤 픽셀을 칠할 때 이 픽셀이 가지는 무게 중심 좌표를 알고 있다면 우리가 이 픽셀의 색상을 결정할 때 각 점에 있는 데이터를 혼합하여 원하는 결과를 만들어 낼 수 있습니다. 예를 들어 각 점의 빛의 3 원소인 빨강, 파랑, 녹색을 설정하고 각 픽셀이 가지고 있는 무게 중심좌표를 사용해서 3가지 색상을 혼합하면 삼각형의 내부를 다음과 같이 무지개 색상을 가지게 할 수 있습니다.

 

이는 색상뿐만 아니라 좌표에도 사용할 수 있으며 삼각형의 텍스처를 오려 붙일 때도 이를 사용하게 됩니다. 이 때 사용하는 좌표를 UV 좌표라고 합니다.

지금 보이는 화면은 사각형 텍스처의 영역을 각 삼각형 면에 대응해서 사각형을 그려 표현하는 화면입니다. 각 점에 대응하는 이미지의 좌표 2차원 좌표를 넣어서 도배하듯 삼각형에 붙여넣는 것입니다. 정점에 지정한 좌표들의 끝의 머리를 붙여주면 삼각형 내부 영역은 자동으로 무게 중심좌표를 활용해 내부를 채워주게 됩니다. 이렇게 삼각형을 구성하는 세 점의 색상이나 UV 같은 정보들을 넣어서 삼각형 내부를 칠하는 다양한 효과를 만들어 낼 수 있습니다.

이것들을 잘 활용하면 아래와 같은 사실적인 이미지를 만들어 낼 수 있습니다. 삼각형을 구성하는 점에다가 색상, UV, 노멀 등 부가적인 데이터를 넣은 최종적인 점의 데이터의 묶음을 정점(Vertex)라고 합니다.

 

 

---

정리 😤

 

지금까지 설명한 내용을 정리하면 게임에서 하나의 물체를 화면에 그리는 과정은 물체를 3개의 버텍스로 구성된 삼각형으로 분리하고 이것을 각각 그려서 화면에 채우는 것으로 요약할 수 있습니다. 이 과정은 정형화되어있으며 이를 렌더링 파이프라인이라고 합니다. 이는 그래픽카드가 자동으로 처리합니다. 하지만 응용력을 높이기 위해 중간에 개발자가 자기가 원하는 기능을 끼워 넣을 수 있도록 2가지 함수를 제공합니다.

 

이는 정점 쉐이더(Vertex Shader)와, 픽셀 쉐이더(Pixel Shader)입니다.

1. 정점 쉐이더란? 삼각형을 구성하는 각 정점의 최종 데이터를 결정하는 함수입니다. 정점 셰이더에 수학을 더 하면 시간에 따라 흔들리는 물체를 구현하는 것이 가능합니다.

 

2. 픽셀 쉐이더란? 삼각형 내부를 구성하는 각 픽셀의 최종 색상을 결정하는 함수입니다. 각 픽셀은 앞서 설명한 무게 중심 좌표에 따라 자동으로 들어오게 되고 이 값과 텍스처의 값, 조명의 값 등이 결합하여 다양한 효과를 주는 데 사용하게 됩니다.