CGP 4-1 — 3D 그래픽스를 위한 수학 (Part 1)

출처: SSU 컴퓨터 그래픽스 보조 슬라이드 — 3D 그래픽스를 위한 수학 (Part 1) 선행 시점: 본 강의 6주차(07 — 3D 변환·뷰잉) 진입 직전 후속: CGP 4-2 — 좌표 공간과 투영, GLSL

3D 그래픽스 파이프라인 전체를 떠받치는 수학 — 삼각함수, 극좌표, 벡터(내적·외적), 행렬, 지오메트리 변환 — 을 한곳에 모았습니다. 모든 개념은 GLSL 의 실제 함수와 1:1 로 대응됩니다.

1. 호도법 (Radian)

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

  • 변환 공식:

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

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

단위원과 삼각함수

Trigonometry
cos θsin θθ
● sin● cos
0°90°180°270°360°
45° (0.79 rad)
cos θ
0.707
sin θ
0.707
좌표
(0.71, 0.71)

핵심 성질

  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인 단위 벡터로 만드는 연산. 방향만 남기고 길이를 버립니다.

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

4.4 내적 (Dot Product) — "두 벡터가 같은 방향을 얼마나 보고 있나?"

내적은 두 벡터의 방향이 얼마나 일치하는지를 하나의 숫자(스칼라)로 압축한 값입니다. 정의는 두 가지로 쓰는데, 항상 같은 값이 나옵니다.

핵심 직관 — "그림자"

두 번째 식의 부분은, 를 방향 위로 떨어뜨렸을 때의 그림자(투영) 길이입니다. 그 그림자에 를 곱한 게 내적이에요. 즉 "a 방향으로 b가 얼마나 따라오는가 × a의 크기".

두 식을 같다고 두면 — 각도가 튀어나온다

좌변은 좌표만으로 계산 가능한 숫자, 우변에는 우리가 모르는 가 들어 있습니다. 에 대해 풀면:

예) 라면:

**즉 내적은 "각도가 cos 형태로 숨겨져 있는 숫자"**입니다. 좌표 → 내적 → cos → 각도, 이 흐름이 그래픽스에서 각도를 구하는 표준 루트예요.

단위 벡터()일 때 분모가 1이라서 내적값 자체가 곧 입니다. 그래서 셰이더에서 법선·광원 벡터를 반드시 정규화한 뒤 dot()을 부르는 거예요 — 그 결과가 그대로 "빛 받는 각도의 코사인 = 밝기"가 되니까.

부호의 의미

각도 내적 부호의미
0° (같은 방향)최대 양수 = 완전히 같은 쪽
0°~90°양수 (+)같은 쪽 성분 있음
90° (수직)0서로 영향 없음
90°~180°음수 (−)반대 쪽 성분 있음
180° (정반대)최소 음수 = 완전히 반대

그래픽스에서 왜 중요한가? Phong 조명 모델에서 픽셀의 밝기는 법선 벡터 · 광원 방향 입니다. 빛을 정면으로 받는 면()이 가장 밝고(내적 = 1), 빛에 등 돌린 면()은 음수가 나와서 클램핑()으로 0(어둠)으로 처리합니다. 내적의 부호가 그대로 "빛 받음/등짐"을 결정하는 거예요.

아래 인터랙티브에서 점을 드래그하면서 b의 그림자(주황 굵은선) 와 부호 변화를 직접 확인해 보세요.

내적 — 그림자 × 길이

Dot Product
θab(2.0, 1.0)(1.0, 2.0)
Vector a
(2.00, 1.00)
|a| = 2.24
Vector b
(1.00, 2.00)
|b| = 2.24
방법 1 — 좌표 곱셈
a · b = aₓbₓ + aᵧbᵧ
= (2.00)(1.00) + (1.00)(2.00)
= 4.00
방법 2 — 그림자 × 길이
b를 a 위로 떨어뜨린 그림자 길이에 |a|를 곱한 값.
|a| × (b의 그림자) = |b|·cos θ × |a|
= 2.24 × cos(36.9°) × 2.24
= 2.24 × 0.800 × 2.24
= 4.00
주황 굵은선 = b의 그림자 (부호 있는 길이 = 1.79)
방법 1 = 방법 2 → 각도 역산
두 식이 같으니까 cos θ로 풀면 좌표만으로 각도가 나옵니다.
cos θ = (a·b) / (|a|·|b|)
= 4.00 / (2.24 × 2.24)
= 0.800
θ = arccos(0.800) = 36.9°
부호의 의미
θ = 36.9° < 90° → 같은 방향 성분 존재. 양수 ✅. (조명 비유: 빛이 면을 비추는 쪽)
빨강·파랑 점을 드래그 해서 두 벡터 a, b 를 조작해 보세요. 각도에 따라 그림자의 길이·부호가 어떻게 변하는지 체감할 수 있습니다.

4.5 외적 (Cross Product) — "두 벡터에 수직인 새 벡터"

외적은 내적의 쌍둥이입니다. 내적이 cos을 뽑는 도구라면, 외적은 sin을 뽑는 도구예요. 같은 극좌표 유도에서 cos 차 공식 대신 sin 차 공식이 나올 뿐입니다.

여기서 은 a, b 둘 다에 수직인 단위 벡터이며, 방향은 오른손 법칙으로 결정됩니다. 결과는 스칼라가 아니라 벡터예요(3D 한정).

2D 외적 — 스칼라로 축약

2D 벡터 두 개만 있으면 결과 벡터는 z축 한 방향으로만 나오므로, 그 z성분만 추려서 씁니다:

  • 부호 → 회전 방향: 양수면 CCW(반시계), 음수면 CW(시계), 0이면 평행.
  • 절댓값 → 두 벡터가 만드는 평행사변형의 넓이 .

활용:

  • Half-plane test: 점 P가 직선 A→B의 왼쪽/오른쪽 판정은 의 부호. 래스터화에서 삼각형 내/외부 판정의 핵심.
  • 삼각형 넓이: .
  • 폴리곤 winding 판정: 꼭짓점 순회로 CCW/CW 방향을 결정 — 뒷면 제거(backface culling)의 기초.

3D 외적 — 완전한 벡터

결과 벡터는 a, b 둘 다와 직각을 이룹니다. 이 성질 덕분에 그래픽스에서 "표면 법선"을 만드는 표준 도구예요:

  • 표면 법선: 삼각형 세 정점 의 법선 = 를 정규화.
  • UVN 프레임: 카메라의 우/상/전방 축을 차례로 외적으로 만들어 직교 기저를 구성.
  • 회전축 복원: 두 자세(회전) 사이의 회전축은 법선 벡터들의 외적.

내적/외적 — 한눈 비교

내적 외적
결과 타입스칼라벡터 (3D) / 스칼라 (2D)
추출 양
극값평행일 때 최대수직일 때 최대
0이 될 때수직평행
순서 뒤집기같음 부호 반대
주 용도각도·투영·조명법선·축·넓이·방향 판정

아래에서 두 벡터의 성분을 조절하며 외적 벡터가 평면에 직각으로 튀어나오는 모습을 관찰해 보세요. 평행으로 만들면 0으로 사라지고, 벌릴수록 길어집니다.

3D 외적 — 두 벡터에 수직인 새 벡터

Cross Product
드래그 회전 · 스크롤 줌
● a● b● a×b▬ 평행사변형
Vector a
2.0
1.0
0.0
Vector b
1.0
2.0
1.0
a × b
= ( aᵧb_z − a_zbᵧ,  a_zbₓ − aₓb_z,  aₓbᵧ − aᵧbₓ )
= (1.00, -2.00, 3.00)
|a×b| = 3.74 (평행사변형 넓이)
수직 확인
(a × b) · a = 0.000 → 0이어야 함
(a × b) · b = 0.000 → 0이어야 함
sin·cos 대칭 확인
sin θ = |a×b|/(|a||b|) = 0.683
cos θ = (a·b)/(|a||b|) = 0.730
θ ≈ 43.1°
sin²+cos² = 1.000
두 벡터를 나란하게(평행) 만들면 외적 벡터가 사라집니다(넓이 0). 90°로 벌리면 최대 길이가 돼요. 우/왼손 법칙은 두 벡터의 순서가 결정합니다 — a×b와 b×a는 방향이 반대.

4.6 GLSL에서의 벡터

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

개념GLSL 타입/함수
2D/3D/4D 벡터vec2, vec3, vec4
크기 length(v)
정규화 normalize(v)
내적dot(a, b)
외적cross(a, b)

5. 행렬(Matrix)의 기초

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

5.1 행렬 곱셈

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

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

5.2 단위 행렬 (Identity)

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

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

5.3 전치 행렬 (Transpose)

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

5.4 역행렬 (Inverse)

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

  • 이동
  • 신축
  • 회전

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

5.5 GLSL에서의 행렬

개념GLSL 타입/함수
2×2 / 3×3 / 4×4 행렬mat2, mat3, mat4
곱셈A * B 또는 A * v
전치transpose(A)
역행렬inverse(A)
단위 행렬mat4(1.0)

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

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

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

📝 Checkpoint: 삼각함수 퀴즈

Quiz

반지름이 5인 원 위에서 각도가 90도(π/2 rad)일 때, 이 점의 (x, y) 좌표는 무엇인가요?

Quiz

cos(θ) 값이 0이 되는 각도 중 하나를 Degree 단위 숫자로 입력하세요.

📝 Checkpoint: 벡터·행렬 퀴즈

Quiz

벡터 v = (3, 4)의 크기(||v||)는?

Quiz

벡터 (6, 0, 8)을 정규화한 단위 벡터는?

Quiz

임의의 회전 행렬 R에 대해 성립하는 관계는?

🔗 다음 단계

이 보조 자료는 본 강의의 6주차(3D 변환·뷰잉) 진입 직전에 학습하도록 배치되어 있습니다.