スポンサーサイト

  • 2016.05.30 Monday

一定期間更新がないため広告を表示しています

  • 0
    • -
    • -
    • -

    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
    です。

     

    スポンサーサイト

    • 2016.05.30 Monday
    • 02:17
    • 0
      • -
      • -
      • -
      コメント
      コメントする








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

      PR

      calendar

      S M T W T F S
       123456
      78910111213
      14151617181920
      21222324252627
      28293031   
      << May 2017 >>

      selected entries

      categories

      archives

      recommend

      recommend

      recommend

      recommend

      profile

      search this site.

      others

      mobile

      qrcode

      powered

      無料ブログ作成サービス JUGEM