[Vuforia] 渋谷の駅広告でバスケしてみた

Levetty株式会社代表の岩佐です。

VuforiaというARライブラリとUnityを用いて、渋谷駅前でバスケットボールができるアプリを実装しました!

外でのマーカートラッキングは、太陽や天気の関係で想像通りに認識してくれないので、その知見を共有します。

※自分でUnityでサンプルプロジェクトを動かしたことがある方を対象に書いています。

作ったもの

今渋谷の駅広告は、 ↓のようにソフトバンクの5G広告になっていて、その看板をマーカーにバスケのゴールを配置しました。

技術について

  • Unity 2018.4.12f1
  • Vuforia
  • iPhone 8 iOS 13.1.3
  • iTween
  • iTween Editor

Stable VersionであるUnity 2018.4.12f1を用いて実装しました。

iTweenはアニメーション用のUnityライブラリで、バスケットゴールが奥からウィ〜ンとせり出してくる感じを表現するために使いました。

標準のAnimatorでも全然実装できます!

Vuforiaとは

Vuforiaは元Qualcommが開発したAR向けモバイルビジョンプラットフォームで、現在はIoTソフトウェアメーカーのPTCが運用を行なっています。

ARエンジンはARKitやARCore、6D.ai、8th wallなどがありますが、Vuforiaは簡単に精度高くマーカートラッキングが実装できるのでオススメです!(無料で試せるのも嬉しい)

Unity 2017.2以降ではVuforiaがデフォルトでインストールされているため、特にインストールする必要はありません!(嬉しい)

準備

Unityプロジェクト作成

3Dを選択してプロジェクトを新規作成します。

VuforiaでDeveloperアカウント作成する

Vuforia Developer Portal からアカウントを作成します。

ログインしてDevelop用のLicence Keyを取得します。

Target ManagerからDatabaseを作成し、マーカーとなる画像を登録します。

ここの画像をお借りしました。https://mag.sendenkaigi.com/brain/201911/up-to-works/017410.php

Single Imageで画像を登録して、Download Database(All)を押してUnity向けを選択したら自動で先ほどのUnityプロジェクトにインポートされます。

実装

マーカーを作成してゴールを配置する

Game ObjectからVuforia Engine > AR Cameraと、Vuforia Engine > Camera Image Targetを追加します。

そして、ImageTargetに先ほどインポートした画像を設定し、ImageTargetの子オブジェクトとして表示したいバスケットゴールを配置していきます。

素材はこちらのサイトでお借りしました。https://www.turbosquid.com/ja/Search/3D-Models/free/basket+ball

画像に対して鉛直下方向を重力方向と一致させるために、マーカーに対してX座標を中心に270度回転させました。

ARCameraVuforia BehaviourWorld Center ModeFIRST_TARGETにすることでy軸マイナス方向を、実際の地球の重力方向と一致させることができます。

1つ注意点で、ゴールネットのMesh Collidarが原因で当たり判定の処理が重くなります。

このように透明なトーラスを配置して、トーラスにMesh Collidarを適用することで当たり判定処理を軽くしました!(もっといい方法があるかもしれない。。)

バスケットボールを投げる

次はバスケットボールを投げる実装をします。

ARCameraにバスケットボールのシュート用のスクリプトを追加します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ShotBallController : MonoBehaviour {

    // バスケットボールオブジェクトをセットしてください
    public GameObject basketBall;

    // バスケットボールを表示するカメラからの距離(m)
    public float offset;

    // ARCameraをセットしてください
    private Camera _camera;

    private void Start() {
        _camera = this.GetComponent();
    }

    private void Update() {
        if (Input.GetMouseButtonDown(0)) {
            shot();
        }
    }

    private void shot() {
        var centerOfLens = _camera.ViewportToWorldPoint(new Vector3(0.5f, 0.5f, _camera.nearClipPlane + offset));

        GameObject _basketBall = Instantiate(basketBall, centerOfLens, Quaternion.identity);

        // スケールは各自変更してください
        _basketBall.transform.localScale = new Vector3(0.015f, 0.015f, 0.015f);

        Ray ray = _camera.ScreenPointToRay(Input.mousePosition);

        Rigidbody rigid = _basketBall.GetComponent();

        // 力は各自変更してください
        rigid.AddForce(ray.direction * 120f, ForceMode.Force);
        rigid.AddForce(_camera.transform.up * 20f, ForceMode.Force);

        // シュート感を出すために手前にボールを回転させています
        rigid.angularVelocity = new Vector3(-40f, 0, 0);
    }

}

カメラの真ん中からタッチした方向に力を加えて射出しています。

バスケットボールのサイズは適宜調整してください。

バスケットゴールの登場アニメーション

奥からせり出してくるような表現をするためにあえてImageTargetの裏側にQuadを内側に向けて外枠を作りました。


そして、バスケットゴールを後方からアニメショーンをさせるために、I Tween Position Toを使います。

あとはこのアニメーションを認識後に作動させるだけで完了です!

実際に渋谷駅で検証してみた

あれ、反応しない。。。。

どうやらライトの加減で認識できなかったみたいです。

iPhoneのメモ帳の機能で看板の写真の歪みをなくしてこれをマーカーにしたところスムーズに認識してくれるようになりました!

まとめ

プログラミングッが必要なのはアニメーションを発火させるためのスクリプトを書くだけで、あとは3Dモデルを配置していく作業で完成しました!

マーカートラッキングするのに1枚の画像を用意するだけで、精度高く認識してくれるのでVuforiaは神です。

ちなみに、マーカー画像が適しているかどうかの5段階評価もしてくれるので、出来るだけ星5評価の画像を使った方が良いです!

最終的にはTikTokに載せて、こんな感じになりました。

Levetty株式会社では、AR技術を使って様々なユースケースを発掘していきます!

ぜひ興味のある方はcontact@levetty.co.jpまで、連絡お待ちしております!