普通の女子高生が【ハコスコdeveloper】やってみた。

ハコスコアプリを作ってみよう

現実には存在しないけどハコスコを通すと見ることができるような
いわゆる電脳コイルに出てくる電脳メガネを作ってみましょう。

今回は現実にある特定のモノの上にMMD(MikuMikuDance)のモデルデータを表示してみます。

作業の流れ

その1 Unity上でPC本体のカメラから現実のモノを認識させてハコを表示する 【所要時間 30分】

認識画像作成編 

  1. 認識させたい画像データを用意する
  2. Vuforia開発者登録
  3. VuforiaへARマーカー用の画像登録
  4. Vuforiaからunitypackageダウンロード

Unity編

  1. Unityインストール
  2. Unityプロジェクト作成
  3. Vuforiaからダウンロードしたunitypackageを取り込む
  4. ポチポチクリック
  5. 完成!

その2 ハコをMMDのモデルデータに置き換えてみる【所要時間30分】

  1. MMDモデルデータ変換ツール、MMD4Mecanimの入手と設定
  2. MMDモデルデータの入手と取り込み
  3. ハコと置き換えてみる

その3 スマホで動かしてみる【所要時間30分】

  1. スマホのジャイロセンサーで視点を変える
  2. スマホへ転送する

 

1. Unity上でPC本体のカメラから現実のモノを認識させてハコを表示する

認識画像作成編 

1. 認識させたい画像データを用意する

Tune-chan

G-Tune 公式オリジナルキャラクター「G-Tuneちゃん」登場1周年記念大感謝祭!フォロー&ツイートで描き下ろし色紙とクリアファイルプレゼント!
http://www.g-tune.jp/g-tune_chan/1th/

今回は、マウスコンピューターのゲーミングPCブランド「G-Tune」で行われた、G-Tuneちゃん登場一周年記念イベントで当選した描き下ろし色紙を使います。
画像はスマホで撮影してPCに取り込み、下処理として周りの余分な背景を取り除き除いておきましょう。

2. Vuforia開発者登録

Vuforia(びゅーふぉりあ)とは、アップロードした画像をARマーカーにするWebサービスです。
利用にあたってはユーザー登録が必要になります。
また、今回の利用範囲内では無料で使用することができます。

Vuforia Developer Portal – ユーザー登録 
https://developer.vuforia.com/user/register

登録フォーム入力例

Vuforia登録フォーム入力例

Registerを押してしばらく待つと、登録確認メールが送られてきます。
Vuforia登録確認メール

URLをクリックして、メールアドレスとパスワードを入力しましょう。

Vuforia Login

3. VuforiaへARマーカー用の画像登録

用意した画像をアップロードしてARマーカーに変換してみましょう。

まずは画像をアップロードする前に、電脳メガネを複数の現実のモノを個別に認識するようにするため、各マーカーを複数登録できる入れ物を作ります。(一度だけでOK)

入れ物(Database)のつくり方

Target Manager
https://developer.vuforia.com/targetmanager/project/checkDeviceProjectsCreated?dataRequestedForUserId=

Target Manager で  Create Database  をクリック

Vuforia TargetManagerでCreate Database

 

Create Database のダイアログが表示されます。
Database Name に 「hacoscoGlass」 と入力して  Create  をクリック

Vuforia Create Database

 

入れ物(Database)ができました。

Vuforia Database完成

 

画像をアップロードしてみよう

作成した入れ物(Database)に画像をアップロードしてARマーカーを作ってみましょう。

Target Managerにある作成した入れ物(Database)をクリック

Vuforia ARマーカーAdd1

 

入れ物(Database)の画面で  Add Target  をクリックしてターゲット(ARマーカーにする画像)を追加していきます。

Vuforia ARマーカーAdd2

 

表示された Add New Target ダイアログの各項目を入力して、 Add  をクリック

Vuforia ARマーカーAdd3

 

登録が完了しました。後は画像が変換されるのを待ちます。(数秒)

Vuforia ARマーカーAdd4

 

画面右下にある  Refresh  を押して、先ほど登録した画像が表示されば登録が成功です。Vuforia ARマーカーAdd5

 

4. Vuforiaからunitypackageダウンロード

作成したARマーカーをDLします。
ARマーカーとして扱いたい画像にチェックを入れて、 Download Selected Targets  をクリック
Vuforia UnitypackageDL1

Download Selected Targets ダイアログで各項目を入力し、 Create  をクリック

Vuforia UnitypackageDL2

 

適当な場所にファイルを保存しましょう。

Vuforia UnitypackageDL3

 

 次ページ  いよいよUnityで作ってみよう!