그래픽스를 위한 기초 수학: 삼각함수와 좌표계

컴퓨터 그래픽스에서 물체를 회전시키거나, 원형 궤도를 계산하거나, 조명의 밝기를 계산할 때 삼각함수는 절대적입니다. 숭실대학교 수업에서도 변환 행렬 유도에 필수적으로 사용되는 개념들입니다.

---

1. 호도법 (Radian)

프로그래밍 언어의 수학 함수(Math.sin, Math.cos 등)는 각도(Degree)가 아닌 라디안(Radian) 값을 인자로 받습니다.

• 변환 공식:

---

2. 인터랙티브 삼각함수 시각화

아래 슬라이더를 움직여 각도(θ)에 따라 **cosθ(x좌표)**와 **sinθ(y좌표)**가 어떻게 변화하는지 관찰해 보세요.

핵심 성질

1. 단위 원: 반지름이 1인 원 위의 모든 점 는 로 표현됩니다.
2. 범위: 과 의 값은 항상 사이에 존재합니다.
3. 피타고라스 항등식: . 이 식은 그래픽스 연산에서 정규화(Normalization) 여부를 확인할 때 자주 쓰입니다.

---

3. 극좌표계 (Polar Coordinates)

일반적인 직교 좌표계 대신, 원점으로부터의 거리 과 각도 를 사용하는 방식입니다.

직교 좌표로의 변환

직교 → 극 좌표 역변환

왜 atan2인가? 단순한 는 사분면(Quadrant) 정보를 잃습니다. 과 의 가 똑같이 1이기 때문이죠. atan2(y, x)는 두 부호를 모두 받아 정확한 범위의 각도를 돌려줍니다. Bresenham 원, 조명 계산, 카메라 회전 어디서든 기본기입니다.

수업 응용: Bresenham 원 그리기 알고리즘이나 구체(Sphere)의 표면 좌표를 계산할 때 극좌표계 지식이 필수적으로 요구됩니다.

---

4. 벡터(Vector)의 기초

그래픽스의 모든 "방향·이동·속도"는 벡터로 표현됩니다. 2D는 , 3D는 .

4.1 벡터 덧셈·뺄셈과 스칼라 곱

• 덧셈: — 두 변위의 합성.
• 뺄셈: — B에서 A로 향하는 변위.
• 스칼라 곱: — 방향 유지, 크기 배.

자주 쓰는 패턴: 두 점 를 잇는 방향 벡터는 . 수업에서 "Eye에서 At을 바라보는 시선 벡터"를 구할 때, UVN 좌표계 유도할 때 전부 이 한 줄입니다.

4.2 벡터의 크기(Magnitude)

거리를 의미합니다. 제곱근이 무거우므로, "단지 길이를 비교만 하고 싶다"면 제곱값끼리 비교해 연산을 줄이는 관행이 있습니다.

4.3 정규화 (Normalization)

크기가 1인 **단위 벡터(Unit Vector)**로 만드는 연산. 방향만 남기고 길이를 버립니다.

왜 정규화하는가? 내적으로 각도를 구하거나 (), 조명 계산에서 법선·광원 방향을 다룰 때 "길이가 섞여 들어가면 각도 해석이 깨지기" 때문입니다. 법선 벡터가 정규화되어 있지 않으면 Phong shading의 밝기가 순식간에 엉망이 됩니다.

4.4 내적과 외적 (맛보기)

자세한 활용은 3D 수학 장에서 다룹니다. 우선 기하학적 의미만 새겨 둡시다.

• 내적 (Dot): — 스칼라. 각도·그림자·방향 일치도를 잰다.
• 외적 (Cross): — 벡터. 두 벡터에 수직인 법선을 만든다. 3D 전용.

4.5 GLSL에서의 벡터

수업에서 WebGL/GLSL 을 실습으로 사용하므로, 벡터 연산은 셰이더 코드에서 다음과 같이 1:1로 대응됩니다.

---

5. 행렬(Matrix)의 기초

기하 변환 장부터는 모든 좌표가 행렬로 표현됩니다. 먼저 연산 규칙을 확실히 다져 두면 3D 파이프라인이 훨씬 가볍게 읽힙니다.

5.1 행렬 곱셈

행렬과 행렬의 곱은 . 왼쪽의 열 수와 오른쪽의 행 수가 같아야 곱할 수 있습니다.

교환 법칙은 성립하지 않는다 — . 그래픽스에서 "회전 후 이동"과 "이동 후 회전"이 전혀 다른 결과인 이유입니다. 결합 법칙은 성립한다 — . 덕분에 수백만 버텍스에 (Model·View·Projection) 합성 행렬을 미리 계산해 한 번에 곱하는 최적화가 가능합니다.

5.2 단위 행렬 (Identity)

대각선이 1, 나머지가 0인 행렬. .

"아무 변환도 하지 않는다"는 의미이며, 합성 행렬을 누적할 때의 시작값입니다.

5.3 전치 행렬 (Transpose)

행과 열을 맞바꾼 행렬 . . 직교 기저로 이루어진 회전 행렬 은 라는 특이한 성질이 있어, 뷰 변환 행렬을 구성할 때 역행렬 대신 전치만 써도 됩니다.

5.4 역행렬 (Inverse)

를 만족하는 행렬. 변환을 되돌릴 때 씁니다.

• 이동
• 신축
• 회전

왜 미리 배우는가? "임의의 축 기준 회전"이나 "피봇 점 기준 신축" 같은 시험 단골 문제가 전부 "원점으로 가져오는 변환"과 그 "역변환"의 샌드위치 구조이기 때문입니다. 패턴을 외워 두세요.

5.5 GLSL에서의 행렬

WebGL 의 vertex shader 에서 최종 화면 좌표는 모델·뷰·투영 행렬의 합성으로 계산됩니다:

gl_Position = uProjection * uView * uModel * vec4(aPosition, 1.0);

이 한 줄이 3D 파이프라인의 심장입니다.

---

📝 Checkpoint: 삼각함수 퀴즈

---

📝 Checkpoint: 벡터·행렬 퀴즈

---

🔗 다음 단계

삼각함수·벡터·행렬을 마스터했다면, 이를 조합해 2D 래스터화와 변환을 학습할 차례입니다.

• 래스터 알고리즘 학습하기
• 기하 변환 및 좌표계 학습하기