[2023 03 03] 목소리 더빙, 보이스 도와주는 프로그램 개발 연습 일지 (16-2) - 벡터를 활용한 선 출력 구현 및 트랙 출력

출력 구현

기본적인 트랙 출력 구현을 완료하였고, 오브젝트 출력만이 남았다.

SingleTrackTextureRenderer

이 클래스는 기본적으로 하나의 트랙에 대한 배경 텍스처를 그리는데 사용한다.

하나의 트랙을 그릴 때 SingleTrackTextureRenderer을 그린다. 하지만 실제 PD 레이어에 존재하는 VTrack을 그릴 때는 내부에 Objects까지 같이 그려줘야 하는데, 이 부분을 한 트랙의 텍스처를 그릴 때 같이 그리기에는 비효율적이다. 왜냐하면 다른 용도로 트랙만 그려야 하는 경우가 있을 수 있기 때문에, 트랙의 텍스처만 그리는 SingleTrackTextureRenderer 을 별개로, 트랙을 PD 레이어와 엮어서 배경 트랙을 렌더링해주고 오브젝트도 출력 해주는 클래스인 VTrackRenderer을 생성하였다. 결국 VTrackRenderer 는 Facade 패턴과 비슷한 역할을 하며, PD 레이어의 VTrack을 받고, 오브젝트를 받아서 각각의 트랙, 오브젝트 렌더러를 한 번에 묶어서 출력 해준다.

선 출력 구현

이전 장 개발 기록을 보면, 수식적으로 계산하여 삼각 함수를 사용하여 선을 그리고 있는데, 이 때 시작 점이 달라지거나 마이너스 좌표 등 각도가 일정 이상 넘어가면 따로 계산을 해줘야 하는 문제가 존재한다. 따라서 공간 수학인 기하학을 사용해서, 벡터를 통해 계산하였다.

기본적으로 어떤 선이 있고, 그 선을 주위로 Width 만큼 박스를 채워 선을 그려야할 때, 주위 선을 구해야 한다. 예를 들어 아래 Line 이 있다면 Line의 StartXStartY가 있는데, 각 양쪽 너비만큼 해당하는 LeftStartXLeftStartY RightStartX RightStartY 를 구해야 한다.

각각의 좌표를 구하기 위해서는 법선 벡터를 구하여, 법선 벡터 방향으로 Width만큼 배 해주면 된다.

예를 들어 선분의 노말 벡터를 구하고, 이 노말 벡터를 normalize 단위화 해야 한다.

그러면 방향을 가진 벡터가 단위 벡터가 되고, 이 벡터에 Width의 절반 가량인 스칼라 값을 곱해주면, 선의 법선 방향을 향하면서 Width 절반의 크기를 가지는 방향 벡터가 만들어진다.

이 size + direction 벡터를 기존 start 지점의 벡터와 덧셈 연산을 해주면, 새로운 파란 벡터가 나오게 된다.

이 벡터가 가르키는 지점을 그대로 2차원 좌표로 사용 해 주면, Line StartX로 부터 width 절반 만큼 떨어져있는 선의 시작 지점을 구할 수 있다.

유의해야 할 점이 하나 있는데, 상기 그림은 원점이 0,0이라고 가정하고 진행한 것이다. 즉 선의 법선을 구할 때 부터, start-end 를 진행하여, (방향을 가지는) dx 와 dy 값으로 계산을 진행하였고 방향만 가진다고 가정했기 때문에, 벡터의 끝 지점을 바로 2D 좌표계의 선 시작 좌표로 사용하였다.

예를 들어 Line의 startX, startY를 0,0에서 시작한 것으로 가정하여 벡터 연산을 하면, 결국 방향을 가지는 벡터가 될 것이고, 이 방향 벡터에 다음 방향을 더하면 최종 위치로 향하는 방향 벡터가 만들어지기 때문에, 최종 위치로 향하는 방향 벡터의 x,y 좌표를 그대로 사용할 수 있는것이다. (결국 크기를 포함하여 방향 벡터가 되는 것이다.)

구현한 코드는 다음과 같다.

결과

결과적으로 매우 얇은 선을 그릴 수 있게 되었고 View의 Scale에 따라 선의 크기가 동적으로 바뀌는 렌더링을 구현할 수 있었다. 아래 이미지의 초록 선은 기본 drawLine 을 사용한 것이고, 위의 보라 선은 매우 얇은 surface를 그려 렌더링 한 것이다. 함수로 만들어 기존 선을 그리는 것과 똑같이 요청을 하면 surface로 선을 그리도록 구성하였다. 보통 면을 만들기 위해선 선을 채우는데, 면으로 선을 그리는 재밌는 경험이었다. (얇은 선 그리기를 지원하지 않으니..)

다음 목표

VTrack 내에 속해 있는 VObject 인스턴스들을 그리는 Facade 클래스 구현하기