LoginSignup
17
12

More than 3 years have passed since last update.

【Unity(C#)】猿でもわかるが猿すらもう飽きてる今更AR名刺

Last updated at Posted at 2019-04-27

本当に簡単でした

猿並みの知能の私ですが、本当に簡単にできました。

どれくらい簡単かというと
完全なるAR初心者の私(猿)でも、もろもろ2時間足らずで完成しました。

ですので、この記事を見た方は1時間以内には完成すると思います。

※本記事はAndorid端末での実装方法のお話となります。

(UnityにおけるAndorid関連の環境構築だけは自力で頑張ってください...)

そういえばUnity2019.1からAndorid関連の環境構築に必要なものも勝手に
引っ張ってこれるようになっているようです。これで開発環境構築も安心ですね。

Androidの環境構築がまだの方はこちら→まとめ記事

Vuforia

Vuforiaを強くお勧めします。

理由はとてつもなく簡単だからです。
知能が猿なのでARCoreでの名刺作りは難航しました。
ARKitはMac持ってないので試してません。(ください)

しかし、Vuforiaを使うと画像を認識して3Dオブジェクトの表示まで30分足らずでできました。

あと、画像認識の精度が非常に高いです。
さほど特徴的でなくても高い精度で認識してくれます。
ARCoreは登録できる画像が厳しめで、特徴の無い白黒の名刺ではなかなか認識してくれませんでした。

セットアップ

セットアップ~表示までの手順はみんな大好きおもちゃラボさんにまとめられています。
こちら→おもちゃラボ

手順通りに進めるとわかると思うのですが、
Scriptを一切書かずに完成します。

もし、名刺を認識して3Dオブジェクトを表示したいだけならもう終了です。

それでは私の書くことがなくなってしまうので、
今回は名刺にARとして3Dオブジェクトを表示し、
・設定したアイコンをタッチしたら指定したURLに飛ぶ
・顔写真に触れると爆発する(意味不明)
などをやってみようと思います。

私の名刺は白黒で特徴があまりなく、それでも十分認識してくれるのですが、
デモとして紹介するからにはより精度を高めておきたいので、
unityroomの名刺(?)をお借りしました。
IMG_20190424_005700~2.jpg

AR空間のオブジェクトをタッチする

普通の3Dと全く同じ仕組みで大丈夫です。
①触れた位置からRayを出して衝突判定を取る。
②Rayがオブジェクトに当たっていたら指定したイベントを呼び出す

これだけです。

ただし、一つだけルールがあって、
表示したいオブジェクトは登録したImageTargetの子に設定してください。
もう自分で追加したオブジェクトは全部つっこんどいたらいいと思います。

オブジェクト自身にアタッチします
using UnityEngine;
using UnityEngine.Events;

public class TouchedObj : MonoBehaviour
{
    [SerializeField]
    UnityEvent touchEvent;

    void Update()
    {
        //タッチされたらイベント呼び出し
        if (OnTouch())
        {
            touchEvent.Invoke();
        }
    }

    //タッチされたらtrueを返す
    bool OnTouch()
    {
        if (0 < Input.touchCount)
        {
                Touch touch= Input.GetTouch(0);

                if (touch.phase == TouchPhase.Began)
                {
                    //タッチした位置からRayを飛ばす
                    Ray ray = Camera.main.ScreenPointToRay(touch.position);
                    RaycastHit hit = new RaycastHit();
                    if (Physics.Raycast(ray, out hit))
                    {
                        if (hit.collider.gameObject == this.gameObject)
                        {
                            return true;
                        }
                    }
                } 
        }
        return false; 
    }
}

今回はTwitterとQiitaのURLを指定します。

MagicaVoxelで自前でアイコンを用意しましたが、
画像を拾ってきてキャンバスに貼り付けるとかでも十分だと思います。
magicaVoxel_Icon.png

あとは、Inspector上でUnityEventに対して
行いたい処理が書いてあるメソッドを登録してあげればOKです。

    //URLを開く
    public void OpenURL(string url)
    {
        Application.OpenURL(url);
    }

    //爆発
    public void Explosion(GameObject obj)
    {
        obj.SetActive(true);
    }

デモ

アイコンをタッチすると私のTwitter、Qiitaに飛んで、
私の写真をタッチすると爆発します。
ありがとうございました。

imihumei.gif

17
12
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
17
12