Posts tagged ·

FLARToolKit

·...

March 3, 2010 7:28 pm

FLARToolKit 2.5.0 : 마커 감지 및 성능 테스트

by jin_u in 3D, Adobe_Flash, FLARToolKit

Marker Detecting and Performance Checking.

[ 마커 감지 테스트 ]

Flash Builder 4를 사용하여 FLARToolKit 2.5.0 버전을 테스트 해보았다. 마커 감지에 대해서는 이전보다 확실히 좋아진 것을 느낄 수 있다. 빛이 들어왔을 경우에도 보다? 잘 잡히는 것 같은 느낌이다. 그리고 일반 마커로만 사용했고, NyIdMarker도 시간이 되면 한번 테스트 해봐야 겠다.

[ 성능 테스트 ]

기본적으로 .DAE를 최초에 로딩할때 방대한 양의 데이터를 읽어들이기에 멈춤 현상이 있었다. 하지만 요번 FLARToolKit 2.5.0 버전에서는 전혀 기다릴 필요 없이 바로 뜨는 것을 확인 할 수 있다. 그리고 퍼포먼스가 확실히 좋아졌다는 걸 실감할 수 있다. 감지가 잘되기 때문에 좌우로 흔들었을 경우도 놓치지 않고 화면에 바로바로 그려주는 렌더링이 대단하다.

요즘 잠을 못자고 저녁 늦게 야식을 먹었더니 얼굴이 바로 부었네. 쯥…!
얼굴 상태보고 영상 찍어야 겠다. 귀신같다는 소리도 들은거 같은데.. ㅡㅡ

어쨌든, 성능이 향상되도록 힘쓰고 있는 멤버들에게 심심찮은 감사를 전한다.
덕분에 재미있게 시간을 보내고 있다. ^^

아래에 라이센스에 대한 부분도 있으니 체크.

FLARToolKit License

FLARToolKit is available for download and use under two licenses :

GPL License

FLARToolKit can be used for free under the GNU General Public License, v3. Source code of applications using FLARToolKit under the GPL must be provided free of charge on request.

Commercial License

Source code of FLARToolKit applications can be protected with a commercial license, offered exclusively by ARToolworks. Applications using the commercial license do not have to provide source code, but must pay a licensing fee. Contact ARToolworks at sales@artoolworks.com for more information.

tags: AR, as3, checking, detecting, FLAR, FLARToolKit, marker, performance

No comment?

March 2, 2010 5:33 pm

FLAR Tutorial 6 : 타이포 효과 – Typo Effect

no comments

by jin_u in 3D, Adobe_Flash, FLARToolKit

Typo Effects Using Augmented Reality.

요번 튜토리얼은 뻔한 것만 했더니 식상해서 텍스트 효과를 만들어 보았다. PV3D에서 제공하고 있는 것을 이용한 것이니 쉽게 접근할 수 있을 듯 하다. 여기서 체크해야 할 것이 있다면, Camara에 대한 부분이 FLAR과 PV3D는 다르다는 것이다.

음.. 어떻게 설명을 해야 할지는 잘 모르겠다. 같은 공간이지만 트렉킹이 존재하기 때문에 이 부분에 대해서는 나중에 정리가 좀 되면 따로 설명을 하겠다. 실은 아직 나도 잘 모르겠다. -_-;

효과는 위에서 보듯이 마커의 x 좌표를 사용해서 rotationX 축을 변경시켜주는 단순한 효과로 움직임을 표현하고 마커가 사라지게 되면 텍스트가 문맥을 맞춰서 배치가 되는 것을 확인 할 수 있을 것이다.

필요한 소스를 먼저 다운로드 하자. : 마커 변경 됨.
Flash Source, Classes, Marker Image

아래 클래스는 PV3D에서 지원해주는 그래픽 폰트 클래스로 효과를 줄 것이다.
Letter3DMaterial
Text3D
HelveticaBold

그럼 기본적인 코드를 살펴보자.
도큐멘트 클래스 확장 클래스인 “PV3DARApp.as” 이다.

private function _onEnterFrame(e:Event = null):void {
	_capture.bitmapData.draw(_video);
 
	var detected:Boolean = false;
	try {
		detected = _detector.detectMarkerLite(_raster, 80) && _detector.getConfidence() > 0.5;
	} catch (e:Error) {}
 
	if (detected) {
		_detector.getTransformMatrix(_resultMat);
		_markerNode.setTransformMatrix(_resultMat);
		updateMarkerNode(true);
	} else {
		updateMarkerNode(false);
	}
 
	_renderer.render();
}
 
protected function updateMarkerNode(flag:Boolean = true):void
{
	/** 하위 클래스에서 처리하도록 함 */
}

위 코드를 살펴보면 detected 멤버를 확인 할 수 있는데, 이 멤버가 좌표와 마커 인식을 처리에 대한 Boolean 리턴값을 갖는 것으로서 이것을 통하여 하위 객체인 “PV3D_FontEffect.as” 의 updateMarkerNode(flag:Boolean)를 호출하여 아래와 같이 제어하게 되는 것이다.

/** 상위 클래스에서 Boolean 값으로 처리를 하도록 설정이 되어있다. */
protected override function updateMarkerNode(flag:Boolean = true):void
{
	if (flag)
	{
		if (!isVisibleMarker)
		{
			/** 분산 효과 처리 */
			dispersionWords(words1);
			dispersionWords(words2);
			dispersionWords(words3);
 
			isVisibleMarker = true;
		}
	}
	else
	{
		if (isVisibleMarker)
		{
			/** 초기화 효과 처리 */
			writeWords(words1);
			writeWords(words2);
			writeWords(words3);
 
			isVisibleMarker = false;
		}
	}
 
	if (_markerNode.x > 0)
		dispObj3D.rotationZ += 2;
	else
		dispObj3D.rotationZ -= 2;
}

위와 같이 작성이 되면, 마커가 보이고, 안 보이고를 체크하여 효과가 이루어지는 것이다.
타이포의 분산 또는 쓰기 효과를 처리할 수 있게 된다.

요번 포스트도 단순한 효과지만 같은 것만 계속하니 지루해서 만들어 보았다. ^^

작성 후기:
이 코드는 내가 어디에서 본 것을 토대로 작성한 것이다. wonderfl에서 초기 코드를 본 것 같다. 그것으로 FLAR 형태로 변경을 하여 효과를 만들어 본 것이다. 좀 더 생각하면 PV3D에서 효과 낸 것을 자유자재로 FLAR로 가져와 컨트롤 할 수 있을 듯 싶다. 실험적인 것들을 더 만들어 봐야 겠다.

tags: 3DMax, AR, as3, DAE, FLAR, FLARToolKit, flash, marker, PV3D

No comment?

February 26, 2010 6:44 pm

FLAR Tutorial 5 : 애니메이션 .DAE 파일 생성 및 재생.

no comments

by jin_u in 3D, Adobe_Flash, FLARToolKit

The 3DMax to create and apply to the animated a .DAE file.

요번에는 애니메이션이 되는 .dae 파일을 생성해서 아래와 같은 효과를 낼 것이다.
(3DMax와 Collada에 대한 튜토리얼은 이전 포스트를 참조하기 바란다.)

필요한 소스를 먼저 다운로드 하자.
Flash Source, Classes, Marker Image

이전의 튜토리얼에서와 같이 Collada export를 사용하여 애니메이션을 체크하여 .DAE 파일을 생성하면 된다.
중요한건 각 프레임별로 모션이 적용되어 있어야 한다. 이 .DAE 파일은 64 프레임으로 애니메이션이 되어있다.

위 그림 처럼 Collada .DAE로 저장을 하면…
이전에 보았던 Animation checkbox를 선택하고 Export를 하면 아래와 같은 코드가 생성이 된다.

<library_animations>
<animation>
  <source id="node-ChamferBox358_rotationX.ANGLE-input">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-input-array" count="65">0.03333333 0.06666667 0.1 0.1333333 0.1666667 0.2 0.2333333 0.2666667 0.3 0.3333333 0.3666667 0.4 0.4333333 0.4666667 0.5 0.5333333 0.5666667 0.6 0.6333333 0.6666667 0.7 0.7333333 0.7666667 0.8 0.8333333 0.8666667 0.9 0.9333333 0.9666667 1 1.033333 1.066667 1.1 1.133333 1.166667 1.2 1.233333 1.266667 1.3 1.333333 1.366667 1.4 1.433333 1.466667 1.5 1.533333 1.566667 1.6 1.633333 1.666667 1.7 1.733333 1.766667 1.8 1.833333 1.866667 1.9 1.933333 1.966667 2 2.033333 2.066667 2.1 2.133333 2.166667</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-input-array" count="65" stride="1">
		<param name="TIME" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  <source id="node-ChamferBox358_rotationX.ANGLE-output">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-output-array" count="65">0 0 0 0 0 0 0 0 0 0 0 0 0 0.9858586 3.336753 6.142659 8.493553 9.479412 8.493554 6.14266 3.336753 0.9858589 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.516572 4.086728 3.464416 2.726624 1.950338 1.212546 0.5902338 0.1603896 0 0 0 0 0 0 0 0 0 0 0</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-output-array" count="65" stride="1">
		<param name="ANGLE" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  ...
  <sampler id="node-ChamferBox358_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-ChamferBox358_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-ChamferBox358_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-ChamferBox358_rotationX.ANGLE-interpolation"/>
  </sampler>
  <sampler id="node-Dummy21_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-Dummy21_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-Dummy21_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-Dummy21_rotationX.ANGLE-interpolation"/>
  </sampler>
  ...
  <channel source="#node-ChamferBox358_rotationX.ANGLE-sampler" target="node-ChamferBox358/rotationX.ANGLE"/>
  <channel source="#node-Dummy21_rotationX.ANGLE-sampler" target="node-Dummy21/rotationX.ANGLE"/>
  ...
</animation>
</library_animations>

코드를 잘 보면 프레임 수 만큼의 해당 되는 태그들이 뽑힌것을 알 수 있다.
그럼, 여기까지 되었다면 플래시 액션스크립트로 아주 간단하게 효과를 주면 된다.

코드는 아래와 같다.

package 
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 26/02/2010
	 * @version 1.0.0
	 */
 
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.papervision3d.objects.parsers.DAE;
 
	public class FLAR_3DMax_Ani_DAE extends PV3DARApp 
	{
 
		private var _monster:DAE;
 
		public function FLAR_3DMax_Ani_DAE() {
			addEventListener(Event.INIT, _onInit);
			init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');
		}
 
		private function _onInit(e:Event):void {
			_monster = new DAE();
			_monster.load('model/monster.dae');
			_monster.scale = 7;
			_monster.z = 30;
			_monster.rotationX = 90;
			_markerNode.addChild(_monster);
 
			addEventListener(Event.ENTER_FRAME, _update);
 
			mirror = !mirror;
			stage.addEventListener(MouseEvent.CLICK, _onClick);
		}
 
		private function _onClick(e:MouseEvent):void {
			mirror = !mirror;
		}
 
		private function _update(e:Event):void {
 
			if (_markerNode.visible)
			{
				if (!_monster.playing)
				{
					_monster.play();
				}
			}
			else
			{
				_monster.pause();
			}
		}
	}
}

부연 설명을 하자면, 마커가 보일때 애니메이션이 진행중임를 체크한 후 진행중이 아니면 진행시키고, 마커가 안보인다면 애니메이션을 중단 시킨다. 이렇게 하면 스크린에서 마커를 놓쳤다고해도 모션이 중간에 사라지는 것을 막을 수있다.

이것 말고도 마커를 인식 실패해서 껌뻑 거림을 막기 위해 처리하는 방법도 있는데, 이것은 다음 포스팅에서 간단하게 알아보자.

작성 후기 :
요즘 FLARToolKit 2.5.0이 지속적으로 업뎃이 되서 살펴보고 있다. FlashPlayer 10.0 버전이라 접근을 할까 말까 고민하고 있다. 대중적인 컨텐츠를 개발하게 된다면 아무래도 FlashPlayer 9.0 버전을 사용해야 할 듯 하다. 시연을 하면서 이곳 저곳을 돌아다녀 보았는데… FlashPlayer 버전에 대해서 언급을 하는 것을 보았기 때문에 내가 이런 생각을 하고있는지 모르겠다.

tags: 3DMax, AR, as3, DAE, FLAR, FLARToolKit, flash, marker, PV3D

No comment?

Older Posts »

jin_u as blog

This Blog is My Second Life.

FLARToolKit

FLARToolKit 2.5.0 : 마커 감지 및 성능 테스트

Marker Detecting and Performance Checking.

FLARToolKit License

GPL License

Commercial License

FLAR Tutorial 6 : 타이포 효과 – Typo Effect

Typo Effects Using Augmented Reality.

FLAR Tutorial 5 : 애니메이션 .DAE 파일 생성 및 재생.

The 3DMax to create and apply to the animated a .DAE file.