VR 투어에 그림추가/리틀플래닛효과 추가

사진/360 파노라마 2012.09.06 21:32 Posted by 드론쟁이 푸른하늘이

얼마전부터 우리 딸래미 작품 전시회에서 촬영한 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);" />

<hotspot name="snowman" url="pic/snowman.jpg"
ath="139.314" atv="-0.496"
onclick="flyout(snowman);"
style="flyin_out"
/>


요기까지만 하면 딱 적당했을텐데.... 한가지가 더 욕심이 생겼습니다. 처음 파노라마를 불러들일때 "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 시킬 수 있을 겁니다. 

민, 푸른하늘

<embed width="580" height="460" src="https://t1.daumcdn.net/cfile/tistory/1754B045504E02B606?original" quality="high" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allownetworking="internal">




댓글을 달아 주세요

  1. 이길재  수정/삭제  댓글쓰기

    박사님 자료 덕분에 공부하기가 수월해서 감사드립니다.
    1. 리틀플렌 적용 후 항상 그 이미지는 리틀플렌으로 구동을 하네요.
    2. 이미지 클릭시 확대돼는 부분을 자세 알려주실 수 있으신지요?

    통체로 파일을 주시면 더욱 감사하겠습니다..

    2012.09.08 15:56 신고
    • Favicon of http://www.internetmap.kr BlogIcon 드론쟁이 푸른하늘이  수정/삭제

      파노라마 제작이라면 딱 어떻게 하라고 말씀드릴 수 있는데, VR 투어는 여러가지 고려사항도 많고 프로래밍이 필요한 부분이라서 여러가지로 테스트해봐야 합니다. 그래서 더이상 자세히 설명해 드리긴 곤란합니다.
      파일을 달라고 하시는 건 좀 그렇네요. 드릴 수 있다면 아얘 올려뒀겠죠.

      2012.09.09 13:51 신고
  2. 이길재  수정/삭제  댓글쓰기

    제 xml코드와 무슨차이인지 비교하려한건데
    그냥 열심히 반복해야겠네요.^^


    2012.09.12 10:34 신고
  3. 이길재  수정/삭제  댓글쓰기

    hotspot_ani_black.swf << 요 파일은 찾아도 안보입니다..
    어디에서 받으야 하는건가요?

    2012.10.14 21:56 신고
  4. 이경춘  수정/삭제  댓글쓰기

    아 힘드네요..정말 멋지십니다. 하나하나 따라하는것 자체가 막히니 어디서부터 공부를 해야할지..아..힘들다

    2012.12.28 18:41 신고
  5. 유창열  수정/삭제  댓글쓰기

    투어형에서 리틒플래닛 효과에대해 궁굼했는데 박사님 덕분에 풀렸네요..
    감사드립니다.

    한가지 리틀플래닜효과 적용시 아래
    <events onloadcomplete="delayedcall(1.0, normalview());" />
    를 첨부하시면 회전 속도가 느려지지 않는것 같네요...

    2013.11.20 19:49 신고
  6. min  수정/삭제  댓글쓰기

    안녕하세요~ vr에 관심이 많은 학생입니다!
    질문하나 할 수 있을까요?
    현재 krpano 데모버전으로 360도 vr 어플을 만들고 있습니다.
    그런데 사진이 24장 밖에 올라가지 않습니다...데모버전이라 그런걸까요?
    정식버전도 혹시 담을 수 있는 사진의 양이 제한되는지요...?

    2016.04.13 15:40 신고

BLOG main image
드론과 지도
드론이 세상을 바꾸고 있습니다.드론의 활용처가 계속 넓어지고 있고, 글로벌 기업들의 참여가 많아지고 있으며, 새로운 기술들이 속속 등장하고 있습니다. 하지만 우리나라의 드론 산업은 일부 기업을 제외하면 중국에서 생산된 드론을 가져다가 조립하는 수준이 대부분입니다. 드론은 하드웨어, 소프트웨어, 데이터처리가 복합된 기술입니다. 어떤 기술들을 어떻게 조합할지에 성패가 달렸죠. 5년뒤 10년뒤에 이 블로그엔 어떤 글이 적힐까요? 그것이 궁금합니다.
by 푸른하늘이
Profile for bluesky61

달력

«   2018/09   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

카테고리

전체보기 (1586)
구글어스 (829)
공간정보 (236)
사진 (103)
드론/쿼드콥터 (239)
지오캐싱 (47)
기타 (131)
  • 4,493,351
  • 62586
TNM Media textcube get rss

드론과 지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.