空間Webの新機能

visionOS 26のWeb向けの最新の空間機能を紹介します。刷新されたHTMLモデル要素を使用して3Dモデルをインラインで表示する方法や、モデルの照明、インタラクション、アニメーションなどの強力な機能について解説します。360度ビデオやApple Immersive Videoなどの新しくサポートされるイマーシブメディアをWebサイトに埋め込む方法を説明するほか、Webページにカスタム環境を追加する方法のプレビューもお見せします。

リソース

関連ビデオ

WWDC25

WWDC24

visionOSにおけるイマーシブなアプリ開発のためのカスタム環境の構築

WWDC23

こんにちは visionOS SafariチームのEddyです今年は空間Webにとって重要な年となっています Web体験を新たな次元に引き上げる新機能が追加されています

他のWebコンテンツに合わせて 3Dモデルを立体的にレンダリングできるようになりましたその状態でモデルを操作することもできますまた平面のスクリーンを超えて拡張されたまったく新しいメディアであるイマーシブメディアを再生できるようになりました

Webサイト環境などいくつかの新しいデベロッパプレビュー機能も追加されていますこれらの新しい機能をどのように導入できるか紹介しますどのように3Dモデルを Webページに埋め込みイマーシブメディアとカスタムWebページ環境を提供できるか早速見ていきましょうこれまで数十年間 Webデベロッパは HTML Image要素を使用して画像をWebに埋め込んできました空間コンピューティングの時代を迎えるにあたり AppleではWebコンテンツを新たな次元に引き上げる新しい方法を導入し Webページへの3Dモデルの埋め込みや表示を可能にしましたそれが新しいHTML Model要素ですこの要素は数年前に Web標準化機関に提案されたもので今年からvisionOSのSafariでデフォルトで利用できるようになっています簡単なマークアップで3Dモデルを埋め込み他のWebコンテンツと一緒にユーザーに表示できます既存のモデルレンダリングライブラリとは異なり Model要素は立体的にレンダリングされるためオブジェクトの奥行きを把握することができモデルを動かして様々な角度から表示できます 3Dモデルの埋め込みについてアセットの準備からインタラクションやアニメーションを使って上手にレンダリングする方法まで様々な側面を掘り下げます 3Dモデルを埋め込むにはまずモデルを作成する必要があります visionOSのSafariではModel要素に USDZファイルフォーマットを使用できますこれは3Dコンテンツ業界で広く使用されているフォーマットです既存のツールを使ってUSDZファイルをキャプチャ変換作成できます iPhoneを使って実世界のオブジェクトを 3Dモデルファイルにすることもできます Reality Composerアプリを App Storeからダウンロードするだけです iOSのObject Capture APIを使えば同じようにモデルファイルをキャプチャして作成するアプリを開発できます使用したい3Dモデルの中に異なる形式のモデルが含まれていることがあります macOSには様々な3Dモデル形式をプレビューやコマンドラインツールにより USDZに変換する機能が標準装備されています上級ユーザーが美しい3Dモデルを作成するために使用してきた 3Dモデリングソフトウェアである Blender Houdini Maya Reality Composer Proなどでは USDZ形式でエクスポートできます USDエコシステムには皆さんのワークフローに使用できる幅広いツールがあります詳しくは「Explore the USD ecosystem」 WWDC23セッションをご覧ください 3Dモデルを作成したことがない場合は WWDC23の「Meet Reality Composer Pro」もぜひご覧ください Model要素を使用して色々試してみたいときにテスト用のUSDZファイルがあれば便利です最も簡単で確実な入手方法は developer.apple.com/jpから USDZファイルをダウンロードすることですそれらの中には Object Captureで作られたものもあれば 3Dモデリングソフトウェアを使用して手間暇かけて作られたものもあります他のすべてのWebアセットと同様に速く読み込めるようにファイルサイズを小さくする必要がありますおすすめなのは Macのプレビューを使って圧縮テクスチャでコピーをエクスポートする方法ですファイルを最適化する方法は他にもたくさんあります詳細については WWDC24セッションの「Optimize your 3D assets for spatial computing」をご覧くださいアセットファイルの準備ができたら Webページに埋め込みましょうモデルを埋め込むための構文は簡単です Model要素のsource属性に USDZファイルを適用するだけです終了タグを忘れないでくださいまたは picture要素に配置するときのように source要素を空のModel要素に配置します

Model要素は他のビジュアルDOM要素と同様に動作するためモデルを表示したい場所に Model要素を配置することができますモデルは常にページ平面の背後にレンダリングされることに注意してください Model要素によってページの背後に仮想空間が開くと考えることができますモデルはその空間に存在しますこれにより Model要素がビューにスクロールされたときにコンテンツが予期せずページからはみ出すのを防げますデフォルトでブラウザによりモデルの大きさが要素の境界に収まるように調整されますモデルのバウンディングボックスの xy平面をセンタリングして要素内に収まるよう調整しています

古いWebサーバまたはCDNでは USDZファイルが認識されないことがあり HTTP応答ヘッダに誤ったコンテンツタイプが返されることがあります正しいコンテンツタイプを返すには Webサーバに設定を追加する必要があります各Webサーバにおける USDZ MIMEタイプを指定する方法はご覧の通りです詳細については Webサーバソフトウェアのドキュメントをご参照ください優れたWebサイトの重要な条件の1つは様々なデバイスを使用するあらゆるユーザーが閲覧できることですこのため下位互換性のあるフォールバックを提供することが重要ですフォールバック画像を提供するにはそれをModel要素内に配置します

2Dでレンダリングされたモデルを提供しオブジェクトがどのようなものか他のブラウザを使用しているユーザーも理解できるようにします静止画像の代わりに既存のサードパーティ製ライブラリで 2Dビュー体験を提供できますそれらのライブラリには three.jsやbabylon.js model-viewerなどがあります

これは model-viewerライブラリを使用した例ですこのライブラリは JavaScriptを使用してモデルを2Dキャンバスに描画します 2Dビューアコードを Model要素で囲むことでフォールバック体験として使用することができますこの設定では visionOSのSafariを使用しているユーザーには奥行きのある立体的にレンダリングされたモデルが表示され他のブラウザを使用しているユーザーは 2Dでモデルがレンダリングされますフォールバック動作のカスタマイズを真剣に検討している場合 JavaScriptを使用して Model要素がサポートされているかどうかを検出します

window.HTMLModelElementオブジェクトが存在するかどうかも確認します良策と言えないのはユーザーエージェントがvisionOS Safari であるかどうか検出することですこの方法は非常に脆弱で将来他のブラウザで Model要素がサポートされたときに誤作動する可能性がありますエージェントではなく機能を検出するようにしてください USDZファイルは10MBを軽く超えるためネットワークが遅いと読み込みに数秒かかることがあります UIをいつ更新すればよいかわかるようにモデルが完全に読み込まれたタイミングを知りたいかもしれませんこれを行う一般的な方法はローディングインジケータです

Model要素にはpromiseオブジェクトを返す readyプロパティがありますモデルが完全に読み込まれ promiseが解決されたらローディングインジケータを非表示にして Model要素を表示します読み込みエラーでready promiseが失敗することがあるため再試行ボタンを表示するなどエラーを適切に処理することを忘れないでください自分の経験から言えばデータを読み込んでいることを示す視覚的な要素を表示することでユーザーがページから離れずとどまりやすくなります

これでモデルを埋め込むことができました次にWebサイトでのモデルの見栄えを改善しましょう Model要素ではモデルをレンダリングする仮想空間を定義できます Model要素がページにうまく溶け込むように空間の色を周りのWebコンテンツの色と同じにすることをおすすめします

Model要素をページに追加すると要素全体が仮想空間に置き換えられるためその部分の元の背景色は表示されなくなりますこれを修正するには CSSのbackground-color属性を使用して仮想空間の色を設定する必要がありますこの設定は祖先ではなく Model要素自体に行う必要があることを忘れないでくださいアルファを付けて背景色を指定すると不透明に変換されます色の定義を毎回繰り返したくない場合は CSSカスタムプロパティを使用してコードをDRY化できます Model要素をページに溶け込ませることでクリエイティブなことがしやすくなります

先ほどの例で右側のパネルの裏側まで Model要素を拡張しましたすりガラスエフェクトをパネルに適用することで特定の角度ではカメラが裏側にあることがわかるようになりレイヤ感を強めることができました

このエフェクトを追加する方法はたくさんありますが自分の方法を紹介したいと思いますまずposition: absoluteを使って Model要素をパネルの裏側まで拡張します次にbackdrop-filterで Model要素のピクセルをぼかしすりガラスのエフェクトを表現します linear-gradientを使用してエッジに反射ハイライトを追加し厚みを表現しますパネルの色はテキストが読みやすいように明るくしますこれらすべては昔からある優れたCSSの手法ですが Model要素の奥行きと組み合わせると非常に効果的ですこのままでも見栄えはいいのですが照明エフェクトを調整するとさらに改良できますこれは同じモデルファイルに異なる照明を適用したものです選択した照明によって見え方が変わることに気づきます照明エフェクトを制御するには特殊な画像を使用してモデルの環境がどのように見えるかを定義しますその環境がもたらす光をモデルに反射させますこの手法を画像ベースの照明略してIBLと呼びその画像をIBLファイルと呼びます IBLファイルは歪んで見えますがこれは360度すべての環境を平面の画像に投影しているためですこの平面にした球面投影は正距円筒図法とも呼ばれ IBLファイルでは非常に一般的です IBLファイルは USDZファイルに含まれていないためレンダリング時に指定する必要があります

Model要素にIBLを指定するには environmentmap属性を使用する必要があります何も指定しないとデフォルトの照明がモデルに適用されます IBLはUSDZファイルに含まれていないためモデルファイルを Webページの外部で使用すると同じ照明エフェクトは適用されなくなりますこのためプレゼンテーション用アプリ側で視聴体験に最も適した照明を適用することができますコツの1つは IBLファイルにOpenEXR形式や Radiance HDR形式を使用するのを検討することですこれら2つの形式は表現できる輝度が桁違いであるため反射を格段にリアルに表現できます一方 JPEG IBLは非常にくすんで平坦に見えますモデルの見栄えがよくなったら次はユーザーの操作を作成しましょう Model要素にはすぐに使用できる様々なユーザーインタラクションがありますデフォルトではモデル要素をピンチしたままにするとドラッグ＆ドロップインタラクションが開始しモデルを別のアプリや空の場所にドロップできるようになりクイックルックを介して自分たちの空間にモデルを表示できますこれはモデルを実物大で見ることができる素晴らしい方法でリアルな照明エフェクトのおかげで本物のように見えますモデルは表面に貼り付けたり回転や拡大縮小したりできますドラッグ＆ドロップに加えて Model要素をピンチ＆ドラッグすることでモデルをインラインに表示したまま回転できますモデルを上下に傾けることもできます指を離すとモデルの傾きがリセットされます

このインライン回転動作を有効にするには model要素で stagemode=orbitと指定します回転はy軸に沿って行われジェスチャ中は垂直方向に少し傾けることができます回転時にモデルがページ平面から飛び出ないようにブラウザによってモデルのスケールやオフセットが調整されますこのstagemodeの回転動作がユースケースに十分でない場合はカスタムインタラクションを手動で実装できますモデルを特定の方法で手動で動かしたり向きを変えたりしたい場合は JavaScriptを使って行うことができます仮想空間内のモデルの位置と向きを正確に制御することもできますこれを行うには Model要素により公開される変換行列を変更します

変換行列は entityTransformプロパティを通して公開されていますモデルを読み込むときにブラウザによりデフォルトの配置に必要な変換が計算され entityTransformプロパティに保存されます ready promiseが解決されるとこのプロパティにデータが入力されます

モデルの配置をカスタマイズする方法の一例を紹介しますここではモデルを右向きに回転させるリンクを提供してみます turnRight関数でブラウザの計算された変換行列を entityTransformプロパティから読み取ります次に DOMMatrixクラスの既存のAPIである rotateAxisAngleメソッドを使用して y軸に沿ってモデルを90度回転させます 0, 1, 0はy軸を意味し 90は90度回転することを意味します新しい行列を準備できたらその行列を元のentityTransformプロパティに設定して行列を有効にします entityTransform行列でサポートされている操作には均一スケーリングや回転また平行移動などがありますサポートされていない操作が含まれる行列を entityTransformプロパティに割り当てようとするとエラーになりますほとんどのユースケースではデフォルトのentityTransformで十分ですデフォルトの計算の仕組みを知りたいと思われるかもしれませんこれを理解するために基本に戻って恒等行列に対する entityTransformの動作について説明します

entityTransformを単位行列に設定すると USDZファイルの原点が Model要素の中心点に合わせられますモデルはページ平面の背後の空間にのみレンダリングされるため前方に飛び出した部分はすべてクリッピングされますまたUSDZファイルの1cmが CSSの1cmになるように正確にレンダリングされますこれはCSSでは約38pxに相当します visionOSではユーザーから離れると Safariウインドウは大きくなりますそのためモデルが Webページに表示されるときには USDZファイルで使用される単位と現実世界の実際の単位との間に関係性はありませんオブジェクトを実際のサイズで表示する必要がある場合最善なのは先ほど紹介したようにユーザーがオブジェクトをページからドラッグしてクイックルックで表示することです entityTransformプロパティを非常に独創的な方法で使うこともできます前の例ではカメラの様々な機能を紹介するときにそれに合わせてモデルの各部をズームアップしましたただ回転させるだけでなくモデルアニメーションを使用してカメラのスクリーンを開閉できますその方法をご紹介します USDZファイルフォーマットではファイル内でアニメーションを定義できますこの機能は主要なすべてのオーサリングツールでサポートされています一部のUSDZファイルには複数のアニメーショントラックが含まれています Model要素では USDZファイルで定義された最初のアニメーショントラックを再生できます単純なループアニメーションには loop autoplay属性を使用することができますアニメーションを手動で制御したい場合は Model要素で playおよびpauseメソッドを使用できますアニメーションが再生されているかどうかは pausedプロパティを使用して判断できますこれらのいくつかのAPIは video要素のものと同じであるため馴染みがあるかもしれません

もっと複雑なユースケースでは 3Dモデリングソフトウェアを使用してモデルのタイムラインを作成し各状態の間をアニメーション化しますこのカメラモデルファイルではまずカメラのフラッシュライトの開閉をアニメーション化し続いてカメラのスクリーンの開閉をアニメーション化しましたアニメーション情報は USDZファイル内に保存されます Model要素にアニメーションモデルを配置したら currentTimeプロパティを使用してタイムラインの任意の時点に移動できます例えばカメラのフラッシュを開きたい場合は currentTimeプロパティを 1に設定するだけです currentTimeプロパティの単位は秒であることに注意してください同様にスクリーンを開きたい場合は 3に設定するだけですモデルが中間のアニメーションなしで瞬時に更新されることに注目してくださいこれにより不連続なタイムスタンプにジャンプし必要な特定のエフェクトを作成できます currentTimeプロパティとインタラクションを組み合わせることで面白い体験を生み出すことができます

ここにタイムラインのスクリーンが開くアニメーションの部分に対応する値の範囲が2～3のスライダがありますイベントリスナーを追加しスライダの値の変化を監視します値が変化したら currentTimeをスライダの値に設定しますこうすることでスライダを使用してスクリーンの位置を制御できますこの方法はページのスクロールやカスタムドラッグイベントなど他のインタラクションにも拡張できますまた currentTimeとentityTransformを独創的な方法で組み合わせることもできます前のカメラページの例ではタイマーでアニメーションが動いていました各部はcurrentTimeプロパティを使用してアニメーション化されておりカメラ全体の動きは entityTransformプロパティを使用してアニメーション化されていましたこのページは本当によくできていますが製品に名前を刻印できるようにするなど個性を加えられるようにすることでもっとよくできるかもしれませんしかし USDZモデルに入れるテキストを事前に知ることはできませんそこで動的に生成されるモデルの出番となります実行時のユーザー入力に応じてモデルを表示する必要がある場合 JavaScriptを使用してプログラムによってUSDZファイルをブラウザに生成し Model要素内に表示することができます three.jsは強力なJavaScriptライブラリでプログラムによって 3Dモデルを作成することができます three.jsはそれ自体が奥深いテーマであるため今日はそれについて詳しく説明することはしませんが大まかに説明するとここに THREE.Sceneオブジェクトがありますこれには手順に従って作成されたモデルが含まれていますすでによく作り込まれたシーンオブジェクトがあるとします three.jsにはインポートできる USDZエクスポーターモジュールがありこれをインポートしたら parseAsyncメソッドを使用してモデルシーンの完全なUSDZファイルのデータBLOBを生成します URL.createObjectURLメソッドで生成したデータBLOBを指すオブジェクトURLを作成しますオブジェクトURLを用意できたのでこれをModel要素のソース属性に設定するとレンダリングが開始されますこのテクニックを使うことでオフラインで準備した静的な既知のUSDZファイルを使用しなくて済みます

製品に名前を追加したりテキストの色を変えたりなどユーザーからのデータ入力に基づいてモデルをカスタマイズできます

これの素晴らしいところはカスタマイズしたモデルをドラッグしてユーザーの空間に表示できることです

Model要素でサポートされているAPIは他にもたくさんあります今日はその一部しか取り上げていませんその他のAPIもWebページにモデルを導入する際に役立つかもしれません

Model要素の詳細については MDNのドキュメントページや W3C Webサイトのモデル要素に関する提案をご覧くださいこのセッションの関連リンクに URLを貼っています別のカテゴリのコンテンツであるイマーシブメディアについて説明させてください昨年 Webサイトからパノラマや空間写真を表示する新しい方法が導入されましたがその方法が空間ビデオ 180度 360度広視野角ビデオさらにはApple Immersive Videoにまで拡張されましたパノラマや空間写真の表示についてもいくつかのアップデートがありました iPhone 15 Pro以降ではカメラアプリで空間ビデオを撮影し Apple Vision Proの写真アプリで空間ビデオとして表示することもできます visionOSで新たにサポートされる 3つのイマーシブメディアタイプは 180度ビデオ 360度ビデオ広視野角ビデオですこれらのメディアタイプでは画面が平面にとどまらずユーザーを包み込むようなイマーシブ体験を提供しますまたApple Immersive Videoも表示できるようになりましたこれは撮影したカメラの各レンズについて完璧にキャリブレーションされた高解像度ステレオビデオですこれらのメディアタイプについては今年のWWDCセッション「Explore video experiences for visionOS」をご覧ください

360度ビデオなどのイマーシブメディアファイルをページに埋め込むと 2Dビデオとしてレンダリングされますイマーシブに見えるようにフルスクリーンでビデオを表示し正しく投影されたビデオでユーザーを取り囲みますこのフルスクリーンプレーヤーはしばしば180度ビデオ形式や Apple Immersive Video形式に見られるステレオスコピックコンテンツも対応します以前に撮影したイマーシブメディアをお持ちかもしれません今こそWebサイトに掲載する絶好の機会です既存のvideo要素を使用してそれらすべてのメディアタイプを Webサイトに埋め込むことができます新しい要素や属性を使用する必要はありませんこれまで通り HTTP Live Streamingを大きなビデオアセットとすることができます 180度 360度および広視野角メディアはメディアの投影に関する追加のメタデータが含まれた Apple Projected Media Profileに準拠している必要があります既存のメディアを APMPに変換する方法については今年のWWDCセッションの「Learn about the Apple Projected Media Profile」をご覧ください Apple Immersive Videoの詳細については「Learn about Apple Immersive Video technologies」をご覧くださいこれは広視野角APMPの一例ですメタデータは録画中に使用されたカメラのパラメータをキャプチャします visionOSは各ピクセルが目的の位置に並ぶような形状にしてメディアを表示することで再生時に正しく投影されるようにしますフルスクリーン表示にしたときにエッジ部分でも直線がまっすぐに表示されていますこれがAPNPの威力です video要素のデフォルトのコントロールでフルスクリーンにできます JavaScriptの requestfFullScreen APIによりプログラムでもフルスクリーンにできます実際これはWebページからパノラマや空間写真を表示するときに使用するAPIとまったく同じですパノラマについては同じpicture要素に異なるソースを指定できるようになりましたこれによりフルスクリーン表示になる前に適切なサムネールを表示できますフルスクリーン表示になったら最も幅が広いバリエーションが使用されます

空間写真については requestFullscreen APIが同じように機能するようになりましたインラインで表示するときには空間写真は平坦な2D画像としてレンダリングされますがフルスクリーンで表示するときには空間写真としてレンダリングされます自分の経験から言えば写真が実は空間写真であることまた写真をタップして本当の美しさを見るべきであることを常にユーザーに伝える必要があります将来的には visionOS 2.4以降デベロッパプレビュー機能として追加された新しいcontrols属性を使うことでこれをもっと簡単に行えるようになります controls属性はその画像が空間写真であることを示す空間写真バッジを追加しますフルスクリーンボタンを組み合わせることで JavaScriptを1行も記述せずにユーザーが空間バージョンの画像を簡単に表示できるようにすることができます他のすべてのデベロッパプレビュー機能と同様にこの機能を試すには機能を明示的に有効にする必要がありますこれを行うには「設定」>「アプリ」> 「Safari」>「詳細」>「機能フラグ」で「Spatial Image Controls API」を有効にしますこの画面を開いているうちに次に説明するもう1つの「Website environments」も有効にしておきましょう Webサイト環境は今年から導入された新しいデベロッパプレビュー機能で Webサイト上でユーザーに仮想環境を提供することができますその仕組みはこうですこのサンプルページでは USDZファイルが環境として指定されユーザーはページメニューから環境を表示するかどうか選択できますその際 SafariとWebサイトは表示されたままになります Digital Crownを使用すると気を散らされず環境に完全に没入できますこれはWebサイトをブラウザのウインドウを超えて拡張させる素晴らしい方法です

環境を提供するにはrel=spatial-backdropを指定したlink要素を使用します次に href属性を使用して環境USDZファイルを指定します 3Dモデルと同じように environmentmap属性で USDZファイルにカスタムIBLを指定しますよく作り込まれた環境によりユーザーはレストランや潜水艦地下室など別の場所にテレポートしたように感じることでしょうこれはデベロッパプレビューであるためこの機能を試す前に「設定」で有効にする必要があります Web標準化プロセスにあるためマークアップは将来変更される可能性があります Appleはこの機能の開発を積極的に主導しており皆さんからのご意見を今後の開発の参考としていますカスタム環境の作成方法の詳細については WWDC24の「Create custom environments for immersive apps in visionOS」をご覧ください今日は新しい空間Web機能についてたくさん取り上げました新しいHTML Model要素についてサポートされているインタラクションカスタム照明また手動配置について説明しました既存のvideo要素を使用して様々な新しいイマーシブメディアを Webサイトから直接表示できます将来のWebサイト環境を垣間見ることができました

取り掛かりやすいように Model要素の使用例を webkit.orgにいくつか追加しましたこれを体験する最も優れた方法は実際にApple Vision Proを使って見てみることです覚悟ができたら一歩踏み出して必要に応じて 3DモデルをWebページに追加し驚くような新しい体験をユーザーに提供しましょう Webサイトでビデオを提供する場合今こそWebサイトにイマーシブメディアを組み込む絶好の機会です試しにカスタム環境を追加してみてご意見をお寄せください空間Webの他にも多くのWeb向けの新しい機能が追加されています詳細については今年の「What’s new for Safari and WebKit」セッションをご覧ください

Webテクノロジーに関するバグレポートや機能のリクエストは WebKit向けの問題追跡システムである bugs.webkit.orgから送信できます Safariのインターフェイスや visionOSに関する問題 Appleプラットフォームの問題は feedbackassistant.apple.comから送信してください新しい技術を活用した皆さんの素晴らしい作品を見られることを心待ちにしていますありがとうございました

1:00 - Embed 3D models - Basic syntax
```
<model src="teapot.usdz"></model>
```

4:15 - Embed 3D models with source element

<model>
  <source src="teapot.usdz" type="model/vnd.usdz+zip">
</model>

5:30 - Example server configurations to add USDZ MIME type support

# Apache

```
AddType model/vnd.usdz+zip .usdz
```

# NGINX mime.types

```
types {
  ...
  model/vnd.usdz+zip usdz;
}
```

# Python HTTP server

```
import http.server
Handler = http.server.SimpleHTTPRequestHandle
Handler.extensions_map = { ".usdz": "model/vnd.usdz+zip" }
httpd = http.server.HTTPServer(("", 8000), Handler)
httpd.serve_forever()
```

5:51 - Specify a fall back image for element

<model src="camera.usdz">
  <img src="camera.png">
</model>

6:17 - Example 2D rendering fallback experience

<!-- <model-viewer> library from https://modelviewer.dev/ -->
<script type="module" 
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
</script>

<model src="camera.usdz">
  <!-- Fallback experience for backward compatibility -->  
  <model-viewer src="camera.glb"></model-viewer>
</model>

6:52 - Detect if the model element is supported

if (window.HTMLModelElement) {
  // Supported by this browser
} else {
  // Not supported by this browser
}

7:32 - Implementing a loading indicator using .ready promise

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

if (window.HTMLModelElement) {
  mymodel.ready.then(result => {
	// Hide the loading indicator
	// Show the model
 }).catch(error => {
	// Loading error occurred, show a retry button
 });
}
</script>

8:23 - CSS example for setting the color of the virtual space

<body>
  <!-- page content here -->
  <model src="camera.usdz" class="my_model"></model>
</body>

<style>
:root {
  --main-bg-color: rgb(240, 240, 240);
}

body {
  background-color: var(--main-bg-color);
}

.my_model {
  /* set the virtual space color */
  background-color: var(--main-bg-color); 
}
</style>

9:21 - CSS example for frosted glass panel on top of a

<div class="container">
  <model src="camera.usdz"></model>
  <div class="panel"> ... </div>
</div>

<style>
.container {
  position: relative;
}

.panel {
  position: absolute;
  left: 60%;
  backdrop-filter: blur(20px);
  background: linear-gradient(to right,
                              rgba(240, 240, 240, 0.8),
                              rgba(240, 240, 240, 0.5) 4px);
}
</style>

10:56 - Setting image-based lighting (IBL) with environmentmap
```
<model src="camera.usdz" environmentmap="sunset.exr"></model>
```
12:41 - Allowing inline rotation with stagemode
```
<model src="teapot.usdz" stagemode="orbit"></model>
```

13:31 - Customize placement with JavaScript entityTransform

<model src="teapot.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");
mymodel.ready.then(result => {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
});
</script>

13:49 - Make the model face right with entityTransform

<model src="teapot.usdz" id="mymodel"></model>
<a onclick="turnRight()">Right</a>

<script>
const mymodel = document.getElementById("mymodel");
function turnRight() {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
  const newMatrix = matrix.rotateAxisAngle(0, 1, 0, 90);
  mymodel.entityTransform = newMatrix;
}
</script>

15:03 - Setting the entityTransform to an identity matrix
```
model.entityTransform = new DOMMatrix();
```

16:31 - Basic animation control

<model src="toy.usdz" id="mymodel" loop autoplay></model>
<button onclick="toggleAnimation()">Play/Pause</button>

<script>
const mymodel = document.getElementById("mymodel");

function toggleAnimation() {
  if (mymodel.paused) {
	mymodel.play();
  } else {
	mymodel.pause();
  }
}
</script>

17:35 - Jump to animation timestamp using .currentTime property

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

function openFlash() {
  mymodel.currentTime = 1; // Unit is seconds
}

function openScreen() {
  mymodel.currentTime = 3; // Unit is seconds
}
</script>

18:11 - Update .currentTime with a slider

<model src="camera.usdz" id="mymodel"></model>
<input type="range" id="slider" min="2" max="3" step="any" value="2">


<script>
const mymodel = document.getElementById("mymodel");

slider.addEventListener("input", (event) => {
  mymodel.currentTime = event.target.value;
});
</script>

19:35 - Generate USDZ with three.js and display with

import * as THREE from "three";
import { USDZExporter } from "three/examples/exporters/USDZExporter.js";

async function generateModel() {
	const scene = new THREE.Scene();
	// ... create a really nice scene procedurally ...

	const bytes = await new USDZExporter().parseAsync(scene);
	const objURL = URL.createObjectURL(new Blob([bytes]));

	const mymodel = document.getElementById("mymodel");
	mymodel.setAttribute("src", objURL);
}

23:10 - Embed immersive media

<video src="spatial_video.mov"></video>  <!-- Single file -->
<video src="360_video.m3u8"></video>  <!-- HTTP Live Streaming -->

24:25 - Going full screen with Javascript for

<video src="360_video.m3u8" id="player" controls></video>

<script>
const player = document.getElementById("player");
player.requestFullScreen();
</script>

24:35 - Embed panoramas and offer full screen with Javascript

<picture>
  <source media="(max-width: 799px)" srcset="thumbnail.jpg">
  <source media="(min-width: 800px)" srcset="panorama.jpg">
  <img src="panorama.jpg" id="pano">
</picture>
    
<script>
const pano = document.getElementById("pano");
pano.requestFullScreen();
</script>

24:57 - Embed spatial photos and offer full screen with Javascript

<img src="spatial.heic" id="img">
  
<script>
const img = document.getElementById("img");
img.requestFullScreen();
</script>

25:21 - Embed spatial photos with the new "controls" attribute
```
<img src="spatial.heic" id="img" controls>
```

26:49 - Provide a custom environment

<link rel="spatial-backdrop" href="office.usdz" environmentmap="lighting.hdr">

0:00 - イントロダクション
The visionOS Safari team introduces new features for the spatial web this year, including stereoscopic 3D model rendering, immersive media playback, and developer preview features like website environments.
0:55 - 3Dモデルの埋め込み
The evolution of web development introduces the HTML Model element, enabling the seamless embedding of 3D models directly onto webpages. This new feature, now available by default in Safari on visionOS, revolutionizes how people interact with web content by providing stereoscopic rendering, allowing them to perceive depth and explore 3D objects from various angles. You can create 3D models using various tools, including iPhone's Reality Composer app, macOS Preview, or professional software like Blender and Maya. The USDZ file format is supported, ensuring compatibility across the 3D content industry. To embed a 3D model, developers simply use the '' element in their HTML markup, specifying the USDZ file source. The browser automatically scales the model to fit within the element's bounds. For backward compatibility, you can include fallback images or use third-party 2D viewing libraries. Optimizing file size is crucial for fast loading times. You can utilize tools like Preview to compress textures and employ techniques discussed in WWDC24 sessions. Additionally, the 'ready' property of the '' element allows you to handle loading events, such as displaying loading indicators, ensuring a smooth user experience. The model element in web development serves as a virtual space for rendering 3D models. Be sure to handle loading errors and provide visual cues during loading to maintain user engagement. To ensure the model integrates seamlessly into the page, set the background color of the virtual space using CSS. Apply the 'background-color' attribute directly to the model element, as it replaces the original background color of the region. You can employ styling techniques — such as 'position: absolute', 'backdrop-filter', and 'linear-gradient' — to create effects like frosted glass and specular highlights, enhancing the model's visual appeal. Control the lighting effect on the model using image-based lighting (IBL), defined by an IBL file, which projects the entire 360-degree environment onto a planar image. The model element supports various user interactions out of the box, including drag-and-drop, pinch-to-rotate, and inline rotation. You can customize these interactions using JavaScript, allowing them to control the model's exact location, orientation, and transformation within the virtual space. By manipulating the transformation matrix exposed by the model element, you can create specific actions, such as rotating the model to face a certain direction. The 'entityTransform' matrix in USDZ files enables scaling, rotation, and translation of models. Setting it to an identity matrix aligns the model's origin to the center point, rendering 1 cm in USDZ as 1 cm in CSS (approximately 38 px). You can define animations within USDZ files and play them back using the model element's built-in APIs, similar to those for video elements. The 'currentTime' property allows jumping to specific timestamps in the animation timeline, enabling interactive control. For dynamic models based on user input, you can use JavaScript to programmatically generate USDZ files using libraries like Three.js. This allows for customizations such as adding text or changing colors, and people can still interact with and view the generated models in real space.
21:24 - イマーシブメディアの表示
Support for immersive media on websites is expanded, enabling you to embed various formats such as spatial, 180-degree, 360-degree, and wide-field-of-view videos. With iPhone 15 Pro or later, users can capture spatial video directly from the Camera app and view it on Apple Vision Pro. visionOS now supports these immersive media types, which wrap around the user to provide an all-encompassing experience. Apple Immersive Video is also supported, featuring high-resolution stereo video perfectly calibrated to each camera lens. To view these immersive media files fully, people need to enter full-screen mode, where the video correctly projects around them. You can use the existing '
26:14 - カスタム環境の提供
There's also a new developer preview feature for Safari called Website Environment. This feature allows websites to create virtual environments using USDZ files, enabling visitors to experience immersive settings — such as restaurants, submarines, or dungeons — while still keeping Safari and the website in view. You can implement this feature by using specific HTML markup, linking to USDZ files, and customizing the environments with IBLs. The feature is currently in development, and feedback is encouraged to shape its future.

空間Webの新機能

関連する章

リソース

関連ビデオ

WWDC25

WWDC24

WWDC23