トマシープが学ぶ

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

Vectary×GoogleSiteで超簡単マーカー無しWebAR!!(iosのみ)

今年もWebARの季節がやって参りました!

去年はAr.jsとBItBalloonを使ったマーカー有りWebARを作ったそうです。(覚えてない)

bibinbaleo.hatenablog.com

マーカー無しもちょっとやったけどあんまり実用的じゃなかった。

bibinbaleo.hatenablog.com

普段Webをやらないので、WebAR系はめっちゃ疎いんですけど進化しているのでしょうか???

 

USDZ

調べたらUSDZという形式の3Dモデルならios12で簡単に表示できるそうです。

www.toyship.org

このappleのページからipadで簡単にみれました!

ARKit - AR Quick Look Gallery - Apple Developer

AR Quick Look

このUSDZを見るにはAR Quick Lookを使えばいいそうです。

AR Quick Lookの実装はsafariで見るかアプリに組み込むか。

safariで見る方法

qiita.com

・アプリに組み込む方法

qiita.com

今回はもちろんsafariで見る方法を実装します。

追記:USDZファイルを作る(コマンドライン

ちょっとUSDZファイルが欲しくなったのですが、Vectaryで作れなくなっていたのでコマンドラインを使いました。簡単。

lilea.net

デスクトップにobjファイル置いて、

cd desktop

xcrun usdz_converter leo.obj leo.usdz

でできました。

f:id:bibinbaleo:20190629111133p:plain

テクスチャとかはついてない?

ここで使いました。

bibinbaleo.hatenablog.com

結局使えなかったけど。

USDZファイルを作る(Vectary)

USDZファイルを作れるサイトの紹介があったのですが、なんとそのままwebに組み込めます!!!!

appleengine.hatenablog.com

Vrctaryです。アカウント作ってログインして作ります。

www.vectary.com

こんな感じの画面です。

 

f:id:bibinbaleo:20181203143028p:plain

左上のメニューから自分で作ったobjモデルなどをimportできます。

f:id:bibinbaleo:20181203142504p:plain

下の3DAssetsにも3D素材があります。


f:id:bibinbaleo:20181203143023p:plain

GooglePolyと連動しているようです!

f:id:bibinbaleo:20181203164714p:plain

でも色々試したけど全部テクスチャがなかったです。


下のAdd onsから3Dの文字や2D画像もいれられます。

f:id:bibinbaleo:20181203143013p:plain

 

ただ日本語は無理っぽい

メッセージを日本語で入れたかったので、iPadで書いて2Dのimageとして読み込みます。ちゃんと透過してる!

f:id:bibinbaleo:20181203142541p:plain

完成したら右下のExportから書き出し

f:id:bibinbaleo:20181203143035p:plain

サイトに貼り付け 

メールにリンクが届くので開くと・・・

f:id:bibinbaleo:20181203143019p:plain

USDZファイルをダウンロードすることもできますし、コードだけコピーしてブログに貼り付けることもできます!

こんなかんじ!

ios12のsafariでタッチして開いて上のARを押す

f:id:bibinbaleo:20181203141524j:plain

床を認識させる。

f:id:bibinbaleo:20181203215140j:plain

できた!!!!!やば!簡単やん!

f:id:bibinbaleo:20181203141528j:plain

f:id:bibinbaleo:20181203215124j:plain

影も勝手に落ちるし、大きさ・位置・回転変更も直感的にできます!神!!!

ちなみにこんな感じで表示されない時もありました。重いのか?

f:id:bibinbaleo:20181203141609j:plain

GoogleSiteに埋め込み!

はてなブログに簡単に埋め込めるので、このブログを使ってもいいのですが、プライベートなことだし、私のブログ親に教えてないので別のサイトを使いたいです。

index.htmlにコードをコピペするだけですぐに使えるので、去年と同じくBItBalloonなどにアップロードしてもいいのですがもっと簡単な方法があります!

GoogleSite!

sites.google.com

簡単にwebページが作れるものです。

埋め込みに対応しているか半信半疑だったのですが、ちゃんと対応していました!

f:id:bibinbaleo:20181203165833p:plain

はい神。

重い

最初はすんなりいったけど、オブジェクトを増やしたら重くて開かないです。

ネットの回線なのか端末なのかGoogleSiteなのかVectaryなのか

まずオブジェクトを読み込むのにすごい時間がかかる。

しかも読み込んでもARにするとこの画面になる。

f:id:bibinbaleo:20181203141609j:plain

universal scene descriptionってなんやねんと思いググったらライブラリの名前?みたいで特に意味はない。

applech2.com

appleのサンプルサイトは読み込みは時間かかったけど一応ARできたからな〜

オブジェクト減らしていったら時間はかかるけど表示できるようになった!

プレゼントボックスが重いっぽい。

 

追記:父親のiPhoneXだと一瞬で読み込まれた。。。

ええーーーー

えげつな

私の努力〜〜

最後に

ios12のかたはやってみてください! 

楽しい!

Arkit*Unityの参考書が出てた!

こちらのswiftの本の中にもARの解説があるそうです。

SwiftでのARkitコンテンツの作り方はこちらのboothの書籍も良さそうです!

booth.pm