Unity - Bezier Curve에 대해서 학습해보자.

Bezier Curve의 원리

유니티뿐만 아니라, 컴퓨터 그래픽에서 부드러운 곡선의 구현을 위해서 많이 사용된다. 그래서 해당 내용을 Unity 카테고리에 적을까 Math 카테고리에서 작성할까 고민을 하다가 Unity에서 구현하는 방법을 가지고 Bezier Curve를 소개할 예정이라 Unity 카테고리에 작성을 한다.

 

베지어 커브(Bezier Curve)는 선분에서 얻는 점을 가지고 구현을 할 수 있다. 1차 베지어 커브부터 N차 베지어 커브까지의 값을 구할 수 있는데, 해당하는 수식들은 아래와 같다.

 

1차 베지어 커브

B(t)= (1−t)P0​+tP1​

2차 베지어 커브

B(t)= (1−t)[(1−t)P0​+tP1​]+t[(1−t)P1​+tP2​]=(1−t)2P0​+2(1−t)tP1​+t2P2​

3차, 4차 수식부터는 수식들이 복잡해지므로 수학적인 모습을 강조할 것 같아서 글을 줄인다. 단순하게 유니티에서 구현하는 방법보다 수학적인 접근이 흥미롭다면 게시글 하단의 링크를 참고하길 바란다.

 

유니티에서 구현한 베지어 커브

위에서 선분에서 얻는 점을 가지고 구현을 할 수 있다고 간략하게 설명을 했는데, 이 부분은 시각적으로 표현하면서 설명을 한다면 조금 더 이해하기 편하다.

 

먼저 선분 하나를 가지고 1차 베지어 커브를 구현해보자

위 사진에서 존재하는 T는 해당 선분에서 나아간 비율을 표현하는 수치다. 0.01부터 1.00까지 표현되는 것이 기본적이다. 1차 베지어 커브에서는 단순하게 나아간 비율을 표현할 뿐, 확인할 수 있는 점이 적으므로 다른 선을 그어보자.

기존에 상단으로 그어진 선분을 선분 A라고 명칭을 하고, 같은 Y축에 위치한 선분을 선분 B라고 명칭하자. 또, 선분 A에서 움직이는 검은 점을 점 A로, 선분 B에서 움직이는 검은 점은 점 B로 명칭하자. 선분 B에도 선분 A와 같이 선분의 비율을 나타내는 T를 가지고 점 A와 점 B를 통해서 시각적으로 표현했다.

 

1차 베지어 커브를 소개할 때에는 점 A를 보면서 1차 베지어 커브라고 명칭했으나, 2차 베지어 커브는 점 A와 점 B를 뜻하는 것이 아니다.

점 A와 점 B를 가지고 하나의 선분을 그어주자. 이는 선분 C라고 명칭한다. 선분 C는 점 A와 점 B의 위치에 따라서 자연스럽게 움직이게 된다. 

선분 C를 지나치는 점을  통해서 2차 베지어 커브를 확인할 수 있었다

 

 

참고 게시글 : https://blog.naver.com/kyuniitale/40022945907

참고 유튜브 : https://youtu.be/aVwxzDHniEw?si=yWQzaOtvlPl9ajZa