見出し画像

初心者から始めるAR:アプリなしで公開する方法(iphoneのみ)

環境:iMac27,iPhone11

※2020時点での調べ物まとめです


今回のまとめ iphoneならメモにARデータ貼って保存できる

1.blender→基になる3DCGデータを作る
2.gltf/glb書き出し
3.Reality Convertar(アップルから、ベータ版)を起動、ポイっと入れる
4.自動usdz書き出し→共有:メモで確認
5.~.usdzを自作ウェブサイトに組み込む(画像や動画みたいに<a>タグで扱える)

画像1
この時作ってたもの ARで自作アクセサリーを出したかった


ARを作るにあたってめっちゃ記事探しましたが2018前後のが多くて(マーカー必要だった頃) アプリなしでwebARーQuick Lookメインのやつが少なかった
操作は簡単だけど予期せぬエラーめっっっっっっちゃあって辛かったのを遺します。

画像3
エラーだと何も表示されない


↓ここ今回の制作で発見した部分
書き出しまで全部上手くいっても最後メモ→AR(Quick Look)起動してくれない状況が多く発生する。何で?
・個体差(個人差?)があるらしく表示される人とされない人がいる。自分には無理でも他の人には見えてたりする。何で?


調べたけどわかりませんです




↓この方法で出力できてればサイト埋め込みも大丈夫そう

ARを作る流れ

1.blender→基になる3DCGデータを作る
2.gltf/glb書き出し
3.Reality Convertarを起動、ポイっと入れる
4.自動usdz書き出し→共有:メモ
5.iPhoneのメモから起動

画像2


blender〜ARのあいだにあるもの
・usdz →コイツがARデータ。スマホで起動する。
・usdcとかusd系 →blenderで書き出せる形式。このままでもmacで3D画像として見せてくれる。この後usdzに変換する。
・gltfとかglb→blenderで書き出せる形式。アニメーション含むならこっちおすすめ。(なぜかusd系より書き出されるサイズが小さい気がする…?)この後usdzに変換する。
・Reality Convertar→ gltfやそれ系3DCGデータをポイっと入れるとusdzに自動で変換してくれる。ありがとう。Apple製品で、サイトからApple IDで入ってダウンロードして使用できる。無料です。


おまけ
・Reality Composer→ Appleが作ってる3D編集系のツール(配置、動きとか)


ARデータを共有したい!
・個人間→AirDrop
・離れた相手へ→メール(Appleのデフォルトのやつ)
・SNS等で公開→Dropboxでリンク共有してメモに貼って見てもらう
Dropboxでリンク作成&共有するリンクをコピー→ツイッターに貼る&Dropboxサムネイル→(Safariで開く)→Dropbox→エクスポート/直接ダウンロード→メモに保存→起動!
Googleドライブでもできます。




画像4
コンバーターに入れて確認しようとしたら崩壊した

↓以下ダメだった失敗談(覚えてるやつだけ)

ダメだった件その①
・usdc→usdz書き出しするとなんか位置も形状もイカれてる
→アニメーションが付いてるやつは.gltfで書き出そう。でも何も付いてないやつもぶっ壊れてるの、何?なんだろう…⌘J(結合)して1つの物体にしたら壊れは直りました。でも傾いた…何?

ダメだった件その②
・サイズデカすぎ
→出来上がったusdzデータが3桁MB越えてるとさすがのiPhoneも匙を投げる。何も映らない。blender作業で同じ形状は⌘D(複製)じゃなくてalt+D(残像)にしよう。データの増え方がぐっと下がります。残像だからTabキーで編集モードにするとみんな一斉に変形します。

ダメだった件その③
・何表示されませんが
→やっと3桁MBあった基blenderファイルをガンガン削って作り直して、同じusdzデータを3桁MB→47MB→8.8MBまで縮めたのに表示してくれない!軽すぎはお嫌いですか?!!そうですか!!!

ダメだった件その④
・書き出された一部の形が変です
→作り直しました。マジで何?原点の位置がちゃんと物体真ん中にあってくれないと嫌いみたいなことですかね…?何度でも作り直そう…はい…

ダメだった件その⑤
・軽くしようと思って全部他のファイルからのリンクにしたらわちゃわちゃになった。
→めっちゃデカいし見えないしダメ。リンク情報はそんなに好きじゃないみたいです。いろいろ重複してしまうのかな〜。
注釈:このとき、「他のファイルからリンク」を使うとさらにデータが軽くなると聞き作っていたやつをパートごとに分割して別ファイルで作成→リンク機能で合体を試そうとしていました。合掌。
追記:アペンド(他のファイルからコピーしてくるやつ)を2回以上やると微妙なことになりました。表示出来ても5秒くらいで落ちます…何でや!

ダメだった件その⑥
・各パーツに分けて出力→Reality Composer に入れ、配置等組み立て
→やたらとデータがデカくなったのでやめました…

ダメだった件その⑦
・もしかしてアニメーション情報もアペンドでコピーされて来るのが嫌いなのでは?
→全然関係なかった。でもアニメーション情報は同じファイル内で付けていくのが良さそうです。


ひたすらに"表示されません"との攻防が続く、、

追記:blenderは”開き直す”が意外と大事です。見逃してたけど保存のすぐ下にあるので割と重要度高めな機能なのかもしれない・・

画像5
やっと表示できたもの!


💡現在公開されてるARが見れる自作サイト
https://nirohsy.github.io/nirohsy/


XDでのデザイン画面(カンプ)


この記事が気に入ったらサポートをしてみませんか?