파노라마 VR(krpano) 에 three.js 를 이용한 3D 모델링 넣어보기.

파노라마 VR 에 three.js 를 이용한 3D 모델링 넣기.

시작하기

시작하기 앞서 본 문서는 파노라마 VR Viewer로서 krpano를 이용하고, 3D 모델링을 Web GL로 그리기 위해서 three.js 를 사용한다. krpano에 대한 충분한 이해가 있는 것을 전제로 서술되었다.



krpano Forum에 올라온 Three.js 샘플 확인

음.. 먼저 클라우스형이 만들어 보여주었던 krpano three.js 샘플링을 확인하자.
클라우스형이 일단 open source라고 내놓았는데. 그건 아마도.. 당장 krpano 패키지에 넣기에는 개발이 많이많이 필요하고,  관심은 있는 상태가 아닌가 생각된다. 



krpano Three.js 소스 확인


빠른 시일안에 테스트를 하기 위해서 클라우스형의 샘플을 수정하는 것으로 하자. 클라우스형의 plugins 포럼에 나온 글 을 보면 중간 쯤지나 Download the example: 이 있고 이를 다운 받자. krpano 를 사용했던 유저라면 krpano Testing Server를 이용하여 바로 샘플을 local 상태의 서버로 구동하자.   ** 테스트 서버 구동을 모른다면 여기를 참고하세요.
다른 플러그인과 달리 플러그인을 로드하고, instance 처럼 별도로 구현하는 것이 아니라, three.js 샘플 소스는 모든 구현이 플러그인 자체에 들어있다. 아무리 찾아도 three.js 구현을 xml 파일에서 찾을 수 없으며, "three.krpanoplugin.js" 파일안에 구현되어 있다.

Three.js 강좌 찾기

가장 빨리 Three.js 를 이해하는 방법은 Document를 누비는 것도 있지만, 간략한 튜토리얼을 찾아보는게 효율적이라고 생각하고 찾아보았다. 
Kinesis의 블로그 에 가면 기본 개념을 상세히 설명해 놓았다. 훓어보도록 하자.

Three.js 에서 사용할 3D 모델링 찾기


구글에서 'free 3d modeling' 이라고 검색을 하면 무료로 어마어마하게 고퀄의 모델링을 얻을 수 있다. 하지만 Three.js 에서는 완벽한 mesh상태의 모델을 json 형태로 변환할 수 있기 때문에 rigging 상태이거나 mesh가 완벽하지 않은 모델의 경우 json export 하는 시점에 에러를 뱉어낸다. 따라서 필자는 테스트를 위해서 간단한 모델링을 찾았다.
위에 링크를 타고 가면 unboring.net에 실제 Three.js 로 구동하기 위한 모델링과 관련 파일을 다운 받을 수 있다. 필자는 rigging 하기 전의 십자서기 상태의 모델링을 사용하였다.

Blender를 이용한 Three.js  위한 export JSON !!!

필자는 3D 모델링으로 sketch up과 blender를 사용한다. 캐릭터 모델링은 blender가 sketch up  보다 최적화 되었기에 export 를 위해서 Blender를 사용하였다. 사실 위에 언급한 unboring.net의 샘플도 blender 모델을 찾다 발견한 것이다.
이미 짜여진 각본.

먼저!! export add-on설치가 우선이다.
공식 three.js github에 있는 export addon을 참고해도 좋지만
가 존재한다!!  역시 참고 할 만하다. 필자는 위에 블로그를 참고하여 설치했다. 그리고 export json까지 하자.
마음이 급하신 분은 2:50 부터 보시면 export 과정만 보실 수 있습니다.

krpano Three.js 의 소스변경

샘플 소스 중에 'three.krpanoplugin.js'파일을 열자. build_scene() 함수가 있을 것이고 그 안에

// load 3d objects load_object_json("monster.js", true, {ath:+30, atv:+15, depth:500, scale:0.1, rx:180, ry:60 ,rz:0, ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }});

코드를 수정하자. monster.js 는 'eva-textured.json' 으로 변경하고 저장하면 끝!!
이 아니다.  이제 시작이다.

krpano Three.js 의 소스안의 three.js 변경
krpano 샘플의 three.js 는 현재 최신버전 [r84] 보다 이전인 r71을 사용하고 있고, 따라서 새로 만든 json 로딩에 에러를 뱉는다. 기존 Three.MorphAnimMesh() 함수내에서 발생되는 문제로 파악된다. 정확한 이유는 아시는분은 필자에게 알려주세요. 
 three.js git hub를 통해 최신버전인 r84로 three.min.js 를 변경하자. 그리고 저장하고 리로딩하면 끌!!!

krpano Three.js 의 소스안의 three.js Method 변경
끝이 아니고, 기존에 등록된 3d model 들이 로딩이 안되거나 animation 작동이 안 될 것이다. 알아본 봐로는 loader를 변경하여 생기는 문제이며, Three.MorphAnimMesh 함수가 변경되었다. Animation 을 다루게 되면 글이 길어지기 때문에 unboring.net의 캐릭터를 로딩하는 것으로 본문을 마치려 한다.

load_object_json 함수를 변경하자.

load_object_json("eva-textured.js",    false, {ath:+30,  atv:+20,  depth:500, scale:200.0, rx:180, ry:-70, rz:0,   ondown:function(obj){ obj.properties.scale *= 1.2; update_object_properties(obj); }, onup:function(obj){ obj.properties.scale /= 1.2; update_object_properties(obj); }} );


와 같이 변경하여 callback 함수를 없애자. obj.material.color.setHex 함수도 사용할 수가 없다.


소스 정리나 수정이 곳곳에서 필요하지만 일단 오늘의 목적인 모델을 krpano 내에 그려지는 것을 확인할 수 있다.


마침말

krpano내에 플러그인을 만들어서 three.js 를 이용하여 모델을 그릴 수 있지만 클라우스형이 개발한 시점과 현재의 버전이 맞지 않아 번거로운 작업이 필요했다.
three.js 도 krpano도 성정하고 있고, 유료버젼으로 나오지 않는한 정기적인 업데이트를 기대하기는 어려운 상황이다. 이 분야에 관심이 있다면 시간과 노력을 투자하여 업데이트를 따라가는 노력이 필요하다.
three.js 에서는 skinnedMesh를 이용하여 뼈와 살을 붙여 움직이는 animation도 가능하도록 지원한다. krpano를 이용한 좀 더 활동적인 파노라마 VR을 제공할 수 있지만 모델의 개발 비용과 라이센스 문제. 그리고 animation을 위한 좀 더 편리한 krpano플러그인 개발이 과제이다.

또 다른 문제는 Web GL을 호환해야 모델을 제대로 볼 수 있다는 것이다.
krpano.js 를 로딩하고 파노라마 로딩을 위한 embedpano() 함수를 호출 할때 아래 파라미터를
포함하여야 모델링이 제대로 그려지게 되고 보이게 된다.

html5:"webgl+only", webglsettings:{depth:true},

사실상 파노라마 VR은 3D모델링이 아닌 사진기반 착시효과에 가깝다고 볼 수 있다. 근데 3D 모델링이 아닌 곳에 3D 모델을 넣는다는 것 자체가 기이하고 신기하다고 생각했다. 좀 더 가상현실감각을 살리는 요소로서 three.js 가 krpano에 가져다줄 효과에 기대하며 테스트를 마친다.

댓글

댓글 쓰기

가장 많이 본 글