hellz's Blog && Workshop

이전글에 이어서 3D Cube의 구현에 대해 써보자 합니다.

이전글을 보시면 아시겠지만, 큐브의 조작은 마우스로만 이루어집니다.
즉, 마우스 입력을 큐브회전으로 변환하는 것이 핵심이죠.
그러므로 잡다한 자료구조나, 구조는 제외하고 이것에 대해서만 포스팅하겠습니다.



우선 하나의 면을 클릭해보죠.
스샷에서 하얀색으로 표시된 부분이 클릭한 면입니다.
그리고 이때  마우스로 조작할 수 있는 회전은 3가지입니다. (반대방향은 제외)
하늘색면을 회전, 녹색면을 회전, 분홍색면을 회전이죠.


하늘색면의 회전에 대해서 생각해 보도록 합시다.
아까의 위치를 클릭하였을 때, 4개의 벡터를 얻을 수 있습니다.
이 4개의 벡터중 하나를 이용해서 회전하고자 하는 면을 선별하는 것입니다.
이 벡터들은 클릭한 조각의 각각 면의 법선을 의미합니다.


그리고 조각을 선택한 상태에서 왼쪽으로 마우스를 움직여보죠. 
그러면 처음에 마우스를 클릭한 지점부터, 마우스를 땐 지점까지
붉은색 화살표와 같은 벡터를 얻을 수 있습니다.
그리고 이 벡터를 기초로, 아까구한 4개의 벡터 중, 가장 유사한 하나의 벡터를 선별합니다.
[선별하는건 일반적인 피킹과정과 유사합니다. 붉은 화살표는 카메라좌표계의 벡터이므로
 이것을 선택한 조각의 로컬좌표계로 이동시킨후, 가장 가까운 벡터를 찾는 것이죠. ]
[가장 가까운 벡터를 찾는 것도 간단합니다. 각각의 노멀벡터를 하나의 위치로서 사용하여
 변환한 붉은 벡터의 노멀(이것또한 위치로 사용)과 가장 가까운 벡터를 찾으면 됩니다.)


선별된 벡터와 클릭지점의 노멀벡터를 사용하면 회전하고자 하는 면들을 구합니다.
상단에 검은 사각형들이 바로 이번 입력에 의해 회전될 사각형들입니다.


그렇다면 회전축을 찾아야겠죠?
회전축 찾은 것또한 간단하죠.
단순히 위에서 구한 벡터 2개의 외적으로 구해지는 범선벡터를 사용하는 것입니다.
외적으로 회전축을 구하는 것은 또 하나의 이득이 있습니다.
반대로 드래그했다면 파랑색벡터는 반대방향이 되어있을 것입니다.
이들의 외적은 녹색벡터와 반대방향이 되어있겠죠.
당연히 녹색벡터의 반대방향 벡터로 회전을 하면 반대로 회전하게 됩니다.


이러식으로 구해진 큐브조각을 정해진 회전축으로 회전시키면 큐브가 회전하게 됩니다.
이렇게 만든 루틴은 녹색을 회전할때도 같은 방법으로 회전이 가능합니다.


이러한 방식이 통하지 않는 건 분홍색면을 회전할 때가 됩니다.
일반적으로 분홍색면을 클릭하고 분홍색을 회전한다면, 마우스로 원을 그리는게 타당하겠죠.
만약 이 기능을 넣는다면 마우스의 회전을 감지하고, 클릭한 면의 노멀로 회전.
그리고 다른 면의 노멀로, 회전할 조각을 검색하는것으로 구현이 가능하겠죠.

그러나 분홍색과 녹색을 포함한 조각을 밑으로 내리는게 마우스 동선이 더 짧기도 합니다.
또 별개의 마우스 움직임을 추가하면, 움직임 판정이 미묘해 질 가능성도 있겠죠.
그래서 이러한 회전은 구현에서 제외하였습니다. (슬슬 다음계획으로 넘어가고 싶었고;;)


이렇게 회전처리를 하면 카메라 위치와 관계없이, 동일한 룰로 회전을 처리할 수 있습니다.
카메라의 위치와 관계없이 직관적으로 큐브를 조각할 수 있는 것이죠.



3DCubeSource.zip 소스입니다.
일리히트 엔진을 이용하였습니다. 일리히트엔진을 알아보는 김에 한번 작업해봤습니다.
처음 써본거라 조작에 미숙한 점이 있더라도 향해바랍니다 ^^;

참고로 만약에 DirectX나 OPEN GL등의 과제로 쓴다면 거의 다 뜯어고쳐야 할겁니다.
(보통 3D수업은 API레벨일테니, 과제용으로 써먹기 힘들거 같아서 공개하는거죠 ㅎㅎ)



학기말 텀프로젝트때, 큐브만든다는 친구가 있었는데, 재미있어보여서 한번 짜봤습니다.
혹시 다음학기때, 인공지능땜에 써먹을 수 있을지 모르겠네요;;