3차원 물체를 표현하는데 폴리곤 메시를 사용했다.
폴리곤 메시는 부드러운 곡면을 '근사적으로' 표현한 것이다.
부드러운 곡면을 '정확하게' 표현하기 위해서는 매개변수(parameter)의 함수를 사용한다.
매개변수 곡면(parametric surface)은 CAD/CAM(computer-aided design and manufacturing) 분야에서 오래전부터 사용되었는데, 최근 GPU가 이를 지원하기 시작함에 따라 실시간 그래픽스 분야에서 새롭게 주목을 받게 되었다
매개변수 곡면을 표현하는 기법에는 여러 종류가 있는데, 가장 간단한 것이 베지어 곡면(Bézier surface)이다.
이는 프랑스 르노 자동차에서 일했던 Pierre Bézier의 이름을 딴 것이다.
베지어 곡면의 기본은 베지어 곡선(Bézier curve)이다.
17.1 매개변수 곡선
매개변수 곡선(parametric curve)은 매개변수 t의 함수로 표현된다.
두 개의 끝점 $p_0$와 $p_1$을 잇는 선분을 보여주고 있다.
이런 선분은 $p_0$와 $p_1$의 선형보간(linear interpolation)으로 표현된다.
여기서 t는 [0, 1] 범위에 있고, $\left(1-t\right)$와 $t$는 각각 $p_0$와 $p_1$에 대한 가중치(weight)이며, $p\left(t\right)$는 $p_0$와 $p_1$의 가중치 합(weighted sum)이다.
$p\left(t\right)$가 위치한 점은 선분을 두 부분으로 나누는 것으로 해석할 수 있는데, 각 부분의 길이는 '건너편' 끝점의 가중치에 비례한다.
두 개의 점을 연결하는 선분은 1차 베지어 곡선으로 볼 수 있다.
이 선분을 2차원과 3차원 각각 다음과 같이 표현할 수 있다.
17.1.1 베지어 곡선
곡선을 만들기 위해서는 세 개 이상의 점이 필요하다. 따라서 다음의 알고리즘이 필요하다.
드 카스텔조 알고리즘(de Casteljau algorithm)
- 세 개 이상의 점에 대해 선형보간을 재귀적(recursive)으로 반복하면 베지어 곡선을 정의할 수있다.
- 프랑스 수학자 Paul de Casteljau의 이름을 딴 것
2차 베지어 곡선(Quadratic Bézier Curve)
세 개의 점 $p_0$, $p_1$, $p_2$가 주어지면, 일단 $p_0$와 $p_1$ 그리고 $p_1$과 $p_2$를 선형보간한다.
그 결과로 나온 $p_0^1$와 $p_1^1$을 다시 선형 보간하면 $p_0^2$를 구할 수 있다.
이것이 2차 베지어 곡선이다.
이 곡선은 $p_0$에서 시작하여 $p_2$에서 끝나는데, $p_0$는 $t=0$일 때, $p_2$는 $t=1$일 때 해당한다.
이 곡선은 $p_1$ 방향으로 휘지만 $p_1$을 지나지는 않는다.
이러한 베지어 곡선을 정의하는 $p_0$, $p_1$, $p_2$를 컨트롤 포인트(control point)라고 부른다.
2차 곡선은 최대 1개의 변곡점을 가진다.
3차 베지어 곡선(Cubic Bézier Curve)
3차 이상의 베지어 곡선도 드 카스텔조 알고리즘으로 정의된다.
3차 베지어 곡선은 네 개의 컨트롤 포인트에 의해 정의된다.
$t=0$일 때 $p_0$에서 시작하여, $t=1$일 때 $p_3$에 도달하며, 도중에 $p_1$과 $p_2$ 방향으로 휘지만 이들을 지나지 않는다.
3차 베지어 곡선은 최대 2개의 변곡점을 가진다.
4차 베지어 곡선(Quartic Bézier Curve)
베지어 곡선과 컨트롤 포인트
컨트롤 포인트가 베지어 곡선의 외양을 결정한다.
$\left( n+1 \right)$개의 컨트롤 포인트로 $n$차 베지어 곡선을 정의할 수 있다.
번스타인 다항식(Bernstein polynomials)
- 각 컨트롤 포인트의 가중치가 매개변수 $t$의 다항식인 다항식
4차 이상의 베지어 곡선에서는 종종 예기치 않은 뒤틀린 모양이 만들어지는 등의 문제가 발생한다.
따라서 그래픽스 분야에서는 3차 베지어 곡선을 가장 많이 사용한다.
3차 베지어 곡선으로 표현 불가능한 복잡한 곡선, 예를 들어 변곡점이 3개 이상인 곡선을 만들기 위해서는 3차 베지어 곡선을 여러 개 이어붙이면 된다.
테썰레이션(tessellation)
- 베지어 곡선을 렌더링하기 위해 매개변수 $t$의 값을 조금씩 증가시켜 가면서 이에 해당하는 곡선 상의 점을 계산한 후 이 점들을 선분들로 잇는 방식
- 보다 부드러운 테썰레이션 결과를 얻기 위해서는 보다 조밀한 샘플링을 수행하면 된다.
베지어 곡선의 또 다른 특징은 아핀 불변성(affine invariance)이다.
베지어 곡선의 아핀 변환 및 렌더링 과정을 생각하면, 구현 방법에 두 가지가 존재한다.
- 테설레이션을 먼저 수행하고 그 결과 생성된 점들에 대해 아핀 변환을 적용하는 것이다. 위 그림에서 (a)를 말한다.
- 베지어 곡선의 컨트롤 포인트에 대해 아핀 변환을 적용한 후, 변환된 컨트롤 포인트를 사용해 테썰레이션을 수행하는 것이다. 위 그림에서 (b)를 말한다.
두 과정의 결과는 동일하지만, 보다 적은 수의 점에 대해 아핀 변환을 적용하는 후자가 보다 효율적이다.
17.1.2 허밋 곡선과 캣멀-롬 스플라인
3차 베지어 곡선 함수를 $t$에 대해 미분하면 다음과 같은 1차 도함수를 얻는다.
이는 베지어 곡선에 접하는 접선 벡터(tangent vector)를 나타낸다.
끝점 $p_0$와 $p_3$에서의 접선 벡터를 각각 $v_0$와 $v_3$라 하면 위 식의 매개변수 $t$에 0과 1을 대입하여 얻는다.
이 식들을 다시 쓰면 다음과 같다.
다시 쓴 수식을 이용해서 3차 베지어 곡선을 다음과 같이 다시 쓴다.
위 식은 두 개의 끝점 $p_0$와 $p_3$ 그리고 그 점에서의 접선 벡터 $v_0$와 $v_3$를 사용하여 곡선을 정의할 수 있음을 보여준다. 이렇나 곡선 표현법을 허밋 곡선(Hermite curve)라고 부른다. 이는 프랑스 수학자 Charles Hermite의 이름을 딴 것이다.
$\left\{p_0, v_0, p_3, v_3\right\}$로 정의된 허밋 곡선은 $\left\{p_0, p_1, p_2, p_3\right\}$로 정의된 베지어 곡선과 동일한 모양을 가진다.
여러 개의 점이 주어졌을 때 이를 모두 지나는 곡선을, 예로 들면 그림(a)처럼 다섯 개의 점 $\left\{ q_0, q_1, q_2, q_3, q_4 \right\}$를 지나는 곡선이 있다고 하자.
이러한 복잡한 곡선은 인접한 한 쌍의 점 $q_i$와 $q_{i+1}$마다 매개변수 곡선을 정의하고 이들을 부드럽게 이어붙이는 방식으로 만들 수 있다. 이런 방식으로 만들어진 곡선을 스플라인(spline)이라 부른다.
그림(a)에서 인접한 두 점마다 허밋 곡선을 정의하면, 두 끝점은 이미 정해졌으므로, 이 두점에서의 접선만 정의하면 된다.
두 허밋 곡선이 만나는 점에서 양쪽의 접선이 같도록 하면, 둘은 부드럽게 이어지고, 스플라인 전체도 부드러워진다.
$\left[q_1,q_2\right]$ 구간에서 정의된 $C_1$과 $\left[q_2, q_3\right]$구간에서 정의된 $C_2$를 보면, $C_1$과 $C_2$는 그들이 만나는 점 $q_2$에서 접선 벡터를 공유하도록 한다.
접선 벡터를 계산하는 방법은 여러 가지가 있을 수 있는데, 캣멀-롬 스플라인(Catmull-Rom spline)은 $q_i$에서의 접선 벡터 $v_i$를 정의하기 위하여 위 그림의 수식처럼 $q_{i-1}$과 $q_{i+1}$을 사용한다.
여기서 $\tau$는 $q_i$의 곡률을 결정하는데, 보통 0.5로 설정된다.
캣멀-롬 스플라인은 게임에서 많이 사용된다.
17.1.3 응용 사례: 카메라 경로
캣멀-롬 스플라인을 이용해 카메라 경로를 설정할 수 있다.
간단한 논의를 위해 카메라 경로는 하나의 허밋 곡선 $p\left(t\right)$로 정의되었다고 가정한다.
카메라 파라미터 {EYE, AT, UP} 중 EYE는 특정한 $t$값을 $p\left(t\right)$에 대입하여 얻어낼 수 있는데, $t$를 지속적으로 증가시키면서 곡선 $p\left(t\right)$를 따라 이동하는 EYE를 얻어낼 수 있다.
AT과 UP은 카메라의 방향을 결정한다. 그림(b)에서 AT은 월드 공간의 원점으로 고정되었고, UP은 y축으로 정해졌다.
{EYE, AT, UP}이 결정되면 카메라 공간의 기저 $\left\{u,v,n\right\}$이 계산된다.
AT은 주전자 주둥이 끝 위치로 정해졌다고 했을 때, AT의 움직임은 또 다른 곡선 $q\left(t\right)$으로 정의할 수 있다.
즉, 매 프레임마다 EYE와 AT은 각각 $p\left(t\right)$와 $q\left(t\right)$에 특정한 t 값을 대입하여 계산된다.
17.2 매개변수 곡면
패치(patch)
- 경계를 가진 곡면
베지어 패치
- 베지어 곡선을 이용한 패치
17.2.1 겹선형 패치
가장 단순한 형태의 패치는 겹선형 패치(bilinear patch)다.
이는 위 그림과 같이 네 개의 컨트롤 포인트 $p_{00}$, $p_{01}$, $p_{10}$, $p_{11}$을 사용해 정의된다.
일반적으로 이들 컨트롤 포인트들은 한 평면에 있지 않다.
먼저 $u$방향으로 컨트롤 포인트를 보간하고, 그 보간된 결과를 $v$ 방향으로 보간한다.
$u$ 방향의 선형보간 결과를 $v$ 방향으로 다시 선형보간 했으므로 겹선형보간(bilinear interpolation)을 수행한 것이다. 생성된 패치의 이름도 이를 따라 겹선형 패치라고 한다.
겹선형 패치의 정의역(domain)은 두 매개변수 $u$와 $v$를 축으로 가지는 2차원 공간의 정사각형 영역으로 표현된다.
$u$와 $v$는 모두 [0, 1] 범위를 가지는데, $\left( u, v\right)$ 좌표는 겹선형 패치 위의 한 점 $p\left(u,v\right)$로 매핑된다.
각 사각형의 면적은 '건너편' 컨트롤 포인트의 가중치와 같다.
겹선형 패치를 렌더링하기 위해서 패치를 삼각형 메시로 테썰레이션해야 한다.
즉, 겹선형 패치 위의 점들을 추출하고 이 점들을 삼각형으로 연결한다.
슈도코드의 첫 번째 for문은 $u$를, 두 번째 for문은 $v$를 균일하게 샘플한다.
샘플한 $\left( u, v \right)$를 $p\left(u,v\right)$에 대입하여 겹선형 패치 위의 3차원 점을 추출한다.
생성된 점들로 삼각형 메시를 구성한다.
위 그림의 우측에서는 $u$와 $v$를 모두 0.1씩 균일하게 증가시켜 가면서 샘플링을 수행한 결과 얻어진 삼각형 메시를 보여준다.
겹선형 보간의 순서를 반대로 할 수 있다.
겹선형 패치에서 네 개의 컨트롤 포인트가 한 평면 위에 있지 않은 경우가 있을 수 있다.
17.2.2 2차 베지어 패치(Biquadratic Bézier Patch)
3 x 3 컨트롤 포인트를 사용하면 2차 베지어 패치(biquadratic Bézier patch)를 정의할 수 있다.
그림 (b)는 u방향으로 세 개씩 컨트롤 포인트를 모아서 2차 베지어 곡선을 만든 것이다.
이러한 2차 베지어 곡선 식에 특정한 $u$값을 대입하면, 각 곡선마다 하나의 점을 얻을 수 있다.
그림 (c)의 세 점은 $u$에 0.65를 넣어 얻은 것으로 생각할 수 있다.
이 세 개의 점을 컨트롤 포인트로 취하면 그림 (c)에 보이는 것처럼 세로 방향으로 베지어 2차 베지어 곡선을 정의할 수 있다. 이 곡선은 $v$의 함수이다. 이러한 곡선들이 무한히 많이 모여 2차 베지어 패치를 구성하는 것이다.
2차 베지어 패치를 행렬로 표현했을 때, 3 x 3 행렬 좌우의 행벡터와 열벡터는 각각 $v$와 $u$의 2차 번스타인 다항식들로 구성되어 있다.
행렬로 표현한 것의 두 번째 줄의 열벡터는 그림 (b)에 보인 세 개의 2차 베지어 곡선이다.
행렬 곱셈을 완료하면 아래 사진의 상단에 있는 수식이 나온다.
각 컨트롤 포인트의 계수는 $u$와 $v$의 번스타인 다항식이 결합된 형태이다.
이는 컨트롤 포인트에 대한 가중치 역할을 한다. (e)는 가중치를 가시화한 것이다.
2차 베지어 패치를 렌더링하기 위해서는 테썰레이션 과정이 필요하다. 또, 겹선형 패치와 마찬가지로, $u$와 $v$의 처리 순서를 바꿀 수 있다.
위 사진은 드 카스텔조 알고리즘을 다른 방식으로 적용하여 동일한 2차 베지어 패치를 생성하는 과정이다.
3 x 3 컨트롤 포인트를 네 그룹으로 나눈다. 각 그룹은 2 x 2 컨트롤 포인트로 구성되는데, 여기에 겹선형보간을 수행한다.
각 그룹마다 겹선형보간해서 나온 결과를 다시 겹선형보간하는 것을 반복적 겹선형보간이라 부른다.
17.2.3 3차 베지어 패치(Bicubic Bézier Patch)
4 x 4 컨트롤 포인트를 사용하면 3차 베지어 패치( bicubic Bézier patch)를 정의할 수 있다.
위 사진의 상단에 있는 것은 3차 베지어 패치를 행렬로 표현한 것인데, 행렬 좌우의 행벡터와 열벡터는 3차 번스타인 다항식들로 구성되었다.
반복적 겹선형 보간 기법을 이용해서도 3차 베지어 패치를 생성할 수 있다.
생성된 3차 베지어 패치를 삼각형 메시로 테썰레이션 후에 렌더링을 수행한다.
베지어 패치는 컨트롤 포인트를 사용하여 편집된다.
컨트롤 포인트 하나가 움직일 때 곡면 모양이 상당히 변화되는 것을 보여준다. 이는 베지어 패치의 큰 장점이다.
왜냐하면 베지어 패치를 테썰레이션하여 얻은 삼각형 메시의 정점들을 움직여 동일한 결과를 얻을 수도 있겠지만 이는 훨씬 고된 작업을 필요로 하기 때문이다.
17.2.4 베지어 삼각형(Bézier Triangle)
베지어 삼각형(Bézier triangle)
- 삼각형 구조의 컨트롤 포인트에 의해 정의되는 패치
1차 베지어 삼각형
- 세 개의 컨트롤 포인트로 정의되는 베지어 삼각형
겹선형 패치를 정의하는 네 개의 컨트롤 포인트는 평면상에 존재하지 않을 수 있지만, 1차 베지어 삼각형의 세 개의 컨트롤 포인트는 언제나 하나의 평면을 이룬다.
따라서 1차 베지어 삼각형은 보통의 삼각형과 동일하다.
삼각형 $<a, b, c>$ 내부의 한 점 $p$는 $<a, b, c>$를 세 개의 작은 삼각형으로 나누는 것으로 해석할 수 있다.
무게중심 좌표 $\left( u, v, w \right)$를 이용해 $p=ua+vb+wc$로 정의될 수 있다.
컨트롤 포인트 $a$의 가중치 $u$는 삼각형 $<a,b,c>$에서 삼각형 $<p,b,c>$가 차지하는 면적의 비율이다.
$v$와 $w$도 마찬가지로 정의된다. 즉, 각 컨트롤 포인트의 가중치는 '건너편' 삼각형의 면적에 비례한다.
$ua+vb+wc$를 무게중심 조합(barycentric combination)이라 부르기로 하자.
$u$, $v$, $w$는 모두 [0,1] 범위에 있으며 $u+v+w=1$이다. 따라서 $u$, $v$, $w$ 중 하나가 1이면 나머지는 0이다.
그러면 $p$는 가중치가 1인 컨트롤 포인트와 같아진다.
$u=0$이면, $p=ua+vb+wc=\left(1-w\right)b+wc$가 된다. 이는 바로 $b$와 $c$의 선형보간으로, $b$와 $c$를 잇는 변을 표현한다.
베지어 삼각형으로 곡면을 표현하기 위해서는 더 많은 컨트롤 포인트가 필요하다.
삼각형 구조를 가진 6개의 컨트롤 포인트를 지닌 그림 (a)에서 반복적 무게중심 조합(반복적 겹선형보간 했던 것처럼 수행)을 수행해 그림 (b), (c)가 된다.
$s=up+vq+wr$에 $p$, $q$, $r$을 대입하면 2차 베지어 삼각형 식을 얻을 수 있다.
베지어 삼각형을 렌더링하기 위해서는 테썰레이션을 통해 삼각형 메시를 만들어야 한다.
테썰레이션 슈도코드에서 $u$와 $v$를 샘플할 때, $u$와 $v$의 합이 1이 넘어서는 안 된다.
(보충)
(f)에서 $u=0$일 때 얻어지는 2차 베지어 곡선인데, 이 곡선의 컨트롤 포인트는 $d, e, f$이다.
3차 베지어 삼각형은 10개의 컨트롤 포인트로 정의된다.
(d)의 오른쪽 변은 $w=0$일 때 얻어지는 3차 베지어 곡선인데, 이 곡선의 컨트롤 포인트는 $a,b,d,g$이다.
출처
[OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문]을 보고 공부하고 정리한 내용
'공부 > 컴퓨터 그래픽스' 카테고리의 다른 글
| OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문 Chapter 18 GPU 테썰레이션 (0) | 2024.07.19 |
|---|---|
| OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문 Chapter 16 전역 조명과 텍스처 (0) | 2024.07.19 |
| OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문 Chapter 15 쉐도우 매핑 (0) | 2024.07.19 |
| OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문 Chapter 14 노멀 매핑 (0) | 2024.07.19 |
| OpenGL ES를 이용한 3차원 컴퓨터 그래픽스 입문 Chapter 13 캐릭터 애니메이션 (0) | 2024.07.19 |