[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度回転させました。

ARCameraのVuforia BehaviourのWorld Center ModeをFIRST_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);
    }

}

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

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