[Unity/C#] 가장 쉽게 포물선 '위로' 그리는 방법 (+라인 렌더러)

포물선을 그리는 방법은 많지만
'위로' 포물선을 그리는 방법을 소개하는 내용이 없어서
이번에는 포물선을 위로 그리는 방법 중 가장 쉬운 방법을 배워보겠습니다.
포물선을 그릴 때는 라인 렌더러를 사용할 예정입니다 :)

 

1. 포물선을 그리기 위한 준비

포물선의 시작지점과 끝지점을 시각적으로 표현하기 위한 Sphere 2개와
테스트 용으로 사용될 Cube를 배치하고,
큐브에는 Parabola 라는 스크립트를 넣어두었습니다.

두 스피어의 위치는 각각 (-5,0,0) (5,0,0) / 큐브의 위치는 (0,0,0) 입니다.

 

2. Slerp를 이용한 포물선 이해하기

포물선을 그리기 위해 Slerp() 함수를 사용할 예정입니다.

Slerp() 함수는 구형보간을 하는 함수로, 두 점을 잇는 원을 그려 곡선상에서의 지점을 얻는 방식입니다.

 

[ 유니티 공식 문서 💬 ]

https://docs.unity3d.com/kr/530/ScriptReference/Vector3.Lerp.html

Unity - 스크립팅 API: Vector3.Lerp

https://docs.unity3d.com/kr/530/ScriptReference/Vector3.Slerp.html

Unity - 스크립팅 API: Vector3.Slerp

 

Parabola 스크립트에 다음과 같은 코드를 작성합니다.

public class Parabola : MonoBehaviour
{
    // 시작지점과 끝지점으로 사용할 스피어
    public Transform s1, s2;

    // 구형보간될 정도를 결정하는 변수
    [Range(0, 1)]
    public float t;

    void Update()
    {
        // 시작지점에서 끝지점까지 t로 구형보간한 위치로 이동
        transform.position = Vector3.Slerp(s1.position, s2.position, t);
    }
}

Parabola.cs

0.00MB

(위 코드를 복사하시려면 이 스크립트를 다운받아주세요 - 우클릭 방지)

[ 코드 설명 💬 ]

Range(0, 1)을 적어 인스펙터 창에서 t의 값을 조절할 때, 0에서 1까지만 적용할 수 있게 해줍니다.

 

이 스크립트를 갖고 있는 큐브가 Slerp를 이용해
시작지점과 끝지점을 t로 구형보간한 좌표로 이동할 수 있도록 업데이트 함수 안에 작성

 

실행하여 스피어 두가지를 할당한 후 플레이 해보면
아래와 같이 큐브가 '구형보간'에 맞춰 이동하는 것을 볼 수 있습니다.

 

3. 포물선이 눈에 보이도록 라인 렌더러로 그리기

큐브가 이동한 길을 라인 렌더러를 이용해 선으로 연결해보겠습니다.
스크립트를 갖고 있는 큐브에게 라인 렌더러 컴포넌트도 추가합니다.

일단은 라인 렌더러의 포지션의 개수는 원하는 만큼 설정합니다.
Parabola 스크립트의 내용을 아래와 같이 수정합니다.

public class Parabola : MonoBehaviour
{
    // 시작지점과 끝지점으로 사용할 스피어
    public Transform s1, s2;

    LineRenderer lr;

    void Start()
    {
        lr = GetComponent<LineRenderer>();
    }

    void Update()
    {
        // 라인렌더러가 갖는 포지션 개수만큼 반복
        for (int i = 0; i < lr.positionCount; i++)
        {
            // 시작지점에서 끝지점까지 구형보간한 위치를 포지션 번호만큼 나누어 할당
            Vector3 point = Vector3.Slerp(s1.position, s2.position, i / (float)(lr.positionCount - 1));

            // 각 위치값을 라인 렌더러에 설정
            lr.SetPosition(i, point);
        }
    }
}

Parabola.cs

0.00MB

(위 코드를 복사하시려면 이 스크립트를 다운받아주세요 - 우클릭 방지)

[ 코드 설명 💬 ]

라인 렌더러가 갖고 있는 포지션 개수에 맞춰 구형보간한 후,
각 포지션에 할당하기 위해 포지션의 개수만큼 반복

포물선을 라인 렌더러의 포지션 개수만큼 나누어 포인트를 찍기 위해
flaot 자료형으로 바꾸어 소수점자리까지 표현

 

플레이해 보면 큐브가 이동했던 길이 라인 렌더러로 표현됩니다.
라인 렌더러의 포지션 개수가 늘어날수록 더 자연스러운 곡선이되는 것을 볼 수 있습니다.

순서대로 4개, 10개, 20개

 

4. 포물선 위로 그리기

현재 두 지점의 y위치가 동일하기 때문에 포물선이 옆으로 생겼습니다.
포물선의 방향을 위로 그려지도록 하려면 스크립트를 아래와 같이 수정합니다.

public class Parabola : MonoBehaviour
{
    // 시작지점과 끝지점으로 사용할 스피어
    public Transform s1, s2;

    // 시작지점과 끝지점을 담아둘 임시변수
    Vector3 startPos, endPos;

    LineRenderer lr;

    void Start()
    {
        lr = GetComponent<LineRenderer>();
    }

    void Update()
    {
        // 시작지점, 끝지점을 임시변수에 넣어서 사용
        startPos = s1.position;
        endPos = s2.position;

        // 두 지점의 중앙값을 구해서 저장
        Vector3 center = (startPos + endPos) * 0.5f;

        // 포지션이 위로 그려지도록 중앙값 아래로 내리기
        center.y -= 3;

        // 시작지점, 끝지점을 내려간 중앙값을 기준으로 수정
        startPos = startPos - center;
        endPos = endPos - center;

        // 라인렌더러가 갖는 포지션 개수만큼 반복
        for (int i = 0; i < lr.positionCount; i++)
        {
            // 시작지점에서 끝지점까지 구형보간한 위치를 포지션 번호만큼 나누어 할당
            Vector3 point = Vector3.Slerp(startPos, endPos, i / (float)(lr.positionCount - 1));

            // 포물선을 위로 그리기 위해 center를 빼줬으므로 다시 더해서 원상복구
            point += center;

            // 각 위치값을 라인 렌더러에 설정
            lr.SetPosition(i, point);
        }
    }
}

Parabola.cs

0.00MB

(위 코드를 복사하시려면 이 스크립트를 다운받아주세요 - 우클릭 방지)

[ 코드 설명 💬 ]

중간에 중앙값을 기준으로 시작,끝 지점의 위치를 바꾸는 코드가 있기 때문에
수정 가능한 벡터3 임시 변수를 선언하여 사용

구형보간을 통해 그려지는 원은 두 지점 사이의 중앙값을 중심으로 하는 원이기 때문에
원이 위로 그려지려면 중앙값을 아래로 내려야 함

(현재 상태, 두 지점은 x축만 다르기 때문에 원이 x,z 평면에 그려짐)

(원의 중심을 아래로 내린 경우, 원이 x,y평면에 그려짐)

 

이제 두 지점을 원래 중앙값인 (0,0,0)이 아닌, 수정된 중앙값 (0,-3,0)을 기준으로 하는 지점이 되도록
(지점 좌표값 - 중앙값)을 해서 다시 적용해야 함

(두 지점이 원의 중심을 따르도록 수정해야만 포물선에 적용됨)

 

포물선을 위로 그리기 위해 (지점 좌표값 - 중앙값)을 했기 때문에
포물선이 그려진 후 실제로 적용하기 전에 원상복구하기 위해 + 중앙값을 해야 함

 

 

이대로 플레이해보면 포물선이 위로 그려진 것을 볼 수 있습니다.
뿐만 아니라 시작지점과 끝지점이 어떻게 달라지든
위로 그려지는 포물선임을 확인할 수 있습니다.

 

---

가장 쉽게 포물선 '위로' 그리는 방법이었습니다 :)
끝까지 읽어주셔서 감사합니다! 도움이 되셨다면 댓글+하트 해주세요 🥰