얼마전부터 우리 딸래미 작품 전시회에서 촬영한 360*180 파노라마를 사용하여 VR 투어를 만들고 있습니다.
가장 간단하게 만드는 방법은 그냥 파노라마 사진들을 끌어서 MAKE VTOUR (NORMAL) droplet.bat 위에 떨어뜨리기만 하면 됩니다. (krpano 도구는 다운로드사이트에서 받을 수 있습니다. 데모버전으로만 사용할 경우 화면 가운데 krpano라는 마크가 뜨고 온라인으로는 사용할 수 없지만, 모든 기능은 테스트해볼 수 있습니다.)
그러면 아래 그림과 같이 DOS cmd 창이 나타나고 뭔가를 잔뜩 만듭니다. 그냥 놓아두면 파노라마가 들어있는 폴더에 vtour라는 폴더가 하나가 생성됩니다.
이렇게 만들어진 폴더 속에 여러가지 파일들이 들어있는데, 이것들이 기본적인 VR 투어입니다. 아래는 이것들을 krpano Protect Tool 을 사용하여 하나의 플래시 파일로 만든 뒤 여기에 첨부파일로 올린 것입니다. (사용법은 여기를 참고하세요.)
사실 이 정도만 해도 정말 쓸만합니다. 창문모양의 아이콘을 누르면 파노라마들의 썸네일 이미지를 볼 수 있고, 이것을 클릭하면 해당 파노라마로 이동됩니다. 또 맨 오른쪽 또는 왼쪽에 있는 삼각형2개가 있는 버튼을 눌러도 다른 파노라마를 볼 수 있고요. 물론 기본적인 확대/축소/이동은 하단에 있는 버튼을 이용해도 되고 마우스만으로도 제어할 수 있습니다.
그런데... 사실 좀 허전합니다. 파노라마가 서로 연결되어 있다는 느낌이 전혀 안듭니다. 그래서 필요한 게 핫스팟(hotspot)입니다. 화살표를 눌러주면 그 방향으로 이동하여, 이동된 장소에서 촬영한 사진이 나타나는 효과를 만들어, 여러개의 파노라마를 서로 유기적으로 연결시켜 주는 것입니다.
이번 krpano 1.0.8.15 에서는 VR Tour 에디터가 추가되었습니다. tour.html이 있는 폴더에 들어 있는 tour_editor.html을 실행시키면 아래와 같은 화면이 나오는데, 이것을 사용해 핫스팟(hotspot)을 추가할 수 있습니다. 사용하는 방법은 그냥 "add hotspot"을 누르고, 화살표를 원하는 곳에 이동시킨 다음 "done"을 누르고 링크시킬 파노라마만 지정하면 됩니다.
아래가 이렇게 만들어진 파일입니다. 사실 위에 있는 VR과 이 VR은 단순히 xml 파일이 아주 약간 다른 것 뿐인데 이렇게 새로 올리는 건 공간 낭비에 불과합니다만... 직접 테스트를 해보려면 어쩔 수가 없네요...
이렇게 만들고 나니, 욕심이 조금 더 났습니다. 여기에서 보이는 그림들을 좀 더 깨끗하게 볼 수 있도록 하면 좋겠다... 하는 겁니다. 그래서 일단, 가장 쉬운 방법으로 그림에 핫스팟을 만들고, 그것을 클릭하면 그림이 들어 있는 블로그로 연결되도록 하였습니다.
우선 위에서 사용한 것과 동일한 방법으로 핫스팟을 만듭니다. 그다음, 그 핫스팟을 아래와 같이 변경하였습니다. 핫스팟의 모양을 바꿔주고, 클릭했을 때 동작방법을 바꿔준 겁니다. 이걸 해당 <scene> 속에 넣어주면 지정된 위치(ath="139.314" atv="-0.496")에 동그라미가 그려지는 애니메이션 아이콘(hotspot_ani_black)이 나타나고, 클릭하면 정해진 URL이 새창으로 뜨게 됩니다.
<hotspot name="snowman" url="skin/hotspot_ani_black.swf" alturl="skin/hotspot_ani_black.gif" scale="0.4" ath="139.314" atv="-0.496" onclick="openurl(http://dkrkrnfma.blog.me/30138550190,_blank);" />
그런데... 이것만으로는 만족이 안되더군요. 클릭했을 때 별도의 창이 열리는 것보다 이 VR Tour 내에서 그림이 뜨면 훨씬 좋겠다 싶었죠. 물론 이에 관한 예제들이 엄청 많습니다. 그래서 그 예제들중 하나를 뒤져서 아래처럼 바꿨습니다.
이렇게 만드는 건 좀 더 복잡합니다. krpano에서 제공하는 <action>에 대해 이해가 필요하기 때문입니다. krpano 예제에서 이걸 구현한 부분을 찾아보면, 다음과 같이 3가지 액션이 정의되어 있습니다.
<action name="calc_flyout_size">
<action name="flyin">
<action name="flyout">
맨 위에 있는 액션은 현재 화면의 크기를 고려하여 적절한 그림 크기를 결정하는 루틴이고, 두번째는 핫스팟을 눌렀을 때 그림이 뜨도록 하는 것, 마지막은 그림을 클릭하면 사라지도록하는 루틴입니다. 이 액션들은 전혀 수정을 하지 않고 그래로 사용했습니다. 실력도 안될뿐 더러 구지 새로 만들 필요가 없어서입니다.
핫스팟은 아래처럼 2가지로 구성합니다. 첫번쨰 핫스팟은 위에서 만들었던 핫스팟가 동일한데, 클릭했을 때 동작만 flyin으로 바꾼 것입니다. 두번째 핫스팟은 그림자체로서 클릭을 하면 그림이 사라지게 되는 액션이 포함되어 있습니다.
<hotspot name="spot_snowman" url="skin/hotspot_ani_black.swf" alturl="skin/hotspot_ani_black.gif" scale="0.4" ath="139.314" atv="-0.496" onclick="flyin(snowman);" />
요기까지만 하면 딱 적당했을텐데.... 한가지가 더 욕심이 생겼습니다. 처음 파노라마를 불러들일때 "Little Planet"이라고하는 방식에서 일반 방식으로 바꾸어주는 액션입니다. 이렇게 하면 이 파일이 단순한 그림이 아니라, 360도 파노라마라는 것. 그리고 동적으로 작동된다는 것을 알려줄 수 있기 때문에 꼭 넣어주고 싶었습니다.
아래가 리틀플래닛 방식으로 파노라마를 표시한 겁니다. 꼭 어린왕자가 살고 있는 소행성 B612를 보는 듯한 느낌이 들죠? 원본은 여기를 보시면 되는데, 구글에서 "Little Planet panorama"라고 검색하면 이 이외에도 아주 많은 사진들을 볼 수 있습니다.
어쨌든... 아래처럼 만드는 데 성공은 했습니다만, 위에서 적용한 여러가지 효과와는 달리 이것은 아주 까다로웠습니다. 이렇게 하는데 영향을 미치는 부분이 많았기 때문입니다.
제일 먼저 필요한 것은 아래와 같은 정의입니다. 여기에서 정한 뷰를 적용하면 360*180파노라마를 "리틀플래닛 방식으로 보여주게 됩니다. 그리고 그 바로 아래에 있는 normalview action은 일반적인 화면으로 되돌려주는 기능을 하고요. 그러니까, xml 파일 시작부분 이 두가지를 복사해 넣고, scene이 로드된 직후에 normalview() 액션을 수행하도록해주면 간단하게 해결될 것이라고 생각했습니다.
<view stereographic="true"
fisheye="1.0"
fovtype="MFOV"
fov="150.0"
fovmax="179.0"
hlookat="180.0"
vlookat="90.0"
/>
<action name="normalview">
tween(view.fisheye, 0.0, 3, easeInOutQuad);
tween(view.fov, 87.103, 3, easeInOutQuad );
tween(view.hlookat, 16.730, 3, easeInOutQuad );
tween(view.vlookat, 3.859, 3, easeInOutQuad, WAIT);
restore_scene();
</action>
그러나, 이상과 같이 MAKE VTOUR 도플릿을 사용하여 투어를 제작한 다음, tour Editor를 사용해서 편집하면 이런 효과가 나타나지 않게 되는 겁니다. 제일 문제는 tour Editor에서 어떤 scene의 시작위치를 지정하면 아래와 같은 부분이 추가되는데, 이부분이 정의되어 있으면 "Little Planet" 정의한 부분이 아니라, 아래와 같이 정의된 부분에서 시작되는 것입니다.
<view hlookat="16.730" vlookat="3.850" fovtype="MFOV" fov="87.103" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
그래서 이부분을 삭제시켜버리고나서, 다시 이부분의 효과를 그대로 유지하려고 하니, 여러가지 시행착오가 필요했습니다. 그 부분을 자세히 설명드릴 순 없고... 혹시 나중에 필요하시면 개인적으로 연락하시길.
<embed width="580" height="460" src="https://t1.daumcdn.net/cfile/tistory/1754B045504E02B606" quality="high" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allownetworking="internal">