FLARToolKit + perfume demo

FLARToolKit/4.0.1 betaでperfumeのモーションデータを動かしてみました。

レンダラには、Away3D version 4.0.0を使っています。

perfume http://www.perfume-global.com/
Away3D http://away3d.com/

さすがプロのモーションデータだけあって、見ているだけでもとても楽しいです。

デモプログラム

FlashPlayer11用です。Stage3Dを使っているので、GPU支援が受けられない場合どうなるかはわかりません。使い方は・・・

  1. FLARのマーカを印刷しておく。 マーカ→download
  2. PCにWebカメラを接続する。
  3. このページをリロード
  4. Webカメラの使用許可のダイアログが出たらOKを押す。
  5. FLARのマーカを撮影すると、BGMと共に踊ります。

PCにwebカメラが接続していない場合は、静止画でデモをします。

perfume demo(別ウインドウで開きます。)

ソースコードはSpark projectのリポジトリにあります。bvhとmp3データは別途http://www.perfume-global.com/からダウンロードしてください。

source code

http://www.libspark.org/browser/as3/FLARToolKit/branches/nyatla/v4/trunk/example/away3d4.sample/perfume_demo

FLARToolKit version 4.0.0 pre-release

FLARToolKit 4.0.0リポジトリのテスト版ができました。

http://www.libspark.org/browser/as3/FLARToolKit/branches/nyatla/v4

パッケージは多分そのうち@rokubou氏が作ってくれるはずです。

更新内容

主要な更新内容は次のとおりです。

  • NyARToolKit/4.0.0 APIへ更新しました。
    • MarkerSystemが使えるようになりました。
    • スケッチシステムが使えるようになりました。
    • 動作速度が向上しました。
  • スケッチシステムの追加を追加しました。 – 簡易なスケッチシステムで、以前より簡単にコンテンツを作れます。demo
  • Away3D 4.0.0 beta へ対応しました。 – FlashPlayer11のStage3D対応により、高精細なCGが表示できます。 demo
  • Sampleを全て作り直しました。paperVision3d,Away3d(3.4),Away3d(4.0.0beta)向けのものがあります。
  • 幾つかのFLARToolkitクラスを、NyARToolkitのものに取り替えました。

追記

リポジトリ構造を変えます。test-releaseは、tags/pre1からダウンロードできます。

FLARToolkit(NyARToolkitAS3) 4.0.0.+Away3D デモ

FLARToolkit(NyARToolkitAS3)  version4のデモコンテンツです。レンダリングエンジンには、Away3D 4.0.0 betaを使っています。最近のレンダリングエンジンはとっても早いみたいです。

動作デモ

  1. FlashPlayer11を用意してください。
  2. hiroマーカをこちらからダウンロードして印刷して置いてください。pattHiro.pdf
  3. WebカメラをPCに接続してください。
  4. コンテンツを起動してください。アリンコがマーカの上に表示されます。

3Dコンテンツを表示するだけの珍しくも無いコンテンツですが、FlashのStage3Dを使うと高精細なCGを合成できますよーというデモです。

FLARToolKit自体も多少安定化&高速化しているので、最近のPCなら問題なく動くと思います。

ソースコードはそのうち公開しますが、急ぎで欲しい方は@nyatlaまで連絡ください。

English

This is demonstration program of FLARToolkie(NyARToolkitAS3) 4.0.0. with Away3D 4.0.0 beta.

How to test

  1. Update your FlashPlayer to version 11.
  2. Print “hiro marker” pattHiro.pdf
  3. Connect webcam to your PC.
  4. Start Flash content.

NyARToolkitAS3 途中経過

FLARToolKitV4に使うためのNyARToolkitAS3ができました。で、FLARToolKitV4を作っています。
新しいFLARToolKitは、NyARToolKitV4に実装したMarkerSystemと、簡易スケッチが使えるようになります。

Code

次のコードは、SimpleLiteをスケッチとMarkerSystemで実装したものです。

package sketch 
{
	import flash.media.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.text.*;
    import flash.display.*; 
    import flash.events.*;
    import flash.utils.*;
	import jp.nyatla.as3utils.sketch.*;
	import jp.nyatla.as3utils.*;
	import jp.nyatla.nyartoolkit.as3.core.types.*;
	import org.libspark.flartoolkit.core.*;
	import org.libspark.flartoolkit.markersystem.*;
	import org.libspark.flartoolkit.pv3d.*;
	import org.papervision3d.render.*;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.lights.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.shadematerials.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.scenes.*;
	/**
	 * MarkerSystemを使ったSimpleLiteの実装です。
	 * このサンプルは、FLSketchを使用したプログラムです。
	 * PV3Dの初期化、Flashオブジェクトの配置などを省略せずに実装しています。
	 */
	public class SimpleLite extends FLSketch
	{
		private static const _CAM_W:int = 320;
		private static const _CAM_H:int = 240;
		private var _ss:FLARSensor;
		private var _ms:FLARPV3DMarkerSystem;
		public var bitmap:Bitmap = new Bitmap(new BitmapData(_CAM_W,_CAM_H));

		private var _video:Video;
		private var _render:LazyRenderEngine;
		
		private var marker_id:int;
		private var marker_node:DisplayObject3D;
		
		public function SimpleLite()
		{
			//setup UI
			this.bitmap.x = 0;
			this.bitmap.y = 0;
			this.bitmap.width = _CAM_W;
			this.bitmap.height = _CAM_H;
            this.addChild(bitmap);
		}
		private var _fid:Vector.<int>=new Vector.<int>(3);
		public override function setup():void
		{
			//setup content files...
			this._fid[0]=this.setSketchFile("../../../resources/Data/camera_para.dat", URLLoaderDataFormat.BINARY);//0
			this._fid[1]=this.setSketchFile("../../../resources/Data/patt.hiro", URLLoaderDataFormat.TEXT);//1
		}

		public override function main():void
		{
			//webcam
			var webcam:Camera = Camera.getCamera();
			if (!webcam) {
				throw new Error('No webcam!!!!');
			}
			webcam.setMode(_CAM_W, _CAM_H, 30);
			this._video = new Video(_CAM_W, _CAM_H);
			this._video.attachCamera(webcam);			
			//FLMarkerSystem
			var cf:FLARMarkerSystemConfig = new FLARMarkerSystemConfig(this.getSketchFile(this._fid[0]),_CAM_W, _CAM_H);//make configlation
			this._ss = new FLARSensor(new NyARIntSize(_CAM_W, _CAM_H));
			this._ms = new FLARPV3DMarkerSystem(cf);
			this.marker_id = this._ms.addARMarker_2(this.getSketchFile(this._fid[1]), 16, 25, 80); //register AR Marker
			
			//setup PV3d
			var light:PointLight3D = new PointLight3D();
			light.x = 0;
			light.y = 1000;
			light.z = -1000;			
			var viewport3d:Viewport3D = new Viewport3D(_CAM_W,_CAM_H);
			viewport3d.scaleX = 1;
			viewport3d.scaleY = 1;
			viewport3d.x = -4; // 4pix ???
			this.addChild(viewport3d);
			//3d object
			this.marker_node = PV3DHelper.createFLARCube(light,80,0xff22aa, 0x75104e);
			this.marker_node.visible = false;
			//scene
			var s:Scene3D = new Scene3D();
			s.addChild(this.marker_node);
			this._render=new LazyRenderEngine(s,this._ms.getPV3DCamera(),viewport3d);
			
			//start camera
			this.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
		}
		/**
		 * MainLoop
		 * @param	e
		 */
		private function _onEnterFrame(e:Event = null):void
		{
			this._ss.update_2(this._video);//update sensor status
			this._ms.update(this._ss);//update markersystem status
			if (this._ms.isExistMarker(marker_id)){
				this.marker_node.visible = true;
				this._ms.getPv3dMarkerMatrix(this.marker_id, this.marker_node.transform);
			}else {
				this.marker_node.visible = false;
			}
			this.bitmap.bitmapData.draw(this._video);
			this._render.render();
		}
	}
}

解説

  • このプログラムは、Spriteを継承したFLSketchクラスをベースクラスにしています。FLSketchは、ファイルロードに関するサービス関数と、シーケンスを定義します。
  • FLSketchのコンストラクタを実行すると、setup関数→main関数の順で関数がコールされます。
  • setup関数では、外部ファイルの予約関数”setSketchFile”を使うことが出来ます。この関数にURLを渡しておくと、main関数の中でそのファイルを読み取ることが出来ます。
  • main関数では、FLARToolKit,PaperVision3D,Webカメラの準備をします。最後に、カメラ画像のコールバックイベントを、_onEnterFrameに設定します。
  • _onEnterFrameの中では、マーカが見つかったかどうかを判定し、表示物のON/OFFを切替えます。

約140行と少々長いですが、従来と比較すると、スッキリしたかなと思います。また、MarkerSystemは複数マーカ/IDマーカ混在をサポートしているので、従来よりも楽に実装できると思います。

ソースコードはNyARToolkitAS3リポジトリのtrunkにありますが、まだ作業中なので時々動きません。動作するものが必要な方は、@nyatlaまでご連絡ください。