必要なもの
・Adobe Flash CS3 以降
・FLARToolKit
・Papervision3D (rev.814 以降)
・Web カメラ
・印刷したマーカー & マーカーデータ
ダウンロード
めんどいので一式をまとめたものを置いときました。はい。
http://saqoosha.net/lab/FLARToolKit/FLARToolKit-starter-kit.zip
追記(2009/2/8 1:50):ぎゃー、マーカーの PDF 入れ忘れてた。いれといた & マーカーだけアップしたのでこれをお使いくだせい。
イントロダクション
Papervision3D が使える人なら非常に簡単。サンプルのメイン部分はほぼ Papervinios3D の設定だけ。使えない人もこのサンプルはめっちゃシンプルなので難しくない。大丈夫。
ただ、1 点だけ注意。座標系が Papervision3D とちょっと違います。Papervision3D でレンダリングするのでグローバル座標系はもちろん左手座標系なんだけど、マーカーにのっかるオブジェクトは↓の図みたいなかんじで、マーカーを正面に見たときに右手座標系になる。 上方向が +X、右方向が +Y、手前方向が +Z になる。(追記 2009/3/2:すいませんめっちゃ間違ってました、、、)
サンプルソースの解説
手順を追って書くほど難しくないのでソースを細かく解説。SimpleCube.as
がメインで、その他のソースは特に見る必要ナッシング。なので SimpleCube.as
を説明していきます。
17 行目
this.init('Data/camera_para.dat', 'Data/flarlogo.pat');
FLARToolKit を初期化します。第 1 引数にはカメラ補正ファイルへのパス、これは FLARToolKit に付属のものを指定しておけば OK。第 2 引数はマーカーのパターン定義ファイル、これは使用するマーカーに対応するパターン定義ファイルを指定。flarlogo.pat
てのは flarlogo-marker.pdf
用。
20 行目
protected override function onInit():void {
init
呼んだあと、初期化が問題なく終わると最終的にこの関数が呼び出される。3D オブジェクトの設定はこの中ですればいい。パターンファイルが存在しなかったり Web カメラが接続されてないとこれが呼ばれるまでにエラーが出る。
24, 25 行目
var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
this._plane = new Plane(wmat, 80, 80);
マーカーが正常に認識できているか確認しやすいように、マーカーと全く同じサイズの Plane
を作ってみる。赤色、2px のライン。80 てのがマーカーのサイズ。80mm。
26 行目
this._plane.rotationX = 180;
さっき書いたように座標系が違うのでこっち向ける。
27 行目
this._baseNode.addChild(this._plane);
通常、Papervision3D では Scene3D
に addChild
しますが、FLARToolKit ではマーカーに追従して 3D オブジェクトを動かすために特別なノードに addChild
する必要があります。それが _baseNode
。これに addChild
することで自動的にマーカーに追従して動くようになります。
36, 37 行目
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);
this._cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
マーカーの上に Cube
をのっけてみます。ピンク色。サイズは 40mm x 40mm x 40mm。マーカーの半分のサイズ。
38 行目
this._cube.z = 20;
Cube
は原点中心に作られるので、+Z 方向、つまりマーカー上方向に 20 移動させると、マーカーにちょうどのっかってるようになる。
動かしてみる
SimpleCube.fla
を開いてパブリッシュすると Web カメラからの画像が表示されます。Web カメラつないでないとエラー出ます。つないでるのに絵が出ないってひとは右クリック→設定→カメラアイコン、で適当なカメラを選んでください。(MacBook とかの内蔵カメラは USB Video Class Video っていう名前になってます。)
印刷されたマーカー全体がカメラに写るようにするとオブジェクトが表示されます。マーカーにぴったりくっついてますね。ほら、簡単でしょう?
まとめ
サンプルを見てわかるようにマーカーに追従してオブジェクトを動かすってだけなら、Papervision3D でオブジェクトを作るコードを書くだけでできちゃうから、みんなも FLARToolKit はじめようー。みたいな。こんなんでいいすか?
Required
– Adobe Flash CS3 or later
– FLARToolKit
– Papervision3D (rev. 817 or later)
– Webcam
– Printed marker & marker data
Download – source of FLARToolKit
http://saqoosha.net/lab/FLARToolKit/FLARToolKit-starter-kit.zip
Let’s get started!
If you are familiar using Papervision3D, this FLARToolKit will be easy to control. You can do whatever you want as if you control Papervision 3D.
If you are non-Papervision3D user, don’t be afraid! It is much fun and easy to control.
One thing you should take care of is that a coordinate system is different from Papervision3D’s.
The global coordinate system of Papervision3D is left-handed, but the object on the marker of FLARToolKit will become following image.
Sample source code
You ONLY need to understand how SimpleCube.as
works. Other sources are ….well, you can forget about them.
line 24:
init('Data/camera_para.dat', 'Data/flarlogo.pat');
Initialize FLARToolKit.
The 1st argument is a path for camera corrective file. You can leave it as default.
The 2nd argument is a definition file of marker pattern. You need to define the pattern for the marker. e.g. flarlogo.pat
is for flarlogo-marker.pdf
.
line 27:
private function _onInit(e:Event):void {
Once init
call is successfully over, this function is called. You can adjust 3D object here.
If you can not call this function and error message comes out, you should check the availability of pattern-file OR condition of Webcam.
line 30, 31:
var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
_plane = new Plane(wmat, 80, 80);
These codes discriminate how the marker works fine or not.
They publish the Plane
as a dummy, as same size of as marker(color Red, 2px line, 80mm)
line 32:
_plane.rotationX = 180;
As I discribed above, Papervision3D and FLARToolKit have an opposite coordinate system.
This code adjust the coordinate system.
line 33:
_markerNode.addChild(_plane);
Papervision3D normally “addChild
” Scene3D
, FLARToolKit needs to “addChild
” a special node as it controls 3D object following the marker.
The special node is _markerNode
.
Once you “addChild
” _markerNode
, the object follows the marker automatically.
line 44, 45:
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);
_cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
Now let’s play with “Pink Cube” on the marker.
Size: 40mm*40mm*40mm. The half size of the marker.
line 46:
_cube.z = 20;
The Cube
is based on the center/core(=zero point).
Here is the tips: Transforming +20 , Z makes the object is right on the top of marker.
Now the time to play FLARToolKit!
Here we go! Let’s follow the steps.
1. Open SimpleCube.fla
with Flash Authoring
2. Publish it! then you can see the contents with Webcam
Note: If you are not connect with Webcam, you will see the error messages.
If you can not see the contents although you connect with Webcam, you need to set-up Webcam.
[right-click => setting => Camera. you should choose “USB Video Class Video” on Mac OS]
3. Capture the marker, then you will see the object.
see? it is easy!
Thank you for reading this description :)
See, this is easy!! If you can control Papervision3D, why don’t you control FLARToolKit too?! Let’s have fun, let’s move virtual kids!
tks.that so cool.
Thanks for giving us a whole new wonderful world!
Thx. Very Cool…though I am having issues detecting the pattern. Is there anything specific I need to do in order to detect the printed marker? The capture is working so I can see the video, however, none of the PV3D objects are showing and it appears that pattern is not being detected. ( Latest Version of PV3D is installed ). Thanks in advance!
Steve,
Is the room dark?
It’s very important to adjust the light. illumination.
Adjust the light to get better contrast for the marker.
tks
Thank you so much for your work and your sources man !
Keep the good work !
Simply Amazing, good job.
This is really great. What did you use to create the .PAT file? I can’t fine a utility to do it, and if I want to create different ones, I am not sure what process to go through. Thanks for your hard work!
To create original .pat file, use this site.
http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/
He improved my marker generator AIR application.
http://saqoosha.net/en/2008/06/05/676/
flarlogo-marker
Downloaded latest svn version and it does not compile, there are typos in FLARVersion.as (displaced stuff) which is easy to fix
Just cant make it work : ( Do you make your pattern and then write over the flarlogo.pat with it?????
Really impressive! As of now, is it possible for different markers to represent different infomation?
Hi,
what about away3D version of flartoolKit ?
[…] 이것으로 3차원 공간의 카메라 위치를 계산하도록 한다. 소스코드와 사용법(Papervision 3D 예)이 공개되어 있다. 아래와 같이 만들어진 판을 들고 […]
[…] 이것으로 3차원 공간의 카메라 위치를 계산하도록 한다. 소스코드와 사용법(Papervision 3D 예)이 공개되어 있다. 아래와 같이 만들어진 판을 들고 […]
it’s so cool!!
Thanx man,
、最終的にポートをありがとうフラッシュ
(sorry for my(google’s translate service) bad japanese)
thank you
It’s so great!!
I’ve changed the marker and it works.
But I don’t find how to change the 3d Object.
Funtastic :)
hi, thank you for this good stuff.
I have a quick question is that I want to change the cube’s height w/ a random number in a enterframe function but seems that cube only apply the large number and won’t transform to small again.
Thanks for ur help.
thank you saqoosha for this cool kit.
Is it possible to use two different markers with two different 3d animations at same time?
Thank you this is really great, I wanted to know if anyones knows how to create that hole animation on with the stating up guide.
email me at [email protected]
Hi, cannot download the starter kit, download keeps breaking off… can you please upload this starter kit to to mediafire or rapidshare? Thanks for the cool work, really looking forward to to using FLART :)
inspiring..!!! thanks!
I replaced the Flarlogo.pat with some other logo with same name.Its not working,should it work with any other pat file with different content but same name as in path?
Could you explain how to display a different 3D object besides the primitive cube? I have looked through some of your other projects source code and you use a lot of .dae models but your .as files are not as simple as the ones in this start-up guide. Thanks.
maybe someone can help me. i’ve got this all set up and compiling fine, and i can run other flartoolkit demos online just fine. when i build the demo, though, the marker just never seems to be detected. i just don’t see any change, except that memory goes up whenever there is ANY marker on the screen ( i guess system detecting a black square and trying to read it?) any thoughts? thanks so much.
drMikey
Hi
this all looks realy great but im new here and want to ask if there is an complete howto for noobs like me?
would be realy nice because i realy want to learn something about this
Hello! Nice tutorial !!
How i apply the ‘smooth’ propertie to a bitmap texture ? give a code line of this please ?
thanks a lot!!
非常感谢!希望能越做越好
hey saqoosha!
first off — FLARToolkit is GREAT. so nice to have computer vision available in the browser!
i just finished up a small framework called FLARManager that makes using FLARToolkit simpler. you can find it here:
http://words.transmote.com/?p=10
it decouples FLARToolkit from Papervision3D, so you can use FLARToolkit for things totally non-pv3d related (though you can still use it with pv3d!); it can track multiple instances of multiple patterns; and a bunch of other good stuff.
please check it out!
This is super cool if I can get it to work. Can you do a quick starting video? It would be very useful for people who likes to watch rather than read.
Hi!!! very nice work!!!!! its amazing! I’m trying to play with the code ..and it is beautifull!!!!…just a question: there is a way to redirect the complete video(webcam + 3d objects) to external devices (like dv cam)just to record all the animation?..its possible????
thanks!!!
lellosan
How do you make the model file ?, in the examples you use .DAT file format but the papervision works around .DAE what are the difference ?
pete
1st of all great work, i have been playing around with the FLARToolkit for the last week. I have a question however, i am loading in a 3D scene, but it doesn’t align correctly with the marker, when i move the marker the projected scene doesn’t stick, the alignment looks way off. How do i make the scene stick to the marker?
If anyone has any suggestions i would really appreciate some advice/help.
Really great work Saqoosha :o
Is there someone who tested with Sandy3D or others flash 3D engines instead of PV3D :x ?
Great work, I’m loving it and so far all is working great. Only thing is I want to change the line
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);
to something that will allow for a jpg file to be the texture instead of the flat color. I’ve tried numerous other ways but just can’t get it to work! Any help anyone! pls!
hi, is customizable? i try to change a object but i need an hand to do it….so if i want to put a text ox another ed object from 3dstudio max how can i do? thanks a lot!!:)
hi, is customizable? i try to change a object but i need an hand to do it….so if i want to put a text ox another 3d object from 3dstudio max how can i do? thanks a lot!!:)
[…] 盾を装備しました。 おかげさまで防御力が20くらいアップしました。ありがとうございます。 盾って意外と思いのですね。 で、初FLARToolKitを触りました。 Saqoosha先生のFLARToolKit スタートガイドを熟読し、その記事中の一式ファイルをダウンロードしました。 […]
how i can change the objet? in this case is a cube if i would to put my 3dstudio object ? i export my 3dstudio in .DAE but i don’t know how i put this .dae!
dino, you should check out flarmanager, it really makes hooking up models from different formats quite easy. also check out this post describing how to import multiple file formats to papervision.
http://marcpelland.com/2009/01/29/using-papervision-object-parsers
hi, joe i’m not have more skills abput flartoolkit. could i see how i link the file .dae? in this flartoolkit starter file i added this function
protected override function onInit():void {
super.onInit();
var object:DAE = new DAE();
object.load(‘some_collada_file.dae’);
_baseNode.addChild(object);
}
on the Simplecube.as, but doesn’t works….
hi, we have an animation that’s working well, but it’s very sensitive to moving the marker. It there a way to set this type of sensitivity?
anybody help me how i can export .dae file on ed studio max? i try to export but i can see only the poligon and not a texture…!! thanx
anybody help me how i can export .dae file on 3d studio max? i try to export but i can see only the poligon and not a texture…!! thanx
Hi, I’ve downloaded the files and published the .fla file without any changes, but nothing will load on the screen. The webcam is connected, and i did [right-click => setting => Camera] and the setting is correct, but it still just shows a blank black screen.
How can I get this to work?
my flartoolkit works offline but when i try to publish online the swf doesn’t start…anybody can help me?
My problem is that the swf will only run in the directory it is created in. Even moving everything to a new location fails. How can I put my project up on the web?
Never mind. Newbie mistake on my part. It’s working fine now.
great work guys…
need to trace something when the 3d object its on scene… any advise?
Hi,
Congratulations for this great job;) I would like to know how can I
change the object? In this exemple is a pink cube, but if I want to put a 3D object? Wat do I have to do and how? thanks a lot:)
[…] 使用指导(可惜是日文的):http://saqoosha.net/flartoolkit/start-up-guide/ 然后就有了下面的一些DEMO: […]
[…] よし、来年の年賀状これでいこ!ってできんのか?俺。。。 とりあえずSaqooshaさんのところから、、、 (0) […]
[…] 乗せると以下のようになります。 PV3DtoFLARToolkit 上 : -Z軸 下: +Z軸 右 : +Y軸 左 : -Y軸 正面 : -X軸 奥 : +X軸 座標関連はSaqoosha.net :: FLARToolKit スタートガイドを参考にさせていただいています。 […]
Hi! great article. now i’m trying to make “plane” with movie material. it works, but i dont know how to play animation in my movie only when marker is detected and pause when not detected. Please give some idea, please please please))
Hi again,
Is it possible to load a SWF file or a FLV file into the FLAR application?! thanks a lot:)
Hi Renata, I think it is possible, try making a texture in the library with a movieclip, and load the texture into your model in pv3d
Nice I will try to do this, just in case works I will telt you know;)
But, how can I load a 3D animated (.md2 file format.) in the gihyo examples. thanks a lot again :)
mike w, how did you worked that out? i also have the same problem
thanks :)
Hi Dino,
Did you solve your problem? I’m having the exact same issue. The app works fine on my PC, but on my webserver the webcam security question doesn’t even pop-up..
Thanks!
diogo, if you discover what the problem is please post it here, im also trying to figure how to take this thing online
WOW! how can I get the the moment which the marker is recognized and my graphics appear on monitor?
i wanna to know how can i add one more marker and 3D obj on a same stage.
thz a lot!
col: 9 Error: Access of possibly undefined property useProjectionMatrix through a reference with static type org.libspark.flartoolkit.pv3d:FLARCamera3D.
this is the error msg I get…how can I fix it??? any ideas?
Guys, when I compile .swf this error comes up:
TriangleMesh3D.as, Line 275
TriangleMesh3D.as, Line 276
TriangleMesh3D.as, Line 277
It’s urgen, can someone help me whit this .. publish setting is fine .. etc .. Don’t know were to look at it.
Thx.
hi, is it possible to display a movieclip instead of a 3d object?
lol
i`m afraid few questions get answered here.
I have some super simple questions.
how was this fla made? is there a link to the .as files that are in the folder?
I`m trying to understand the basics.
Once again, thanx saqoosha for the starter kit!
Hello!! Does anyone have any coding for switching designs using a combo box? I keep getting error TypeError: Error #1010: A term is undefined and has no properties.
at MethodInfo-2194()
Hi,
I’m sorry but my english is very bad,
i used for few days the FLARtoolkit to realised an Augmented Reality
project. It works very good but i would like to do a new thing. I
explain :
I would like to import a 3D object in my scene without the pattern and
an other 3D object with a pattern (AR) and if we move the 3D object
with his pattern the first 3D object get the direction, turn around
him, in the direction of the pattern, where i move my pattern.
I think i can use the function “get Direction()” like this :
firstobject.RotationY += detector.getDirection()
But my 3Dobject move in all direction but not in the direction of the
pattern.
So if you have an idea or a correction to my code or a new explain of
my project answer me.
Thanks.
[…] FLARToolKit マーカーから物体が現れるんじゃなくて、マーカーの位置に物体を移動させたい。 (ご本人様による解説) その物体とは、BigDog! このアニメーションの方が時間がかかってい […]
Hey guys im trying to do this with a movie clip on a 3d cube, ive tried using a videostreammaterial and a standard bitmapdata, for the movie clip texture however both times the cube just doesnt render, i know its streaming the video as i get audio and i know the tracker works as a cube using flatshadematerial works
any ideas?
source code is visible at http://www.zombievsshark.