LoginSignup
8
6

More than 3 years have passed since last update.

@koyataro(岩佐 晃也)

ラズパイ4をVuforia Engineで分身させてみた ~Object Recognition編~

Last updated at Posted at 2020-05-10

今回は、Vuforia EngineのObject Recognitionという機能を用いて、Raspberry Pi 4を分身させてみました。

ラズパイ4の物体形状を認識して、AR表現がどれくらい簡単にできるのか検証してみました。

実装も非常に簡単で、ほとんどぶれることがなかったので開発の知見を残していきたいと思います！

ラズパイが分身して集まって、ドラクエのキングスライム感を出してみました笑

Vuforia EngineのImage Targetはよく使っていたのですが、物体に対しての精度がすごくてかなりびっくりしました！

実行環境

  • Unity 2019.3.0f3
  • Vuforia Engine 9.0
  • iPhone 11 Pro
  • iTween (アニメーションができるUnity Asset)

Vuforia Engineとは

Vuforia Engineは、iOSやAndroid、PC、HoloLensといったAR/MRデバイスに対応したAR開発プラットフォームです。

Vuforia EngineはPTCが提供していますが、元々はQualcommが開発しており、2015年にPTCがVuforia事業を6500万ドルで買収しています。

マーカートラッキングを非常に得意としており、特徴点の多い(複雑な)画像であればほとんどぶれることなく3Dオブジェクトを配置することができます。

詳しくはこちらをご覧ください！

今一番ホットなARライブラリ「Vuforia」とは

今回はスキャンしたオブジェクトをターゲットにするObject Recognitionを使っていきたいと思います。

Object Recognitionとは

Vuforia EngineにはObject Recognitionというスキャンした物体をマーカーにする機能があります。

AndroidでVuforia Object Scannerを使用することで物体をスキャンすることができます。

詳しくはこちら
https://library.vuforia.com/articles/Training/Object-Recognition

今回は、4GBのメモリが載ったラズパイ4を最近購入したのでラズパイをターゲットにしてみました！

スキャンの手順

次のような画像がScannerアプリと同じフォルダに入っているので、印刷します。

A4-ObjectScanningTarget.jpg

模様がたくさんあるところがマーカーになっているので、マス目部分におきます。

scanner.png

あとはVuforia Object Scannerアプリを起動して360度カメラを動かすだけでスキャンが完了します！

スキャンが完了したあと、右上のシェアボタンから.odファイルを取得します。

94925362_251665045887943_1038141200860708864_n.png

95096169_2445353042391883_2792907199821643776_n.png

何らかの手段でPCに.odファイルを送ってください！

Developer Portalでターゲットの登録

次にVuforia Developer Portalで先ほどスキャンしたターゲットの情報を登録していきます。(無料で会員登録できます！)

ライセンスキーとターゲットを登録していきます。

ライセンスキーの取得

Vuforia Engineを使うには、ライセンスキーを取得する必要があります。

開発で使う分には無料で使用できるので以下の手順で取得します。

image.png

ログイン後、右上の「Get Development Key」から無料ライセンスキーを作成します。

image.png

License Nameは特になんでも良いです！

これでライセンスキーを取得できました。

ターゲットの登録

ダウンロードした.odファイルを、Vuforia DeveloperサイトでObject Targetとして登録します。

image.png

「Target Manager」タブの「Add Database」で、ターゲットを格納するデータベースを作成します。

image.png

データベースの名前とDeviceにチェックを入れて作成します。
ちなみにCloudを使用すると、リリース後であっても管理画面から簡単にターゲットの追加ができたりします。

image.png

最後にデータベースの「Add Target」を選択し、先ほどダウンロードした.odファイルを登録します。

これでターゲットの登録は完成です！

モデルの用意と配置

ターゲットの登録が完了したので、次はUnityでオブジェクトを表示していきます！

今回は無料でダウンロード可能なラズパイの3Dモデルを使用しました。

Vuforia Engineをプロジェクトに追加する

まず、先ほどスキャンしたラズパイを認識するために、こちらから.unitypackageをダウンロードして展開します。

まず、ARCameraを追加し、「Open Vuforia Engine configuration」を押して「App License Key」に先ほど取得したライセンスキーを追加します。

image.png

これで、Vuforia Engineのアクティベーションが完了したので、UnityでObjectTargetを配置し、その配下に3Dモデルを配置します。
ラズパイのスケールは0.102にするとちょうどよい大きさになりました。

image.png

このまま実行したところ、3Dモデルが実物とかなりずれていたので、ポジションの調整をしていきます。

image.png

スキャンしたラズパイと重なるようにスケールとポジションの調整をします。
実行しながらリアルタイムに値を調整していくときれいに重なります。

image.png

すると、このようになりました。

ezgif.com-optimize.gif

いつからARに切り替わったのか分からないくらいスムーズに表示されています！！

これだけでも十分なのですが、今回はもう少し遊んでみるために、分身9個のラズパイ3Dモデルを配置してみました。

それぞれにアニメーションをつけていきます！

アニメーション

分身アニメーション

今回のアニメーションはiTweenを用いて実装しました。

Object Targetがラズパイを認識したときに、startAnimationを呼び出す実装にしています。
Object Target側からディレイを指定します。

image.png

RaspiBehaviour.cs
public class RaspiBehaviour : MonoBehaviour {

    public bool isMain = false;

    public void showAnimation(float waitTime = 0f) {
        Invoke("move", waitTime);
    }

    void move() {
        var hash = iTween.Hash("islocal", true);
        hash.Add("x", 0.071f);
        hash.Add("y", 0.003f);
        hash.Add("z", 0.049f);
        hash.Add("time", 1f);
        iTween.MoveFrom(this.gameObject, hash);
        iTween.ScaleTo(this.gameObject, new Vector3(0.102f, 0.102f, 0.102f), 0.5f);

        Invoke("hideAnimation", 2.0f);
    }

    void hideAnimation() {
        var hash = iTween.Hash("islocal", true);
        hash.Add("x", 0.071f);
        hash.Add("y", 0.003f);
        hash.Add("z", 0.049f);
        hash.Add("time", 1f);
        iTween.MoveTo(this.gameObject, hash);

        if (isMain) {
            Invoke("expand", 1.2f);
        } else {
            Invoke("setDeactive", 0.6f);
        }
    }

    void expand() {
        iTween.ScaleBy(this.gameObject, new Vector3(2.0f, 2.0f, 2.0f), 0.4f);
        Invoke("explode", 0.6f);
    }

    void explode() {
        iTween.PunchScale(this.gameObject, new Vector3(0.25f, 0.25f, 0.25f), 0.6f);
        foreach (var _transform in gameObject.GetComponentsInChildren<Transform>()) {
            Debug.Log(_transform.name);
            var particle = _transform.GetComponentInChildren<ParticleSystem>();
            particle.Play();
        }
    }

    void setDeactive() {
        this.gameObject.SetActive(false);
    }
}

こちらのRaspiBehaviourを9個のラズパイモデルにコンポーネントとして追加していきます。

初回のアニメーションで9個に分散、2秒のディレイののち中心部にあつまり、メインのラズパイ以外は非表示にし、メインのラズパイ を2倍に拡大させています。

情報表示アニメーション

情報表示の部分は、パーツ部分にタッチを受付けるためと、情報表示のためのQuadを用意しています。

情報表示の部分はTextMesh Proを使っています。

image.png

InfoBehaviour.cs
public class InfoBehaviour : MonoBehaviour {

    private bool isShown = false;

    public Vector3 from;
    public Vector3 to;

    public void show() {
        isShown = !isShown;
        if (isShown) {
            var hash = iTween.Hash("islocal", true);
            hash.Add("x", to.x);
            hash.Add("y", to.y);
            hash.Add("z", to.z);
            hash.Add("time", 0.2f);
            iTween.MoveTo(this.gameObject, hash);
            iTween.ScaleTo(this.gameObject, new Vector3(1f, 1f, 0.01f), 0.4f);
        } else {
            var hash = iTween.Hash("islocal", true);
            hash.Add("x", from.x);
            hash.Add("y", from.y);
            hash.Add("z", from.z);
            hash.Add("time", 0.2f);
            iTween.MoveTo(this.gameObject, hash);
            iTween.ScaleTo(this.gameObject, new Vector3(0f, 0f, 0f), 0.4f);
        }
    }
}

このInfoBehaviourコンポーネントをそれぞれの情報表示用のQuadに追加しています。

Object Recognitionの検証

ブレ耐性

ラズパイに3Dモデルをあてた状態で水平方向に軽く振ってみましたがちゃんとトラッキングできていました、すごい。

ezgif.com-video-to-gif (1).gif

横からの撮影

時折横からの撮影では時折ずれてしまうことがありました。
金属部分の反射の関係が大きくなってしまうからなんでしょうか。。

side.gif

半分隠してみた

ラズパイを半分隠してみたところ少しだけ3Dモデルが揺れたものの、問題なく表示できていました
特徴点が半分くらい認識できれば良さそうですね！

half.gif

遠くから撮ってみた

60センチくらいラズパイから離してトラッキングしてみました。

long.gif

ちょっと傾いていますね。。

使ってみたところ30センチ以内からの撮影であれば安定していました。

まとめ

Vuforia Engineは円柱型や直方体のそれぞれの面の画像を用意することでトラッキンッグすることができますが、ラズパイのような特殊な形をしていてもトラッキングをすることができました。

商品にARでエフェクトを作成したり、説明を加えたりするのは面白そうだな〜と感じました。

開発者向けのVuforia Slackコミュニティサイトもあるようです。
Vuforiaの新情報を取得できたり、実装で困ったことがあれば質問できるのでおすすめです！

また今回のコードはGithubに載せているので是非クローンしてお手元で試してみてください！

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
6