usdzファイルの作り方|iOS12用WebAR

シェアする


2018/09/21追記

オンラインでusdzファイルを作れるサイトがありました。

下記手順は少々手間がかかるものなのでこちらを試されるのが早いかと思います。

https://www.vectary.com

※ただしテクスチャ付きのモデルをアップする為にはglbにしておく必要ありそうです。


iOS12からWebARが対応しました。

Webにusdzファイルを埋めて置くことでiPhoneやiPadで画像をタップするのみでARが起動します。

この記事はそのusdzファイルの作り方メモです。

必要な環境

・macOS High Sierra(Windowsでは以下の手順では変換出来ないのでご注意ください

・Xcode10(Command line tools の usdz_converter を使う為)

・iOS12搭載のARKit対応端末 Safari(変換の為には必要ないが確認の為)

usdzファイルの制約

・10万ポリゴンまで

・アニメーションは10秒まで

・テクスチャーは2048×2048まで

手順

1.DCCツールで3Dモデル作成

3Dモデルをお好みのDCCツールで作りましょう。

その際オブジェクト名にドットは使わないでください。

コンバート時にエラーが出てしまいました。

※CINEMA4D環境で起きた現象です。他環境は未確認です。

PBRマテリアルが対応しており、反射も表現されます。

2.obj/Alembic形式で書き出し

usdzファイルを作るにはXcode10のCommand line toolsを利用します。

usdz_converter 使うのですがこれが obj・Alembic をusdzに変換するもののため、

DCCツールからはobjまたはAlembicでエクスポートしておきます。

※Alembicのアニメーションは現在対応してないようです

3.ターミナルから変換コマンド実行

ターミナルを起動しusdzが保存してあるディレクトリに移動します。

ちなみにディレクトリ移動コマンドは以下。

cd ディレクトリのパス

そこで以下のコマンドを実行。

xcrun usdz_converter 変換前ファイル名.obj 変換後ファイル名.usdz

これでobjがある同じフォルダにusdzが生成されます。

4.サイトにusdzファイルを埋め込む

作成されたusdzファイルとテクスチャー一式をサイトにアップします。

サイトに表示させるリンク用の画像も必要になります。

画像からのリンク先にusdzファイルを指定しましょう。

これによってiOS端末でこの画像を閲覧した際、

自動的に画像の右上にWebARである事を示すusdz_iconアイコンが付きます。

対応端末でない場合はアイコンは何も表示されず画像のみ表示されます。

5.ARKit対応iOS12端末から確認

最後に動作確認です。

対応端末のSafariでusdzを埋め込んだサイトへアクセスしてみましょう。

Safari以外のブラウザは未対応です。

参考に、こちらにusdzを埋め込んだWebARサンプルがあります。


動作の様子

参考にさせていただいたサイト様

ARKit で使用されている USDZ とは何か

Blender から USDZ をつくる

コメント

  1. […] 参考にさせていただいたサイト usdzファイルの作り方|iOS12用WebAR 【iOS 12】 AR Quick Look機能で自作モデルをSafariから見る ARKit で使用されている USDZ とは何か […]