[수학]무게중심좌표를 이용해 무지개 삼각형 칠하기

- 6월 11, 2020

이전에 아핀 조합(Affine combination)과 볼록 조합(Convex combination)에 대해 알아보았습니다.

이번에는 볼록 조합을 이용해 삼각형을 어떻게 칠하는지 알아볼려고 합니다.

1. 삼각형 칠하기

간단 원리

1. 삼각형의 세 점을 검사해 AABB 바운드 박스를 만듭니다.

즉, 삼각형의 최소 최대 영역을 결정합니다.

2. 바운드 박스 내의 임의의 점 P 가 Convex Set에 포함되는지 확인하고

포함 된다면 점을 그리고 안된다면 점을 그리지 않습니다.

삼각형을 그리려면 일단 세 점이 필요합니다.

그러므로 세 점 A, B, C의 아핀 조합에 대해 식으로 나타내면 아래와 같을 것 입니다.

$P(s,t)=(1-s-t)\cdot A+s\cdot B + t\cdot C$

여기서 삼각형은 볼록이기 때문에 볼록 조합으로 나타내보면

$P(s,t)=(1-s-t)\cdot A+s\cdot B + t\cdot C$

아핀 조합과 같은 식과 아래와 같은 조건들이 붙게 될 것입니다.

$0\leq s \leq 1$ , $0\leq t \leq 1$ , $0\leq (1-s-t) \leq 1$

다음과 같은 삼각형이 있습니다. (초록색 선은 백터입니다.)

$(P-A)=s\cdot(B-A)+t\cdot(C-A)$

위의 식을 벡터로 변환 하여 다시 표현한 식

$w=s\cdot u+t\cdot v$

이제 여기서 우리가 구해야할 값은 $s, t, (1-s-t)$ 의 값 입니다.

$w=s\cdot u+t\cdot v$ 의 식에 각각 u와 v를 내적합니다.

$w \cdot u = (s \cdot u + t \cdot v) \cdot u = s \cdot u \cdot u + t \cdot v \cdot u$

$w \cdot v = (s \cdot u + t \cdot v) \cdot v = s \cdot u \cdot v + t \cdot v \cdot v$

s의 값을 구하기 위해 연립해서 식을 풀기위해 양변의 t 값을 동일하게 맞추기

$(w \cdot u) \cdot (v \cdot v) = s \cdot (u \cdot u) \cdot (v \cdot v) + t \cdot (v \cdot u) \cdot(v \cdot v)$

$(w \cdot v) \cdot (v \cdot u) = s \cdot (u \cdot v) \cdot (v \cdot u) + t \cdot (v \cdot v) \cdot(v \cdot u)$

t의 값을 소거한 후 s의 값을 구한 결과

$s = \frac{(w \cdot u)\cdot(v \cdot v) - (w \cdot v)\cdot(v \cdot u)}{(u \cdot u)\cdot(v \cdot v) - (u \cdot v)\cdot(v \cdot u)}$

위와 같은 방법으로 t 를 구한 결과

$t = \frac{(w \cdot v)\cdot(u \cdot u) - (w \cdot u)\cdot(u \cdot v)}{(u \cdot u)\cdot(v \cdot v) - (u \cdot v)\cdot(v \cdot u)}$

그리고 $(1-t-s)$ 의 값

이제 이 값들이 계산되었으니

$0\leq s \leq 1$ , $0\leq t \leq 1$ , $0\leq (1-s-t) \leq 1$ 의 조건이 모두 맞는다면 해당 지점에

점을 그려주면 될 것이다.

삼각형을 그려준 결과...

2. 무지개 삼각형

이제 이 삼각형을 각 점들에 색상 정보를 담아 무지개 삼각형으로 만들것이다.

각 점들에 색상 정보를 담기위해 기존의 x, y 위치 값만을 가지고 있는 Vector2와 다르게

Vertex2 구조체를 하나 만들어 줍니다.

struct Vertex2
{
	Vertex2(const Vector2& InPosition, const LinearColor& InColor)
		: position(InPosition), color(InColor) {}

	Vector2 position;
	LinearColor color;
};

이제 이 Vertex2 구조체에 각 정점의 색상 정보를 담고

삼각형을 그려줄 때 색상만 보간 해주면 됩니다.

색상을 보간 하는 방법은 간단합니다.

$s, t, (1-s-t)$ 의 값들은 비율이기도 합니다.

그렇기 때문에 각 정점에 해당하는 색상에 값들을 곱하여 더하기만 해주면 끝입니다.

float s = ((wuDot * vvDot) - (wvDot * uvDot)) / ((uuDot * vvDot) - (uvDot * uvDot));
float t = ((wvDot * uuDot) - (wuDot * uvDot)) / ((uuDot * vvDot) - (uvDot * uvDot));
float oneMinusST = 1.f - s - t;
if (((s >= 0.f) && (s <= 1.f)) && ((t >= 0.f) && (t <= 1.f)) && ((oneMinusST >= 0.f) && (oneMinusST <= 1.f)))
{
	LinearColor pixelColor = triangleVertices[0].color * oneMinusST + triangleVertices[1].color * s + triangleVertices[2].color * t;
	_RSI->DrawPoint(fragment, pixelColor);
}

무지개 삼각형을 그린 결과

추가..

벡터 a, b의 내적은 와 동일하다.

s와 t를 구하는 과정에서 계산되는 공통분모 값이 0이 된다면

삼각형을 이루는 점 ABC가 있다면

BC가 같은 점에 있어 공통분모 값이 0이 된다.

즉 삼각형을 그릴 수 없는 상태일 것이다.

이 블로그 검색

슈린의 에피소드

1학기 결산-게임엔진프로그래밍활용

[수학]무게중심좌표를 이용해 무지개 삼각형 칠하기

댓글

댓글 쓰기

이 블로그의 인기 게시물

[알고리즘] 코헨 서더랜드 알고리즘(Cohen–Sutherland algorithm)

[알고리즘] 브레젠험 직선 알고리즘 (Bresenham's line algorithm)

오일러 각, 로드리게스 회전 공식, 평면의 방정식