日本VTR実験室お使いのブラウザは、バージョンが古すぎます。Explore9には対応しておりません。恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。Javascriptが無効になっています。このサイトは、javascriptが有効になっていないと、正常に表示されません。無料ライブラリ「Vuforia」でARアプリを作る!3【自作モデルデータに置き換え篇】2013.08.19.ARARオブジェクトandyはてブTwitterFacebookGoogle+Pocket前回は、Vuforiaで3DのARサンプルを動かしてみました。自分で作ったオブジェクトをARにしてみたいと思います!ということで今回は、サンプルのオブジェクトと自作のオブジェクトの置き換え手順や、その際に必要なツールなどをご紹介していきます。こんにちはandyです。今回は、前回ビルドまで行ったARのサンプルプロジェクトに含まれている3Dオブジェクトとマッピングデータを他のものと置き換えて別の3Dオブジェクトを表示させたいと思います。プロジェクト内のモデルデータが書かれているソースを探す。プロジェクト内のモデルデータ用のマッピングデータが保存されている場所を探す。3Dモデルデータを準備。(自分で作れる人は作ってみてください。後ほどフリーのツールもご紹介します。)モデルデータをC/C++ヘッダーファイルの記述に変換。プロジェクト内のファイルの置き換えとビルド。私はあまりOpenGLは詳しくないので(他のこともそんなに詳しくないですが・・・)細かいことは抜きにして大雑把に進めます。プロジェクト内のファイルの置き換えとビルドプロジェクト内のモデルデータが書かれているソースを探す前回使ったプロジェクト「ImageTargets-2-5-4」を開いてみてください。このプロジェクト内に「Teapot.h」というファイルが入っています。このファイルを開くと、こんな感じになっています。「teapotIndices」という4項目の配列が定義されています。「teapotVertices」はオブジェクトの拡張点座標。「teapotTexCoords」はマッピング用の座標。「teapotNormals」は各面の向き。「teapotIndices」は「teapotVertices」で定義した頂点で構成される面の情報です。「TextureTeapotRed.png」というファイルが保存されています。このファイルが表示される3Dオブジェクトにそれぞれマッピングされている画像ファイルです。これらのファイルを置き換え、一部の表示部分のコードを修正すれば別のオブジェクトを表示できます。3Dモデルデータを準備まず始めに置き換え用の3Dオブジェクトとマッピングデータを用意する必要がありますので、今回は本当に簡単なデータで行います。使ったデータはリンクしておきますが、あまり面白くないので作れる方は自分でデータを作ってみてください。サンプルファイルはこちら。以下のようなデータが入っていると思います。ちなみに今回使うデータは、Blenderというオープンソースの3Dアプリケーションで作りました(関連記事:初心者のための!作って学ぶBlenderの基礎)。非常に良くできたアプリケーションでフリーだとは思えないくらい良くできています。用意したデータをC/C++ヘッダーファイルに記述されたOpenGLデータに変換します。変換には下記のツールを使います。このプログラムは.objフォーマットの3DデータをC/C++ヘッダーファイル形式のOpenGLデータに変換するために使いますので、今回のサンプルデータ以外のモデルデータを使用する方は予め3Dデータのフォーマットを確認してください。examples)」というリンクがありますので、そこからファイルをダウンロードします。ファイルを解凍すると下記のようなファイルがあるのがわかります。この中で「obj2opengl.pl」というファイルを使ってファイルを変換します。このファイルはPerlという言語で書かれているため、予め実行するための環境を用意しておく必要があります。モデルデータの変換を実行する「obj2opengl.pl」というファイルを作業がしやすいようにオブジェクトファイルと同じフォルダにコピーします。「ターミナル」というアプリケーションを起動します。cubeフォルダへ移動します。(パスの部分は使用されている環境によって異なります。)「obj2opengl.pl」でcube.objを変換します。変換が終了すると、.hという拡張子のファイルが作成されます(ここではcube.h)。後はこのファイルを先ほど説明したファイルと置き換えていきます。プロジェクト内のファイルの置き換えとビルド「cube.h」ファイルを「Teapot.h」と入れ替えます。今回は「TextureTeapotBlue.png」と「cube.png」を入れ替えます。ここまで終わるとこんな感じ。次に、このファイルを読み込んでいるソースの修正を行います。修正するファイルはImageTargets>Classes>ImageTargetsフォルダ内の「EAGLView.mm」というファイルです。このファイルは実際にOpenGLでオブジェクトを表示するためのViewを記述しています。次の部分を修正していきましょう。“cube.h”」24行目「”TextureTeapotBlue.png”,」→「”cube.png”,」この部分は、3Dオブジェクトを表示した際の大きさの指定です。「モデルデータをC/C++ヘッダーファイルの記述に変換」で作成したファイルには面の情報(Indices)が含まれていない為、下記の部分も修正します。obj3D.numVertices);」この状態でビルドします。「chips」の画像が認識されたときに下のようなオブジェクトが表示されるようになります。今回のようにコードでARアプリを作ることもできますが、3Dモデルを動かしたりする場合には複雑な動きになるとちょっと現実的ではなくなってきます。次回から数回(何回か考えてません)で、3Dオブジェクトを動かすことを目標に、Unityというゲーム開発環境を使ってARアプリを作ってみたいと思います。無料ライブラリ「Vuforia」でARアプリを作る!4【Unityで開発篇】次の記事この記事の執筆者andy担当プログラマー(もどき・・・?)新し物好きで、すぐに手を出して見るもののなかなかうまくいかず...世渡りの下手な性格。日本VTR実験室をご覧いただき、ありがとうございます。コメントをキャンセルメールアドレスは公開されません。付いている欄は必須項目です。ツイート実験室メンバーOKOKpencomashiandyJBブンブン丸チャオメンバー紹介ページへお気軽にお問い合わせください。日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。コンテンツ制作でお困りでしたら、お気軽にご相談ください。ご連絡お待ちしております。