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

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

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

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

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

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

58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

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)를 호출하여 아래와 같이 제어하게 되는 것이다.

153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

/** 상위 클래스에서 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로 가져와 컨트롤 할 수 있을 듯 싶다. 실험적인 것들을 더 만들어 봐야 겠다.

요번에는 애니메이션이 되는 .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 버전에 대해서 언급을 하는 것을 보았기 때문에 내가 이런 생각을 하고있는지 모르겠다.

요번에도 알고리즘은 이전 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
		}
	}
}

DAE와 관련되서는 아래의 클래스들을 참조하면 된다. 상당히 많기 때문에 전부 사용해 보진 않았다. -_-
나 역시 작업할때 마다 필요에 의해서 찾아서 봐야겠다. 우선 한번 눈으로 익혀두는 센스~

(좌표가 안보이면 조금더 선명한 이곳에서 확인)

원문 포스트에 보면 댓글 중 Stijn Debacker가 작성한 글을 살펴보면,
아래와 같이 코드 변경을하여 mirror 효과를 주었을때도 x, y, z의 좌표값이 디스플레이 좌표계로
출력되는 것을 확인 할 수 있었다. 이때, 객체 역시 같은 좌표값으로 이동하는 것을 확인할 수 있다.

I found my solution!
for mirroring the image of the webcam:
in FlarBaseApplication.as change the following

_flarBitmap.scaleX = (_flarBitmap.scaleY = 2)*-1;
_flarBitmap.x = 640;

Put some ()’s arround the scaleY thingy and mirror it using *-1. To see the image move the image, in this case 640 pixels on the x-axe!

Test the movie, you will see that you will be looking at a normal mirror but that, when if you move your marker it moves in the opposite direction!
Solution:
In the file PVFLARBaseApplication.as

at the bottom of the file you will find a roster of variables! it looks like this:

m.n11 = r.m01; m.n12 = r.m00; m.n13 = r.m02; m.n14 = r.m03;
m.n21 = -r.m11; m.n22 = -r.m10; m.n23 = -r.m12; m.n24 = -r.m13;
m.n31 = r.m21; m.n32 = r.m20; m.n33 = r.m22; m.n34 = r.m23;

Change it into:

m.n11 = -r.m00; m.n12 = -r.m01; m.n13 = -r.m02; m.n14 = -r.m03;
m.n21 = -r.m10; m.n22 = -r.m11; m.n23 = -r.m12; m.n24 = -r.m13;
m.n31 = r.m20; m.n32 = r.m21; m.n33 = r.m22; m.n34 = r.m23;

And everything will work

작성 후기:
다음 포스트는 Collada DAE에 관련된 글을 작성할지 이 예제를 갖고 트렌지션을 작성할지 고민중이다. 흠~

요번에는 지난번에 말했던 다중(이하 ‘멀티’로 표기) 마커들에 대한 부분들을 다뤄볼까 한다.

요번 알고리즘으로 멀티 마커에 의한 멀티 객체 표현을 다룬 squidder.com의 소스를 사용할 것이다. 아래 관련 문서와 소스를 다운 받자.

원문 포스트 :
FLAR how-to: Multiple instances of multiple markers.
다운로드 :
Download Source Code

우선 어떻게 작동이 되는지와 좌표계가 어떻게 출력이 되는지 아래 영상으로 우선 확인해 보자.

하단의 trace 결과를 보면 x, y, z축의 값을 알 수 있다.
일반 웹캠으로는 퀄리티와 속도가 안나온다. 하나 사야하나... 흠

패키지 구조는 다음과 같다.

Package
Class public class MultiFLARExample
Inheritance MultiFLARExample →  PVFLARBaseApplication → FLARBaseApplication

요번에도 다이어그램 문서와 다이어그램을 확인해 봐야 한다.
(분석하는데 반나절이란 시간을 소요했다.)

아래와 같은 API 문서와 다이어그램을 살펴본 후에 중요한 작동 포인트를 살펴보겠다.

API Documentation :
FLARSquidderKit/docs/index.htm

Basic Diagram :

분석하기 위해서 다이어그램을 만들었는데, 이거 주인에게 말하고 해야 하는게 아닌가 싶다.
하지만 많은 사람들이 한눈에 구조를 파악할 수 있게 만들어준 것을 고마워 할지도 모르겠다는 생각도 해본다. ㅡㅡ;

소스와 api 문서와 다이어그램을 자세히 보았다면 어떤 구조인지 알 것이다.
실행 순서를 파악하는 것도 중요하다. 아래는 작동되는 순서를 출력한 결과이다.

## MultiFLARExample : constructor
## PVFLARBaseApplication : constructor
## FLARBaseApplication : constructor
## FLARBaseApplication : _loadMarkersAndCamera()
## MultiFLARExample : _init( [Event type="complete" bubbles=false cancelable=false eventPhase=2] )
## PVFLARBaseApplication : _init( [Event type="complete" bubbles=false cancelable=false eventPhase=2] )
## FLARBaseApplication : _init( [Event type="complete" bubbles=false cancelable=false eventPhase=2] )
## FLARBaseApplication : _setUpMarkers()
## FLARBaseApplication : _attachWebCam()
INFO: Papervision3D 2.1 rev920 (August 11th, 2009)
 
## PVFLARBaseApplication : startRendering()
## PVFLARBaseApplication : _onRenderTick(event)
## MultiFLARExample : _detectMarkers()
## PVFLARBaseApplication : _onRenderTick(event)
## MultiFLARExample : _detectMarkers()

기본 셋팅이 완료되면 PVFLARBaseApplication.startRendering() 메서드가 작동이 되면서 반복문(Event.EnterFrame)이 시작된다.

반복에서 사용되는 메서드 호출은 PVFLARBaseApplication._onRenderTick(), MultiFLARExample._detectMarkers() 두 곳이다. 여기에서 멀티 객체와 멀티 마커 인식을 체크하는 것이다.

코드 중에 PVFLARBaseApplication.transformMatrix( target : DisplayObject3D , r:FLARTransMatResult) 메서드가 있다. 이 부분에서 좌표값을 확인 할 수 있다.

화면 표시 방식을 mirror(역 방향 처리) 시키면 x 축의 +, -가 반대로 출력이 되는 현상이 있어서 우선은 헛갈리겠지만 반대로 제스처(행동, 행위)를 해줘야 했다. 반대로 계산하도록 만들려다가 좌표계가 복잡한 관계로 그냥 두었다. ㅡㅡ;

잘 짜여진 구조이긴 한데, 이걸 간단히 설명을 하자니 힘들고,
자세히 설명하자니 깊이 파고 들어가야 하는데… 우선 시작해 보자.

우선 아래의 구조를 좀 더 자세히 살펴봐야 한다.
MultiFLARExample → PVFLARBaseApplication → FLARBaseApplication

위 상속 구조에서 핵심적으로 작동하는 것은 FLARBaseApplication 이라고 할 수 있다. 이곳에서 카메라 인식 및 멀티 마커 등록과 작동이 행해진다.
내부 구조에서 다음과 같은 객체 속성 멤버를 확인해야 한다.

/** flar::FLARBaseApplication */
protected var _flarDetector : FLARSquidderMarkerDetector;
protected var _baseLoader : BaseLoader;
protected var _markers : Array;

‘protected‘로 되어있다는 것은 상속 구조에서 접근 허용을 뜻한다. 그리고 메서드일 경우,
상위에서 호출이 되면 최초 클래스의 동일 ‘override‘된 메서드도 같이 호출이 된다.
아래 코드에서 선언된 이벤트 같은 경우를 말한다. 이곳에서는 아래 코드 부분의 이벤트가 중요한 역할을 한다.

/** flar::FLARBaseApplication */
protected function _init( event : Event ) : void {
	// ...
	_flarDetector = new FLARSquidderMarkerDetector( _flarParam , _flarCodes , _sizes , _sizes.length );
	_flarDetector.addEventListener( FLARDetectorEvent.MARKER_ADDED , _handleMarkerAdded );
	_flarDetector.addEventListener( FLARDetectorEvent.MARKER_REMOVED , _handleMarkerRemove );
}
protected function _handleMarkerAdded( event : FLARDetectorEvent ) : void {
}
protected function _handleMarkerRemove( event : FLARDetectorEvent ) : void {
}
 
// 최상위 클래스에서 이벤트가 발생하면 MultiFLARExample  클래스의 메서드가 호출이 일어난다.
 
/** MultiFLARExample */
override protected function _handleMarkerAdded( event : FLARDetectorEvent ) : void {
	// 큐브 생성 이벤트 핸들러
	_addCube( event.codeId , event.codeIndex );
}
override protected function _handleMarkerRemove( event : FLARDetectorEvent ) : void {
	// 큐브 삭제 이벤트 핸들러
	_removeCube( event.codeId , event.codeIndex );
}

핵심 포인트 : 복잡한 마커들을 사용할 경우 알고 넘어가기...
 
위 코드에서 사용된 flar:detector:FLARSquidderMarkerDetector 클래스는 FLARToolKit API를 변경한 것으로써
마커가 단순한 패턴인 경우에 퍼포먼스를 향상 시킨는 코드이다.
 
만약, 다른 복잡한 마커를 사용하게 된다면 아래 코드를 원래 계산으로 변경해야 한다.
 
var borderWidth:Number = (100 - i_code[0].markerPercentWidth) / 20;
//マーカの枠高を算出
var borderHeight:Number = (100 - i_code[0].markerPercentHeight) / 20;
↓
var borderWidth:Number = i_code[0].markerPercentWidth / 10;
//マーカの枠高を算出
var borderHeight:Number = i_code[0].markerPercentHeight / 10;

이제 하나씩 살펴보고 작동 원리를 이해해 보자.

최초에 FLARBaseApplication Constructor에서 _loadMarkersAndCamera( ) 메서드가 호출이 된다.
이곳에서 MultiFLARExample Constructor에서 등록된 _markers Array 객체에 있는 패턴들이 FLARMarkerObj 클래스에 등록을 시키고 _baseLoader 객체에 등록이 되고, load가 이루어 진 후 완료 시 _init 메서드가 호출이 되며, 최초  MultiFLARExample 클래스에서 super를 사용하여 ’override‘된 메서들이 호출이 되며 셋팅이 완료 된다.

아래 코드들을 확인해 보면 한 눈에 알 수 있을 것이다.

/** flar::FLARBaseApplication */
public function FLARBaseApplication() {
	super( );
 
	_loadMarkersAndCamera( );
}
protected function _loadMarkersAndCamera() : void {
	_baseLoader = new BaseLoader( );
	_baseLoader.addAsset( "assets/flar/camera_para.dat" , { id:"FLARCamera" , type:"Binary" } );
 
	for ( var i : int = 0 ; i < _markers.length ; i++ ) {
 
		var markerObj : FLARMarkerObj = FLARMarkerObj( _markers[ i ] );
		_baseLoader.addAsset( markerObj.markerSrc , { id:"FLARPattern" + i } );
	}
 
	_baseLoader.addEventListener( Event.COMPLETE , _init );
	_baseLoader.load();
}
 
// 여기서 알아야 할 것은 _init 메서드가 일어날 경우 추상 클래스의 메서드가 작동하는 것이 아니다.
// 최초 클래스인 MultiFLARExampled의 _init(event)가 실행이 되면서 
// super._init(event);를 사용하여 추상(구상) 클래스 초기 셋팅을 실행한다.
// 아래 코드는 실행 우선 순위로 _init 메서드의 표시하였고, 작동에 대한 설명을 달았다.
 
/** MultiFLARExample */
protected function _init( event : Event ) : void {
	super._init( event );
	// PointLight3D 객체를 생성하여 큐브 생성시 사용된다.
}
 
/** flar::PVFLARBaseApplication*/
override protected function _init( event : Event ) : void {
	super._init( event );
	// FLAR과 PV3D가 셋팅이 된다.
}
 
/** flar::FLARBaseApplication*/
protected function _init( event : Event ) : void {
	// camera_para.dat 및 *.pat 파일들을 셋팅한다.
}
protected function _setUpMarkers() : void {
	// 마커를 셋업시킨다.
}
protected function _attachWebCam() : void {
	// 카메라와 비디오를 셋팅한다.
}
 
/** flar::PVFLARBaseApplication - _init(event) 메서드에서 실행이 된다. */
public function startRendering() : void {
	// 반복 이벤트 등록.
	addEventListener( Event.ENTER_FRAME , _onRenderTick );
}
protected function _onRenderTick( event : Event = null ) : void {
	// 반복하며 비디오를 그리고 마커를 찾고, 화면을 렌더링한다.
	_flarBitmap.bitmapData.draw( _video );
	_detectMarkers();
	renderer.renderScene( scene , _camera , viewport );
}
 
/** MultiFLARExample */
override protected function _detectMarkers() : void {
	// 마커를 찾고, 좌표를 업데이트 한다.
}

이제 어떻게 작동이 되는지 파악이 될 듯 싶다.
이해를 돕기 위해 코드 대신 간략한 코멘트를 작성을 하였다. 코드는 해당 클래스를 클릭하여 보길 바란다.
만약, 파악이 안된다면 API 문서와 다이어그램을 다시 한번 살펴보길 바란다.

이렇게 하여 반복문이 실행이 되면서 마커들을 찾고 마커에 의해 반응 처리가 이루어지는 것이다.

작성 후기 :
마커가 너무 단순하면 카메라와 비디오 처리에서 비슷한 표면을 찾아 마커로 잘못 인식하는 경우가 발생한다.
좀 더 명확한 심볼을 갖고 작업을 해야 오작동을 막을 수 있다.
웹캠으로 녹화시 현재의 심볼 때문에 촬영하기 힘들었다.

기본 알고리즘은 saqoosha.net, start-up-guide로 계속 이여진다.

요번실험은 이미지 회전(Images Rotation)이다.
Download : 소스(Source), 클래스(All APIs), 마커(Marker)

결과물로 만든 것을 보면 아래와 같이 작동을 하는데, 이것은 방향을 체크하여 회전 변화를 적용한 것이다.

패키지 구조는 다음과 같다.

Package
Class public class PV3D_ImagesRotation
Inheritance PV3D_ImagesRotation → PV3DARApp → ARAppBase

PV3D_ImagesRotation 클래스를 확인해 보면,
최초에 이미지 콘텐츠를 생성하고 이미지 회전 공식을 적용시킨다.

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

private function createContent():void
{
	var i:int = 0;
	var src:String = "";
	var bam:BitmapFileMaterial;
 
	for(; i<numOfItems; i++)
	{
		src = this.imgPath + this.imgs[i];
 
		bam = new BitmapFileMaterial(src);
		bam.oneSide = false;
 
		bam.addEventListener(FileLoadEvent.LOAD_COMPLETE, this.onComplete);
		bam.addEventListener(FileLoadEvent.LOAD_ERROR, this.onError);
 
		var p:Plane = new Plane(bam, 80, 80, 2, 2);
 
		p.x = Math.cos(i * angleRate) * radius;
		p.z = Math.sin(i * angleRate) * radius;
		p.rotationY = -( i * angleRate) * (180 / Math.PI) + 270;
 
		this.primitives[i] = p;
 
		_markerNode.addChild(p);
	}
}

p 객체의 x축과 z축을 사용하여 아이템들의 총 갯수(numOfItems = 10) 만큼 생성하는 것을 볼 수 있다. 그리고 추후에 모션을 적용시키기 위하여 this.primitives Array 멤버에 객체를 잘 모셔둔다.

마지막으로 지난번 포스트에서 보았던 _markerNode에 추가를 하면 끝이다.

자, 이제 방향에 대한 것을 체크하여 회전을 시켜야 하는데,
FLARToolKit API에서 제공하는 FLARSingleMarkerDetector.getDirection() 메서드를 이용하면 된다.

105

var direct:int = _detector.getDirection() as int;

값의 리턴 구조는 아래와 같다.

var direct:int = _detector.getDirection() ← FLARSingleMarkerDetector.getDirection() ← FLARMatchPatt_Color_WITHOUT_PCA.getDirection()

mirror 코드는 코멘트 처리를 해두었는데, 아래와 같이 어떻게 인식을 하는지를 체크하기 위해서이다.
마커가 어느 방향을 향하고 있느냐에 따라 리턴 값이 변하기 때문이다.
(순서대로 0, 1, 2, 3 int 값을 리턴한다.)

return 0.	return 1.
return 2.	return 3.

개념은 좌,우(0, 3) 기울기 방향을 사용하여 아래 코드 처럼 회전 방향을 변경 시키는 코드를 만들었다.
이때 0, 3이 아닐 경우는 기존의 값을 유지하여 움직임을 멈추게 한 것이다.

103
104
105
106
107
108
109
110
111
112
113
114
115

private function repeatRender():void
{
	var direct:int = _detector.getDirection() as int;
 
	if (direct == 0)				rotateCnt++;
	else if (direct == 3)		rotateCnt--;
	else	rotateCnt = 		rotateCnt;
 
	trace("## repeatRender() - direct =", direct, " / rotateCnt =", rotateCnt);
 
	JTween.tween(JProperty, this, { angleX:rotateCnt * angleRate, time:this.time, onChange:this.imageRender } );
	JTween.tween(JProperty, this, { delay:this.time * 2, onFinish:this.repeatRender }, 1 );
}

여기서 JTween은 오래전에 직접 만든 것인데, 사용법은 TweenLite를 참고하여 만들었기 때문에 약간 비슷하다. 이 코드를 사용하지 않을 경우, 작업자가 자주 사용하는 트윈 코드를 사용하면 될 듯 싶다.

자.. 이번 포스트는 여기까지로 하자. 다음에는 몇개의 샘플들을 만들어 적용시켜 보고, 3DMax의 DAE를 사용하는 것에 대해서 포스트를 작성하려 한다.

작성 후기 :
코드를 보다가 방향에 대한 메서드를 보게 되었다. 그래서 그 방향의 값을 출력해 보니 0~3까지의 값을 갖는 것을 알게 되었고, 거기에서 “방향에 따라 이미지를 회전하는 것은 어떨까?” 라는 생각이 떠올랐다. 그래서 이런 콘텐츠를 실험적으로 만들어보게 되었고 FLARToolKit Tutorial을 하게 된 것이다.

좀 전에 아는 친구에게서 전화가 왔는데, 테두리가 없는 마커를 사용할 수 없냐는 내용이였다.
호기심이 생긴다. 관련된 “camera_para.dat” 파일이 있는지 서치를 해봐야 겠다.
자..

우선, FLARToolKit과 PV3D의 기본 배경 지식을 갖추어야 한다.

나 역시 완벽하게 구현하는 것은 아니기 때문에 내가 아는 한도 내에서 이야기를 할 것이고,
포스트 작성을 통하여 개념 및 사용법을 익혀나갈 것이다. 정리도 할겸…

코드의 설명 중 PV3D의 코드는 간단한 주석만 작성 할 것이다.
좀 더 자세히 알고 싶다면 이전에 작성한 포스트를 참고하여 같이 공부해 나가길 바란다.

우선, 기본적으로 익히기 위해서는 간단한 샘플이 좋을 듯 싶다.
“Hello World”와 같은 시작은 싫어서 이미지 한장을 준비했다. 타이포에서 그래픽으로…

FLARToolKit의 기본적인 구조를 이해하고,
PV3D를 사용하여 일반적인 면(PV3D의 Plane Class)을 생성하여 AR을 구현할 것이다.

이해를 돕기위해 기본 알고리즘은 saqoosha.net start-up-guide를 사용할 것이다.

시작은 기본 구조를 익힌 후, 마커를 생성하는 방법과 실습을 해보고,
최종 결과물인 마커와 웹캡 간의 공간에 이미지가 생성되어있는 것을 목표로 할 예정이다.

이미지 한장과 마커로는 “GC” 텍스트를 이미지 마커로 만들어 패턴으로 변환하여 적용시킬 것이다.

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

앞으로 작업을 하기 위하여 알아야할 요소들이다.

1. 카메라 파라메터 파일.
2. 패턴 파일을 생성.
3. 패턴 파일을 추적하는 코드 작성.
4. FLAR 기본 노드에 PaperVision3D 효과 추가.

1. 카메라 파라메터 파일.

FLAR 콘텐츠를 생성하기 위해서는 “camera_para.dat” 파일이 필요하다. 이 파일은 바이너리 데이터 파일로서 웹캠의 렌즈 왜곡을 해결하는 정보를 포함하고 있다. 결과적으로, 생성한 마커가 웹캠에 비춰지면 분석하여 화면에 구현해주는 핵심 파일인 것이다.

2. 패턴 파일을 생성.

saqoosha.net 에서 MakerGenerator를 Air로 만들어 두었다.
내 생각이 맞다면 FLARCode는 16 x 16일 듯 하다.
현재 여기서 다루는 알고리즘이 16 x 16의 코드 패턴을 갖기 때문이다.

어쨌든, 감사한 마음으로 우리는 사용하면 된다. 마커를 디자인하고 MakerGenerator로 패턴을 만들면 된다.

여러개의 패턴을 동시에 만들어주는 이곳(MGO2 : Marker”s” Generator Online Released!)도 있다.
내가 주로 사용하는 곳이다.

MakerGenerator를 사용하여 아래 그림과 같이 패턴 파일을 생성한다.

3. 패턴 파일을 추적하는 코드 작성.

우선 아래와 같은 문서와 다이어그램을 살펴본 후에 코드를 살펴보자.

API Documentation :
PV3D_BitmapFileMaterial/docs/index.htm

Basic Diagram :

위 다이어그램과 같이 아래의 상속 구조로 되어있다.

Package
Class public class PV3D_BitmapFileMaterial
Inheritance PV3D_BitmapFileMaterial → PV3DARApp → ARAppBase

여기서 주목해야 할 부분은 PV3D_BitmapFileMaterial 클래스의 아래 코드이다.

// Initalize application with the path of camera calibration file and patter definition file.
// カメラ補正ファイルとパターン定義ファイルのファイル名を渡して初期化。
addEventListener(Event.INIT, _onInit);
init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');

init(…) 메서드는 상위 PV3DARApp.as 파일에서 카메라와 마커(패턴) 파일을 분석하여 FLARToolKit에 의해 작동되게 되는 것이다. (자세한 것은 API Documentationd와 이나 다운로드 소스 파일을 열어서 확인하길 바란다.)

4. FLAR 기본 노드에 PaperVision3D 효과 추가.

아래 이미지를 스샷을 보면 아래와 같은 코드로 비트맵이 적용되어있다.
1. z=50;
2. z=50; rotationZ=90;
3. z=50; rotationZ=90; rotationY=90;

1.

2.

3.

소스를 먼저 확인해 보면 매우 쉽게 적용이 되는 것을 볼 수 있다.

package
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 16/01/2010
	 * @version 1.0.0
	 */
 
	import flash.events.Event;
 
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.objects.primitives.Plane;
 
	public class PV3D_BitmapFileMaterial extends PV3DARApp
	{
 
		public function PV3D_BitmapFileMaterial():void
		{
			trace("## PV3D_BitmapFileMaterial : Constructor");
 
			// Initalize application with the path of camera calibration file and patter definition file.
			// カメラ補正ファイルとパターン定義ファイルのファイル名を渡して初期化。
			addEventListener(Event.INIT, _onInit);
			init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');
		}
 
		private function _onInit(e:Event):void
		{
			trace("## PV3D_ImagesRotationDirection : _onInit");
			removeEventListener(Event.INIT, _onInit);
 
			/** 외부 이미지 파일을 로드하여 매트리얼을 생성한다. */
			var bam:BitmapFileMaterial = new BitmapFileMaterial("./images/image.jpg");
			/** 양면을 사용 설정. */
			bam.oneSide = false;
			/** Plane 객체에 이미지 사이즈 80 x 80, 2 x 2 세그먼트로 생성한다. */
			var p:Plane = new Plane(bam, 120, 120, 2, 2);
			p.z = 50;
			p.rotationX = 90;
			p.rotationZ = 90;
			/** 마커 패턴이 체크가 되면 추가한 객체가 보여지게 된다. */
			_markerNode.addChild(p);
 
			/** 캠의 보는 시점을 반대로 설정한다. */
			mirror = !mirror;
		}
	}
}

핵심적인 부분은 _onIniit 핸들러가 시작이 될때 PV3D로 원하는 효과를 만들어 _markerNode 객체에 addChild를 시키면 끝이다.

보다 깊이있게 알고 싶다면, 우리가 사용한 알고리즘에서 PV3D_BitmapFileMaterial의 상위 클래스인 PV3DARApp → ARAppBase을 분석하여야 한다. PV3D를 사용할 줄 아는 플래셔라면 쉽게 이해를 할 수 있을 듯 싶다.

작성 후기 :
이번 포스트는 정말로 알고리즘을 분석하지 않아도 원리만 이해하면,
FLARToolKit을 쉽게 사용할 수 있는 것을 보여주기 위해서 작성하였다.

아무리 어려운 원리라도 그 원리를 전부 분석하지 않고도 이해 할 수 있다면,
자신이 원하는 효과를 표현할 수 있는 것이라고 나는 생각한다.

요번 실험은 마커의 기울기를 체크하여 회전 방향에 영향주는 콘텐츠이다.

요번 작업으로 GC(Ghost Corps)마커 생성부터 효과 적용까지 강좌(튜토리얼??)를… 그냥 나름대로 정리를 하여 글을 작성해 볼까 한다.

싱글 마커를 우선 정리하고, 멀티 마커를 정리해봐야겠다.

유투브에 올리는 것도 은근 재미있네… -_-

영상 퀄리티가 너무 떨어지는 듯 하여,
새로운 캠과 저번부터 연구를 목적으로 구입하려고 했던 적외선 캠을 사야 할 듯 하다.

스샷을 찍었었지만 스네그잇을 사용하여 영상으로 만들어 유투브에 올려 보았다. 조금 더 사용하다 보면 어렴풋이 알듯하다.

조금 더 준비해서 FLARToolKit 튜토리얼에 대한 글을 준비해 볼까 한다.

공간 이미지 회전 AR 만들기.

1. 이미지 마커는 기존에 돌고 있는 마커를 하나 사용하였다.
2. BitmapFileMaterial로 이미지를 로딩한다.
3. Plane이라는 primitives에 BitmapFileMaterial를 addChild 시킨다.
4. Cube와 MaterialsList({all: PlaneArray})을 사용하여 addChild 시킨다.
5. _markerNode에 Cube를 addChild 시켜 마커가 인식이 되면 효과를 볼 수 있다도록 처리한다.
6. 이미지 회전을 0.7초에 한번씩 Angle X축으로 회전을 시켜 공간 느낌 비주얼을 살린다.

원래 아이디어는 FLARToolKit을 사용하여 마커(Marker)의 기울기를 계산하여 그 방향으로 회전하게 만들려고 하였으나, 사용법에 대한 분석과 이해도가 명확하지 않아서 우선은 실험적으로 자동 회전으로 만들었다.

좀 더 분석하여 기존에 만들었다. PV3D 콘텐츠들을 적용해 볼 생각이다.
여러가지 사용방법으로 접근 시도가 가능하기 때문에, 하나씩 분석하면서 아이디어 구상을 해봐야 겠다는 생각으로 머리속이 가득찼다.

아래는 코드는 싱글 마커 FLARToolKit 공개 소스를 분석하여 재구성하였다.
(메서드만 기재하여 전체 틀만 파악 될 수 있도록 하였다.)

public function PV3_RotationImages():void
{
	// Initalize application with the path of camera calibration file and patter definition file.
	// カメラ補正ファイルとパターン定義ファイルのファイル名を渡して初期化。
	addEventListener(Event.INIT, _onInit);
	init('Data/camera_para.dat', 'Data/flarlogo.pat');
}
 
private function _onInit(e:Event):void 
{
	this.primitives	= [];
	this.imgPath	= "./images/";
	this.imgs		= ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg","09.jpg","10.jpg"];
	this.imgLeng	= this.imgs.length;
	this.loadCount	= 0;
	this.isLeave	= true;
 
	this.setContent();
}
 
private function setContent():void
{
	var i:int = 0;
	var src:String = "";
	var bam:BitmapFileMaterial;
 
	for(; i<numOfItems; i++)
	{
		src = this.imgPath + this.imgs[i];
 
		bam = new BitmapFileMaterial(src);
		bam.oneSide = false;
 
		bam.addEventListener(FileLoadEvent.LOAD_COMPLETE, this.onComplete);
		bam.addEventListener(FileLoadEvent.LOAD_ERROR, this.onError);
 
		var p:Plane = new Plane(bam, 80, 80, 1, 1);
		p.x = Math.cos(i * anglePer) * radius;
		p.z = Math.sin(i * anglePer) * radius;
		p.rotationY = -( i * anglePer) * (180 / Math.PI) + 270;
		this.primitives[i] = p;
 
		_markerNode.addChild(p);
	}
 
	this.currentCnt = dest % this.numOfItems;
}
 
private function render():void
{
	var p:Plane;
	var leng:int = this.primitives.length;
	var i:int = 0;
	for (; i &lt; leng; i++)
	{
		p = this.primitives[i] as Plane;
 
		p.x = Math.cos((i * anglePer) + angleX) * radius;
		p.z = Math.sin((i * anglePer) + angleX) * radius;
		p.rotationY = -((i * anglePer) + angleX) * (180 / Math.PI) + 270;
	}
}

2.0 GreatWhite 버전에서만 사용된 코드이며, 이후 버전에서는 사용되지 않는 소스이다.
버전 2.1 rev920 에서 확인한 상태이며,
org.papervision3d.core.utils.virtualmouse.VirtualMouse
클래스 내부의 handleUpdate 핸들러 메서드 네임으로 작동되고 있는 것을 확인하였다.

공부도 할겸 겸사겸사 분석하면서 PV3D의 기본적인 사용법에 대한 튜토리얼을 해볼까 한다. 많이 찾아보았지만 PV3D가 인기가 별로 없고, 코드가 상당히 유동적이여서 사람들에게 반감을 사는 내용을 많이 보았다. 그래서 Away3D를 사용하는 사람이 많은것으로 보인다. 퍼포먼스에 대해서는 PV3D가 타 3D 엔진보다는 좀 떨어진다고 생각한다. 하지만 구조는 그래도 AS3.0에 가장 가깝지 않을까 조심스럽게 주장해 본다. 좀 더 파헤쳐 보고 경우에 따라 엔진을 사용하면 된다고 생각하기 때문에 우선 PV3D 2.0 Great White를 선택하였다.

현존하는 상당히 많은 오픈 소스들이 존재한다. 그 소스들을 갖고 어떻게 익히고, 응용하고, 창조해 내느냐는 개인의 역량에 달려있다고 본다. 내가 알고 싶은 것들에 대해서 튜토리얼을 하는 것이니 필요한 사람에게만 도움이 될 것이라고 생각이 든다. 어쨌든, 기존의 소스를 변경까지도 하기 때문에 업데이트를 받을때 백업을 해두어야 할 지도 모른다. ㅡㅡ;

요번 튜토리얼트는 기본적인 마우스 이벤트 처리에 대해서 알아 볼 것이고, 최종 목표는 마우스가 플래시 플레이어를 벗어났을때 PV3D 이벤트와 연동시키는 것이 목표다. 현재 마우스가 객체에 오버한 상태에서 플래시 컨텐츠 벗어 났을때 체크를 할 수가 없다. 이 부분에 대해서 기존 코드에 추가 및 수정을 좀 할 것이다.

우선, 시작에 앞서 기본적인 셋팅(viewport, scene, camera, renderer)에 대한 지식은 있어야 한다. 솔직히 아직 나도 정확히 알고 있지 않다. 내부 구조를 보았지만 상당한 구조를 갖고 있어 완벽하게 알지 못한다. 완벽하게 알지 못해도 사용하는데는 전혀 문제가 되지 않으니 염려하지 않아도 된다. 자 일단 시작해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

package 
{
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	...
 
	public class ModifyVirtualMouse extends Sprite
	{
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
 
		public function ModifyVirtualMouse():void
		{
			this.init();
		}
 
		private function init():void
		{
			// 화면 렌더링 영역 생성.
			this.viewport = new Viewport3D(600, 400, false, true);
			addChild(this.viewport);
 
			// 기본적으로 필요한 인스턴스로 각각의 파트를 담당한다. 
			// 순서대로 화면, 카메라, 화면 랜더링 임.
			this.scene = new Scene3D();
			this.camera = new Camera3D();
			this.renderer = new BasicRenderEngine();
 
			// 컨텐츠 셋팅.
			this.setContent();
		}
 
		...
 
		private function onEnterFrame(e:Event):void
		{
			...
 
			// 화면 랜더링
			this.renderer.renderScene(this.scene, this.camera, this.viewport);
		}
}

이것이 기본 골격이다. 많이 보았을 것이라 예상된다. 이제 본격적으로 마우스 이벤트에 대해서 알아보자.

org.papervision3d.events 패키지에 있는 InteractiveScene3DEvent.as 이벤트들을 사용할 수 있다. 이벤트는 아래와 같이 정의되어 있다.

1
2
3
4
5
6
7
8
9

public static const OBJECT_CLICK:String = "mouseClick";
public static const OBJECT_DOUBLE_CLICK:String = "mouseDoubleClick";
public static const OBJECT_OVER:String = "mouseOver";
public static const OBJECT_OUT:String = "mouseOut";
public static const OBJECT_MOVE:String = "mouseMove";
public static const OBJECT_PRESS:String = "mousePress";
public static const OBJECT_RELEASE:String = "mouseRelease";
public static const OBJECT_RELEASE_OUTSIDE:String = "mouseReleaseOutside";
public static const OBJECT_ADDED:String = "objectAdded";

많인 본듯한? 문자들이 보인다. 맞다 바로 AS1.0에서 사용하였던 이벤트 문자를 사용하였다. 액션스크립트의 기본적인 지식은 가추고 있다고 판단하고 설명은 넘어가겠다. AS3.0에서는 “MouseEvent.MOUSE_OVER” 라고 사용한다면 PV3D에서는 “InteractiveScene3DEvent.OBJECT_OVER” 라고 사용해야 한다. 그럼 간단하게 아래와 같이 코드를 작성해 보자. 필요한 부분에 한해서 주석을 달아두었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

package 
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 28/11/2008
	 */
 
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
 
	public class ModifyVirtualMouse extends Sprite
	{
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
		private var colorMaterial:ColorMaterial;
		private var primitive:Plane;
 
		public function ModifyVirtualMouse():void
		{
			this.init();
		}
 
		private function init():void
		{
			// 화면 렌더링 영역 생성.
			this.viewport = new Viewport3D(600, 400, false, true);
			addChild(this.viewport);
 
			// 기본적으로 필요한 인스턴스로 각각의 파트를 담당한다. 
			// 순서대로 화면, 카메라, 화면 랜더링 임.
			this.scene = new Scene3D();
			this.camera = new Camera3D();
			this.renderer = new BasicRenderEngine();
 
			// 컨텐츠 셋팅.
			this.setContent();
		}
 
		private function setContent():void
		{
			// 컬러 메티어리얼 크기
			var value:Number = 100
 
			// 컬러 메티어리얼을 생성한 후 인터랙티브를 사용할 것을 선언한다.
			this.colorMaterial = new ColorMaterial (0xFFFFFF);
			this.colorMaterial.interactive = true;
 
			// Plane 객체를 생성하여 화면에 붙여 넣는다.
			this.primitive = new Plane(colorMaterial, value, value, 2, 2);
			this.scene.addChild(this.primitive);
 
			// Plane 객체에 인터랙티브 마우스 오버, 아웃 이벤트를 선언한다.
			this.primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, this.onOverObject, false, 0, true);
			this.primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, this.onOutObject, false, 0, true);
 
			// 카메라를 앞으로 -250 당긴다. 기본값은 -1000 임.
			this.camera.z = -250;
 
			// 기본적으로 사용할 이벤트를 생성한다.
			this.setListener();
		}
 
		private function setListener():void
		{
			// 반복 이벤트 설정.
			addEventListener(Event.ENTER_FRAME, this.onEnterFrame, false, 0, true);
		}
 
		private function onEnterFrame(e:Event):void
		{
			// 카메라 이동을 위한 설정.
			var freeX:Number = mouseX - stage.stageWidth * .5;
			var freeY:Number = mouseY - stage.stageHeight * .5;
			var sp:Number = .05
 
			this.camera.x += (freeX - this.camera.x) * sp;
			this.camera.y += (freeY - this.camera.y) * sp;
 
			// 화면 랜더링
			this.renderer.renderScene(this.scene, this.camera, this.viewport);
		}
 
 
 
		/** 인터랙티브 오브젝트 오버, 아웃 이벤트 정의. */
		private function onOverObject(e:InteractiveScene3DEvent = null):void
		{
			this.viewport.containerSprite.buttonMode = true;
 
			this.colorMaterial.fillColor = 0x6D4201
		}
		private function onOutObject(e:InteractiveScene3DEvent = null):void
		{
			this.viewport.containerSprite.buttonMode = false;
 
			this.colorMaterial.fillColor = 0xFFFFFF;
		}
 
	}
}

샘플 1 :

위와 같이 마우스 반응에 따라 버튼 이벤트가 발생하는 것을 볼 수 있다. 여기서 하나 집고 넘어가자. PV3D의 마우스 이벤트는 결점?이라고 해야 할지 모르겠지만 마우스 손모양에 대한 처리가 조금 난해한 점이 있다.

아래와 같은 코딩을 했을 경우

109
110
111
112
113
114
115
116
117
118
119
120
121

/** 인터랙티브 오브젝트 오버, 아웃 이벤트 정의. */
private function onOverObject(e:InteractiveScene3DEvent = null):void
{
	this.viewport.containerSprite.buttonMode = true;
 
	this.colorMaterial.fillColor = 0x6D4201
}
private function onOutObject(e:InteractiveScene3DEvent = null):void
{
	this.viewport.containerSprite.buttonMode = false
 
	this.colorMaterial.fillColor = 0xFFFFFF;
}

샘플 1에서 마우스를 움직여 보면 알겠지만 객체에 마우스로 올때 마우스를 움직이지 않고 있으면 손모양으로 변하지 않을 것이다. 샘플 1은 마우스가 객체에 오버 했을 경우 마우스가 이동해야 손모양이 나오게 설정이 되어있기 때문이다. 인터랙티브 이벤트가 오버시에 “this.viewport.containerSprite.buttonMode = true, false“를 하였기 때문이다. 만약 손 모양을 무조건 보이게 할려고 한다면 핸들러에서 “this.viewport.containerSprite.buttonMode = true, false“를 삭제한 후에 “init()” 메소드에 “buttonMode” 를 추가 하면 된다. 아래 코드는 변경된 부분만을 보여주고 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package 
{
 
	...
 
	public class ModifyVirtualMouse extends Sprite
	{
		...
 
		public function ModifyVirtualMouse():void
		{
			this.init();
		}
 
		private function init():void
		{
			...
 
			// 버튼 모드 활성.
			this.viewport.containerSprite.buttonMode = true;
 
			...
		}
 
		...
 
		/** 인터랙티브 오브젝트 오버, 아웃 이벤트 정의. */
		private function onOverObject(e:InteractiveScene3DEvent = null):void
		{
			this.colorMaterial.fillColor = 0x6D4201
		}
		private function onOutObject(e:InteractiveScene3DEvent = null):void
		{
			this.colorMaterial.fillColor = 0xFFFFFF;
		}
 
	}
}

샘플 2 :

샘플 2에서 보는 것과 같이 마우스를 이동하고 객체가 마우스에 오버되자마자 바로 손모양이 나오게 될 것이다. 자, 이와 같이 두가지의 경우를 사용하는데 이것은 작업자가 결정해야 할 문제인 것이다. 만약 샘플 2와 같이 한다면, 내가 원하지 않는 곳까지 마우스 오버가 되는 경우가 발생 할 수도 있다는 점을 인지하여야 한다.

마지막으로, 최종 목표인 마우스가 플래시 플레이어 밖으로 나갔을 때 PV3D 이벤트와 연동하는 것을 만들어 보겠다. 우선 위 샘플 2에서 중심점에서 아래로 마우스를 내려보길 바란다. 어떤가? 마우스가 플레이어 밖으로 나갔는데도 비활성화인 흰색으로 컨텐츠가 변하지 않는 것을 확인 할 수 있을 것이다. 이것은 PV3D의 마우스 이벤트의 오류라고 할 수는 없다. 그 기능이 없기 때문이다. 그래서 이 튜토리얼을 만든 것이다. 그럼 이제 코드를 변경 하겠다.

우선 추가 및 수정을 해야 하는 부분이 있다. 아래 파일을 열어 “mouseLeave” 라는 public 프로퍼티를 하나 추가하고 “handleEnterFrame(e:Event)” 메소드에 “mouseLeave” 에 대해서 추가 및 변경을 한다.

open file : org.papervision3d.core.utils.InteractiveSceneManager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

package org.papervision3d.core.utils
{
	import ...
 
	/**
	* @author John Grden
	*/
 
	/** 
	* @modifier jin_u EUM : jinustudio.com : 30/11/2008
	* 
	* @added property
	* 		- mouseLeave:Boolean
	* 
	* @modify method
	* 		- handleEnterFrame(e:Event):void
	*/
 
	public class InteractiveSceneManager extends EventDispatcher
	{
 
		...
		public var mouseLeave:Boolean = false;
 
		public function InteractiveSceneManager(viewport:Viewport3D) 
		{
			...
		}
 
		...
 
		protected function handleEnterFrame(e:Event):void
		{
			if (mouseLeave) 
			{
				handleMouseOut(currentMouseDO3D);
 
				return
			}
 
			...
		}
 
		...
 
	}
 
}

위 코드에서 변경 된 부분만을 보여준것이다. 자 이제 준비는 되었다. 위의 “InteractiveSceneManager.as” 클래스의 역할은 네이밍으로도 충분히 알 수 있듯이 인터랙티브를 담당하는 클래스이다. “handleEnterFrame(e:Event)” 메소드는 반복 수행을 하면서 가상 마우스와 컨텐츠들간의 인터렉션을 적용시키는데 그 부분을 마우스 이벤트에서 아웃 이벤트만을 따로 제어하게 한 것이다. 이러므로써 마우스가 컨텐츠에 플래시 컨텐츠 마지막 부분에 걸여있는 상태에서 아웃을 하여도 이벤트를 전달하여 처리하게 된다. 또는 컨텐츠가 영역 밖에 있을 경우 플레이어를 나가게 되면 가상 마우스가 그 위치에 존재해서 다른 객체들에게 영향을 끼치게 되는데 그 부분도 해결을 해주게 된다.

그럼 이제 마무리 코드를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

package 
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 30/11/2008
	 */
 
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
 
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
 
	public class ModifyVirtualMouse extends Sprite
	{
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
		private var colorMaterial:ColorMaterial;
		private var primitive:Plane;
 
		private var isLeave:Boolean;
 
		public function ModifyVirtualMouse():void
		{
			this.init();
		}
 
		private function init():void
		{
			// 마우스가 플레이어를 벗어났는지를 살핀다. ( true = 벗어남 )
			this.isLeave = true;			
 
			// 화면 렌더링 영역 생성.
			this.viewport = new Viewport3D(600, 400, false, true);
			addChild(this.viewport);
 
			// 기본적으로 필요한 인스턴스로 각각의 파트를 담당한다. 
			// 순서대로 화면, 카메라, 화면 랜더링 임.
			this.scene = new Scene3D();
			this.camera = new Camera3D();
			this.renderer = new BasicRenderEngine();
 
			// 버튼 모드 활성.
			this.viewport.containerSprite.buttonMode = true;
 
			// 컨텐츠 셋팅.
			this.setContent();
		}
 
		private function setContent():void
		{
			// 컬러 메티어리얼 크기
			var value:Number = 100
 
			// 컬러 메티어리얼을 생성한 후 인터랙티브를 사용할 것을 선언한다.
			this.colorMaterial = new ColorMaterial (0xFFFFFF);
			this.colorMaterial.interactive = true;
 
			// Plane 객체를 생성하여 화면에 붙여 넣는다.
			this.primitive = new Plane(colorMaterial, value, value, 2, 2);
			this.scene.addChild(this.primitive);
 
			// Plane 객체에 인터랙티브 마우스 오버, 아웃 이벤트를 선언한다.
			this.primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, this.onOverObject, false, 0, true);
			this.primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, this.onOutObject, false, 0, true);
 
			// 카메라를 앞으로 -200 당긴다. 기본값은 -1000 임.
			this.camera.z = -200;
 
			// 기본적으로 사용할 이벤트를 생성한다.
			this.setListener();
		}
 
		private function setListener():void
		{
			// 반복 이벤트 설정.
			addEventListener(Event.ENTER_FRAME, this.onEnterFrame, false, 0, true);
			// 플레이어를 벗어나면 발생하는 이벤트 설정.
			stage.addEventListener(Event.MOUSE_LEAVE, this.onLeaveStage, false, 0, true);
			// 마우스 이동 이벤트 설정.
			stage.addEventListener(MouseEvent.MOUSE_MOVE, this.onMoveStage, false, 0, true);
		}
 
		private function onEnterFrame(e:Event):void
		{
			// 카메라 이동을 위한 설정.
			var freeX:Number = mouseX - stage.stageWidth * .5;
			var freeY:Number = mouseY - stage.stageHeight * .5;
			var centerValue:Number = (stage.stageWidth / 2 - stage.stageWidth * .5 );
			var sp:Number = .05
 
			if (!this.isLeave)
			{
				// 마우스가 플레이어를 벗어나지 않았다면 카메라 이동.
				this.camera.x += (freeX - this.camera.x) * sp;
				this.camera.y += (freeY - this.camera.y) * sp;
			}
			else
			{
				// 마우스가 벗어나면 카메라를 가운데로 이동.
				this.camera.x += (centerValue - this.camera.x) * sp;
				this.camera.y += (centerValue - this.camera.y) * sp;
			}
 
			// 화면 랜더링
			this.renderer.renderScene(this.scene, this.camera, this.viewport);
		}
 
 
 
		/** 인터랙티브 오브젝트 오버, 아웃 이벤트 정의. */
		private function onOverObject(e:InteractiveScene3DEvent = null):void
		{
			this.colorMaterial.fillColor = 0x6D4201;
		}
		private function onOutObject(e:InteractiveScene3DEvent = null):void
		{
			this.colorMaterial.fillColor = 0xFFFFFF;
		}
 
 
 
		/** 마우스가 플레이어를 벗어나면 발생하는 이벤트. */
		private function onLeaveStage(e:Event):void
		{
			// 마우스가 벗어남을 입력.
			this.isLeave = true;
			this.viewport.interactiveSceneManager.mouseLeave = true;
 
			// 마우스 이동 이벤트 설정.
			stage.addEventListener(MouseEvent.MOUSE_MOVE, this.onMoveStage, false, 0, true);
		}
		/** 마우스가 이동하면 발생하는 이벤트. */
		private function onMoveStage(e:MouseEvent):void
		{
			// 마우스가 벗어나지 않음을 입력.
			this.isLeave = false;
			this.viewport.interactiveSceneManager.mouseLeave = false;
 
			// 마우스 이동 이벤트 제거.
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, this.onMoveStage);
		}
 
	}
}

샘플 3 :

위 소스에서 추가된 것들을 살펴 보길 바란다. 샘플 3에서 마우스를 가운데 아래쪽으로 이동을 한 후에 객체에 마우스 오버시에 컨텐츠 밖으로 빠져나가 보고, 마우스를 가운데 하단 마지막 아슬아슬하게 둔 상태에 두면 객체가 하단으로 사라지는데 그때, 마우스를 밖으로 나가면 가상 마우스의 위치가 기존 같았으면 거기에 존재해서 오버 이벤트를 발생하였으나 그 부분까지 처리가 된 것을 확인 할 수 있을 것이다.

정리를 해보면, PV3D는 인터랙티브를 설정했을 경우 가상마우스(VirtualMouse)가 마우스를 따라 다니면서 Hit 영역을 찾아서 처리를 한다. 그래서 마우스를 확~ 움직여서 컨텐츠 밖으로 벗어났을 경우 이 부분에 대해서 처리가 안되는 것이다. 플래시 역시 마우스 작동이 그와 비슷한 경우를 발생 시킬 수 있는데, 이것은 작업자가 처리를 해줘야 하는 이벤트인것이다.

이 튜토리얼로 이벤트 처리에 도움이 되길 바란다. 마지막으로 이미지를 적용한 샘플을 보자.

PV3D 2.0 Great White 업데이트가 되었다.

3D Wall Prop 샘플 기능은 양면의 이미지와 비디오 컨텐츠를 중앙에서 360도 회전되면서 보게 만든 벽모양의 효과다. 아래 샘플 역시 이와 같은 기능으로 형태들만 다를뿐이다.

예전에도 글을 작성하려고 했었는데 잊어버렸었다가 PV3D 효과들에 대한 리서치 중에 다시 보게 되어서 글을 작성하였다. 좀 더 훑어 보면 위의 효과들도 어렵지 않게 구현이 가능할꺼 같다. 카메라 회전과 줌의 효과로 “360° INSIDE CURVATURE : 360도 안쪽 뒤틀림” 효과를 적용해 봐야 겠다.

Seb Lee-Delisle – Papervision3D Simplified from Peter Elst on Vimeo.

환상적이라는 말로도 표현이 안된다. 예전에 내가 했던것들은 이제 잊어먹고 새로운 아이디어 및 효과에 좀 더 압박을 가해줘야 겠다는 생각뿐이다. 더 열심히 해야 겠다는 생각뿐이다.

내 블러그를 찾는 분들은 알겠지만 요즘 “PV3D“을 사용해서 상당히 많은 작업을 하고 있는 것을 알고 있을 것이다. CS4에서 지원되는 “PV3D” 엔진은 쓸만하지만 개인적인 생각으로는 많은 기능을 제공하고 있지 않고 일부 간단한 기능 정도로 넣어 둔 것이라는 판단이다. 대단한 발전이라는 것은 사실이다.

CS4의 3D 효과를 잘만 사용하면 훌륭한 연출은 가능하지만 더 많은 효과를 원한다면 한계를 느낄 것이다. 그래서 “PV3D“의 기초적인 사용법에 대한 부분을 약간 정리를 해볼까 한다.

우선, PV3D 소스에 접근을 해서 공유를 해야 하는데 공유를 하기 위해서는 SVN을 사용해야 한다.
SVN을 사용해서 연결하는 법에 대해서 배워보자. 지금 우리는 PV3D 2.0 (codename – Great White)에 대한 부분을 공유하여 소스를 내 폴더에 갖고 올 것이다.

PV3D 소스를 내 컴퓨터와 동기화 시키기
1. PV3D와 동기화를 하기 위해 TortoiseSVN을 설치를 한다.
(http://tortoisesvn.net/downloads :: 다운로드 및 인스톨)
2. 설치를 하면 내가 동기화 시키고자 하는 폴더에서 우측 버튼을 눌러 새로 생긴 “SVN Checkout…”을 선택하고, 새로 열린 “CheckOut”창에서 “URL of repository:”에 아래의 주소를 입력하고 “OK”를 클릭한다.
(http://papervision3d.googlecode.com/svn/trunk/)
3. 아래와 같은 창이 열리면서 모든 파일을 내가 지정한 폴더로 옮겨온다.

마지막으로, 다운받은 폴더를 플래시 글로벌 패스에 연결을 하여 사용하면 된다. 샘플은 “examples” 폴더에 있고 그 곳에서 코드를 보면서 따라해보면 된다.

이 글은 한글로 약간의 도움을 주기 위한 글이다. 아래로 가서 보다 자세히 살펴보면 좋을 것이다.
http://content.madvertices.com/articles/PV3DTraining/default.htm

“효과 보기”

요번에 메인 프로젝트 들어가기 전에 짬을 내서 작업한 것으로 “신세계몰” 하단에 위치한 플래시 컨텐츠 이다. 쇼핑몰 하단에 위치 한다는 것은 비중이 적다는 의미를 갖는다. 수익이 많은 것이 상단에 있는게 당연한 것이다. 하지만 난 하단에 있다고 해서 단순하게 작업하지는 않았다.

나만의 작업 스타일 이기도 하다. 간단한 거지만 열정을 갖고 작업하는건 “내가 만든것이니깐!” 아주 단순한 동기다. 메인 상단에 있는 GNB나 “백화점 메인“과도 같은 시간을 투자하여 작업했다. 시간이 남아 돌아서? 절대 아니다 내가 잠 잘 시간을 아껴가면서 작업을 하여 3가지의 프로토타입을 만들었고 그 중에 제일 마음에 드는 것을 올린 것이다.

나에겐 플래시 작업이란 중요하지 않은게 없다. 비중이 없다고 판단하고 있는 것도 시간을 투자하여 비중 있게 만드는 것이 내가 중요하게 여기는 것 중에 하나이다. “더 비중이 높은 것에 시간을 더 투자해야지?“라는 말하는 사람도 있지만 나한테는 모든 것이 비중이 높다.

이 작업을 하면서 더 좋았던 것은 비중이 적다고 사람들이 생각하기 때문에 내가 원하는데로 작업을 할 수가 있었다. 나한테 기대하는 것이 부담스럽기도 했지만… 어쨌든, 한마디로 표현 한다면 내 멋대로 만들면 된다는 것이였다. 어쨌든, 이것이야 말로 내겐 개인 작업이 된 것이다.

PV3를 사용한 3D 컨텐츠들을 신세계에 지속적으로 도입할 수 있어서 재미있다. 요번에 프로젝트 하고 있는 것도 PV3를 사용하여 컨텐츠를 개발 하는 중이다. 상당히 재미있는 프로젝트다. 11월 중순이나 하순 쯤에 1차 개발이 완료 되고, 내가 작업하고 있는 것은 12월 중순에 2차 개발 완료 예정이다. 프로젝트를 관리하면서 작업하는 것은 역시 힘들지만 어떻게 프로젝트를 진행 하느냐에 따라 재미 있는 작업이 될 수 있다는 것을 아는 사람은 알 것이다.

나는 “신세계몰“을 변화시키고자 열심히 하고 있다. 아니 우리 고스트 멤버 “이현정, 부용운 대리“와 같이 말이다. 아직까지는 성공적이라 생각한다. 우선 내부적으로 반응이 좋고, 개발쪽에서도 변화가 있다고 통계가 나왔다. 앞으로 내가 있는 동안에 지속적으로 변화를 주어 내가 “신세계몰“에 들어온 목표를 이룰 것이다. 우리 멤버들도 자기 계발을 할 수 있도록 방향을 잡아 진행 할 것이다.