UnityとZapWorksで始めるAR名刺作り
背景
ハンドルネームでの名刺を作ってみたいとふと思ったけど、どうせならARやテクノロジー要素入れたいのでアイデア募集＆IwalenLab. ロゴ制作の話題と合わせてラボでデザイン統一、メンバーカード的なのまで出来たら面白そうと思った。SNSで繋がる中あえて物理の紙切れを持つことの価値を考える。
という話をIwaken Lab.内でしたところ好印象だったので進めました。
開発
ベースはARFukuokaの吉永さんのハンズオン資料をもとに作成しました。
UnityのセットアップからZapWorksでの画像認識⇒ARの実装まではこちらを参考にしてみてください（とても分かりやすいので）
私はAR名刺製作においてプラスαで実装した「Webページ遷移」と「名刺表裏別実装（複数枚画像認識）」について紹介します。
Webページ遷移
WebAR体験用のQRコードを名刺に埋め込むので、どうせなら名刺に書いてあるURLとかにも内部で遷移できたら嬉しいですよね。かといってAR体験中に2DのUIが出るのも違和感があったので、最終的に名刺を5秒注視したら指定のURLに飛ぶという仕組みにしました。
プログラムとしてはカメラ位置からRayを飛ばしてHit時間を計測し、5秒たったら特定のURLを開く関数を実行するという形です。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class RayCast : MonoBehaviour
{
float timer;
void Update()
{
Vector3 origin = transform.position;
RaycastHit hit;
Vector3 fwd = transform.forward * 10;
if (Physics.Raycast(origin, fwd, out hit, 10)){
//Debug.DrawRay(transform.position, new Vector3(10, 0.1f, 0.5f), Color.green);
Debug.DrawRay(origin, hit.point - origin, Color.green);
if (timer > 5.0f){
Debug.Log(hit.collider.gameObject.name);
timer = 0.0f;
if (hit.collider.gameObject.name == "Preview Image"){
OpenWeb("https://iwakenlab.jp/");
}else if (hit.collider.gameObject.name == "Preview Image (1)"){
OpenWeb("https://twitter.com/blackcatyuma");
}
}
else {
timer += Time.deltaTime; //タイマー加算
}
}
else {
timer = 0.0f;
}
}
void OpenWeb(string _openUrl)
{
var uri = new System.Uri(_openUrl);
Application.OpenURL(uri.AbsoluteUri);
}
}
上記スクリプトを「Zappar Camera」にアタッチすればOK
名刺表裏別実装
名刺は表裏がある場合があり、今回もラボの名刺ということで裏面はIwaken Lab.のロゴ、表面は個人の名刺情報というデザインでした。なので、せっかくなら表裏で出るもの変えたいし、それぞれで開くリンクも変えたい。というわけで「Zappar Image Tracking Target」を複製して、Targetとなる.zptファイルを別々に指定してみると、さらっと表裏別の処理を作ることが出来ました。
何個まで複製して動くのか分かりませんが、今回のケースでは2つ出来ればOK。Webページ遷移実装のRayがHitしてる対象のオブジェクト名を取得して、それぞれに飛ぶ先のURLを指定してやっています（上記プログラム27行目付近）。
さいごに
名刺となるとデザインとかも重要になりますよね。「QRコードを大きく入れつつラボメンバー共通で使い回せるシンプルなフォーマット」というところで今回はラボメンに依頼しました。ロゴデザインはShin君、名刺デザインはあさよる君が担当しています（とてもありがとう）
最近は上京してきていろんなイベントにも顔出しやすくなっているので、ぜひAR名刺交換してお話しましょう。みなさんが名刺にどんな体験を乗せてくるのか楽しみです！
追伸
吉永さんが最新のUnity x ZapWorksの資料を公開されていましたので、今から作る人はこちらを参考にしましょう！
おまけ
AR名刺の発展した魅せ方を２つ実践してみたので、こちらもよかったら活用してみてください！
①M5Stack画面上でできるようにしてみた
②NFCタグ付けて、URLへのアクセスを高速化してみた
Discussion