[WebAR]iOSのSafariでARを表示

iPhone上のSafariでARのオブジェクトを表示するまでを試した。

  1. iPhoneXで70枚ほど物体の写真撮影
  2. 撮影した写真から3Dモデルをツールで生成(objファイル)
  3. 生成した3Dモデルをツールでフォーマット変換(obj->usdz)
  4. HTMLに生成したusdzファイルを組み込む

コード

usdzファイルがあればHTMLに埋め込むことで、iOSのAR Quick Lookという機能でiPhoneやiPadのSafariで表示できる。
AppleのARKitのドキュメントにサンプルコードがある。

<div>
	<a rel="ar" href="item/touki-mug.usdz">
		<img src="IMG_touki-mug.jpg">
	</a>
</div>

結果

自分でARの3Dモデルを生成してHTMLに埋め込んで見た結果が以下のような感じ

  • ARのクオリティが低すぎる
  • 縮尺がおかしい(100%で実寸になってほしい)
  • ARの操作が難しい(中心の位置がおかしいのかな)
  • 目的の物体以外を削りたい

参考

AR Quick Lookを使ったモデルのプレビュー

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
little
15年以上プログラマーをしているエンジニアです。Kotlin, Java, Python, C++を使用したServerSideの開発に携わってきました。とりあえずやってみるスタイルで記事を更新していきます。