[📜일지] [연구] 노가다 없는 베지어 곡선 분할

[로코복실한(dovecreative)]

ㅎㅇ 기차겜 만들고 있는 인붕이야.

오늘 올릴 것은 (2차)베지어 커브를 나누는 새로운 방식이야.

잠깐 베지어 커브가 뭔지 모르는 인붕이들을 위해 간단하게 설명해줄께.

[출처 : https://youtu.be/pnYccz1Ha34]

내가 사용한 베지어 커브는 점 3개로 이루어지는 2차 베지어 커브로, 위 식에서 볼 수 있다시피 세 점과 0에서 1 사이의 숫자만 있으면 커브를 만들 수 있는 함수야.

이 식은 곡선을 편리하게 만들 수 있게 해주지만, 저 t값이 베지어 곡선의 진행 비율(거리 비율)과 맞지 않다는 문제점이 있어.

이 문제를 해결하기 위해서, 지금까지는 이런 함수를 사용했어.

일정 거리가 되는 f값을 노가다로 찾는 방식이야.

보면 이전 점으로부터 2진 탐색 노가다로 거리가 interval 플마 accuracy인 점을 찾는 while문이 들어가 있는 걸 볼 수 있어.

지금까지는 이 함수를 잘 쓰고 있었는데, 게임을 만들던 도중 이런 생각이 들었어.

디버그용으로 점 사이 간격을 넓게 한 곡선을 만들어봤는데, 경사가 완만한 부분은 제대로 표현되는 반면 경사가 급한 부분은 제대로 표현되지 않지.

만약 점 수를 늘린다면 이 문제를 해결할 수 있겠지만, 그만큼 연산량이 많아지게 돼.

게다가 지금은 괜찮게 보이는 경사가 완만한 부분까지 자원을 더 먹게 되지.

이에, 나는 베지어 곡선을 거리에 따라 나누는 게 아니라 각도에 따라 나누는 방법을 생각했어.

베지어 식을 미분하면 그 지점의 기울기 벡터를 구할 수 있는데, 이를 이용해서 특정 지점과 임의의 지점의 기울기 벡터의 각도 차가 몇 도 이내이면 그 지점을 택하는 방법이야.

운이 좋게도 2차 베지어 곡선의 식이 2차함수의 형태였기 때문에, 이를 미분한 식은 1차함수가 돼 - 이 말은, 기울기 벡터의 길이가 2차함수가 된다는 뜻이야. 이 점은 중요해.

두 벡터 사이의 각은 내적을 이용하면 되는데, 이를 역산하면 한 벡터와 사잇각을 알면 나머지 한 벡터를 구하는 식을 얻을 수 있거든?

이 식에서 벡터의 길이를 쓰는데, 아까 말했듯이 기울기 벡터의 길이는 2차함수야.

따라서 우리는 2차방정식의 근의 공식을 이용해서 특정 점과 일정 각도를 이루는 다른 벡터 2개를 찾아낼 수 있어.

그 중 지금 탐색하는 위치보다 앞에 있는 벡터를 가져오면 되는 거야.

보면 노가다 while문이 없어진 걸 볼 수 있어. 코드 자체도 깔끔해졌고. 실제로 실행해서 위의 결과와 비교해볼께.

아까는 12개의 점으로 깨진 형태의 베지어 곡선을 보여줬는데, 지금은 8개만의 점만으로도 훨씬 부드러운 베지어 곡선을 만들 수 있어.

아까는 노가다 함수 때문에 790프레임정도의 퍼포먼스를 보여줬는데, 지금은 점 갯수도 줄고 노가다 과정도 없어서 880프레임정도의 퍼포먼스를 보여줘.

이 차이는 곡선이 길어질수록 더 커지게 돼 - 곡선이 길어질수록 노가다 횟수가 그만큼 늘어나기 때문이야.

실제로 (-70, -30, 0), (70, 0, 0), (-70, 30, 0) 세 개의 점을 이용해서 옛날 방식으로 베지어를 만들었을 땐 282프레임정도가 나와(계산된 총 길이 : 157.59).

같은 조건에서 새로운 방식으로 만들면 640프레임정도가 나와. 이는 이전의 방법에 비해 약 4배 높은 값이야(계산된 총 길이 : 157.52).

이건 대조를 위해서 f값을 정직하게 0부터 1까지 0.05씩 키워 가며 만든 베지어 곡선. 455프레임으로 둘의 중간 정도 값을 보여줘. 근데 이건 크기가 클 때 얘기고, 크기가 작아지면 기울기를 이용한 분할 방법보다 조금 더 좋은 퍼포먼스를 보였어. 얘는 당연하겠지만 근의 공식같은 거 풀 필요도 없이 바로바로 값이 나오기 때문에 짧은 계산에서는 더 유리한 걸로 보여.

아래는 주행 테스트야.

최대 속력과 최소 속력의 차가 적을수록 차량이 안정적으로 주행한다고 볼 수 있어.

기존 방법의 경우 최고 속력은 10.02, 최소 속력은 9.2로 1의 차이를 보여(단위 m=unit/s).

마지막에 8이 나온 이유는 끝부분에 간격이 일정하지 않기 때문인 것 같아.

이건 새로운 방법으로 만든 베지어.

최대 속력은 10.2, 최소 속력은 10.06으로 차이가 거의 없는 걸 볼 수 있어.

어찌보면 당연한 결과인 게, 기울기를 기준으로 곡선을 나누었으니 가장 안정적인 거지.

여기서 궁금한 게 있을 수 있는데, 거리로 나누었을 때의 속력 차가 왜 이리 큰가?에 대해 의문이 있을 수 있어.

이론상으로 거리로 나눈 게 가장 정확해야 하는데, 실제로는 아니잖아?

그 이유는 1프레임이 흐르는 시간이 0에 수렴하지 않기 때문이야.

때문에 그 프레임 사이에 방향이 전환되게 되면 제대로 된 속력이 측정되지 않는 거지.

비교용으로 f값을 0부터 1까지 0.05씩 키워 가며 만든 베지어 곡선. 나누는 기준이 임의이기 때문에 최고속력 10.2, 최소속력 9.7이 나오는 걸 볼 수 있어.

지금까지 베지어 곡선을 나누는 3가지 방법에 대해 알아봤는데, 각각의 방법을 적재적소에 사용하는 것이 중요할 것 같아.

도로 건설 상황을 보여줄 때는 함수의 업데이트 속도가 중요하기 때문에 3번째 방법을 쓰는 것이 좋을 거고,

도로를 건설하고 난 후에는 차량의 정확한 이동이 중요하기 때문에 2번째 방법을 쓰는 게 좋겠지.

또, 애니메이션 같은 경우 간격이 일정한 1번째 함수를 쓰는 게 좋을 거고.

앞으로 또 뭔가 한 게 있음 돌아올께.

바이!

[익명(180.231)]

고마워

[로코복실한(dovecreative)]

[dd(61.43)]

정보추

[김메가(scw973108)]

[익명(1.215)]

베지어 곡선을 속도기반으로 변환하는거 노답이던데, 이거 신박하다.

[익명(pinterest123)]

무슨말인지 모르겠지만 일단 추천

[퀼트(mok9181)]

[익명(211.44)]

설명만 보면 존나 유용해 보이는데 코드를 이해 못하겠다... 혹시 설명 좀 해줄 수 없을까?