トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

ARでUIを出すやつまとめ&実装

ARで情報をいい感じに出すのが流行ってる?

2020/4/18 AppleCard追記

事例

クレジットカード💳

クレジットカードに残高の情報とかが出るというデモ

www.moguravr.com

 

いちいちアプリ立ち上げてARでみるなら嫌だけど、HololensのQRコード読み込み機能みたいに、メガネの電源だけつけた状態でマーカーを凝視したら自動で情報を出してくれるなら良さそう!そんな感じになるのかな〜

f:id:bibinbaleo:20200418221956p:plain

というか今でも、クレカにQRコード貼ってカードのサイトにリンク飛ばせば似たようなことになりそう。Hololensってすごいんだなー

バーコード

www.moguravr.com

バーコードの上に価格情報が出るわけではなく、スマホの画面の下に出るだけっぽい?

スマートウォッチから

www.moguravr.com

 スマートウォッチの画面を拡張。

タイマー

それぞれの料理の残り時間表示。Hololens系と相性が良さそう。

www.moguravr.com

タイマー用紙の質感がすごくいい!環境光推定してるし、回転したらキラってするプラスチック。

名刺

webサイトとか自分の作品の動画とかを表示している

www.moguravr.com

商品情報 

ゲームパッケージにレビューやゲームのスクショ

www.moguravr.com

手にメニュー 

Leapmotionで手に情報を出していた。

 すごい!かっこいい

やる

ARでUIを出したことなかったので、特に理由もなくやってみた。

Vuforia久しぶりすぎてやり方を忘れてたので、下の記事を見ながらやった。

qiita.com

qiita.com

昔より簡単になってる気がする。

オリジナルマーカーを使いたいので、登録

f:id:bibinbaleo:20180630154820p:plain

身の回りの物をスマホで写真に撮って、マーカーにした。

f:id:bibinbaleo:20180630154828p:plain

Canvasをセット。

f:id:bibinbaleo:20180630164728p:plain

f:id:bibinbaleo:20180630154835p:plain

できた!

f:id:bibinbaleo:20180630154838p:plain

名刺にブログとtwitterの画像を表示

f:id:bibinbaleo:20180630170315p:plainf:id:bibinbaleo:20180630154842p:plain

f:id:bibinbaleo:20180630154852p:plain

URLを開く

ボタンを押したらリンクを開くようにします。

Unity3D:ウェブページを開く - devlog [naru design]

public void onURL()
{
Application.OpenURL("http://bibinbaleo.hatenablog.com/");
}

これをボタンをクリックしたら実行するようにしたらブラウザでページが開きました。簡単にできました。

もともと何も設定しなくてもuGUIをクリックできます。スマホでもできるのかな?

f:id:bibinbaleo:20180630165853p:plain

面白いですね。

Androidビルド

Androidビルドしようとしたら、

Vuforia does not support Android TV. Please disable the Android TV compatibility in the Player Settings.

って出た。

f:id:bibinbaleo:20180630160319p:plain

OtherSettingでAndroidTVCompatibilityのチェックを外したらビルドできた。

けどapkをスマホに入れようとしたら、対応してません?みたいに出て結局入れられなかった。

感想

ARといえば、3Dモデルを出してなんぼでしょ!って思ってたけど、ちゃんとデザインされたり、アニメーションがついているUIなら楽しいかも。