iOS14.5でリリースされた3D制御のmodel要素を試してみる

はじめに

米国時間2021年4月26日、iOS14.5がリリースされました。 マスクを着けたままiPhoneのロックが解除できるようになり、また 持ち物探しタグであるAirTagも話題になりました。
Safariもバージョン14.1になり、いくつか機能アップデートされています。 今回ご紹介する 要素、連絡先呼び出しであるContact Picker API、レンダリングの情報取得が可能なPaint Timing API、別記事でご紹介するWeb Speech API（音声認識）などのアップデートがあります。
中でもまだ国内だとほとんど情報が出ていない、model要素をご紹介します。

実験的な機能としてmodel要素がリリースされた！

まず、私たちWebARの会社としては大変大きなアップデートが！！！
デフォルトオフになっていますが、実験的な機能の中にHTML model elementが！
iOS14.5リリース当日、palan社内でもちょっとざわつきました。 今のところまだ公式の続報はないのですが、Maximiliano Firtman氏の記事が公開され、私たちの仮説の通り、やはり3Dモデルのレンダリング用であると言及されていました！

「The feature is disabled by default, and it represents a 3D Model that can potentially be rendered in virtual reality or augmented reality.」

iOS 14.5 brings the new Safari 14.1 to PWAs and the Web Platform

実際に使ってみる

自社でも試してみました。 こんな感じで試してみます。

<model>
   <source src="./palanyal.usdz">
</model>

iOSの設定からSafari、詳細、Experimental FeaturesのHTML <model> element の設定です。 こちらmodel elementをオフ（デフォルト）の状態のsafariインスペクタ。 オンにしてみると、こちらのようにHTMLModelElementプロパティが追加され、currentSrcに3DモデルのURLが入っていますね！ こちらURLですが、お試しいただくとわかるように何も表示されません…
テストURL 本来このように表示されるのを期待しているのに！
palan3Dでのmodel viewer検証 先述の記事でもこのように書かれています。

「The model element needs one or more elements, presumably in different formats. However, it’s available in the DOM but not working yet:」

残念ながら現時点ではまだレンダリングは対応されていないようです。
ちなみに現時点でApple Quick Lookを活用して3D表示させる為には、このようにシンプルにaタグで実装できます。 <a rel="ar" href="./palanyal.usdz">
そちらを更にリッチに、Androidの場合の表示（GLBもしくはGLTFファイルが必要）させるには、model viewerを使用すると便利です。
詳細はこちらの弊社メディアの記事をご覧ください。 【WebAR】model-viewerとは？iOS / Android開発方法

まとめ

結論として現時点（2021年5月8日）ではまだレンダリングは対応されていないようです。
ですが、もう少ししたらこちらは対応され、またいつかデフォルト設定オンになることを期待したい、夢のある機能です。
というのも、今までAppleではARの表示を個別ページとしてさせていました。aタグで実装していたことからもわかりますね。 あくまでも仮説ですが、model elementではページ内に3Dモデルを埋め込むことができんじゃないかと思っています。
今でもGLBベースであれば、このようにWebARで埋め込むことができますが、これをApple Quick Lookでできることはとても可能性を感じます。
独立したARページではなくWebARページに組み込むことで、Apple Quick Lookのような実サイズ表示、オクルージョンなどAppleがネイティブ側で用意している複雑なAR機能を組み込める可能性があるからです。 アップデートが楽しみですね！
こちらのテストURLは残してありますので、気になる方はiOSアップデートのたびにこちらクリックして3D表示されるか試してみてください！

テストURL 最後に少し宣伝となりますが、先程お見せした3Dの体験ができるURLですが、弊社のpalan3Dというサービスを使用しています。
3Dの編集がこのようにリアルタイムでできてしまう、サービスとなります。
更に今後、FBXをGLBやUSDZに変換する機能、アノテーション（注釈）を追加できる機能、3D自体を編集管理できる機能を強化していきます！ 無料でも使用できますので、ぜひ試してみてください！