창의력 그리기 VR (오큘러스 퀘스트, 핸드트래킹, 포톤 네트워크)

 

 

1. 프로젝트 개요

 인터넷의 발달, 인공지능과 빅데이터의 등장, 세분화된 지식발달의 한계로 똑똑한 사람의 정의가 바뀌고 있다. 기존에는 그저 머리속에 많은 지식을 담고 있는 사람이 똑똑한 사람이였지만, 요즘엔 지식이 아무리 많은 개인이 있더라도 인터넷의 정보보다 많이 담고 있기가 힘들다. 남들을 따라가고 현재 있는 지식을 잘 습득하는 것 만으로는 큰 의미가 없는 시대가 오고 있다. 이러한 시대에서 살아남기 위해서는 창의성과 통합의 기술이 필요하다.

 이런 창의성을 기르기 위한 도구로는 형상화, 패턴인식, 놀이, 몸으로 생각하기가 뽑히고 있다. 창의성을 기르기 위해서 그러한 활동들을 담고 있는 예술과 놀이의 중요성이 높아지고 있다. 또, 이러한 예술과 놀이는 혼자 할때보다 다른 사람들과 협동해서 할 때 긍정적인 효과가 증폭된다. 코로나로 사람들이 모이기 힘든 지금, 현실과 같은 생동감을 줄 수 있는 VR공간에 모여서 그림을 그릴 수 있으면 어떨까?

 ‘창의력 그리기’ 어플에서는 현실의 물감과 비슷한 느낌의 색상혼합, 아이들이 손에 물감을 바르고 그림을 그리는것과 같은 핸드트래킹을 이용한 드로잉으로 아이들이 머리속에 담고 있는 것을 마음껏 그릴 수 있는 환경을 제공해준다. 네트워크를 이용하여 친구들과 협동력을 기르거나, 부모님의 지도 아래 그림그리기를 진행할 수 있을 것이다.

 

 

 

2. 프로젝트 구조

 

 핸드트래킹을 이용하여 맵을 돌아다니며 캔버스(미니 캔버스와 메인 캔버스)에서 그림을 그릴 수 있다. 아기자기한 분위기를 위해 맵 곳곳에 귀여운 오브젝트를 배치하고, 맵을 돌아다니는 고양이도 제작하였다. 또 스피커를 만들어 음악이 나오게 하였으며, 플레이어가 원한다면 음악을 끄고 어플리케이션을 사용할 수도 있다. 맵 2층에 존재하는 포탈을 이용하면, 옥상으로 나가게 되는데 여기서 자유롭게 휴식을 하며 경치를 즐길 수 있다.

 

(맵의 아기자기한 장난감들과 걸어다니는 고양이로 친근한 분위기를 형성한다.)

 

 

3. 프로젝트 기능

 

 

  3.1. 그리기

 핸드트래킹을 이용하여 손가락으로 그림을 그린다. 손가락에는 특정 색상을 선택할 수 있으며, 선택된 색상으로 그림이 그려진다. 오른쪽에는 Sphere 오브젝트를 손가락으로 가정하여, 각 손가락에 빨강, 노랑, 녹색, 파랑, 흰색을 적용해 그림을 그린 모습이다. 그림이 그려질 캔버스가 흰색으로 설정되어 있어서 흰색이 그려진 그림을 지우는 지우개의 역할을 담당한다. 원래는 5손가락 모두 사용하여 그림을 그릴 수 있도록 계획하였으나, 핸드트래킹으로 그림을 그릴 시 예상치 못하게 그림이 그려지는 경우가 많아 검지(Index Finger)만 사용해서 그림을 그리는 것으로 변경하였다.

 

 

  3.2. 포톤 네트워크

 포톤 네트워크를 이용해서 한 장소에서 다른 플레이어와 같이 그림을 그리는 기능을 구현하였다. 방장이 만든 방에 입장해 캔버스에서 같이 그림을 그릴 수 있다. 옆에 사진은 한 포톤 네트워크 방에 2명의 플레이어가 입장한 모습이다. 한 캔버스에 한명이 노란색, 다른 한명이 검은색으로 그림을 그리고 있다.

 

 

  3.3. 파일저장(with 최적화)

 지금까지 그림 그림을 파일 저장기능을 이용해서 저장할 수 있다. 저장위치는 유니티 ‘Application.persistentDataPath’에 저장됨으로 기기 상관없이 파일을 저장하고 읽어올 수 있다. 이 기능은 다음에 소개할 ‘전시’ 기능과 이어진다. 그림을 저장하고 읽어오는 과정에서 많은 부하가 발생하였는데, 유니티 프로파일러를 통해 프레임 타임이 많이 소요되는 기능을 찾아 코루틴의 동시프로그래밍(Concurrency Progtamming)을 사용하여 최적화 하였다. 옆 사진에서 큰 화면으로 보이는 부분이 실시간으로 그림을 그리고 있는 캔버스이고, 우측 하단이 그림이 파일로 저장된 모습이다.

 

 

 3.4. 전시

 그린 그림을 파일시스템을 통해 저장하고, 그린 그림을 전시장을 통해 불러오고 다른 유저들에게 피드백을 받을 수 있다.

-Open Gallery로 그림 목록 열기

-원하는 그림을 선택하면 모두에게 그림과 지금까지 달린 코멘트 공유

-작가명은 포톤 네트워크에서 사용한 ID

-Add Comment를 이용하여 댓글을 작성해서 그림에 대한 반응이나 피드백을 줌

 

 

3.5. 멀티캔버스

 여러 개의 캔버스에서 동시에 그림을 그리고, 여러 개의 전시 캔버스에서 캔버스마다 다른 그림을 공유하고 코멘트를 달 수 있는 기능을 구현하였다. 원래 기획에서는 2층을 전시장으로 사용하여 다양한 그림을 전시하려고 했지만, 공간이 생각보다 협소하여 이 기능은 제외되었다. 만약 개발기간이 더 주어진다면 전시룸을 따로 만들어 많은 그림을 공유하는 것도 좋을 듯 하다.

 

 3.6. 매뉴얼

 사용법이 복잡한 핸드트래킹을 플레이어가 이해할 수 있도록 맵 상단에 매뉴얼을 부착하였다. 이 매뉴얼은 다른 것들에 가려지지 않도록 Z buffer 0 쉐이더를 적용하였지만, 꼭 필요한 다른 것들을 가리지 않도록(예 : 옥상, 그림을 그릴 캔버스 등) 특정 부분에 스탠실 필터를 적용하여 모든 오브젝트를 가리지 않게 설정하였다.

 

 

4. 역할 및 일정

4.1. 팀 구성 및 역할

 홍유진 (리더)

• 프로젝트 기획, PPT 작성
• 그리기 관련 기능 구현
• 파일입출력과 포톤네트워크 통신 구현

 

 주태성

• 디자인 및 환경 구성
• 문서 작성 보조 ( 기능명세서, PPT 등 )
• 시각적 효과 (자연 환경, 별자리, 전시 작품 및 매뉴얼, 지우개, 물통, 키보드 등)

 

오상진

• Oculus Hand Tracking 기능 구현
• 기능 테스트 및 세부값 조정
• 사운드, 이펙트, UI

 

 

4.2. 팀 구성 및 역할

 

5. 프로젝트 수행결과

5.1. 색상섞기

 Color의 alpha값을 이용하여 구현하였다. 컬러값은 ‘https://trycolors.com/’ 사이트를 참조해가며 만들기 위해 6자리의 헥사값의 문자열로 변경하여 제어하였다.

 

5.2. 그리기

 손가락에서 바닥(X,Z축)과 평행한 방향으로 Raycast를 발사하고, 충돌한 대상이 그림을 그리는 Canvas(Layer:10)일 때 그림을 그린다. 만약 처음 그리는 텍스처(!paintTextures.ContainsKey(coll)일 때는 초기화 작업을 진행하고, 캔버스에 손가락이 움직인 경우(stored != hit.lightmapCoord) 그림을 그리기 시작한다.

 

 Raycast가 충돌한 좌표에 준비된 bursh이미지를 DrawTexture로 그린다. 이때 myMat에 원하는 색상과 재질을 담고, brushSize의 크기만큼 배율을 조정해 텍스처를 그린다.

 

 

5.3. 그림 저장과 네트워크 전송

5.3.1 그림저장

 

 그림은 EncodeToPNG()함수를 사용하여 바이트단위로 잘라서 저장하고 전시 캔버스에 공유하였다. 정해진 해상도 이상의 그림은 읽어올 수 없으니, 만약 이 어플리케이션에 외부 그림을 가져온다면 주의해서 사용하여야 한다.

 

 

5.3.2 갤러리 열기

 ‘Open Gallery’ 버튼을 누르면 해당 기기에 저장된 그림들을 읽어온다. 옆 코드는 버튼을 눌렀을 때, 그림들을 읽어와 갤러리에 불러오는 코드이다. 불러온 그림을 클릭하게 되면 delegate로 함수를 전송해 이미지와 코멘트를 모두에게 공유하는 네트워크 통신이 시작된다.

 

 5.3.3 데이터 전송

포톤의 RPC로 데이터를 전송한다. ‘_by’는 전송할 이미지를 바이트 단위로 쪼갠 데이터이다.

 

5.3.4 그림 이름 변경

RPC를 이용하여 그림의 이름을 변경할수도 있다. 그림의 이름은 해당 그림을 그린사람만 바꿀 수 있다. 

 

5.4. 코멘트 작성

그림에 대한 코멘트를 작성함으로써 반응과 피드백을 할 수 있다. RPC를 이용하여 실시간으로 모든 플레이어가 코멘트를 확인할 수 있고, 그림의 주인은 자동으로 파일이 업데이트된다. (페이지 조절상 Close함수와 파일스트림 선언은 생략했습니다.)

 

6. 느낀점

 처음으로 네트워크를 사용한 프로젝트를 제작해 보았는데, 여러 시점과 버그를 고려해야하는 네트워크 개발이 처음엔 힘들었지만, 이런 문제를 해결해 나가는 과정이 정말 재미있었습니다. 네트워크는 변수가 많은 만큼, 개발에서도 플레이에서도 많은 재미 요소를 갖고 있다고 생각합니다. 

 또한 핸드트래킹에 대해 다시 생각해보게 되었습니다. 이 기술이 VR의 미래라고 생각하고 익혀보려고 했지만, 아직 게임에서 이 기술을 제대로 활용하려면 많은 발전이 필요하다 생각했습니다. 그래도 핸드트래킹을 이용한 어플리케이션을 만들 때 어떠한 점을 고려해야 할지에 대해 많은 것을 배울 수 있었습니다.

 

 

 

참고

- https://trycolors.com/

Online color mixing tool

- 80.lv/articles/painting-on-meshes-using-lightmapuv-and-rendertexture/

Painting on Meshes Using LightMapUV and RenderTexture

 

stackoverflow.com/questions/726549/algorithm-for-additive-color-mixing-for-rgb-values

Algorithm for Additive Color Mixing for RGB Values