irofさんとAR(拡張現実)で遊んでみよう♪

  • 2013.12.02 Monday
  • 02:17

この記事は、いろふ Advent Calendar 2013の2日目の記事です。

1日目は、@Posaune さんの「irofさんってどういう人なのか客観的に分析してみる」でした。
irofさんをJVMとして解析するというのは納得なのですが、
Twitter4JをC#で呼び出したりと相も変わらず素敵です。
そして、衝撃(?)のラストは必見ですwww。

カレンダー2日目の内容としては、
みんなのアイドルirofさんをAR(拡張現実)にご招待してみたいと思います。

(※ARイメージ)
AR_image

あ、先に言っておきますが、絵心はないですよー。

ARを実現する方法はいくつかあるのですが、
今回はお手軽にARが試せるUnity+Vuforiaで試してみたいと思います。


 

■Vuforiaでターゲットを設定してみよう


Vuforiaとは、QUALCOMM社が提供しているARライブラリです。
https://developer.vuforia.com/
その中にUnity用SDKもあるので、今回はそれを使用します。

SDKを使用するにはユーザ登録が必要となりますので、
まずは画面右上にある「Register」からユーザ登録を行います。




次にARライブラリのSDKをダウンロードします。
SDKはAndroid、iOS、Unityの3種類ありますので、
Unity用SDKをダウンロードしておきます。

Unity Extension - Vuforia v2.6
https://developer.vuforia.com/resources/sdk/unity



ダウンロードしてきた、「vuforia-sdk-android-2-6-10.zip」を展開して、
「vuforia-unity-android-ios-2-6-7.unitypackage」ファイルを取り出します。


次に、ARで拡張現実を呼び出すための目印、マーカーを設定します。
Target Manager
https://developer.vuforia.com/target-manager

このページにある「Create Database」をクリックします。
(Cloude DatabaseにもCreate Databaseボタンはありますが、そちらではありません)


クリックすると、マーカーを保存するデータベース名称を聞かれるので、
入力します。(今回はデータベース名:irof にしています)


Createボタンをクリックすると、新しいマーカー用データベースが作成されます。


データベースが出来たら、マーカーとなる画材を登録していきます。
データベース名称(今回はirof)をクリックして、次ページで「Add Target」ボタンをクリック。




マーカー設定画面が表示されます。
ここで別途用意していた、マーカー画材をターゲットとして登録します。

(用意していたターゲット画材)


ターゲットは紙1枚なので、Single Imageを選択して入力し、最後に「Add」をクリックします。


暫く経つと、データベースに登録した画材が反映されます。
(2~3分ぐらいかかりました)


次に、このターゲットをUnity用ライブラリとしてダウンロードします。
上にあるデータベース名:irofをクリックします。
そうすると、先ほど登録したマーカー画材が表示されますので、
チェックを付けて、「Download Selected Targets」ボタンをクリック。


そうすると、マーカーSDKの種類を問われますので、
今回はUnityを選択します。


以上で、事前準備は完了です。
次からは、Unityでの作業となります。


 

■ UnityでARライブラリを実装してみよう



Unityについては、色々な紹介ページが多数ございますので、
そちらを参照して頂くとして、早速ダウンロード&Unity起動を行います。



新規プロジェクト画面はシンプルで何もないですね。
ちなみに、Unityの色が黒みかかっているUnity Pro状態となっていますが、
これは色々試してみたくて、30日体験版状態となっているためで、
ARライブラリで遊ぶだけでしたら、無料Unityでも大丈夫です。

早速、デフォルトに存在しているMain Cameraを削除します。


次に、「Assets」-> 「Import Package」 -> 「Custom Package…」を選択。


Vuforia作業時にダウンロードしていた「vuforia-unity-android-ios-2-6-7.unitypackage」を選択します。
そうすると、インポート選択画面が表示されますので、そのままインポートを行います。


つぎに、自分で設定したマーカーライブラリ(irof.unitypackage)も同じように、
「Assets」-> 「Import Package」 -> 「Custom Package…」から登録します。


これも、そのままimportボタンをクリックします。

次にARライブラリのカメラとマーカーをHierackyに登録していきます。
最初に「Project」 -> 「Assets」 -> 「Qualcomm Augmented Reality」->「Prefabs」を選択します。 



右画面に現れる「ARCamera」「ImageTarget」をHierackyまでドラッグします。


次にARCameraの設定を行います。
ARCameraを選択した状態で、右側に表示されるInspectorから「Data SetLoad Behaviour」にある、
「Load Data Set irof」にチェックをつけ、「Active」にもチェックを付けます。



次にImage targetの設定を行います。
Image Targetを選択状態とし、Inspectorの「Image Target Behaviour」から、
「Data Set」と「Image Target」を設定します。


Unityの下準備は以上です。
 

■拡張現実部分を準備しよう♪


いよいよ、マーカーを見つけた時に、表示する拡張現実のオブジェクトを作成していきます。
しかし、ここで重大な問題にぶち当たります。

スネ夫の前髪問題と同様に、
irofさんを3D作成した場合、正面からみた絵が判りません(汗

それにこれは顔なのか?
胴体があるのか?など、ここに来て根本問題にぶち当たりました。
・・・パンドラの箱が開きかねないので、ここは単純な球体と想定して先に進めます。      

「Game Object」から「Create Other」->「Sphere」を選択し、
球体を作成します。


作成したShpereを「ImageTarget」の配下になるように、ドラッグで移動させます。


デフォルトだと、Sphereのサイズが小さいので、大きくして、ついでに位置調整を行います。

ここら辺は、微調整の世界です。

つぎにSphereに顔の画材を貼り付けます。
用意した画材はこちら


・・・絵心?ねーよ。


用意した画材をMaterialsに、マウスでドラッグして登録します。


次にMaterialsに登録した画材をマウスでShpereにドラッグすると、
画材がShpereに張り付きます。


これで作業は終了です。
早速Androideで見てみましょう。

デバック用のAndroid端末をPCとUSB接続しておきます。
つぎに「File」->「Build Settings…」から、Androidを選択し、
「Build And Run」を選択します。




それでは、irofさんアイコンを
Androidのカメラで写してみます。

無事に3D irofさんが写りました♪


それでは、次に動画で動きをみてみましょう。

以上です。
C#がやりたくて、Unity選択したのに、一切ソース書いてないですね。
こんな簡単にARができるなんてビックリしました。

3日目は、@daiksyさんの
いろふインスタンスの最大数を探る。
http://daiksy.blogspot.jp/2013/12/blog-post.html
です。

 

スポンサーサイト

  • 2017.11.25 Saturday
  • 02:17
  • 0
    • -
    • -
    • -
    コメント
    コメントする








        
    この記事のトラックバックURL
    トラックバック