Posts tagged ·

PV3D

·...

March 2, 2010 5:33 pm

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

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에 대한 튜토리얼은 이전 포스트를 참조하기 바란다.)

요번에 보여줄 성난 몬스터 애니메이션 소스인 “monster_angry.max” 파일을 제공을 해주신 브리짓닷텀의 한광재 실장님에게 감사를 전한다. 이것은 맵핑을 하지 않은 상태이다. 2009 LG 모바일 월드컵에 사용된 게임 캐릭터로 맵핑한 자료를 올리기에는 저작권에 문제가 생길지도 모르기 때문에 힘들것 같다.

필요한 소스를 먼저 다운로드 하자.
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?

February 8, 2010 11:33 pm

FLAR Tutorial 4 : DAE 파일 생성 및 적용하기.

no comments

by jin_u in 3D, FLARToolKit

The 3DMax to create and apply a DAE file.

요번에도 알고리즘은 이전 FLAR Tutorial 1 포스트에서 사용한 것을 토대로 설명할 것이다.

FLARToolKit 2.5.0 버전은 아직 분석중이고 마커 인식이 이전 버전보다 늦었는데,
엊그제 업뎃을 받고 테스트 해본 결과 마커 인식이 상당히 좋아졌다. 하지만 Flash CS4에선 작동 안

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

준비가 완료되었다. 시작해보자. 부딪혀보자.
(이 글을 쓰기 위해서 7일간 FLARToolKit, 3DMax, DAE와 사투를… -_-)

자자… 먼저, exporter를 설치해야 한다. 아래의 사이트에서 다운을 받아 설치를 하자.

Collada site : https://collada.org
Download : OpenCOLLADA for 3ds Max and Maya. Version 1.2.5

설치하면 “COLLADA based Google Warehouse Importer”와 “export”시 COLLADA로 DAE가 가능해 진다.

우선 DAE 파일이란 것은 간단하게 말하면,
PV3D의 DAE 클래스에서 Import 하며 3D를 구현하게 해주는 파일 포멧이다.

여기서 중요한 것은 3D로 작업한 것이 깔끔하게 보여지지 않는다. 그리하여 빛 처리나 객체 컨트롤을 하기 위해서는 이미지 맵핑 및 객체 이름을 명시하여 컨트롤 할 수 있도록 만들어두어야 한다.

애니메이션도 가능하다. DAE 메서드들 중에 play(), pause(), playing …등등 조금만 보면 알 것이라고 생각한다.

OpenCOLLADA를 설치하고 아래의 이미지 순서대로 작업을 하면 된다. “robot”을 검색하여 스케일을 줄이고 OpenCOLLADA DAE로 이미지까지 추출할 수 있다. Animation도 있다면 제일 하단에 체크를 하면 된다.

OpenCOLLADA를 사용하는 건 내가 작업하기 위해서 찾다가 1순위로 검색과 설치 및 테스트가 가능했기 때문이다. -_-;

코드는 아래와 같다.

package
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 08/02/2010
	 * @version 1.0.0
	 */
 
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.papervision3d.objects.parsers.DAE;
 
	public class FLAR_3DMax_DAE extends PV3DARApp
	{
 
		private var _robot:DAE;
 
		public function FLAR_3DMax_DAE() {
			addEventListener(Event.INIT, _onInit);
			init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');
		}
 
		private function _onInit(e:Event):void {
			_robot = new DAE();
			_robot.load('model/robot.DAE');
			_robot.rotationX = 90;
			_markerNode.addChild(_robot);
 
			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 {
			//_robot.rotationZ -= 1
		}
	}
}