[수학] 2D 같은 렌더링 하기 - 제한된 각도 렌더링

[수학] 2D 같은 렌더링 하기 - 제한된 각도 렌더링

 

---

 3D 게임이지만 2D 같은 느낌을 받을 수 있는 게임들이 있다.  그중 IMC에서 개발한 트리 오브 세이비어를 들여다보면, 캐릭터는 모두 2D같이 보인다.  하지만 실제 데이터를 보면 2D의 얼굴에 나머지 부분은 3D 오브젝트이다.

 

 그렇다면 왜 트리 오브 세이비어의 캐릭터는 3D의 오브젝트이지만 2D같이 보이는 것일까?  분명 여러 가지 이유가 있을 것이다.

 

 회화 같은 텍스쳐링, 동화가 부족한 느낌의 뚝뚝 끊어지는 애니메이션이나 360도 돌려 볼 때 끊어지는 프래임 등이 존재할 것이다.

 

 그중 이 글에서는 제한된 각도에서 렌더링 하여 동화가 모자라는 것 같은 느낌을 주는 것에 대하여 이야기해보고 싶다.

 

 2D 작업물의 경우 3D와 다르게 동작이나, 연출 등에 한 장 한 장 동화를 그려야 하는데, 그로 인하여 제작 기간, 단가가 증가함에 따라서 적은 동화(낮은 프레임)으로 작업을 하다 보니, 2D 특유의 느낌이 존재하고, 우리는 여러 영상매체를 통하여 눈에 익게 되었다.  그로 인하여 이것은 2D 애니메이션, 게임의 특징, 느낌이라고 청중이나 게임 유저가 느끼게 된다.

---

 최종적으로 결과물이 어떻게 작동하는지부터 확인해 보자.

 

 상단의 히후미 캐릭터 테이블을 360도 돌릴 때, 정해진 각도에서만 보이도록 준비를 했다.  렌더링 또한 이런식으로 되도록 하면 2D의 느낌을 더 살릴 수 있을 것이다.

---

 화살표를 이용하여 각 방향별로 뜯어서 확인해 보자.

 

• Y축만 360도 자유롭게 하면 하단의 gif 속 화살표와 같이 매우 미세한 각도까지 렌더링이 된다.

 

 

• Y 축을 8방향에 걸리도록 만들면 이렇다.

 

 

• 8방향보다 더욱 확인이 쉽도록 4방향이 걸리면 이렇다.

 

---

 트리 오브 세이비어의 플레이 캐릭터는 얼굴만 2D이고, 나머지는 3D인데, 여기서 얼굴을 총 8방향만 렌더링 한다.  이것 역시 5개만 만들어서, 나머지 3 부분은 사이즈를 마이너스 크기로 하여 반대편을 그려내고 있다.

 

 그렇다면 3D인 몸은 어떡해야 할까?  얼굴과 괴리감이 들지 않도록 8방향만 렌더링 되도록 한다. 

 

 그렇다 이게 끝이다.  놀랍도록 쉽다.  하지만 어떻게 만들 수 있는가는 다르다.

 

 사실 이 답은 수학적 지식만 있으면 매우 쉽다. 

---

 비밀은 바로, Round 함수와 나누기, 곱하기 한 번씩으로 해결 할 수 있다!

 

이것을 HLSL 수식으로 보면 이렇게 된다.  "Round(y / x) * x"  // y는 Y 축 각도, 당연히 360

 

 Round 함수는 반올림한 정수를 리턴하고, 나머지 소수점 값을 버린다.  그리고 45로 나누는 이유는 360도를 8로 나누면 45도가 나오기 때문이다.  그렇다면 4방향은 90, 3방향은 120 이 숫자만 바꿔주면 된다.

 

 그럼 풀어서 생각해 보자, 8 방향 랜더링을 하기 위해서는 0, 45, 90, 135, 180, 225, 270, 315도에서만 랜더링 되어야 하고, 오브젝트의 Y 축 로테이션 값이 87이라면, 먼저 45도로 나누어 그 값이 2.155555555555556이 나오게 되면 반올림하여 2가 된다.  이것을 다시 45도로 곱해주면 90이 나오게 된다!

---

 관련 코드 : https://asatala.tistory.com/56

3D 캐릭터 모델링은 블루 아카이브의 히후미입니다.

3D 캐릭터는 친구의 것입니다. URL : https://blog.naver.com/luca88105