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

シェアする

iOS12からWebARが対応しました。
Webにusdzファイルを埋めておく事でiPhoneやiPadから画像をタップするのみでARが起動します。

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

■必要な環境

  • macOS High Sierra以降
    Windowsでは下記手順では変換出来ないのでご注意ください
  • Xcode10 Command line tools の usdz_converter を使う為
  • iOS12搭載のARKit対応端末 Safari 変換の為には必要ないが確認の為

※windowsで変換した場合はUnityを用いる方法があります
こちらのフォーラムが参考になります。

■usdzファイルの制約

  • 10万ポリゴンまで
  • アニメーションは10秒まで
  • テクスチャーは2048×2048まで

■手順

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

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

その際以下の点に注意しましょう。
エラーとなりコンバートできませんでした。

・オブジェクト名(ファイル名ではない)に含めてはいけない文字
ドット
スラッシュ
ハイフン

・非表示オブジェクトは含めない
不要なものは削除しておきましょう。

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

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

usdzファイルを作るにはXcode10のCommand line toolsを利用します。
このツールはobjまたはAlembicをusdzに変換するもののため、DCCツールからはどちらかの形式でエクスポートしておきます。
※Alembicのアニメーションは現在対応してないようです

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

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

cd {ディレクトリのパス}

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

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

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

※2019/08/16追記
PBRテクスチャを含める場合は以下のようなコマンドになります。

xcrun usdz_converter {変換したいモデル}.obj {変換後の名前}.usdz
-g {マテリアル名}
-color_map {カラーテクスチャ}.jpg
-metallic_map {メタリックテクスチャ}.jpg
-roughness_map {ラフネステクスチャ}.jpg
-normal_map {法線テクスチャ}.jpg
-ao_map {陰影テクスチャ}.jpg
-emissive_map {発光テスクチャ}.jpg

jpgで書いてますがpngも対応してます。

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

作成されたusdzファイルとテクスチャー一式をサイトにアップします。
サイトに表示させるリンク用の画像も必要になります。
画像からのリンク先にusdzファイルを指定しましょう。

これによってiOS端末でこの画像を閲覧した際、自動的に画像の右上にWebARである事を示すusdz_iconアイコンが付きます。

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

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

最後に動作確認です。
対応端末のSafariでusdzを埋め込んだサイトへアクセスしてみましょう。
Safari以外のブラウザは未対応です。
参考に、こちらにusdzを埋め込んだWebARサンプルがあります。

■usdzはZipファイル※2019/8/16追記

実はusdzはusdcとテクスチャをパッケージ化したzipファイルです。
普通に解凍出来ます。

usdz_unzip
※usdzファイルを解凍したところ

Noが振られたフォルダの中にテクスチャが入っています。
ですのでテクスチャは配布出来ない事情がある場合は注意しましょう。

■usdz単体でもARが起動する※2019/8/16追記

usdzはiOS用「ARファイル」と考えて良さそうです。
WebARとして使うのはあくまで一例で、usdzをiOS端末の[ファイル]アプリに入れておくと、このファイルをタップする事でARが起動します。

また[メッセージ]アプリや[AirDrop]から人に渡すことも出来ます。
ARをシェアするのにも適したファイルフォーマットになっています。

■usdz変換サイト※2018/9/21追記

オンラインでusdzファイルを作れるサイトがありました。
上記手順は少々手間がかかるものなのでこちらを試されるのが早いかと思います。
https://www.vectary.com
※ただしテクスチャ付きのモデルをアップする為にはファイルをglbにしておく必要がありそうです

■動作の様子

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

コメント

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