コピー2008.06.05前回のエントリを全部読んだ猛者であれば、現時点でFlasDevelopを使い、FLARToolKit開発が出来るようになっているはずだ。今回は、サンプルを変更してピンクの立方体以外の物を出力出来るようになる方法を書いていく。一応今回辺りからPapervision3Dや3次元モデルの知識が要るかもしれないし、要らないかも知れない。何にしろ、新しい事に立ち向かう覚悟は要る。「俺はActionScript3.0もFlashDevelopもPapervision3Dも完璧だ!早くFLARToolKitを使わせろ!」と言う方に要点を2点だけ解説。これが分かった方は、すぐにブラウザを閉じてコード変更に臨むんだ!this._transGrpにaddChildしたDisplayObject3Dインスタンスが、マーカー上に出る!マーカーはXY平面で、高さはZで表される!そしてマーカーのど真ん中が原点!新しい3Dのための準備FLARToolKitが提供しているサンプル「FLARToolKitTest2.as」は、はっきり言って非常によく出来ている。完成されていると言っても過言ではない。俺が作っているFLARToolKit系のコンテンツだって、このサンプルを10?20行程度書き換えたクラス+皮という構成で出来ている。このサンプルが便利すぎて、逆に拡張現実の深い所を理解するという重要事項が疎かになっているのが俺だ!と、言う事でまずはサンプルを、FlashDevelopのプロジェクト「flar_sample」(前回作成)のフォルダ「src」以下にコピーしよう。Compile」をこのコピーした方に設定しておくのも忘れずに。サンプルのソースを見るサンプルを実行すると、赤い正方形の枠とその上に乗っかったピンクの立方体が表示される。これはサンプルのソース内に「赤い正方形の枠とピンクの立方体を表示しなさい」と言う命令がある」からに他ならない。この部分の命令を書き換えれば、例えば「緑の球体を表示しなさい」とすれば、その通りに緑の球体を表示できると言うわけだ。その命令が以下の部分だ。20;this._transGrp.addChild(this._cube);これは、関数_onInit中盤にあるコードで、次のような意味を持つ。(6行目?)ちなみに、この部分のコードは全てPapervision3Dの話で、FLARToolKitは関係なくなっている。FLARToolKit関連コードは他の部分にあるのだが、さっきも書いたようにサンプルが凄すぎて全く意識する必要が無いのだ。恐るべしサンプル!と言う事で、以下はPapervision3Dの解説を書く。纏め役の登録Papervision3Dでは、3次元世界の事を「シーン」と読んでいる(コード中にも「this._scene」とある)。シーンは木構造になっていて、親に対する変換(移動とか、回転とか、拡大縮小とか)は、全て子にも影響を及ぼす。してやることによって、マーカーの真上にモデルが出てくるわけだが、纏め役を作り、その子として表示したいモデルを登録する事で、変換のための計算対象を1個に絞っているのだ。ちなみに、その変換部分は、関数_onEnterFrame内の以下のコードだ。a[2][3];最初の2行はFLARToolKitの何か難しい処理で、今は知らなくても良い。知らない俺が言うんだから間違いない。3行目で纏め役の変換行列と言うのを取ってる。まとめて表現できる優れた行列らしい。詳しい事はそっちら辺の文献を見て欲しい。されるということがぼんやり想像出来ればよい。赤い正方形の枠ここまでで難しい所・大事な所はほぼ終了で、後は見た目の話になる。正方形の枠が出ている部分について説明。80);this._transGrp.addChild(this._basePlane);このコードは赤い正方形の枠を作り、最後の行で纏め役に登録している。赤い正方形の枠を作る部分をさらに分解すると、以下のようになる。最初の行で「マテリアル」を作成している。マテリアルとは3次元物体の見え方を定義する代物で、今回であれば、「赤い(0xff0000)、不透明な(不透明度1)、太さが2の線(WireframeMaterial)で形を描くためのマテリアル」を作成している事になる。2行目では、「マテリアルは両面ともに適用される」と言う設定をしている。3次元物体は基本的に、「ポリゴン」と呼ばれる三角形が集まって出来ている、中身の無いハリボテだ。閉じた物体(立方体とか)の場合は裏面は表示されなくても良いが、今回のように裏表のある正方形の場合、両面設定をしておかないと、裏から見たら何も表示されないとか、真っ白い板とか、まぁそんな感じになってしまう。3行目で、マテリアル、幅、高さを指定して正方形を作っている。次にピンクの立方体を作って登録する部分だ。基本的には赤い正方形の枠と同じように、マテリアルを作り、立方体を作り、纏め役に登録している。20;this._transGrp.addChild(this._cube);正方形の枠に比べてコードが長いのは立方体だからではなく、マテリアルが凝った物だからだ。最初の4行は「光源」を作成している。今回は立方体なので、影があったほうが分かりやすいからだろう5行目でマテリアルを作成している。FlatShadeMaterialは、平坦な影が出来るマテリアルだで、光に近い方が影が濃いとかの細かい表現は無いが、光が当たる面は明るく、当たらない面は暗いと言う程度の表現は行ってくれる。光源は先ほど作ったものを使う。6行目で立方体を作っている。幅・高さ・奥行きはそれぞれ40となっている。MaterialsListは、マテリアルの辞書だ。立方体は6面あり、各面に違うマテリアルを割り当てる事も出来る。今回使っているallは、全部の面に同じマテリアルを使う時の指定だが。7行目で立方体を20上に動かしている。立方体は、出来た瞬間には中心に原点があり、下半分が地面にめり込む形になっている。高さの半分である20だけ、上に動かす必要があるのだ。最後に、纏め役に登録。マーカーと地面についてさて、立方体の登録部分で少しおかしいな?と思ったかもしれない。通常、3次元世界ではXZ平面が水平となり、高さはYとなると言うのが見慣れたパターンではないか?だが、FLARToolKitでは、地面はXY平面となる。これは結構間違いの元になりそうなので注意。厳密には地面ではなくマーカーがXY平面なのだが、普通マーカーは地面になると思うので一緒か。言う事で、上に移動する際はZと言う事に気をつけて欲しい。これは次回に記載予定の、Metasequoiaモデルを出す方法あたりでかなりクリティカルな話題だ。緑の球体を出すさて、これでサンプルの、物体表示部分の意味は完全に理解できた筈なので、早速不要な部分を消して、ピンクの立方体の代わりに緑の球体を出そう。さっきのピンクの立方体を作成する部分の5行目以降を削って、以下のコードを放り込めば良い。40;this._transGrp.addChild(sphere);ピンクの立方体_cubeはメンバになっていたが、別に後から取り出したりするわけではないのでローカル変数でも良いだろう。変更したら再生ボタンを押してビルド&実行。コピペだけしたモノグサさんのFlashDevelopが、「Sphereなんて型は知らん」みたいなエラーを出してくるだろう。org.papervision3d.objects.primitives.Sphere;と書き足せばよい。えらいギラギラした緑色の球体が、マーカーと赤枠の上にふわりと浮かんでいる様子が出るはず。次回は、Metasequoiaモデルを表示する方法について解説。ブログ関連記事ActionScript地震以後時代のプログラマたちに、メッセージを残したいんだがどうか。東北で大変な地震がありましたが、おかげさまで生きてます。横浜在住なんで今はある程度無事です。今朝、電車が激混みで会社にいけなかったのと、コンビニに食料がないのが難点。勉強会#1に参加してきた、そんな懐かしい想い出を語る。Project勉強会#1に参加した。詳しい内容だとかはそこかしこのブログでほぼ出尽くした感があるが、取り敢えず俺のノートに残ってた重要そうなメモについて。...ActionScriptFABridgeを試してみた⇒swfobject2.0+Firefox+FABridge⇒上手く動かない疑惑。第一弾、PCでAR(8月30日公開)が異常に楽しみだ。Frameworkコネタ。Frameworkと言えばコマンドクラス。いう事で、今回は小さいネタを紹介。鮮度が大事なので、おお!こうか!!と思った瞬間ブログエントリにしてしまおうと言う方針を打ち立ててみたのです、今。FLARToolKitFLARToolKitのIDマーカー解説ふと気が向いたので、FLARToolKit用のIDマーカーについて解説する。FLARToolKitの最新版をSubversionを使って手に入れる。Piのイメージが壊れてたら、Rubyをインストールできない。Piのイメージが壊れてたら、Rubyをインストールできない。tuperaに支配された東京を描くディストピア映画!あと磯子滅ぶ!俺はおしっこちょっぴりもれてない!まだグレイテスト・ショーマン見てないの!?タイトルとURLをコピーしました。