FLARToolKit Start Guide by Saqoosha.net

** http://saqoosha.net/flartoolkit/start-up-guide/ 를 번역, 의역하였습니다.
** 원작자인 Koyama Tomohiko는 주로 플래시를 이용한 웹 서비스 제작을 하시는 분 같습니다.
   http://katamari.co.jp/#/index/hiko 이곳에 다양한 작품이 들어가 있습니다.



필요한 것

 ・Adobe Flash CS3 이후 버전
FLARToolKit
Papervision3D (rev.814 이후 버전)
・Web 카메라
・인쇄한 마커와 마커 데이터

다운로드

귀찮기 때문에 필요한 파일을 모두 모아 두었습니다.
http://saqoosha.net/lab/FLARToolKit/FLARToolKit-starter-kit.zip
덧붙임(2009/2/8 1:50): 으아~, 마커 pdf 넣은 것을 잊어버렸네요. 다시 넣어두었고 마커만 업로드한 이곳을 이용해 주세요.

Introduction

Papervision3D를 사용할 수 있는 분이라면 굉장히 간단합니다. 샘플의 메인부분은 거의 Papervinios3D 설정만 하면 됩니다.
써본 적이 없는 분께도 이 샘플은 엄청 간단하므로 어렵지 않아요. 걱정하지 않으셔도 됩니다.
단, 1가지 점에만 주의해주세요. 좌표계가 Papervision3D와 조금 다릅니다. Papervision3D으로 렌더링을 하기 때문에 글로벌 좌표계는
물론 왼손좌표계이지만, 마커 위에 올려진 오브젝트는 아래의 그림과 같은 느낌으로 마커를 정면에서 볼 때에는 오른손 좌표계가 됩니다. (**원문과 동일하게 표현해놓았습니다.) 윗 방향이 +X, 오른쪽 방향이 +Y, 앞쪽이 +Z가 됩니다.(덧붙임 2009/3/2 : 죄송합니다. 틀린 부분이 있었네요..)
marker-axis

샘플 소스의 설명

순서대로 쓸수록 어려워지기 때문에 소스를 조금씩 설명하겠습니다. SimpleCube.as 가 메인으로, 그 외의 소스는 특별히 볼 필요는 없습니다. 그러므로 SimpleCube.as 를 설명해 나가겠습니다.

17 번째 줄
this.init('Data/camera_para.dat', 'Data/flarlogo.pat');

FLARToolKit 를 초기화 합니다. 첫번째 인수에는 카메라 보정 파일의 이름입니다. 이 파일은 FLARToolKit 에 들어가있는 것으로 그대로 지정해두면 됩니다. 두번째 인수는 마커의 패턴을 정의하는 파일으로, 이 파일은 사용하는 마커에 대응하는 패턴 정의 파일을 지정합니다. flarlogo.pat 는  flarlogo-marker.pdf 용입니다。

20 번째 줄
protected override function onInit():void {

init 호출한 뒤, 초기화가 문제없이 끝나면 최종적으로 이 함수가 호출됩니다. 3D 오브젝트의 설정은 이 코드 안에 작성하면 되겠습니다. 패턴 파일이 존재하지 않거나 웹 카메라가 접속되어 있지 않다면, 이 함수가 호출되기 전에 에러가 발생합니다..

24, 25 번째 줄

var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);this._plane = new Plane(wmat, 80, 80);

마커가 정상적으로 인식되고 있는지 확인하기 쉽게 마커와 동일한 사이즈의 Plane 을 만들어 보겠습니다. 빨간색 2px의 라인, 80 이 마커 사이즈 입니다. 80mm.

26 번째 줄
this._plane.rotationX = 180;

좀 전에 작성한 것과 같이 좌표계가 다르기 때문에 방향을 바꿉니다.

27 번째 줄

this._baseNode.addChild(this._plane);

통상적으로、Papervision3D에는 Scene3DaddChild 하지만, FLARToolKit 에서는 마커의 따라서 3D 오브젝트를 움직이기
위해 특별한 노드에 addChild 하는 필요가 있습니다. 그것이 _baseNode입니다. 여기에 addChild 하는 것으로 자동으로 마커를 따라 움직이도록 합니다.

36, 37 번째 줄
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);this._cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);

마커 위에 핑크색 Cube 를 올려보겠습니다. 사이즈는 40mm x 40mm x 40mm으로 마커의 반 정도의 사이즈입니다.

38 번째 줄
this._cube.z = 20;

Cube 는 원점을 중심으로 만들어져 있기 때문에 +Z 방향, 즉 마커 윗 방향으로 20 정도 이동시키면, 마커에 정확히 올려놓을 수 있습니다.

움직여 보기.

SimpleCube.fla 를 열고 퍼플리싱하면 웹 카메라로 부터 화면이 표시됩니다. 웹 카메라를 연결하지 않으면 에러가 발생합니다. 연결되어있는데도, 영상이 나타나지 않으면 우클릭 → 설정 → 카메라 아이콘 순서로 적당한 카메라를 선택해 주세요.(MacBook 이나, 내장 카메라는 USB Video Class Video 이라는 이름으로 되어 있습니다.)
인쇄된 마커 전체가 카메라에 비춰지도록 하면 오브젝트가 표시됩니다. 마커에 딱붙어 있네요. 어때요, 간단하죠?

정리

샘플을 보면 알 수 있듯, 마커를 따라 오브젝트를 움직이게 하는 것이라면 Papervision3D 으로 오브젝트를 만드는 코드를 작성하는 것 만으로 가능하기 때문에 모두 FLARToolKit를 시작해 봅시다.