유니티 엔진에서 임포스터 빌보드 구현 공부 (1)

많은 양의 버텍스가 존재하는 객체가 존재할 때 이를 대량 렌더링하기 위해서 GPU Instancing 을 사용할 수 있다. 다만 GPU Instancing 역시 대량의 버텍스를 가진 객체를 수십 만 개 표현하기에는 무리가 있기 때문에 실시간 렌더링을 위해 어떤 속임수 기법을 사용해야 한다. 이름부터가 임포스터... 인데, 기술을 먼저 설명하자면 다 각도에서 객체를 미리 촬영하여 평면 상에 해당 객체를 표시함으로써 마치 3D 객체가 출력중인 것 처럼 속이는 작업이다.

이런 원본 객체가 있다면 일정 각도 마다 카메라를 사용해 텍스처 아틀라스에 모든 장면을 촬영한다.

다만 1도 마다 촬영하는 것은 아니고, 특정 각도 마다 촬영한다.

그리고 빌 보드 기법을 사용해서 현재 각도에 있는 이미지를 띄워주는 것이다.

다만 탁탁 끊기는 느낌이 발생하기 때문에, 현재 각도를 계산한 뒤 양쪽에 존재하는 두 객체 이미지를 가져와 보간하는 작업을 거친 후 화면에 합성하는 것이다.

가까이서 보면 들통나기 때문에 멀리 있는 배경을 표현하거나, 가까이서 볼 수 있는 객체만 3D 모델로 대체하고 배경으로 사용할 때 주로 사용한다.

보간하는 작업이 쉽지는 않은데, 우선 이번 게시글 (1)에서는 단순히 알파를 비율로 섞는 방법으로 구현할 예정이다. 실제로는 Parallax Mapping 기법을 사용해서 그나마 부드럽게 구현하는 것으로 보인다. 일단 텍스처 아틀라스를 구축해야하는데, 이는 이전 게시글에 작성한 카메라 렌더링 방법을 통해 일정 각도 돌아가며 렌더한다.

카메라를 렌더링하고, 한 프레임 대기하고, 다른 깊이 쉐이더로도 출력하고(다른 렌더 타겟) 렌더링하는식으로 텍스처를 뽑았다. 우선 여기서는 일반 텍스처만 사용할 것이므로 큰 상관은 없다. 다만 객체를 몇 도 각도로 찍었는지, 텍스처 아틀라스를 뽑아서 사용해야하기 때문에 uv 정보는 있어야 한다.

즉 위 텍스처 아틀라스가 있다고 가정할 때, 6*6, 총 10도 간격을 촬영된 아틀라스 정보임을 쉐이더에 넘겨야 한다. 결국 평면 하나는 어느 각도에 존재하는 하나의 모습만 표현해야하기 때문에, UV 0~1을 0/6~1/6 으로 쪼개서 표현해야 한다. 즉 위 텍스처에서 왼쪽 아래가 0,0 으로 가정했을 때 (0~1/6, 0~1/6)의 모습은 바로 아래 0도 모습의 객체이다.

이런식으로 쉐이더에서 UV를 선택해서 표시할 수 있도록 코드를 구현해야 한다.

일단 특정 인덱스를 넘기면 x,y 번 격자에 존재한다는 것을 알려주는 함수를 하나 만든다. UV 좌표를 바로 구해주는 것이 아니라, 객체가 몇 행 몇 열에 존재하는 int를 반환하는 코드라고 보면 되겠다. 다만 그래픽스는 int 처리를 썩 좋아하지는 않으므로 float으로 처리하였다.

그리고 위에서 받은 row, cols 를 넘기면 실제 UV 범위 minX, minY ~ maxX, maxY를 구해주는 함수를 만들어준다.

이제 이 범위와 현재 객체의 UV 지점을 넘기면 범위 내로 보간해주는 함수를 선언한다.

그리고 이제 각도를 넣으면 각도 양쪽으로 존재하는 index를 반환하도록 해야 한다. 위 코드가 0도나 360도쯤에 우측 아니면 왼쪽 이미지가 안가져와지는 버그가 있는데... 수정해야 한다. 아무튼 0도, 10도, 20도 이미지 순으로 저장되어 있을 때, 사용자가 5도로 바라보고 있으면 0도 이미지, 10도 이미지를 가져오기 위해 0도 이미지의 인덱스, 10도 이미지의 인덱스 양쪽 방향의 이미지를 가져와주는 것이다.

이 두 이미지를 가져와서 특정 퍼센트 비율로 합성해야하므로, 비율도 가져오는 함수를 하나 만든다.

비율 함수는 그렇게 어려울 것이 없다.

그냥 각도를 단순히 양쪽 각도에 대해 선형 변환한다.

이제 쉐이더에서 바라보는 각도를 구해야 하는데, 어려울 것은 없다 카메라 좌표에서 객체 좌표를 빼면 방향 벡터가 나오는데, 이를 atan2 에 넣어 역으로 각도를 구해주면 된다. 다만 각도 범위는 찾아보고 0~360도 범위로 변환해야 할 것 이다.

그리고 이 angle 기반으로 두 각도의 이미지를 가져와 아틀라스 좌표로 샘플링한다.

한편 ratio 라는 비율도 가져온다. 단순히 색상을 섞을 것이기 때문이다.

이제 색상을 렌더링하면 된다. 비율로 섞어서 resultColor을 내보낸다. 위 코드를 보면 depth 처리가 있는데.. 이 부분은 무시하길 바란다. 시도하다가 포기한 부분이다.

각도에 따라 합성되어 표시되는 것을 볼 수 있다. 각진 부분이 이미지가 섞이면서 다음 이미지로 넘어가는 것을 볼 수 있는데 부자연스럽긴 하다..

참고로 평면을 카메라를 바라보도록 매트릭스를 변경해야하는데 카메라 매트릭스를 사용하는 것이 아니다. 카메라 매트릭스는 카메라에 평행한 것이므로 표현 방법이 다르다.항상 카메라 정면을 바라보는 것이라고 할 수 있겠다. 여기서는 객체의 LookAt 매트릭스를 사용해야 한다. 그래야 카메라를 따라 회전하는 객체가 된다.(화면 시점을 바꾼다고 객체 모습이 바뀌진 않는다.)