Archive for the ·

FLARToolKit

· Category...

YouTube : JigLib physics engine + FLARToolKit

no comments

내가 효과로 생각했던 것을 위에 사람이 2개월전에 만들었다. 역시…
효과 소스는 JiglibFlash – 3D Physics Engine AS3에서 제공되는 샘플로서 FLARToolKit에 연결하여 물리 효과를 보여준 것이다.

시간내서 이 효과를 “How to”로 작성할 예정이었다. 같은 소스로써…
아니, 나는 약간 다르게 만들어 봐야 겠지??

FLARToolKit과 다른 엔진을 연결하는 방법을 포스팅해도 괜찮을것 같다.

FLAR : 3D Physics Engine

no comments

FLARToolKit을 하다 보면 기본적으로 알아야 하는 것이 좌표계이다.
아래는 가장 기본적인 좌표를 보여주는 이미지다. FLAR은 OpenGL 좌표계와 같다.

AR의 기본적인 골격 자체가 가상 공간이기 때문에 이를 위해서 필수적으로 공부해야 하는 것이 3D 물리 엔진이라고 생각한다. 비단, 플래시 말고도 요즘 시장을 보더라도 이러한 부분을 공부하지 않는다면 새롭고 재미있는 콘텐츠 기획 및 제작이 힘들것 같다.

아래는 현존하는 2개의 3D 물리 엔진이다.
WOW Engine은 요번에 서버를 날렸다고 한다. 데이터가 뻥~ 아쉽다.

WOW-Engine [EN] | Not So Stupid
JiglibFlash - 3D Physics Engine AS3

두 엔진을 사용하여 “FLAR : How to”를 진행하려하니
약간의 긴장과 설렘이 밀려온다. 아이디어는 무긍무진하다. 기본부터 하나씩 하나씩 만들어서 여러가지를 표현해 볼 생각이다.

눈요기 효과로는 역시 유투브에서 구현되는 것을 직접 보는 것이 실감난다.

관련 영상 자료 :
3D physics Demo in Flash
Browser-based physics engine for tankionline.com
So touch – Physics // 3D Flickr multi touch browser
wow-engine demo: picture

해당 링크로 들어가보면 우측에 연결되어있는 무비들도 한번씩 훑어 보면 머리속에서 복잡하게 자리잡고 있던 아이디어들이 연결되는 것을 감지할 수 있을 것이다.

그리고, 더 나아가 새로운 콘텐츠에 비주얼과 인터렉션 효과를 도입하여 만들 수 있을 것이라 생각한다. 나 역시 머리에서 회전하는 소리가 엄청나다.

아주 오래전부터 존재해왔던 소스이지만,
지금 갖고 놀기에 좋은 환경이 되었다고 생각이 들어 이렇게 포스트를 해본다.

FLARToolKit 2.5.3 : 버전업 정보

7 comments

2.5.3 (2010-May-15)

* Modify FLARMultiMarkerDetector
+ Corresponds to markerPercentWidth, markerPercentHeight
* Modify FLARSingleMarkerDetector
+ Delete debug trace()
* Update : NyARToolKit AS3(v2.5.2 alpha to v2.5.2)
* Add Wide display(16:9) sample

FLARMultiMarkerDetector 클래스에 추가된 markerPercentWidth, markerPercentHeight 에 대해서 알아보자. 먼저, 마커 코드(FLARCode 클래스)의 기본 넓이 값을 확인해 보면 아래 처럼 width=50, height=50 인것을 알 수 있다.

/**
 *
 * @param	i_width					幅方向の分割数
 * @param	i_height				高さ方向の分割数
 * @param	i_markerPercentWidth	マーカ全体(本体+枠)における、マーカ本体部分の割合(幅)
 * @param	i_markerPercentHeight	マーカ全体(本体+枠)における、マーカ本体部分の割合(高さ)
 */
public function FLARCode(i_width:int, i_height:int,i_markerPercentWidth:uint = 50,  i_markerPercentHeight:uint = 50)
{
	super(i_width, i_height);
	this._markerPercentWidth = i_markerPercentWidth;
	this._markerPercentHeight = i_markerPercentHeight;
}

이것은 마커 생성 시 테두리 비율값을 의미하며,
더 넓은 영역으로 마커 코드를 생성하여 표현 할 수 있게 되었다.

이해를 돕기 위하여 50%, 70%로 패턴을 생성하는 과정을 확인해 보자.

50% 마커 패턴 생성

70% 마커 패턴 생성

그럼 코드를 통해 버전별로 어떠한 계산 방식으로 테두리 비율을 체크하는지 살펴보자.

FLARToolKit 2.5.2 : FLARMultiMarkerDetector.as

/**
 * 複数のマーカーを検出し、最も一致するARCodeをi_codeから検索するオブジェクトを作ります。
 *
 * @param i_param
 * カメラパラメータを指定します。
 * @param i_code
 * 検出するマーカーのARCode配列を指定します。
 * 配列要素のインデックス番号が、そのままgetARCodeIndex関数で得られるARCodeインデックスになります。
 * 例えば、要素[1]のARCodeに一致したマーカーである場合は、getARCodeIndexは1を返します。
 * @param i_marker_width
 * i_codeのマーカーサイズをミリメートルで指定した配列を指定します。 先頭からi_number_of_code個の要素には、有効な値を指定する必要があります。
 * @param i_number_of_code
 * i_codeに含まれる、ARCodeの数を指定します。
 * @throws NyARException
 */
public function FLARMultiMarkerDetector(i_param:FLARParam, i_code:Vector., i_marker_width:Vector., i_number_of_code:int)
{
	initInstance(i_param,i_code,i_marker_width,i_number_of_code);
	return;
}
protected function initInstance(
	i_ref_param:FLARParam,
	i_ref_code:Vector.,
	i_marker_width:Vector.,
	i_number_of_code:int):void
{
	var scr_size:NyARIntSize=i_ref_param.getScreenSize();
	// 解析オブジェクトを作る
	var cw:int = i_ref_code[0].getWidth();
	var ch:int = i_ref_code[0].getHeight();
 
	// 枠線の割合(ARToolKit標準と同じなら、25 -> 1.0系と数値の扱いが異なるので注意!)
	var markerWidthByDec:Number = 25;
	var markerHeightByDec:Number = 25;
 
	// ...
}

FLARToolKit 2.5.3 : FLARMultiMarkerDetector.as

/**
 * 複数のマーカーを検出し、最も一致するARCodeをi_codeから検索するオブジェクトを作ります。
 * 
 * @param i_param
 * カメラパラメータを指定します。
 * @param i_code
 * 検出するマーカーのARCode配列を指定します。
 * 配列要素のインデックス番号が、そのままgetARCodeIndex関数で得られるARCodeインデックスになります。 
 * 例えば、要素[1]のARCodeに一致したマーカーである場合は、getARCodeIndexは1を返します。
 * @param i_marker_width
 * i_codeのマーカーサイズをミリメートルで指定した配列を指定します。 先頭からi_number_of_code個の要素には、有効な値を指定する必要があります。
 * @param i_number_of_code
 * i_codeに含まれる、ARCodeの数を指定します。
 * @throws NyARException
 */
public function FLARMultiMarkerDetector(i_param:FLARParam, i_code:Vector.<FLARCode>, i_marker_width:Vector.<Number>, i_number_of_code:int)
{
	initInstance(i_param,i_code,i_marker_width,i_number_of_code);
	return;
}
protected function initInstance(
	i_ref_param:FLARParam,
	i_ref_code:Vector.<FLARCode>,
	i_marker_width:Vector.<Number>,
	i_number_of_code:int):void
{
	var scr_size:NyARIntSize=i_ref_param.getScreenSize();
	// @todo この部分にマーカーの幅や高さ、枠線の割合がすべて一致するかのチェックを入れる
	// もしくは、FLARCodeの生成時に強制的に同一の数値を入力する事
 
	// 解析オブジェクトを作る
	var cw:int = i_ref_code[0].getWidth();
	var ch:int = i_ref_code[0].getHeight();
 
	// 枠線の割合(ARToolKit標準と同じなら、25 -> 1.0系と数値の扱いが異なるので注意!)
	var markerWidthByDec:Number = (100 - i_ref_code[0].markerPercentWidth) / 2;
	var markerHeightByDec:Number = (100 - i_ref_code[0].markerPercentHeight) / 2;
 
	// ...
}

버전별 클래스 하단의 두줄을 비교해 보면 알겠지만,
FLARToolKit 2.5.3에선 마커의 테두리 비율을 코더가 조절하여 사용할 수 있게 되었다.

그리고, 와이드형 샘플 코드가 추가 되었다. 아래 이미지는 16×9 카메라 파라미터를 사용한 것이다.

현재 5개의 마커로 2개의 animation 3D dae 파일과 1개의 3D dae 파일, 2개의 이미지로 패키지화 하여 퍼포먼스를 체크해 봤는데, 무겁다는 느낌을 받고 있다.

물론, dae 파일은 최적화가 되어있지만 많은 양의 마커 인식과 표현에는 한계가 있기 마련이다.
실험적으로 퍼포먼스 테스트를 해본 결과다.

아래 이미지가 5개의 마커를 사용한 패키지형 콘텐츠이다.

요즘들어 부쩍? 국내에 재미난 Flash Augmented Reality 프로모션 사이트들이 등장하고 있다.

관심있는 분들은 아래 사이트에 가서 마커를 프린트하여 게임 이벤트에 참여해 보길 바란다.
가입을 해야 하는데, 모르는 사람은 개인 정보 누출을 염려할 듯 하지만 그 만한 가치가 있다. ^^

Welcome to HYUNDAI, Official 2010 FIFA World Cup™ Partner

플래시 개발자가 누군지 아는 사람 코멘트 달아주세요~ ^^