# Math ## 공간의 수학 > 현실 세계의 공간은 하나지만, 가상 공간은 무한하다. {% hint style="info" %} **공간이란** 어떤 물질 또는 물체가 존재할 수 있거나 어떤 일이 일어날 수 있는 장소 {% endhint %} ### 행렬 (Matrix) > 선형 변환을 수행하는 도구 * 컴퓨터에게 가상공간을 빠르게 변화시키도록 지시하는 일종의 명령어 * 공간을 변환할 때 사용하는 것들은 다 행렬에 대응된다. {% hint style="info" %} 원하는 공간 변환을 구현하기 위해서는 행렬이 어떻게 만들어지고, 어떻게 설계해야하는지 기본원리를 이해하는것이 중요하다. {% endhint %} ### 평면의 방정식 > `ax + by + cz + d = 0` * 여러개의 평면을 사용해서 공간안에 자신의 영역을 구축할 수 있다. * 대표적인 예로 카메라 영역을 제어하는 **`절두체(Frustum)`**가 있다. {% hint style="info" %} **절두체(Frustum)란**, 6개의 평면으로 구성되며, 3D 공간에서 카메라 영역에 담긴 부분만 걸러내 실제로 렌더링시키는 매커니즘을 가지고 있다. {% endhint %} ## 물체의 수학 > 가상 공간의 체계와 물체를 구성하는데 사용하는 수학 ### 아핀조합 $$aP\_1 + bP\_2 \ = a(x\_1, y\_1, 1) + b(x\_2,y\_2,1)\ = (ax\_1,b y\_1, a) + (bx\_2,by\_2,b) \\= (ax\_1 +bx\_1, ay\_1 + by\_2 , a+b)$$ #### 만약 $$a + b = 1$$인 경우 그 두 점을 더 했을 때 항상 점이 된다. > 해당 조건을 상시화시킨다면 $$P = aP\_1 + (1 -a)P\_2$$ 즉, a값과는 무관하게 마지막 차원의 값은 1이 된다. * 즉, 점과 점을 더 했을 때 언제나 아핀공간의 점을 보장한다. * 두 점을 조합했을 때 새로운 점을 만드는 공식이 된다. ### 면을 생성 하는 수학 > 점 3개를 조합하는 메커니즘 $$P = aP\_1 + bP\_2 + (1 - a - b)P\_3$$ * 세 점을 조합한 결과는 평면을 만들어 낸다. * 세 점에 사용되는 계수의 값의 범위를 0 \~ 1로 제한하게 되면 세 점이 가지고 있는 영역 내부에 위치하는 점을 생성하는데 이것이 바로 삼각형의 영역이 된다. * 이 삼각형이 모여 물체를 구성하게 되고 이것들을 하나씩 그려주는 것이 결국 그래픽의 원리이다. * 이런 삼각형의 정보를 모아둔 것을 **`Mesh`**라고 한다. #### **왜 점이 아닌 삼각형으로 물체를 그릴까?** * 점으로 구성된 물체를 가까이서 보는 경우 점들이 퍼지게 되면서 물체의 밀도가 떨어지게 된다. * But 삼각형으로 물체가 가지고 있는 영역을 설정한 다음 삼각형 내부에 픽셀의 계수를 구하고 각각 칠해주게 된다면 정밀하게 보여줄 수 있게 된다. * 삼각형이 가지고 있는 영역을 칠해주는 것을 **픽셀화(Rasterization)** 라고 한다. #### **삼각형**에 대한 수학은 **세개의 점**과 각 점에 대응되는 **계수**들로 구성된다. * 이 계수들은 0\~1의 범위를 가진다. * 어떤 점이 1이라면 나머지는 무조건 0이 되어야 한다. * 즉, 세 개의 점을 가지고 방정식을 통해 만들어진 새로운 점은 삼각형을 구성하는 세 점 중 어디에 가까운지 그 비중을 나타낼 수 있다. * 만약 모든 계수의 값이 1/3 이라면 만들어진 점은 삼각형의 정중앙에 위치하게 된다. * 이 계수들을 모아 좌표를 만든것이 **무게중심좌표(Barycentric coordinate)**라 한다. * 삼각형의 무게중심 좌표를 이용해 픽셀의 색상을 결정할 때 각 점의 데이터를 혼합해서 원하는 결과를 만들어낼 수 있다. * 삼각형의 텍스쳐를 오려 붙일 때에도 사용하게 되는데 이때 사용되는 좌표를 **UV 좌표**라 한다. * 삼각형을 구성하는 세 점에 색상이나 UV 정보들을 넣어서 삼각형 내부를 칠하는 다양한 효과를 만들어 낼 수 있다 * 삼각형을 구성하는 세 점에다가 `Color`, `UV`, `Normal`, `tangent` 등 부가적인 데이터를 넣은 각각의 최종적인 점의 데이터 묶음을 **정점(Vertex)**이라 한다. #### 하나의 물체를 화면에 그려내는 과정 요약 > 1. 물체를 세 개의 정점으로 구성된 삼각형으로 분리 > 2. 분리된 삼각형을 각각 그려서 화면을 채운다. * 이 과정은 정형화 되어있기 떄문에 렌더링 파이프라인이라고도 부른다. (그래픽카드가 자동으로 처리) * 이 과정에서 개발자가 커스텀할 수 있도록 제공하는 함수 **`정점 셰이더`**, **`픽셀 셰이더`**가 있다. #### 1. 정점 셰이더(Vertex Shader) * 삼각형을 구성하는 각 정점의 최종 데이터를 결정하는 함수 #### 2. 픽셀 셰이더(Pixel Shader) * 삼각형 내부를 구성하는 각 픽셀의 최종 색상을 결정하는 함수 ## 회전의 수학 (삼각함수와 회전행렬) ### 삼각함수
![](https://1912740209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3GVYdZvmqQyBVq29ebqk%2Fuploads%2F1l6CIxi0C0EybVZ9Khn1%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-09-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.51.02.png?alt=media\&token=538046fe-566f-4937-bb89-4f22cc0aa308) * 기준 위치에서 얼마만큼의 각을 이용해서 회전했는지를 회전한 값과 반지름을 사용해 표현할 수 있다. * 단위 원의 반지름의 크기가 1 이라면 원상의 위치한 한 점에 대해 삼각함수로 표현을 하면 \ **sin(θ) → 높이**, **cos(θ) → 밑변**이 된다. * ![](https://1912740209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3GVYdZvmqQyBVq29ebqk%2Fuploads%2FvObZEksp5wtyUGdQ9ipi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-09-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.00.05.png?alt=media\&token=1e08db00-e6dc-429f-b045-b8e81018d410) #### 삼각비 ![](https://1912740209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3GVYdZvmqQyBVq29ebqk%2Fuploads%2FDr9ONonntYhxDHPatSUv%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-09-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.52.24.png?alt=media\&token=66e723da-290e-449f-aa4e-7433148695de) * $$\frac{높이}{빗변}$$$$\frac{밑변}{빗변}$$$$\frac{높이}{밑변}$$ 삼각비의 3가지 종류 * 이러한 비율을 원으로 확장해서 함수로 표현한것이 삼각함수이다. **sin(θ)** => $$\frac{높이}{빗변}$$ **cos(θ)** => $$\frac{밑변}{빗변}$$ **tan(θ)** => $$\frac{높이}{밑변}$$