[2023 02 23-24] 목소리 더빙, 보이스 도와주는 프로그램 개발 연습 일지 (14) - 렌더링단 구현 및 백그라운드 렌더링 및 최적화

잠깐! 이 게시물에 존재하는 소프트웨어 명칭 및 기타 정보, 이미지는 오직 공부 목적으로 개발되었으며 실제 영리적을 목적으로 제공하지 않습니다. 가상 화면이나 가상 명칭등 릴리즈되지 않은 데이터, 자산, 리소스입니다.

배경화면 구성

렌더링되는 화면에 배경 이미지 및 가상 로고를 넣어주었다.

배경 이미지에 프로그램 이름의 가상 로고가 바둑판식으로 무한 반복되고 있음을 알 수 있다. 배경에 단순히 Loop를 시켜 출력시키기 위해서는 약간의 과정이 필요한데, 바로 리소스 최적화를 해 주어야 한다. 예를 들어 위 창에서 창을 늘리거나 다른 시점 (약 X 50000)을 보고 있는 경우에도 여전히 배경은 로고로 반복되어야 한다. 하지만 지금 X 시점이 0이고, 좌표 X 0부터 50000까지 배경을 무한 반복하여 출력하는 건 CPU 낭비이다. 그렇기 때문에 현재 시점에 포함되는 영역을 계산하여, 해당 영역에 포함되는 로고 텍스처만 반복하여 출력할 수 있도록 하였다. 특히 사용자가 X 시점을 옮기더라도 자연스럽게 배경이 움직이도록 해야하므로, 약간의 선형 계산이 필요했다.

창을 줄인 모습

시야 확대 및 축소

음악 또는 소리 작업을 하다보면 트랙을 확대하거나 시점을 확대, 축소해야 할 상황이 생길 수 있다. 따라서 시점의 스케일을 변경할 수 있도록 구현 해 두었으며, 기본 값은 1배율이다.

0.5 배율

1.5 배율

특히 위 구현에서 화면의 스케일을 바꾸게 되면 화면 시점 고정시 사용되는 내부 Y 값 등이 틀어지는 문제가 발생하였다. 따라서 현재 스케일 값에 곱함으로써 스케일이 몇으로 바뀌든 화면 출력에는 오차나 이상이 없도록 수식을 적용하였다. 특히 화면 회전 등을 구현할 필요는 없기 때문에 행렬이 아닌 단순 선형 계산식으로 좌표를 계산할 수 있었다.
문제점이 하나 있는데, 폰트는 텍스처로 출력되기 때문에 일정 이상 확대하거나 축소하면 글의 가독성이 떨어지는 문제가 존재한다.

그라데이션 색상 구현

UI를 예쁘게 구성하기 위해 OpenTK 및 GL 처리 내부에서 그라데이션 색상을 출력할 수 있도록 하였다. 아래 타임라인바와 실제 작업 공간 사이 색상이 바뀌는 부분에 그림자가 존재하는 것을 알 수 있는데, 이는 그라데이션 클래스를 사용하여 렌더링한 것이다.

특히 그라데이션 처리 클래스는 재활용을 할 수 있도록 클래스를 인스턴스화하고, 원하는 색상 및 비율을 배치할 수 있도록 하였다. 예를 들어 0.8 빨강, 0.2 검정 으로 배치하면 대상 박스 렌더의 height 기준에서 80%는 빨강, 나머지 20%는 검정으로 서서히 변한다. 이는 OpenGL에서 Color3F를 Vertex에 지정해주면 서서히 바뀌도록 렌더링되는 기본 쉐이더를 활용한 것이다.

다음 목표

마우스 클릭을 통한 시점 이동 및 위치 동기화