2021年5月8日

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

目次

  1. はじめに
  2. 実験的な機能としてmodelタグがリリースされた!
  3. 実際に使ってみる
  4. まとめ

はじめに

米国時間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社内でもちょっとざわつきました。 image.png (66.5 kB) 今のところまだ公式の続報はないのですが、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インスペクタ。 image.png (30.3 kB) オンにしてみると、こちらのようにHTMLModelElementプロパティが追加され、currentSrcに3DモデルのURLが入っていますね! image.png (32.9 kB) こちらURLですが、お試しいただくとわかるように何も表示されません…
テストURL IMG_6876.PNG (414.1 kB) 本来このように表示されるのを期待しているのに!
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を使用すると便利です。
詳細はこちらの弊社メディアの記事をご覧ください。 ogp.png (227.5 kB) 【WebAR】model-viewerとは?iOS / Android開発方法

まとめ

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

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

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

CONTACT PAGE TOP