Saqoosha.net

  1. About
  2. Archives
  3. Search
  4. Say
Language:

FLARToolKit スタートガイド

必要なもの

・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:すいませんめっちゃ間違ってました、、、)

marker-axis

サンプルソースの解説

手順を追って書くほど難しくないのでソースを細かく解説。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 では Scene3DaddChild しますが、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 はじめようー。みたいな。こんなんでいいすか?

103 Responses to “FLARToolKit スタートガイド”

  1. langmuir Says:

    tks.that so cool.

  2. Mediakid Says:

    Thanks for giving us a whole new wonderful world!

  3. Steve Says:

    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!

  4. Saqoosha Says:

    Steve,
    Is the room dark?
    It’s very important to adjust the light. illumination.
    Adjust the light to get better contrast for the marker.

  5. lmf Says:

    tks

  6. Boboy Says:

    Thank you so much for your work and your sources man !
    Keep the good work !

  7. Scott (United States) Says:

    Simply Amazing, good job.

  8. Bruce Says:

    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!

  9. Saqoosha Says:

    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/2008/06/05/676/

  10. Anonymous Says:

    flarlogo-marker

  11. Peter Says:

    Downloaded latest svn version and it does not compile, there are typos in FLARVersion.as (displaced stuff) which is easy to fix

  12. Chris Says:

    Just cant make it work : ( Do you make your pattern and then write over the flarlogo.pat with it?????

  13. Kenny Ng Says:

    Really impressive! As of now, is it possible for different markers to represent different infomation?

  14. Seraf Says:

    Hi,
    what about away3D version of flartoolKit ?

  15. trh_project_bridge » AS 3.0 & WebCam Says:

    [...] 이것으로 3차원 공간의 카메라 위치를 계산하도록 한다. 소스코드와 사용법(Papervision 3D 예)이 공개되어 있다. 아래와 같이 만들어진 판을 들고 [...]

  16. joehwang Says:

    it’s so cool!!

  17. jeroen Says:

    Thanx man,
    、最終的にポートをありがとうフラッシュ
    (sorry for my(google’s translate service) bad japanese)

  18. paul Says:

    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.

  19. yorg Says:

    Funtastic :)

  20. shane Says:

    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.

  21. grant Says:

    thank you saqoosha for this cool kit.
    Is it possible to use two different markers with two different 3d animations at same time?

  22. Almog Says:

    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 almog@almogdesign.net

  23. misoman Says:

    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 :)

  24. Frazko Says:

    inspiring..!!! thanks!

  25. Andy Says:

    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?

  26. Footer Says:

    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.

  27. drmikey Says:

    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

  28. skotti Says:

    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

  29. Felipe Zafred Says:

    Hello! Nice tutorial !!
    How i apply the ’smooth’ propertie to a bitmap texture ? give a code line of this please ?
    thanks a lot!!

  30. jumkey Says:

    非常感谢!希望能越做越好

  31. ericsoco Says:

    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!

  32. abstract Says:

    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.

  33. lellosan Says:

    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

  34. Peter Says:

    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

  35. matt Says:

    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.

  36. Leks Says:

    Really great work Saqoosha :o

    Is there someone who tested with Sandy3D or others flash 3D engines instead of PV3D :x ?

  37. Nathan Says:

    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, 0×75104e);

    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!

  38. dino Says:

    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!!:)

  39. dino Says:

    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!!:)

  40. bao_baoは盾を装備した | ReInit_creative Log Says:

    [...] 盾を装備しました。 おかげさまで防御力が20くらいアップしました。ありがとうございます。 盾って意外と思いのですね。 で、初FLARToolKitを触りました。 Saqoosha先生のFLARToolKit スタートガイドを熟読し、その記事中の一式ファイルをダウンロードしました。 [...]

  41. dino Says:

    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!

  42. joe Says:

    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

  43. dino Says:

    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….

  44. al Says:

    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?

  45. dino Says:

    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

  46. dino Says:

    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

  47. laguna Says:

    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?

  48. dino Says:

    my flartoolkit works offline but when i try to publish online the swf doesn’t start…anybody can help me?

  49. Mike W Says:

    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?

  50. Mike W Says:

    Never mind. Newbie mistake on my part. It’s working fine now.

  51. Krell Says:

    great work guys…

    need to trace something when the 3d object its on scene… any advise?

  52. renata Says:

    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:)

  53. 好牛逼的互动演示 « 特别2小组 Says:

    [...] 使用指导(可惜是日文的):http://saqoosha.net/flartoolkit/start-up-guide/ 然后就有了下面的一些DEMO: [...]

  54. » 【遅れてごめん、サイト紹介】ネスカフェ「ドルチェグスト 私のカフェ」 | キテレツ荘 Says:

    [...] よし、来年の年賀状これでいこ!ってできんのか?俺。。。 とりあえずSaqooshaさんのところから、、、 (0) [...]

  55. FLARToolKit+Lightwave3Dの自分なりのまとめ | ReInit_creative Log Says:

    [...] 乗せると以下のようになります。 PV3DtoFLARToolkit 上 : -Z軸 下: +Z軸 右 : +Y軸 左 : -Y軸 正面 : -X軸 奥 : +X軸 座標関連はSaqoosha.net :: FLARToolKit スタートガイドを参考にさせていただいています。 [...]

  56. Kadman Says:

    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))

  57. renata Says:

    Hi again,
    Is it possible to load a SWF file or a FLV file into the FLAR application?! thanks a lot:)

  58. aSnO© Says:

    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

  59. renata Says:

    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 :)

  60. ricardo Says:

    mike w, how did you worked that out? i also have the same problem
    thanks :)

  61. diogo Says:

    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!

  62. ricardo Says:

    diogo, if you discover what the problem is please post it here, im also trying to figure how to take this thing online

  63. alcinoo Says:

    WOW! how can I get the the moment which the marker is recognized and my graphics appear on monitor?

  64. swift szeto Says:

    i wanna to know how can i add one more marker and 3D obj on a same stage.

    thz a lot!

  65. martin Says:

    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?

  66. Alt Says:

    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.

  67. sergio Says:

    hi, is it possible to display a movieclip instead of a 3d object?

  68. fff Says:

    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!

  69. Jamie Says:

    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()

  70. sangen Says:

    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.

  71. » » 大阪てら子 22 「webカメラで遊ぼう!」 trace Says:

    [...] FLARToolKit マーカーから物体が現れるんじゃなくて、マーカーの位置に物体を移動させたい。 (ご本人様による解説) その物体とは、BigDog! このアニメーションの方が時間がかかってい [...]

  72. Gringo Says:

    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.co.uk/arvideo.txt

    thanks in advance

  73. Gringo Says:

    ^^^ ignore this, was calling the papervision init before the video init, doh!

  74. Christian Says:

    Hey guys…..
    has anyone figured out the issue with taking this online…..i seem to be having the same problem as Dino and Mike W. Any help would be great, cheers guys.

  75. Adam Bannach Says:

    Hey christian and all,
    I’ve been working on this for the last semester of school and am unable to embed the flash video (.swf) in a webpage. I don’t know if it’s my html that’s the problem or what, but if you try to access the .swf directly it works great. I don’t know what the problem is there. For example instead of going to http://www.test.com/index.html you could go to http://www.test.com/ar/testAR.swf and it will load the video. I know this is long, but I’ve been working on getting multiple markers working and it doesn’t want to work if anyone is interested I can send some source code out there.

  76. amani Says:

    hello plz can u help me to download flartoolkit?i can’t do it and i don’t know why! :(:(:( thnks a looooooot

  77. amish Says:

    Hi,
    I have a problem. I opened the flar toolkit starter and it works fine, then I tried to import .dae object, and I can load it but without the texture. I’m using Fl CS4 and blender to create dae. I don’t want to use material list. Is it possible to use different 3d software, that works with flar?

  78. Iris, Hsu Says:

    Thank you to do an great effor on creating FLARTOOLKIT, it’s really help me to do my artwork! I’m come from Tiwan. And if I finish my work, I’ll share it to you! Thank you again!

  79. Jamie Says:

    @ amish, I use 3DS max 9 with the Collada plugin and export to .DAE it works a treat just use an XML editor to correct your paths for your materials.

  80. amish Says:

    @ Jamie, could you send me the code, and the object? I’ve tried with dae, and collada parsers and just don’t know why i can’t run it. I’ve downloaded few ready projects, but non of them worked with textures on my machine. alpuzyna(at)gmail(dot)com

  81. chuck Says:

    Hello, I have CS3 professional and I have tried tpo open the flartoolkit flash componet up but I keep getting an error. unexpected format when I try to open this file. Can some one tell me how to get this working. I need some assistance I am new to this.

  82. Adelmar B. de Souza.'. Says:

    Thanks!!!!

  83. augusto Says:

    hello, i´m a brazillian programmer, i´m sorry but my english is poor… Can You help me? I need more explications about how create other forms with papervision3d and flartoolkit, or how i can to create this models in other program and export to the flartoolkit, thanks…

  84. Robin Says:

    Thnx for everything!!! But when i tried it on windows OS it worked perfectly, but when it was running on a Mac OS the camera stayed black. Is there something else i need to know?

  85. Harish Says:

    Hey
    Thanks for sharing your works. Amazing..
    I like to know the possibility of making the 3d Object interactive i added click even listener it works fine with papervision but not when implemented in FLAR Im using AS3/CS4
    Any help fingers crossed

  86. Francesco Says:

    Hi Saqoosha you did a good job here! ;)

    My only problem here is that I can’t get the FLARToolkit files from the repository (I use tortoiseSVN). It is asking for username and password…how can I do?

    kore wa yabai! boku o tasukete kudasai…;)

  87. augmented Says:

    how to add your own collada model, for us newbies..
    scroll down the discussion part..
    http://www.vimeo.com/3780791

  88. yuriythebest Says:

    hi! how do you add more than 1 object?
    my aim is to have 2 identical objects at the same time with 2 identical pattern images

  89. Novian Says:

    Hi! Very excited about FLARToolkit but I’m having the same issue mentioned above when I publish the .swf:

    1067: Implicit coercion of a value of type org.papervision3d.core.geom.renderables:Vertex3D to an unrelated type org.papervision3d.core.geom:Vertex3D.

  90. Novian Says:

    My mistake. It turns out I had a 1.5 version in my class path. I simply went into preferences > actionscript > actionscript 3.0 settings to get rid of the file.

    Off to make some interactive experiences! :)

    Thanks.

  91. shovan Says:

    I want to change the cube by a sphere what to do could you response.

  92. Shift×Style×Blog » Blog Archive » 京都で遊ぼうで拡張現実してみた Says:

    [...] FLARToolKit スタートガイド|Saqoosha.net [...]

  93. Tanusree Says:

    Dear Saqoosha,
    Your job is great.Can it Detect the natural marker?

  94. Alan Says:

    Thank you so much. Love this tutorial very much. This is a really good start for me to learn FlarToolkit.

  95. Seth Says:

    Thanks a lot man for sharing your knowledge with us. This world needs more people like you.

    One

  96. Aaron Says:

    Hey Everyone,

    I’m using the startup files as a template. I’m having troubles importing a custom pattern. The only pattern it will recognise is saqoosha’s. I’m using the torataro generator? Any ideas?

    Cheers,

  97. Anonymous Says:

    marker generator

  98. Alex Says:

    what should i do to include animated 3d model? just create loop animation .dae model?

  99. Cam Says:

    To get the examples working on the server you need to add the following mime types to your server:
    .dae text/xml
    .pat text/plain
    .dat text/xml

    Or you can simply change the .dae .pat .dat file extensions to xml. You will need to modify the file extensions in the code as well.

  100. 関西アンカンファレンスにいってきました。 - mrhdms Says:

    [...] のFLARToolKit スタータキット [...]

  101. Ateeb Says:

    Hi,
    This has made AR so simple.

    Can you also help me in porting this to Nokia N97?

    I tried to publish this to Flash lite as is, but it doesnt seem to work.

    Would appreciate any help.

    Thanks.

  102. FLARToolKit: AR(拡張現実)ってのをFlashで簡単に作ることができるライブラリ | DigiTechLog Dot Com Says:

    [...] FLARToolKit スタートアップガイド [...]

  103. Mahesh Says:

    Hi everybody!

    Could anyone please tell me that how should i place a model(3D Display object which does not associated with any marker) right after the last marker ?. I have tried x,y and z coordinates of last marker to map my model next to it but it does not help me. Please give me a solution as soon as possible. I have been dying for it last two days.

    Note : I am using flar manager for multiple marker.

Leave a Reply



Saqoosha.net は Windows なら Internet Explorer 7, Firefox 3, Safari 3, Mac なら Firefox 3, Safari 3 でいい感じになるように作ってありますのでそれ以外のブラウザでは Saqoosha が意図しない見た目になっている可能性がありますのでよろしくです。
どうやら Flash Player の最新版がインストールされていないようです。こちらから最新版をインストールするともうちょっと素敵な Saqoosha.net を見ることができるかもしれません → Flash Player Download