Implementation of Interactive 3D Aquaium from 2D Images Using 3D Model Conversion Algorithm

2D이미지의 3D 모델화 알고리즘 적용을 통한 인터랙티브 수족관개발

Abstract

The 3D contents are getting more attentions in various areas, such as in movies, advertising, games and exhibition contents. There are many authoring tools for making 3D Models and contents. However, those authoring tools take considerable amount of time to learn and to make 3D contents. In this paper, we propose the 3D model conversion algorithm to make 3D models from 2D pictures drawn on the touch screens or papers. The vertex animation method also proposed for the interactive 3D aquarium. The proposed vertex animation algorithm was tested for virtual 3D water creatures and compared with human-made animation. An Interactive 3D aquarium was implemented by using those proposed algorithms. Thus the simplicity and effectiveness of the algorithms can be applied to diverse industries.

1. 서 론

최근 디지털 정보기술의 발달로 디지털 정보를 표현하는데 있어 2D에서 3D로 변화되고 있다. 이러한 변화의 흐름으로 인하여 3D데이터를 활용한 소프트웨어 및 전용 하드웨어의 기술이 계속 발전하고 있다. 3D형태의 콘텐츠는 일반적으로 사용자들이 보기에 사실과 유사한 입체적 느낌을 줄 수 있어 사실적인 표현이 가능하여 영화, 광고, 게임 등 여러 분야에서 다양하게 적용 및 활용되고 있다[1-6]. 이러한 2D 데이터를 활용해 눈에 보이는 공간을 3D로 구축하고, 공간의 구조를 파악해 여러 3D콘텐츠를 제작 및 활용된 경우를 찾아볼 수 있다.[7] 하지만 3D콘텐츠 제작을 위한 소프트웨어는 제작 방법이나 표현방법이 전문가가 아니면 사용하기 어려운 경우가 많거나 소프트웨어에 대해 잘 알더라도 이러한 소프트웨어들을 이용하여 3D 콘텐츠 제작하기 위해서는 많은 시간과 비용이 발생하는 한계를 갖고 있다. 따라서 사용자들이3D 콘텐츠 제작을 좀 더 쉽게 원하는 데이터를 빠른 시간에 획득 할 수 있도록 새로운 형태의 알고리즘을 적용한 소프트웨어 개발이 필요하다. 본 논문에서는 2D 물고기의 이미지로 부터 3D 모델을 만들고 이를 여러 사람이 동시에 함께 즐길 수 있도록 대형 스크린에 자동으로 애니메이션 되도록 하는 방법에 대한 것이다. 본 논문의 구성은 다음과 같다. 2장에서는 인터렉티브 콘텐츠에 대한 정의와 3D모델생성에 대하여 설명한다. 3장은 본 논문 제작한 시스템 구성과 2D 이미지에서 3D 데이터 변환과정과 애니메이션을 하는 방법을 설명하며, 4장은 실험 결과에 대하여 논하였고 마지막 5장에서는 결론 및 향후 연구에 대하여 서술한다.

 

2. 인터렉티브 콘텐츠와 3D 모델생성

2.1 인터렉티브 콘텐츠

디지털 콘텐츠란 유무선 전기 통신망에서 사용하기 위해 부호, 문자, 도형, 색채, 음성, 음향, 이미지 및 영상 등이 유기적으로 융합되어 새로운 표현기능 및 저장 기능을 갖게 하는 콘텐츠를 말한다[8]. 대부분의 디지털 콘텐츠는 게임, 교육, 전시분야에 주로 적용되고 있다. 하지만 정보기술 이 점점 발전할수록 이러한 디지털 콘텐츠 분야도 단순히 수동형태의 콘텐츠 표현 방식을 벗어나 얼마나 많은 몰입감을 참여자에게 제공해 주느냐가 중요한 이슈로 되고 있다. 이러한 몰입감은 효과적인 기억학습과 매우 밀접한 관계를 가지고 있으며, 몰입감을 효과적으로 나타내기 위해서는 수동적인 방식이 아닌 오감을 이용해 인터랙션을 포함하는 방향으로 진화하고 있다. 인터랙션이 포함된 콘텐츠는 크게 6가지 종류로 나눌 수 있다. 첫 번째는 노출을 위한 흥미유발 형이고, 두번째는 정보송출 형, 세 번째는 단순 소비자참여 형, 네 번째는 소비자콘텐츠생산 형, 다섯 번째는 소비자의 편의를 위한 콘텐츠조작 형, 여섯 번째는 소비자 맞춤형이다[9]. 이중에서도 소비자 맞춤형은 기술이 발전할수록 개개인에 맞는 콘텐츠를 제공하는 형태로 발전하고 있다. Fig. 1은 실제 일본에서 어린 아이들이 그린 물고기 그림을 수족관에 투영시켜 아이들 개개인이 그린 물고기 그림이 애니메이션 되도록 제작된 인터렉티브 콘텐츠 중 하나이다. 이것은 직접 콘텐츠를 만들도록 유도하여 창조의 재미를 경험하도록 제작된 대표적인 사례이다.

Fig. 1.2D Consumers in the Form of Customized Interactive.

2.2 3D 모델생성

3D데이터 모델을 제작하기 위한 기술은 컴퓨터 그래픽스 분야에서 오랫동안 연구되어오고 있는 연구 분야 중 하나로, 이 기술은 다양한 분야에서 활용되고 있다. 대부분의 3D모델링 제작 방법은 X, Y, Z의 3축의 공간에 폴리곤의 변형을 활용해 모델의 제작 및 맵핑(Mapping), 애니메이션 등의 여러 과정을 통해 제작된다. 이러한 하나의 3D모델링을 활용한 인터랙티브 콘텐츠를 완성하기 위해서는 복잡한 부분과 미세한 부분까지 일일이 확인하면서 제작해야 한다. 여러 단계의 기술을 거치면서 많은 시간과 노력이 필요로 하게 된다. Table 1은 실제 3D모델링부터 애니메이션 콘텐츠 제작에 많이 사용되고 있는 저작도구들이다.

Table 1.3D Modeling Authoring Tools

 

3. 시스템 구성

Fig. 2는 본 논문에서 개발한 시스템 구성도이다. 여러 사용자가 자신이 그린 물고기 이미지나 사진을 인터넷을 사용하여 서버에 전송하면 이를 3D변환 알고리즘을 이용하여 3D모델로 변환한다. 제작된 3D모델은 대형 디스플레이에서 자동애니메이션으로 나타나게 된다. 복수의 사용자가 만든 모델은 다른 사용자가 제작한 모델과 함께 애니메이션으로 되어 움직이는 것을 볼 수 있도록 한다. 3D 모델변환은 웹브라우저에서 자바스크립트 언어로 처리되거나 또는 각 플랫폼 전용 네이티브코드로 작성될 수 있고 서버 측의 프로그램에 의해 변환될 수 있다. 디스플레이 시스템에서 실행되는 프로그램은 데이터베이스에 저장된 모델을 웹서버를 통하여 불러와서 본 논문에서 제안하고 있는 버텍스(Vertex)애니메이션 알고리즘을 이용하여 3D 모델 애니메이션으로 완성되며 여러 사용자가 동시에 인터렉티브하게 함께 즐길 수 있는 콘텐츠를 제작 할 수 있다.

Fig. 2.System Overview.

Fig. 3은 사용자가 그린 그림을 스캔한 파일 또는 저장된 이미지 파일을 3D모델로 변환하는 알고리즘의 블록다이어그램이다. 변환 단계는 다음과 같다. 첫째, 사용자가 그린 물고기 그림을 스캔한 이미지를 입력한 뒤 둘째, 영상처리를 위하여 흑백 이미지로 변환을 거친다. 셋째, 물체의 윤곽선을 추출하기 위해 에지(Edge)연산을 실시한다. 넷째, 검출한 에지(Edge) 정보를 이용하여 물고기 몸체영역과 배경을 분리하며, 다섯째, 3D 모델을 위한 버텍스(Vertex)위치를 물고기의 몸체영역에 배치한다. 여섯째, 이를 기준으로 앞면과 뒷면이 대칭되도록 버텍스(Vertex)를 계산한다. 일곱째, 생성된 버텍스(Vertex) 위치를 고려하며 면을 생성한다. 여덟째, 모델을 자연스럽게 만들기 위해 일부 버텍스(Vertex)의 위치를 재조정 단계를 거치고 마지막 아홉 번째로 최종적으로 텍스처(Texture)를 설정하여 3D모델을 완성한다[10].

Fig. 3.Diagram for 3D Model conversion algorithm from 2D images.

3D 변환을 하기 위한 에지(Edge)검출의 알고리즘으로는 Canny 알고리즘을 사용하여 윤곽선을 추출한다. Fig. 4는 단계5의 버텍스(Vertex)분배를 설명한 것으로 이미지 영역을 일정간격으로 구획하고 각 라인을 배치하고 버텍스(Vertex) 위치를 정한다. 라인의 길이가 길어지면 버텍스(Vertex) 간의 간격이 넓어지고 라인의 길이가 짧아지면 버텍스(Vertex) 간격이 좁아지게 된다. 버텍스(Vertex) 위치가 설정되면 이를 이용한 면을 생성(단계7)하는 데 일정한 법칙에 따라 삼각형 면을 배정한다. 전체 버텍스(Vertex) 수는 모델의 해상도가 된다.

Fig. 4.Distribution and Surface Structure of the Vertex.

단계 6의 버텍스(Vertex) 좌표 V(vx,vy,vz)는 식(1)을 사용한다. 모델의 3차원 좌표 vx와 vy는 이미지 좌표(x,y)를 이용한다. 모델의 중심을 기준으로 대칭이 되도록 버텍스(Vertex)를 부여하기 위하여 전경 영역 이미지의 중심을 기준으로 대칭이 되도록 하였다. Sx,Sy,Sz는 스켈링 계수이다. 모델의 좌표 vz는 화면을 기준의 앞뒤로 튀어나오는 정도를 설정하는 값이며 수평축 라인의 길이 r(y)에 cosθx 값을 곱한 것으로 centerY 위치에 θx = 0이고 같은 수평 축 양쪽끝단의 위치는 θx =–π/2 또는 θx =π/2가 되도록 한다.

vz값은 상호 대칭이 되도록 V(vx,vy,vz), V(vx,vy,-vz)으로 설정한다. 3D모델의 최상단과 최하단에 모델의 면을 크로스하기 위하여 버텍스(Vertex) 2개를 Vn(vnx,vny,vnz)과 Vs(vsx,vsy,vsz)를 설정한다. 위치는 주변 버텍스(Vertex)의 평균값을 이용하며 vnz = 0과 vsz = 0으로 설정한다. 단계 8은 생성된 버텍스(Vertex)의 이미지 밝기 정보를 하이트맵(Hight Map)으로 사용하고 기존 버텍스(Vertex)의 위치를 식 (2)와 같이 수정할 수 있다.

식 (2)의 β는 스켈링 인자, I(x,y)는 이미지 평면상의 그레이 값, Gmax 는 그레이의 최대값이다.

Fig. 5는 버텍스(Vertex) 애니메이션을 위한 의사코드이다. 3D 모델이 일정한 시간간격으로 리프레쉬 될 때 마다 버텍스(Vertex)의 vz을 Sine 함수에 따라 위치를 수정해 주면 물고기가 S자 형태로 헤엄을 치는 단순 애니메이션 방식이다. 물고기의 y축을 기준으로 pref(y)의 기준위상을 설정한다. sp는 스켈링 값이며 ly는 물고기의 y축 길이이다. 즉 물고기의 정규 길이에 대응하는 위상 값을 기준으로 부여한 것이다. 이 위상값을 기준으로 vz가 변화하는 δz을 계산한다. 새로운 vz′는 vz′ = vz + δz로 계산한다. oz는 prevTime에서의 vz이고 nz는 cirremtTime에서의 vz이다. sz와 st는 스켈링 값으로 모델에 따라 적절히 조절하면 된다. 각각의 모든 V(vx,vy,vz)좌표를 V(vx,vy,vz′)로 일정 시간 간격으로 반복을 하면 물고기는 헤엄치는 모양의 버텍스(Vertex) 애니메이션을 하게 된다.

Fig. 5.Vertex Animation Pseudo Code.

 

4. 실험 결과

본 연구의 실험은 64비트 윈도우즈 7 운영체제, Intel(R) Core(TM) i7-2600 CPU, 메인 메모리 6.0 GB 사양에서 구현하고 테스트 하였다. Fig. 6은 3D 모델변환 테스트를 위해 (a)물고기 사진, (e)크레용으로 그린 그림 및 (i)드로잉 툴로 그린 이미지를 이용하여 3D 모델 변환과정을 나타내고 있다. Fig. 6에서 (a), (e), (i)는 이차원 이미지이다. (b), (f), (j)는 저역필터를 적용한 이미지이며, (c), (g), (k)는 에지(Edge)추출 이미지이며 (d), (h), (l)는 3D 모델로 변환된 결과이다. 변환된 3D 모델은 웹서버를 통하여 데이터베이스에 저장된다. 그리고 모델 파일은 OBJ 포맷을 사용하였으며 OBJ 파일의 특성상 모델파일, mtl 파일 및 이미지 파일이 필요하다. 데이터의 처리가 쉽도록 확장자만 다른 같은 이름의 파일을 생성한다.

Fig. 6.3D Conversion.

애니메이션은 Unity 5.0.1f1 (64-bit)를 이용하였다. 데이터베이스를 체크하여 최신의 정보가 있으면 프로그램 실행 중에 모델을 웹 서버를 통하여 불러온다. 본 논문에서 제안한 버텍스(Vertex) 애니메이션 알고리즘이 얼마나 자연스러운지 비교하기 위하여 3D MAX에서 Bone 애니메이션 한 것을 함께 비교하였다. 3D모델링 저작도구인 3D Max를 사용하여 물고기 모델링을 제작하였다. Fig. 7의 (a)는 3D 저작 툴인 3D Max의 화면으로써 완료한 3D물고기 데이터를 추출한 뒤 Unity에서 애니메이션을 위해 임포트(Import)(b)를 하였다. 본 논문에서 제안한 알고리즘을 적용하여 개발한 3D제작 콘텐츠 물고기의 사실감을 표현하기 위하여 Mapping처리(c)를 하여 애니메이션(d)이 가능하도록 구현하였다. 3D max를 이용하여 제작한 물고기데이터와 그림을 이용하여 3D로 변환한 물고기 데이터의 애니메이션 적용 후 3D Max를 이용해 제작한 것보다 쉽고 빠른 제작과 자유로운 애니메이션이 가능하였다.

Fig. 7.3D Data Unity Export and Import

Fig. 8은 3D 애니메이션을 위한 Unity의 애니메이션 컨트롤러 설정 화면이다. 3D Max 저작도구로 제작한 물고기의 애니메이션과 본 연구에서 제안한 버텍스(Vertex)애니메이션을 Fig. 9와 같이 함께 비교하여 보았다. 흰 바탕의 물고기들은 2D이미지를 이용하여 3D변환된 물고기 데이터이고 파란색물고기는 사진을 이용해 제작된 3D변환 물고기이다. 가장 뒤에 길고 노란색의 물고기는 3D max를 이용해 제작된 물고기 데이터이다. 이것 중 이미지를 사용한 변환 데이터는 프로그램에 의해 자동 변환되고 3D 모델은 디스플레이 프로그램이 실행 중에 데이터베이스로 부터 불러와서 버텍스(Vertex)애니메이션 스크립트를 자동으로 추가하여 애니메이션을 한다. Fig. 9의 그림에서 자연스러운 물고기의 움직임이 나타난다.

Fig. 8.3D Animation Controller of Unity.

Fig. 9.Exhib ition Display.

 

5. 결 론

본 연구에서 제안한 시스템은 여러 사용자가 동시에 인터렉티브하게 상호작용을 하면서 함께 즐길 수 있는 콘텐츠 제작이 가능하다. 여러 사용자가 자신이 그린 그림이나 이미지를 이용하여 2D이미지를 3D 모델로 자동 변환 후 웹 서버를 통해 데이터베이스에 저장하고 저장된 모델은 버텍스(Vertex)연산을 통해 실시간으로 대형 디스플레이를 통해 애니메이션 되도록 한다. 향후 연구 2D이미지를 사용하여 3D변환 알고리즘을 통해 3D 객체를 변환과 이동, 제어를 통해 제작된 물고기 알고리즘을 이용하여 물고기를 터치하였을 때 물고기가 반응하여 움직이거나 터치한 물고기를 손으로 드레그(Drag) 하여 물고기의 위치를 임의적으로 움직일 수 있는 멀티미디어적 요소를 추가 하여 지금의 단조로운 데이터를 활용하여 어린 아이나 어른모두 즐겁게 사용하는 등의 멀티미디어적 요소를 첨가할 예정이다.