トマシープが学ぶ

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

【VuforiaAR】腕時計からポワーンって映像が出てるふうのAR【Unity】

未来を描く冊子に腕時計から情報がふわーって浮かんでいるイラストがあった。

スマートウォッチのフェイスとAR使えばそれっぽい表現できるのでは?と思い作りました。

www.youtube.com

環境:Unity2020.1,Windows10

VuforiaでマーカーAR

 別記事に書きました

bibinbaleo.hatenablog.com

 

未来感あるUIを出す

時計から出てる未来感あるUIってなんだ?

イメージ

jp.123rf.com

jp.123rf.com

jp.123rf.com

もっとあると思ったら見つからなかった・・・

一つ確実にイラストがあった冊子があったけど手元にない

アセットストアで探す

Sci-FiでアセットストアのGUIカテゴリを探すといいのがいっぱいあった

これは立体的でよさそう!

www.asset-sale.net

でも3000円ぐらいする~

 

誰かがARInterfaceという名前でいい感じのセット作ってくれてる

実装

結局これを買いました

いい感じ

f:id:bibinbaleo:20191231153802p:plain

くるくる回るものとかあった

f:id:bibinbaleo:20191231153816p:plain

パネルもある

f:id:bibinbaleo:20191231153810p:plain

f:id:bibinbaleo:20191231153813p:plain

適当に配置する。センスがない~

f:id:bibinbaleo:20191231153806p:plain

タッチ

ARで表示したuGUIのボタンをクリックしてwebページが開くようにしたい。

昔やった時は何の設定もしなくて開いたらしい。

f:id:bibinbaleo:20180630165853p:plain

bibinbaleo.hatenablog.com

今やったらPCでもAndroidでも反応しない・・・と思ったらEventSystemがシーンになかったせいだ!

できた!Androidでも開いた!優秀~~

オブジェクトも出す

トマシープちゃんを出します。

f:id:bibinbaleo:20191231155550p:plain

回します

void Update()
{
this.transform.Rotate(new Vector3(0, 50, 0) * Time.deltaTime, Space.Self);
}

tama-lab.net

シェーダー

シェーダーで未来感を出したい。こちらを使う

github.com

サンプルはこんな感じ

f:id:bibinbaleo:20191231160144p:plain

トマシープちゃんにつけたらギザギザの幅がめっちゃでかくなった。

f:id:bibinbaleo:20191231155546p:plain

なくしてもいいかも

PostProcessingをオブジェクトにだけかける

v2のほうならデフォルトでレイヤーが分けられる、というか分けるのを推奨しているけどv2をARCameraにつけても反応しない!

developer.vuforia.com

よくわからん

しょうがないのでv1のほうを使った。反応するけどレイヤーの分け方がよく分からない。たぶんカメラ2つ使うんだろうけど、めんどくさいのでいいや

f:id:bibinbaleo:20191231163631p:plain

f:id:bibinbaleo:20191231163635p:plain

f:id:bibinbaleo:20191231163638p:plain

最後に

www.youtube.com

(おまけ)RealityComposerでもやってた

 iosのARアプリでもマーカーARできるのでやってみた

bibinbaleo.hatenablog.com

けど、安定しなかった。

最後に

apk配布しています

Release SmartWatchAR · bibinba/Haihu · GitHub

マーカーは下

f:id:bibinbaleo:20191231201851j:plain

本当はwebARでやりたかったけど、マーカーじゃない画像でARできるものない?8thwallは有料だし

Nreal来たらNrealでもやりたいな。