LearnOpenGL - Transformations

생성일: 2021년 1월 24일 오전 4:36 속성 1: https://learnopengl.com/Getting-started/Transformations

이제 우리는 오브젝트를 만들고, 색상을 지정하고, 텍스처를 사용하여 세부적인 모양을 부여하는 방법을 알고 있지만, 모두 정적 오브젝트이기 때문에 재미가 없습니다. 버텍스를 변경하고 각 프레임의 버퍼를 재구성하여 이동하도록 시도하고 만들 수 있지만, 이는 번거롭고 상당한 처리 능력이 필요합니다. 개체를 변형하는 훨씬 더 좋은 방법은 (여러) 행렬 개체를 사용하는 것입니다. 이것은 거창한 의미는 아닙니다.

행렬은 처음에는 무섭게 느껴지는 매우 강력한 수학적 구조이지만 익숙해지면 매우 유용합니다. 행렬에 대해 논의할 때 몇 가지 수학에 대해 잠시 살펴보아야 할 것이며 더 숳

그러나 변환을 완전히 이해하려면 먼저 행렬에 대해 논의하기 전에 벡터에 대해 좀 더 깊이 알아야 합니다. 이 장의 초점은 나중에 필요한 주제에 대한 기본적인 수학적 배경을 제공하는 것입니다. 주제가 어려운 경우 최대한 이해하려고 하고, 나중에 이 장으로 돌아와서 필요할 때마다 다시 보십시오.

벡터

가장 기본적인 정의에서 벡터는 방향이며 그 이상은 없습니다. 벡터에는 방향과 크기 (힘 또는 길이라고도 합니다). 당신은 보물지도의 길 찾기와 같은 벡터를 생각할 수 있습니다. : '왼쪽으로 10 걸음, 이제 북쪽으로 3걸음, 오른쪽으로 5걸음' 여기서 '왼쪽'은 방향이고 '10'은 벡터의 크기입니다. 따라서 보물지도의 방향에는 3개의 벡터가 포함됩니다. 벡터는 모든 차원을 가질 수 있지만 일반적으로 2-4차원으로 작업합니다. 벡터의 2차원이 있으면 평면상의 방향을 나타내고 (2D 그래픽을 생각해보세요) 3차원이 있으면 3D세계의 모든 방향을 나타낼 수 있습니다.

아래에는 각 벡터가 2D그래프에서 화살표로 (x, y) 로 표현되는 3개의 벡터가 있습니다. 벡터를 3D가 아닌 2D로 표시하는 것이 더 직관적이기 때문에 2D 벡터를 z 좌표가 0 인 3D벡터로 생각할 수 있습니다. 벡터는 방향을 나타내므로 벡터의 시작점은 중요하지 않습니다. 아래 그래프에서 볼 수 있는 벡터 $\bar v$ 와 벡터 $\bar w$의 시작점이 다르더라도 동일한 것을 볼 수 있습니다.

벡터를 설명할 때 수학자는 일반적으로 벡터를 머리 위에 작은 막대가 있는 문자 기호로 설명하는 것을 선호합니다. $\bar v$ 또한 공식에 벡터를 표시할 때 일반적으로 다음과 같이 표시됩니다.

벡터는 방향으로 지정하기 때문에 위치로 시각화하기 어려운 경우가 있습니다. 벡터를 위치로 시각화하려면 방향 벡터의 시작점이 (0, 0, 0) 이 되는 것을 상상 한 다음 점을 지정하는 특정 방향을 가리켜 위치 벡터로 만들 수 있습니다. 다른 시작점을 입력 한 다음 '이 벡터는 이 시작점에서 공간의 해당 지점을 가리킵니다라고 말합니다. 그러면 위치 벡터(3, 5)는 원점이(0, 0)인 그래프에서(3, 5)` 를 카리킵니다. 따라서 벡터를 사용하여 2D 및 3D 공간에서 방향 및 위치를 나타낼 수 있습니다.

일반 숫자와 마찬가지로 벡터에 대해 여러 연산을 정의 할수도 있습니다. (일부는 이미 보신겁니다.)

스칼라 벡터 연산

스칼라는 한 자리 숫자입니다. 스칼라로 벡터를 더하기 / 빼기 / 곱하기 또는 나눌 때 우리는 단순히 벡터의 각 요소를 스칼라로 더하거나 / 빼거나 / 곱하거나 나눕니다. 다음과 같이 나타낼 수 있습니다.

여기서 +는 +, −, ⋅ 또는 ÷ 일 수 있습니다. 여기서 ⋅는 곱셈 연산자입니다.

벡터 negation

벡터를 부정(negate)하면 반대 방향의 벡터가 생성됩니다. 북동쪽을 가리키는 벡터를 부정한 후 남서쪽으로 가리킵니다. 벡터를 부정하기 위해 각 구성 요소에 마이너스 부호를 추가합니다. (스칼라 값이 -1 인 스칼라 벡터 곱셈으로도 나타낼 수 있습니다.)

덧셈과 뺄셈

두 벡터의 덧셈은 구성 요소별로의 덧셈으로 정의됩니다. 즉, 한 벡터의 각 구성요소가 다음과 같이 다른 벡터의 동일한 구성 요소에 추가됩니다.

시각적으로 벡터 v = (4,2) 와 k = (1,2) 에서 다음과 같이 보입니다. 두 번째 벡터는 첫 번째 백터의 끝에 추가되어 결과적으로 벡터를 끝점을 찾습니다. (헤드-투-테일 방법)

일반 덧셈 및 뺄셈과 마찬가지로 벡터 뺄셈은 부정 된 두 번째 벡터를 사용한 덧셈과 동일합니다.

두 벡터를 서로 빼면 두 벡터가 가리키는 위치의 차 인 벡터가 생성됩니다. 이는 두 점간의 벡터를 나타내는 경우에 유용합니다.

길이

벡터의 길이 / 크기를 알기위해 수학 수업에서 배웠던 피타고라스 정리를 사용합니다. 벡터는 개별 x 및 y 구성 요소를 삼각형의 두 변으로 시각화 하면 삼각형을 형성합니다.

두 변의 길이 (x, y) 를 알고 있고 기울어 진 변의 길이를 알고 싶기 때문에 피타고라스 정리를 사용하여 다음과 같이 계산할 수 있습니다.

$\lVert\bar{v}\rVert$ 이것은 벡터 $\bar{v}$의 길이로 표시합니다. 이것을 방정식에 $z^2$를 추가하여 3D로 쉽게 확장됩니다.

이 경우엔 벡터 (4, 2) 의 길이는

4.47 입니다.

단위 벡터라고 부르는 특별한 유형의 벡터도 있습니다. 단위 벡터에는 하나의 추가 속성이 이씅며 길이는 정확히 1이라는 것입니다. 벡터의 각 구성 요소를 길이로 나누어 모든 벡터에서 단위 벡터를 계산할 수 있습니다.

이것을 벡터 정규화(Nomalizing) 라고 합니다. 단위 벡터는 머리 위에 작은 지붕으로 표시되며 일반적으로 작업하기 더 쉽습니다. 특히 방향만 신경쓰는 경우 (벡터의 길이를 변경하더라도, 방향은 변경되지 않습니다.)

벡터간의 곱셈

두 벡터를 곱하는 것은 이상한 경우입니다. 정규 곱셈은 시각적 의미가 없기 때문에 실제로 벡터에서 정의되지 않지만 곱할 때 선택할 수 있는 두 가지 특정 경우가 있습니다. 하나는 $\vec x\cdot\vec y$로 표시된 내적이고, 다른 하나는 $\vec x * \vec y$ 로 표시된 외적입니다.

내적(Dot product)

두 벡터를 내적한다는 것은 각 벡터 사이의 코사인과 각 길이의 스칼라를 곱하는것과 같습니다. 이 말이 잘 이해가 가지 않는다면 다음 공식을 보세요.

각 벡터 사이의 각도는 세타 $(\theta)$로 표시됩니다. 이것이 흥미로운 이유는, $\bar{v}$와 $\bar{k}$가 단위 벡터라고 가정하면 길이가 1일것입니다. 그렇다면 공식을 다음과 같이 효율적으로 줄일 수 있습니다.

이제 내적만이 두 백터 사이의 각도를 정의합니다. 코사인함수는 각도가 90도면 0 이 되고 각도가 0이면 1 이 된다는 것을 알 수 있습니다. 이렇게 하면 내적을 사용하여 두 벡터가 서로 직교하는지, 평행한지 쉽게 알 수 있습니다. (직교는 벡터가 서로 직각에 있음을 의미합니다.) sin 또는 cos 함수에 대해 더 알고싶다면 칸 아카데미 동영상 에서 기본 삼각법에 대해 설명합니다.

두개의 단위벡터가 아닌 벡터 사이의 각도를 계산할 수 있지만 결과에서 두 벡터의 길이를 나누어 $cos\theta$로 남겨야 합니다.

그렇다면 내적은 어떻게 계산할까요? 내적은 구성 요소 별 곱셈의 결과를 더하는 것입니다. 두 개의 단위 벡터를 사용하면 다음과 같습니다 (두 길이 모두 정확히 1 인지 확인할 수 있음.)

이 두 단위 벡터 사이의 각도를 계산하기 위해 우리는 코사인 함수의 역인 $cos^{-1}$ 을 사용하여 결과적으로 143.1 도가 됩니다. 이제 이 두 벡터 사이의 각도를 효과적으로 계산했습니다. 내적은 나중에 조명 계산을 할 때 매우 유용합니다.

외적(Cross product)

외적은 3D공간에서만 정의되며 두 개의 평행하지 않은 벡터를 입력으로 사용하고, 두 입력 벡터에 직교하는 세 번째 벡터를 얻습니다. 두 입력 벡터가 서로 직교하면 외적은 3개의 직교 벡터가 됩니다. 이것은 다음 장에서 유용하게 사용할 수 있습니다. 다음 이미지는 이것이 3D공간에서 어떻게 보이는지 보여줍니다.

다른 연산과 달리 외적은 선형 대수를 공부하지 않고는 직관적이지 않으므로 공식을 외우는 것이 가장 괜찮을 것입니다.(그렇지 않다면 나중에 괜찮을 것입니다.) 아래에서 두 직교 벡터 A와 B 사이의 외적을 볼 수 있습니다.

보시다시피 와닿지 않을 것입니다. 그러나 이 단계만 따르면 직교하는 또 다른 벡터를 얻을 수 있습니다.

행렬(Matrices)

이제 벡터에 대한 거의 모든것을 알아봤으므로 행렬에 들어갈 시간입니다! 행렬은 숫자, 기호 및/또는 수학 표현식의 직사각형 배열입니다. 행렬의 각 개별 항목을 행렬의 요소(element)라고 합니다. 2x3 행렬의 예는 다음과 같습니다.

행렬은 (i, j) 에 의해 인덱싱됩니다. 여기서 i 는 행이고 j 는 열입니다. 따라서 위 행렬은 2x3 행렬 (열 3개와 행2개, 행렬의 차원(dimension) 이라고도 함) 이라고 합니다. 이것은 2D 그래프를 (x, y) 로 인덱싱 할 때와는 반대입니다. 값 4를 검색하려면 (2, 1) (두 번째 행, 첫 번째 열)로 색인을 생성합니다.

행렬은 기본적으로 수학 표현식의 직사각형 배열일 뿐입니다. 그것은 매우 좋은 수학적 성질들을 가지고 있으며 벡터와 마찬가지로 행렬에 대한 여러 연산 즉, 더하기, 빼기 및 곱하기를 정의할 수 있습니다.

덧셈과 뺄셈

두 행렬 사이의 더하기 및 빼기는 요소별로 수행됩니다. 따라서 일반 숫자에 대해 우리가 익속한 동일한 규칙이 적용되지만 동일한 인덱스를 가진 두 행렬의 요소에 대해서 수행됩니다. 이것은 더하기와 빼기가 같은 차원의 행렬에 대해서만 정의된다는 것을 의미합니다. 3x2 행렬과 2x3 행렬 (또는 3x3 행렬 4x4 행렬)은 함께 더하거나 뺄 수 없습니다. 두 개의 2x2 행렬에서 행렬 덧셈이 어떻게 작동하는지 살펴 보겠습니다.

행렬 뺄셈에서도 동일한 규칙이 적용됩니다.

행렬 스칼라 곱

행렬-스칼라 곱은 행렬의 각 요소를 스칼라로 곱합니다.

이제 이러한 단일 숫자를 스칼라라고 부르는 이유도 이해가 됩니다. 스칼라는 기본적으로 행렬의 모든 요소를 값으로 스케일 합니다. 이전 예시에서 모든 요소는 2 로 확장되었습니다.

지금까지 우리의 모든 예시는 그렇게 복잡하지 않습니다. 행렬간의 곱셈을 시작하기 전까지는요.

행렬간 곱셈

행렬을 곱하는 것은 반드시 복잡하지는 않지만, 익숙해지기 어렵습니다. 행렬 곱셈은 기본적으로 곱할 때 미리 정의된 규칙들을 따르는 것을 의미합니다. 하지만 몇 가지 제한 사항이 있습니다.

1. 좌변 행렬의 열 수가 우변 행렬의 행 수와 같은 경우에만 두 행렬을 곱할 수 있습니다.
2. 행렬 곱셈은 교환법칙이 성립하지 않습니다. $A\cdot{B}\not = B\cdot{A}$

2개의 2x2 행렬의 행렬 곱셈의 예부터 시작하겠습니다.

지금 당신은 도대체 무슨 일이 일어 났는지 알아내려고 할 것 입니다. 행렬 곱셈은 왼쪽 행렬의 행과 오른쪽 행렬의 열을 사용하는 일반 곱셈과 덧셈의 조합입니다. 다음 이미지로 이에 대해 논의 해 보겠습니다.

먼저 왼쪽 행렬의 위쪽 행을 가져온 다음 오른쪽 행렬의 열을 가져옵니다. 우리가 선택한 행과 열은 계산한 결과 2x2 행렬이 나옵니다. 왼쪽 행렬의 첫 번째 행을 가져 오면 결과 값이 결과 행렬의 첫 번째 행이 됩니다. 그런 다음 열을 선택하고 첫 번째 열이면 결과 값이 결과 행렬의 첫 번째 열이 됩니다. 이것이 바로 빨간색 경로의 경우입니다. 오른쪽 하단 결과를 계산하기 위해 첫 번째 행렬의 맨 아래 행과 두 번째 행렬의 맨 오른쪽 열을 사용합니다.

결과 값을 계산하기 위해 정규 곱셈을 사용하여 행과 열의 첫 번째 요소를 곱하고 두 번째 요소, 세 번째, 네 번째 등에 대해 동일한 작업을 수행합니다. 그런 다음 개별 곱셈의 결과가 합산되고 결과가 나타납니다. 이제 요구 사항 중 하나는 왼쪽의 행렬의 열과 오른쪽 행렬의 행 크기가 같다는 것입니다. 그렇지 않으면 곱셈을 진행할 수 없습니다.

결과는 차원이 (n,m) 인 행렬입니다. 여기서 n 은 좌변 행렬의 행 수와 같고 m 은 우변 행렬의 열과 같습니다.

암산으로 행렬의 곱셈이 어렵다고 걱정하지 마세요. 손으로 계산을 하고 문제가 있을때마다 이 페이지로 돌아오세요. 시간이 지남에 따라 당신에게 두번째로 자연스러워 질 것입니다.

더 큰 예제를 사용하여 행렬간의 곱셈에 대한 논의를 마칩니다. 색상을 사용하여 패턴을 시각화 하십시오. 유용한 연습방법으로, 자신의 곱셈에 대한 답을 생각 해낸 다음 결과 행렬과 비교하여 맞는지 확인하십시오. (행렬 곱셈을 손으로 시도해보면 금방 이해할 수 있습니다.)

보시다시피, 행렬간의 곱셈은 매우 번거로운 과정이며 계산 실수가 발생하기 매우 쉽습니다. (이것이 우리가 일반적으로 컴퓨터에게 이 작업을 수행하도록 하는 이유입니다.) 행렬이 커지면 더 실수하기 쉽습니다. 여전히 더 많은것을 갈망하고 행렬의 수학적 속성에 대헤 더 궁금하다면 행렬에 대한 칸 아카데미 동영상을 살펴보시기 바랍니다.

어쨌든, 이제 우리는 행렬을 함께 곱하는 방법을 알았으므로 좋은 것을 얻을 수 있습니다.

Matrix-Vector multiplication

이때까지 우린 제법 많이 벡터를 다루었습니다. 우리는 좌표, 색 심지어 텍스쳐 좌표를 표현하기 위해 벡터를 사용할 것입니다. 조금 더 깊게 나아가 벡터는 기본적으로 Nx1 행렬이며, 여기서 N 은 벡터의 구성 요소 수 (N 차원 벡터라고도 함) 입니다. 생각해보면 말이 되는 것 같습니다. 벡터는 열이 1개밖에 없는 숫자 배열인 행렬일 뿐입니다 . 그렇다면 이 새로운 정보가 우리에게 어떻게 도움이 될까요? 음.. 만약 우리가 MxN 행렬을 가지고 있다면 행렬의 열이 벡터의 행 수와 같기 때문에 이 행렬을 Nx1 벡터와 곱할 수 있습니다. 따라서 행렬 곱셈이 정의됩니다.

하지만 행렬에 벡터를 곱할 수 있는지 왜 신경을 써야할까요? 음, 행렬 내부에 배치할 수 있는 흥미로운 2D/3D 변환이 많이 있고 그 행렬을 벡터와 곱한 다음 그 벡터를 변환(transforms) 합니다. 여전히 혼란스럽다면 몇 가지 예부터 시작해보면 곧 의미를 알 수 있을 것입니다.

단위 행렬 Identity matrix

OpenGL에서 우리는 일반적으로 여러가지 이유로 4x4 변환 행렬로 작업하며 그 중 하나는 대부분 벡터의 크기가 4라는 것입니다. 우리가 할 수 있는 가장 간단한 변환 행렬은 단위 행렬입니다. 단위 행렬은 대각선을 제외하고 0만 있는 NxN 행렬입니다. 보시다시피 이 변환 행렬은 벡터를 손상시키지 않습니다.

벡터는 변경되지 않습니다. 이것은 곱셈규칙에서 확인할 수 있습니다. 첫 번째 결과 요소는 행렬의 첫 번째 행의 각 개별 요소에 벡터의 각 요소를 곱한 것입니다. 행의 각 요소는 첫 요소를 제외하고 0이므로, $1\cdot1+0\cdot2+0\cdot3+0\cdot4=1$ 다음과 같은 식을 얻을 수 있습니다. 벡터의 다른 3 요소에도 동일하게 적용됩니다.

변환하지 않는 변환 행렬의 용도가 무엇인지 궁금할 수 있습니다. 단위 행렬은 일반적으로 다른 변환 행렬을 생성하기 위한 시작점이며 선형 대수를 더 깊이 파고 들면 정리를 증명하고 선형 방정식을 푸는 데 매우 유용한 행렬입니다.

스케일링 Scaling

벡터의 크기를 조정할 때 화살표의 길이를 원하는 만큼 늘리고 방향을 동일하게 유지합니다. 우리는 2차원 또는 3차원에서 작업하기 때문에 2개 또는 3개의 스케일링 변수로 구성된 벡터로 스케일링을 정의 할 수 있으며, 각 스케일링은 하나의 축 (x , y 또는 z ) 입니다.

벡터 $\bar{v} = (3,2)$ 의 크기를 조정 해 봅시다. x축을 따라 벡터의 배율을 0.5로 조정하여 두 배로 좁게 만듭니다. y축을 따라 벡터의 크기를 2배 조정하여 두배로 높입니다. 스케일 한 벡터 (0.5, 2) 즉 $\bar{s}$ 벡터가 어떻게 생겼는지 한번 봅시다.

OpenGL은 일반적으로 3D공간에서 작동하므로 2D일 경우 z축 배열을 1 로 설정하여 작업할 수 있습니다. 방금 수행 한 스케일링 작업은 스케일링 계수가 각 축에 대해 동일하지 않기 때문에 균일하지 않는 스케일(non-Uniform scale)입니다. 스칼라가 모든 축에서 같으면 균일 스케일(Uniform Scale) 이라고 합니다.

스케일링을 수행하는 변환 매트릭스를 구축해 보겠습니다. 우리는 단위 행렬에서 각 대각선 요소에 해당 벡터 요소를 곱한 것을 보았습니다. 단위 행렬의 1 을 3 으로 변경하면 어떨까요? 이 경우 각 벡터 요소에 3 을 곱하여 벡터에 3을 효과적으로 균일하게(Uniform) 스케일합니다. 스케일링 변수$(S_1,S_2,S_3)$로 표현하면 모든 벡터$(x,y,z)$에 대한 스케일링 행렬을 다음과 같이 정의 할 수 있습니다.

4번쨰 스케일링 값 1을 유지합니다. w구성 요소는 나중에 살펴볼 다른 용도로 사용됩니다.

Translation

Translation은 원래 벡터 위에 다른 벡터를 추가하여 위치가 다른 새 벡터를 반환하여 이동 벡터를 기반으로 벡터를 이동 하는 과정입니다. 우리는 이미 벡터의 덧셈에 대해 논의 했으므로 이것을 처음보는 것처럼 느끼면 안됩니다.

스케일링 행렬과 마찬가지로 4x4 행렬에는 특정 작업을 수행하는 데 사용할 수 있는 여러 위치가 있으며 변환을 위해 4번째 열의 상위 3개 값이 있습니다. 이동 벡터를$(T_x,T_y,T_z)$로 표현하면 다음과 같이 이동 행렬을 정의할 수 있습니다.

이것은 모든 변환 값에 벡터의 w 열을 곱하고 벡터의 원래 값에 더하기 때문에 작동합니다. (행렬 곱셈 규칙을 떠올리세요). 이것은 3x3 행렬에서는 불가능했었을 것입니다.

Homogeneous 좌표

벡터의 w 구성 요소는 Homogeneous coordinates 라고도 합니다. Homogeneous 벡터에서 3D 벡터를 얻기 위해 x y z 좌표를 w 좌표로 나눕니다. 대부분의 경우 w 구성요소가 1.0 이기 때문에 일반적으로 이를 알지 못합니다. Homogeneous 좌표를 사용하면 몇 가지 장점이 있습니다. 3D 벡터에서 행렬 변환을 수행할 수 있습니다. (w 구성요소 없이 벡터를 변환할 수 없음). 다음 장에서는 w 를 사용하여 3D 원근감을 구현 할 것입니다.

또한 Homogeneous 좌표가 0 일때마다 w 좌표가 0 인 벡터는 변환할 수 없기 때문에 해당 벡터는 방향 벡터로 불립니다.

평행 이동을 사용하면 3축 방향(x, y, z)으로 개체를 이동할 수 있으므로 변형에 매우 유용한 변형 행렬이 됩니다.

회전

마지막 몇 가지 변환은 2D 또는 3D 공간에서 상대적으로 이해하고 시각적으로 쉬웠지만 회전은 까다롭습니다. 이러한 행렬이 어떻게 구성되는지 정확히 알고 싶다면 Khan Academy의 선형대수 동영상의 회전 항목을 시청하는 것이 좋습니다.

먼저 벡터의 회전이 실제로 무엇인지 정의합시다. 2D 또는 3D의 회전은 각도로 표시됩니다. 각도는 원 전체가 360도 또는 $2\pi$ 라디안이라는 것을 알 수 있습니다. 우리는 일반적으로 익숙한 각도를 사용하여 회전을 설명하는 것을 원합니다. 대부분의 회전 함수에는 라디안 각도가 필요하지만, 각도는 라디안으로 쉽게 변환됩니다. 각도 = 라디안 각도 * (180 / PI) 라디안 각도 = 각도 * (PI / 180) PI 는 일반적으로 3.14159265359 입니다. 원을 반으로 회전하면 360/2 = 180 도 회전하고 오른쪽으로 1/5 회전한다는 것은 오른쪽으로 360/5 = 72 도 회전한다는 의미입니다. 이는 다음에서 오른쪽으로 또는 시계 방향으로 72도 회전하는 기본 2D벡터에 대해 설명됩니다.

3D의 회전은 각도 및 회전 축으로 지정됩니다. 지정된 각도는 주어진 회전 축을 따라 개체를 회전합니다. 머리를 돌려 하나의 회전 축을 내려다 보며 이것을 시각화하세요. 예를 들어 3D 세계에서 2D벡터를 회전 할 때 회전 축을 z축으로 설정합니다. (이것을 시각화 해 보세요)

삼각법을 사용하면 주어진 각도에서 벡터를 새로 회전 된 벡터로 변환할 수 있습니다. 이것은 일반적으로 sine 과 cosine 함수 (보통 sin 과 cos 로 표현함)의 아름다운 조합을 통해 수행됩니다. 회전 행렬이 생성되는 방법에 대한 설명은 이 장의 범위를 벗어납니다.

회전 행렬은 각도가 세타 기호로 표시되는 3D공간의 각 단위 축에 대해 정의됩니다.

x축을 중심으로 회전:

y축을 중심으로 회전:

z축을 중심으로 회전:

회전 행렬을 사용하여 세 계의 단위 축 중 하나를 중심으로 위치 벡터를 변환할 수 있습니다. 임의의 3D축을 중심으로 회전하려면 먼저 X축, Y축, Z축 순으로 회전하여 3개를 모두 결합 할 수 있습니다. 그러나 이로 인해 Gimbal lock 이라는 문제가 발생합니다. 이에 대해 자세하게 설명하지는 않지만 더 나은 해결책은 회전 행렬을 결합하는 대신 (0.662, 0.2, 0.722) (단위 벡터)와 같은 임의의 단위 축을 회전하느는 것입니다. 이러한 (복잡한..) 행렬이 존재하며 임의의 회전 축으로 ($R_x,R_y,R_z)$를 사용하여 아래에서 볼 수 있습니다.

이러한 행렬 생성에 대한 수학적 논의는 이 장의 범위를 벗어납니다. 이 매트릭스조차도 Gimbal lock을 완전히 방지하지는 않습니다. (훨씬 어려워 지지만) Gimbal lock을 진정으로 방지하려면 quaternions을 사용하여 회전을 나타나야 합니다. 이는 더 안전 할 뿐만 아니라 계산도 익숙합니다. 그러나 쿼터니언에 대한 설명은 이 장의 범위를 벗어납니다.

Combining matrices

변환에 행렬을 사용하는 것에 핵심은 행렬-행렬 곱셈 덕에 단일 행렬에서 여러 변환을 결합 할 수 있다는 것입니다. 여러 변환을 결합하는 변환 행렬을 생성할 수 있는지 살펴 보겠습니다. 벡터 (x, y, z)가 있고 이를 2로 스케일링 한 다음 (1, 2, 3) 으로 변환하려고 한다고 가정 해 봅시다. 필요한 단계에 대한 변환 및 스케일링 행렬이 필요합니다. 결과 변환 행렬은 다음과 같습니다.

행렬을 곱할 때 먼저 변환을 수행 한 다음 스케일 변환을 수행합니다. 행렬 곱셈은 교환 법칙이 성립하지 않으므로 순서가 중요합니다. 행렬을 곱할 때 오른쪽에 있는 행렬이 먼저 벡터와 곱해지므로 오른쪽에서 왼쪽으로 곱셈을 읽어야 합니다. 먼저 스케일링 작업을 수행 한 다음 행렬을 결합 할 때 회전 및 마지막 변환을 수행하는 것이 좋습니다. 그렇지 않으면 서로 (부정적으로) 영향을 미칠 수 있습니다. 예를 들어 먼저 변환을 한 다음 크기를 조정하면 이동 벡터도 크기가 조정됩니다!

벡터에서 최종 변환 행렬을 실행하면 다음 벡터가 생성됩니다.

좋습니다! 벡터는 먼저 2로 스케일링 한 다음 (1, 2, 3) 으로 변환됩니다.

실전

이제 변환의 모든 이론을 설명 했으므로 이 지식을 활용하는 방법을 알아볼 차례입니다. OpenGL에는 행렬 또는 벡터가 내장되어 있지 않으므로 자체 수학 클래스와 함수를 정의해야 합니다. 이 책에서 우리는 모든 작은 수학적 세부 사항을 추상화 하고 단순히 미리 만들어진 수학 라이브러리를 사용 합니다. 운 좋게도 GLM이라는 OpenGL 수학 라이브러리를 사용하기 쉽고 맞춤형으로 제공됩니다.

GLM

GLM은 OpenGL Mathematics의 약자이며 헤더 전용 라이브러리 입니다. 즉, 헤더 파일만 포함하면 됩니다. 링크 및 컴파일이 필요하지 않습니다. GLM은 웹사이트에서 다운로드 할 수 있습니다. 헤더 파일의 루트 디렉토리를 includes 폴더에 복사하고 시작하겠습니다.

필요한 대부분의 GLM기능은 다음과 같이 포함 할 3개의 헤더 파일에서 찾을 수 있습니다.

#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>

Let's see if we can put our transformation knowledge to good use by translating a vector of (1,0,0) by (1,1,0) (note that we define it as a glm::vec4 with its homogeneous coordinate set to 1.0:

(1, 0, 0) 의 벡터를 (1, 1, 0) 으로 변환하여 변환 개념을 유용하게 사용할 수 있는지 살펴 보겠습니다, (우리는 해당 벡터를 glm::vec4 로 정의하며, homogeneous 좌표를 1.0으로 세팅합니다.)

glm::vec4 vec(1.0f, 0.0f, 0.0f, 1.0f);
glm::mat4 trans = glm::mat4(1.0f);
trans = glm::translate(trans, glm::vec3(1.0f, 1.0f, 0.0f));
vec = trans * vec;
std::cout << vec.x << vec.y << vec.z << std::endl;

먼저 GLM의 내장 벡터 클래스를 사용하여 vec라는 벡터를 정의합니다. 다음으로 mat4를 정의하고 행렬의 대각선을 1.0으로 초기화하여 단위 행렬로 명시적으로 초기화 합니다. 단위 행렬로 초기화 하지 않으면 행렬은 널 행렬 (모든 요소 0) 이 되고 모든 후속 행렬 연산도 널 행렬이 됩니다.

다음 단계는 변환 벡터와 함께 단위 행렬을 glm::translate 를 함수에 전달하여 변환 행렬을 만드는 것입니다. ( 그런 다음 주어진 행렬에 변환 행렬을 곱하고 그 결과로 행렬이 변환됨) 그런 다음 벡터에 변환 행렬을 곱하고 결과를 출력합니다. 행렬 변환이 어떻게 작동하는지 기억한다면 결과 벡터는 (2, 1, 0) 인 (1 + 1, 0 + 1, 0 + 0) 이어야 합니다. 이 코드는 210 을 출력하므로 변환 행렬 작업을 수행했습니다.

더 흥미로운 작업을 수행하러 이전 장의 컨테이너 개체의 크기를 조정하고 회전 해 보겠습니다.

glm::mat4 trans = glm::mat4(1.0f);
trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0));
trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5));  

먼저 각 축에서 컨테이너의 크기를 0.5 로 조정 한 다음 컨테이너를 Z 축 중심으로 90 도 회전합니다. GLM은 각도를 라디안으로 받으므로 glm::radians 를 사용하여 각도를 라디안으로 변환합니다. 텍스쳐가 있는 사각형은 XY 평면에 있으므로 Z축을 중심으로 회전합니다. 회전하는 축은 단위 벡터이여야 하므로 X,Y 또는 Z 축을 중심으로 회전하지 않는 경우 먼저 벡터를 정규화 해야 합니다. 행렬을 GLM의 각 함수에 전달하기 때문에 GLM은 자동으로 행렬을 함께 다중화하여 모든 변환을 결합하는 변환 행렬을 만듭니다.

다음으로 셰이더에 변환 행렬을 가져오는 방법입니다. 우리는 GLSL도 mat4 유형을 가지고 있다고 이전에 언급했습니다. 따라서 우리는 mat4 균일 변수를 받아들이고 위치 벡터에 행렬 uniform 을 곱하도록 버텍스 셰이더를 조정합니다.

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;

out vec2 TexCoord;
  
uniform mat4 transform;

void main()
{
    gl_Position = transform * vec4(aPos, 1.0f);
    TexCoord = vec2(aTexCoord.x, aTexCoord.y);
} 

GLSL에는 또한 벡터처럼 스위즐링과 같은 연산을 허용하는 mat2 와 mat3 타입이 있습니다. 앞서 언급 한 모든 수학 연산 (예시로 스칼라-행렬 곱하기, 행렬-벡터 곱하기 및 행렬-행렬 곱하기) 행렬 타입에서 사용할 수 있습니다. 특별한 행렬 연산이 사용되는 곳 마다 어떤 일이 일어나고 있는지 설명 할 것입니다.

uniform을 추가하고 gl_Position에 전달하기 위해 위치 벡터에 변환 행렬을 곱했습니다. 이제 컨테이너가 두 배 작아야 야 하며, 왼쪽으로 90 도 회전해야 합니다. 해당 변환 행렬을 셰이더에 전달해야 합니다.

unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform");
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));

먼저 uniform 변수의 위치를 가져온 다음 Matrix4fv 를 접미사로 사용하는 glUniform 을 사용하여 행렬 데이터를 셰이더로 보냅니다. 첫 번째 인자는 우리에게 친숙한 유니폼의 위치 입니다. 두번째 인자는 OpenGL에게 우리가 보낼 행렬의 수인 1 입니다. 세 번째 인자는 행과 열을 봐꾸는 전치 행렬을 할 것인지에 대한 여부입니다. OpenGL 개발자는 대부분 GLM의 기본 행렬 레이아웃인 column-major ordering 이라는 내부 매트릭스 레이아웃을 사용하므로 전치 행렬을 할 필요가 없습니다. GL_FALSE로 설정하면 됩니다. 마지막 인자는 실제 행렬 데이터지만 GLM은 OpenGL이 기대하는 행렬 데이터와 맞지 않는 방식으로 저장하므로 먼저 GLM의 내장 함수 value_ptr 를 사용하여 데이터를 변환합니다.

우리는 변환 행렬을 반들고 버텍스 셰이더에서 uniform을 선언하고 버텍스 좌표를 변환하는 셰이더로 행렬을 보냈습니다. 결과는 다음과 같아야 합니다.

완벽해! 우리의 컨테이너는 실제로 왼쪽으로 기울어져 있습니다. 왼쪽으로 기울어져 있고 두 배 작아지는 변형이 성공적으로 적용되었습니다. 좀 더 펑키해져서 시간이 지남에 따라 컨테이너를 회전 할 수 있는지 확인하고 재미를 위해 창의 오른쪽 하단에 컨테이너를 재배치 합니다. 시간이 지남에 따라 컨테이너를 회전하려면 각 프레임을 업데이트 해야 하므로 렌더 루프에서 변환 매트릭스를 업데이트 해야 합니다. 우리는 GLFW의 시간 함수를 사용하여 시간에 따른 각도를 얻겠습니다.

glm::mat4 trans = glm::mat4(1.0f);
trans = glm::translate(trans, glm::vec3(0.5f, -0.5f, 0.0f));
trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f, 0.0f, 1.0f));

이전 사례에서는 변환 행렬을 어디에서나 선언 할 수 있었지만 이제는 회전을 지속적으로 업데이트 하기 위해 반복을 할 때마다 만들어야 합니다. 즉, 렌더링 루프를 반복 할 때마다 변환 행렬을 다시 만들어야 합니다. 일반적으로 장면을 렌더링 할 때 프레임마다 새 값으로 생성되는 변환 행렬렬이 있습니다.

여기서 원점 (0, 0, 0) 을 중심으로 컨테이너를 회전하고 회전하면 회전 된 버전을 화면의 오른쪽 하단 모서리로 변환합니다. 코드에서 먼저 변환 한 다음 나중에 회전하더라도 실제 변환은 먼저 회전을 적용한 다음 변환을 적용합니다. 이러한 모든 변형 조합과 개체에 적용되는 방법을 이해하는 것은 조금 어렵습니다. 이와 같은 변형을 시도해보면 금방 이해할 수 있습니다.

제대로 했다면 다음과 같은 결과를 얻을 수 있습니다.

transformations.mp4

시간에 지남에 따라 회전되는 컨테이너는 모두 단일 변환 매트릭스로 수행됩니다! 이제 그래픽 영역에서 행렬이 왜 그렇게 강력한 구조인지 알 수 있습니다. 무한한 양의 변환을 정의하고 원하는 만큼 자주 재사용 할 수 있는 단일 매트릭스에 모두 결합 할 수 있습니다. 버텍스 셰이더에서 이와 같은 변환을 사용하면 버텍스 데이터를 다시 정의하는 노력을 절약하고 처리 시간도 절약할 수 있습니다. 항상 데이터를 다시 보낼 필요가 없기 때문입니다. (이는 매우 느립니다) 우리가 해야 할 일은 변형 유니폼을 업데이트 하는 것입니다.

올바른 결과를 얻지 못했거나 다른 곳에서 해매고 있다면 소스코드 와 업데이트된 셰이더를 살펴보세요.

다음 장에서는 행렬을 사용하여 버텍스에 대해 서로 다른 좌표 공간을 정의하는 방법에 대해 설명합니다. 이것이 3D 그래픽스의 첫 걸음이 될 것 입니다.

더 읽을거리

• Essence of Linear Algebra: 변형 및 선형 대수의 기본 수학에 대한 Grant Sanderson의 훌륭한 비디오 시리즈

연습

• 컨테이너의 마지막 변환을 사용하여 회전과 변환의 순서를 변경 해 보세요. 어떤 현상이 일어나는지, 그리고 왜 이런 현상이 나타나는지 추론하세요. 정답.
• glDrawElements에 대한 또 다른 호출로 두 번째 컨테이너를 그려보십시오. 그러나 변환만 사용하여 다른 위치에 배치하세요. 이 두번째 건테이너가 창의 왼쪽 상단에 있는지 확인하고 회전하는 대신 시간에 따라 크기를 조정합니다 (여기서 sin함수를 사용하는 것이 유용합니다. sin을 사용하면 음의 크기가 적용되는 즉시 개체가 반전됩니다.) 정답.