WebXRによるイマーシブなWeb体験の構築

こんにちは Ada Rose Cannonです Safariのエンジニアで Web標準の開発に取り組んでいます 本セッションでは WebXR APIを使って イマーシブなバーチャルリアリティ体験を Webサイトに追加する方法を解説します WebXRとその機能について 詳しくない方のために まずはデモから始めましょう

これがホームビューです Safariを起動し 以前に作成した Webサイトを確認できます という ボタンがあります タップしてみましょう すると Webサイトでイマーシブ体験を 開始してよいか Safariが許可を求めてきます をタップすると チェスガーデンが周囲に現れます

目の前に コンピュータと対戦するための チェスボードがあります 自然な入力方法によって駒を選び 動かすことができます このデモは よりチェスに熟達するために構築しました 構築中に多くのことを学びました 私があまりに早く負けたので 驚かれたと思いますが Digital Crownを押すか ジェスチャーを使って ホームビューに戻れば このバーチャルリアリティ体験を 終了できます 体験が終了すると SafariのWebページに戻ります WebXRを使って Web上で体験を作成するのは 素晴らしいことです 私はMacで何かを作り それを実際のサイズで体験するのが 大好きです このような体験は 以前は想像の中や モニター上でしかできませんでした WebXRは今秋 Apple Vision Proの 全ユーザーが利用できるようになります 本セッションでは このWebXRをご紹介します Webサイトにバーチャルリアリティ機能を 追加する方法や Vision Pro固有の機能を 活用する方法のほか visionOSで Webサイトの テストとデバッグを行う方法もご紹介します

まずはWebXRの説明です

先ほどのチェスのデモでは 実際の バーチャルリアリティの様子をお見せしました WebGLを利用したハードウェア アクセラレーショングラフィックスで 構築された バーチャル世界を体験しました visionOS 2.0のSafariは Vision Proでのイマーシブな バーチャルリアリティセッションを サポートします バーチャルリアリティ（VR）と その関連技術である拡張現実（AR）は 総称してXRと呼ばれます Web上でXR技術を使用するためのAPIが WebXRです WebXRはWeb標準であり W3Cの Immersive Web Working Groupが 開発しています

このグループは Webでのイマーシブ体験の 実現を目指してWebXRを設計しています WebXRは クロスブラウザで動作するだけでなく 最小限の変更で幅広いXRハードウェア上で 動作することができます このAPIは 将来の変化に対し 完璧に対応とまではいかなくとも 柔軟に対応できるものにすることです 新しいフォームファクタや インタラクションモデルが 珍しくないこの分野では 難しい課題です この標準は 堅牢であることを目指すとともに ユーザーのプライバシーとセキュリティを 重視しています Webはリスクが潜む場であり 新しいWeb APIを 利用するのは善意のデベロッパだけでなく 悪意ある人物である可能性もあります WebXR標準には開発当初から ユーザー保護が組み込まれており ユーザーが 想定外の事態に見舞われずに 簡単に退出できるよう設計されています

セキュリティはすべてサーバから始まります すべてのWebXRコンテンツは HTTPSを必須とします これにより XRコンテンツが中間者攻撃 によって改ざんされることを防止できます

WebXRの体験が iFrameにより Webページに埋め込まれている場合 iFrameを含むページの iFrameのHTMLタグに allow="xr-spatial-tracking"という HTML属性を記述する必要があります この要件を満たすことで 広告などのサードパーティコードが デベロッパの許可なく VR体験を起動する事態を防げます

すべてのWebXR体験では セッションの開始をリクエストする際に ユーザーによる操作を必要とします Webサイトには ボタンなどのオブジェクトが必要であり それらの操作が XRセッション開始時に ユーザーが最初に行うアクションとなります ユーザーの操作がないとXRは開始されません ページ読み込みと同時に セッションを始めるのは不可能です XR利用の意思を ユーザーが示さなければなりません

これは Webページとのインタラクションで セッションが開始されるのを防ぎ 突然イマーシブ体験が始まって ユーザーが 驚き混乱することがないようにするためです visionOSでは Safariはユーザーに対して Webサイトでのイマーシブ体験の開始を 許可するか確認を求めます WebXRセッションでは ハンドトラッキングを 継続的に行おうとする場合もあります その場合 2つ目のプロンプトが そのための同意を求めます ユーザーが何を許可しているのかを ユーザーに通知し明確にすることが重要です

WebXRの仕様では セッション全体を通じて ユーザープライバシー保護のための 措置を取ることを推奨しています visionOSでは 視線とピンチ操作による インタラクションモデルがありますが ユーザーが何を見ているかという情報は 非常に機密性が高い情報とされています WebXRとSafariではvisionOS上で ユーザーがピンチしている時のみ ユーザーが何を見ているかの情報を取得し WebXRセッションでは ピンチしている間にだけ ユーザーの手の位置情報を取得します

WebXR標準では WebXRセッションを いつでも終了できるよう システムの インタラクションを予約しておくことを 要件とすることで ユーザーが不快に感じた時などに セッションを迅速に終了できることを 保証しています ユーザーは Digital Crownの操作か ビューに戻るジェスチャーにより いつでも簡単に イマーシブ体験を終了できます デザイナーやデベロッパは 体験を簡単に 終了できるユーザーインターフェイスを 体験内で提供できますし そうするのが望ましいでしょう しかし ユーザーが急いでいる場合 システムのインタラクションで 体験を終了してしまうことも想定しておくべきです

ネットワーク接続の瞬間から セッション終了時までに至る 全期間を通して WebXRのあらゆるレベルで ユーザーの安全とプライバシーを 最優先されています そもそも WebXRは 通常のWeb開発とどう異なるのでしょうか Webには ドキュメントを通じてユーザーに コンテンツを表示する方法が多数あります 従来型のHTMLやCSSを利用できるほか ピクセルを直接レンダリングする キャンバス要素も利用できます WebGLを介して ハードウェアアクセラレーションCGも 利用できます WebXRセッションが開始されると 文書や ブラウザのウインドウは非表示になります

WebXRセッションは コンテンツの レンダリングにWebGLのみを使用します そこで WebXRの説明に入る前に WebGLのレンダリングについて説明します まずはWebGLの初歩として 単一の 四角形のレンダリングから始めましょう まず キャンバスを設定し 頂点シェーダとGLSLの言語による フラグメントの描画から始めます 次に 3D空間で図形の頂点を定義し WebGLで四角形をレンダリングします ベクトル数学と 行列代数を復習しておきましょう

ご覧の通り このシンプルな出力のために 大量のコードが必要でした 生のWebGLだけで作業することを 誰も期待しません そんな必要性はほぼありません 私も 生のWebGLには手を出しません 現実的な作業方法ではないからです 幸い 迅速に作業を開始するための WebGLフレームワークは 多数あります グラフィックスとJavaScriptの両方の 経験が少しでもある方には これらのライブラリが適しています これらのライブラリには WebXRのサポートも組み込まれています WebXRを直接使うのは それほど難しくありませんが これらのライブラリは通常 WebXRの抽象化も提供しています Three.js、Babylon PlayCanvasなどは それぞれJavaScriptを使用していますが 構文が少しずつ異なります

Wonderland Engineは グラフィカルインターフェイスで シーン構築のための 高レベルなツールを提供します

最後のA-Frameは 宣言型であり カスタムHTML要素をベースとしており 3D環境を記述できます A-Frameをもう少し詳しく見てみましょう

私は WebXR初心者には A-Frameをおすすめしています 簡潔で優れているからです シンプルなデモを始めるためのコードは 画面一つに収まります カスタムHTML要素を使えるので WebGLでのシーン構築を 感覚的に理解できます また Webデベロッパにはお馴染みの HTML要素とイベントも利用できます 活発なコミュニティがあり コミュニティが 構築したコンポーネントも多数あります JavaScriptを使って 独自のコンポーネントを 作成する準備ができたら 宣言型のHTML要素で Three.jsライブラリを使用できるため 非常に有益です A-Frameで学んだことを 将来のプロジェクトに活用できます それでは 赤い四角形のようなサンプルを A-Frameでレンダリングする方法を 確認しましょう

ドキュメントの冒頭に ライブラリの JavaScriptファイルを記述すると カスタムHTML要素を使えるようになります シーン要素を追加し A-Frameの内容をラップします 赤いボックスを追加し 目の高さの 少しシーンに近い位置に配置します ボックスの幅 高さ 奥行きは デフォルトでそれぞれ1メートルです WebXRで使用される単位はメートルです 実寸なので 仮想オブジェクトは 入力値通りのサイズになります

すでにボックスを描画できていますね ライブラリがWebXRの領域を処理し WebXRセッションを開始するための ボタンも表示されています もう少し発展させてみましょう ここでは 追加でいくつか シンプルな図形を記述しました 球や円柱などです スカイボックスと平面も追加し 回転させて地面に配置しました

次に a-sceneに カーソルコンポーネントを追加します このカーソルはレイキャスターにより 空間入力が指示している対象を検出し バーチャルイベントを発生させます バーチャルイベントは 2Dドキュメント内の 同等のイベントに基づき命名されます Click Mouse Enter Mouse Leaveなどです 実際のマウスは使っていませんが そのようにします

最後に 動かしたい図形に アニメーションを追加します

これが このデモのコードの全体です

これが結果であり A-Frameによる基本描画の応用です カーソルコンポーネントを使って 視線や ピンチ操作でオブジェクトのイベントを 発生させるデモです これらの基本要素から より完成度の高い イマーシブなシーンを構築できることが 容易に想像できるでしょう A-Frameでは WebXR APIを 必ずしも使用する必要はありませんが コンポーネントの拡張や ほかのフレームワークの高度な利用を 始める場合は WebXRの仕組みの理解が非常に役立ちます WebXRのライフサイクルを 4つのセグメントに分けました セッションを開始する前に まず 何をサポートできるかを 確認する必要があります

WebXRの使用を始める際に 最初に行うべきことは そもそもセッションの開始が可能か 確認することです navigator.xrオブジェクトの IsSessionSupportedメソッドを使用して イマーシブなVRセッションが サポートされているか確認できます

次に VRがサポートされている場合 ユーザーがXRを開始するための ボタンを追加します 基本的には 選択したライブラリが セッションのリクエストを処理するはずです 一方 セッションのリクエストには 興味深いオプションがあるので 確認しましょう セッションをリクエストする際は ハンドトラッキングなどの必要な追加機能を 含めることができます リクエストを行うと セッション開始の許可をユーザーに 求めるダイアログがトリガされます 2つの機能リストがあります 存在しなくても問題ない機能については オプション機能リストに入れます 構築している体験に 不可欠な機能がある場合は 必須機能リストに入れます ただし 機能がサポート対象外であるとか ユーザーがアクセスを拒否したなどの理由で 必須機能を提供できない場合 セッションのリクエストは拒否されます そのため 可能な限り オプション機能リストを使用しましょう セッションを取得したら 参照空間をリクエストできます 参照空間は 座標系の起点を描写します ローカルフロアは一般的によく使用され シーンの起点が ユーザーの足元に近いので便利です 立った状態で利用する体験に適しています

いったんWebXRから離れましょう 通常のWebアニメーションを作成する時は ウインドウから requestAnimationFrameを使用して 次のフレームのレンダリングの期限を示す コールバックを取得します そのフレームに対して行いたい 変更を実行します そして再び requestAnimationFrameを呼び出して 次のフレームのアクションを キューに入れます これはフレームループと呼ばれます WebXRのフレームループも 非常に似ていますが 典型的なXRデバイスは コンピュータとは異なる フレームタイミングを持ちます

Webブラウザは通常 60フレーム毎秒で動作しますが WebXRははるかに高速です そのため WebXRセッションは ウインドウではなくWebXRディスプレイに 同期される 独自のrequestAnimationFrameを セッションに提供します ここでは 次のフレームを ただちにリクエストして この関数を再び呼び出すことで フレームループを確立しています WebXRで デベロッパにとって 最も関心が高いと思われる情報は トラッキングされている様々な オブジェクトの数値的な位置でしょう XRにはグローバルな座標系は存在しません 代わりに すべての位置は セッション開始後にリクエストした 参照空間に基づいています コントローラのtargetRaySpaceなどの WebXRの空間は 位置を表しますが 数値としての値は持ちません 数値的な位置はポーズと呼ばれ 次のフレームの時点での 実際の座標を含みます これをインタラクションや レンダリングに使用できます

これらのポーズを取得するには フレームでgetPoseメソッドを使用します

セッションは デベロッパが セッション終了のメソッドを呼び出すか ユーザーがブラウザにセッション終了を リクエストしたときに終了します 例えば Vision Proでは Digital Crownを押すことで終了します セッションが終了すると どのような理由であれ 終了イベントが発生して通知されます この時点でWebXRに入るボタンを 再度表示できます ここまで WebXRのプロセス全体を見てきました 次に セッション中に何が起こるかを より詳しく確認します 通常のアニメーションフレームに加えて 空間入力の構築に役立つ 興味深いイベントもあるからです

従来のXRヘッドセットには ハードウェアコントローラがあり ボタンとともに3D空間でトラッキングして 位置と向きを知ることができます ハンドトラッキングを使用する 体験もあります ハンドトラッキング入力は ユーザーの 手の動きに関する情報を提供します ユーザーの手の3Dモデルのアニメーションを 作成するための十分な情報が得られます これらの入力は WebXRでは トラッキングポインタと呼ばれます

visionOSには自然な入力方法があります 自然な入力方法では 視線とピンチを組み合わせて バーチャルコンテンツを操作します AppleはW3Cと共同で この入力タイプの WebXRでのサポートを目指してきました WebXRでは これらの入力は（一時的な） トランジェントポインタと呼ばれます ユーザーがジェスチャーを行っている間のみ 存在するからです XRセッションには 反復処理できるすべての 入力ソースのリストが含まれています

XRInputSourceは 何らかの 空間入力方法を表しています

個々のXRInputSourceには targetRaySpaceがあり 負のZ方向に沿って線を引くと XRInputSourceが指している 方向が示されます トランジェントポインタの場合 この空間は ユーザーの目から 視線の対象に向かって 伸びています 入力には 持つ動作の対象の位置を表す gripSpaceが含まれる場合もあります トランジェントポインタの場合 これは 親指とほかの指が触れる場所を表します トランジェントポインタ入力は 通常とは異なり インタラクションが続く間のみ存在します

インタラクションが開始されると 様々なイベントが発生します inputsourceschangeは 入力が追加または削除された時に発生し selectイベントは 選択アクションを説明します visionOSでユーザーがピンチする際に WebXRで何が起こるかを見てみましょう

最初は入力がありません Webサイトは私が何を見ているか 手で何をしているかを認識していません 親指とほかの指を合わせてピンチしてみると

新しい入力が作成され セッションの 入力ソースリストに追加されます そのtargetRayModeを見ると これは トランジェントポインタです

inputsourceschangeイベントが発生し リストが更新され 新しい 入力が追加されたことが通知されます

そしてすぐに selectstartイベントも発生します 選択を行っているためです 次に 手を少し動かします

新しいイベントはありませんが gripSpaceとtargetRaySpaceが示す 位置が更新されます gripSpaceは 親指とほかの指が触れる ポイントに追従します targetRaySpaceは 視線を継続的に トラッキングするわけではありません 代わりに 手にくっついているかのように動くので ピンチ後に手を動かせば 線の方向を調整できます

selectイベントの発生は ジェスチャーが正常に完了したことを 通知します

selectendイベントは ジェスチャーが終了したことを ジェスチャーが成功したかどうかに関わらず 通知します 2つのイベントがあるのは トラッキングが不安定な場合や アクションが途中で キャンセルされた場合に便利です selectendイベントは クリーンアップのために使用し selectイベントは ユーザーが何かを正常に 確認した際のアクションに使用します 最後に 入力が削除されます そして新しいイベントが発生し 入力ソースリストの変更を通知します

もうピンチしていないので 元の状態に戻りました 入力がなくなり Webサイトは 私の手や視線の状態を認識できません

以上 各ステップを順次確認しました 先ほどのチェスのデモを見て 実際の動作を確認しましょう

最初は Webサイトは私の視線の対象や 手の位置を認識していません これはプライバシー保護の面で有益です Webサイトはこうした情報がなくても 優れた体験を提供できます

駒を動かします

駒を見て 親指とほかの指をピンチします

ピンチした瞬間 そのピンチの位置に基づくgripSpaceと 私の目から駒に向かうtargetRaySpaceを持つ 新しい入力が作成されます selectstartイベントが発生します このイベントには フレームと 入力ソースへの参照が含まれます これで 私が見ていたオブジェクトを 特定するためのすべてが揃います Webサイトはレイキャスターを使用して 私が見ていたオブジェクトを特定します

各フレームで私が手を動かすと このオブジェクトが動き targetRaySpaceと同期します 視線には追従せず 手と一緒に動いています

オブジェクトを適当な場所に置き ジェスチャーを解除します selectendイベントが発生し Webサイトは駒を最も近いマスに配置します 入力が削除され Webサイトは 私の手の動きや視線を 認識していない状態になります

以上は ハンドトラッキングがない場合の 説明でしたが visionOSではハンドトラッキングも サポートされています 利用する場合 セッション開始時に リクエストしておく必要があります ハンドトラッキングをリクエストし 許可されると 検出された手が トラッキングポインタの 入力として利用可能になります この入力は トラッキングできる限り 利用可能であると想定されます

この入力では WebGLで作成される 関節スペースを含む手のオブジェクトを 好みのスタイルで表示できます ユーザーは自分の手を見られないと 非常に不便に感じる可能性があるため 手のオブジェクトの表示は重要です

ハンドトラッキングを有効にする場合と 無効にする場合の最大の違いは 無効の場合 ハンドトラッキングが 必要になった時 デベロッパ自身が WebGLでユーザーの手を 描画する必要があることです ハンドトラッキングがない場合は ユーザーの実際の手を表示します ハンドトラッキングを有効化している場合も トランジェントポインタ入力は 引き続き利用できます visionOSでは すべてのselectイベントは トランジェントポインタ入力に 関連づけられています そのため ハンドトラッキングと 自然な入力方法の 両方を組み合わせて使用する 体験を構築できます

つまり ハンドトラッキングをリクエストし ユーザーが両手でピンチすると 同時に最大4つの入力が 作成されるということです

これは ハンドトラッキングを使用して できることの一例です 近くの対象を精密に操作する場合に 非常に有効です

しかし距離が遠いと ハンドトラッキングの 正確な操作は少し難しくなります この例では 2本の近接した指を用いて ハンドルをつかみ オブジェクトを持ち上げて動かしています これを行うために 2本の指の先との 距離を比較し 中心点がハンドルと 交差しているかを確認しました

トランジェントポインタは 近接と遠隔の 両方の距離での オブジェクト操作に利用できます さらに ハンドトラッキングが 有効な場合でも利用できます

トランジェントポインタと ハンドトラッキングは非常に便利ですが Webにはほかにも 多くの役立つ機能があります WebXRのセッションで ドキュメントが非表示になっている間も 従来のWebサイトを構築する際に用いる 多くの標準的なWeb APIを利用できます

WebXRとの組み合わせが 特に効果的なWeb APIをご紹介します WebXR固有の入力以外にも PlayStation 5のコントローラなど 従来のゲームパッドを使用できます ゲームパッドの ボタンやアナログスティックは 小さなVRデバイスの操作に最適でしょう 音声合成や音声認識は 音声インターフェイスの構築に有効です コマンドを発話してアクションを実行し 音声応答を聞くことができます 優れたステレオグラフィックとの統合の 最も重要なメリットの一つは 環境音や効果音に利用できることです Web Audio APIのパンナーノードを利用して 空間サウンドスケープを作成すれば 真にイマーシブな体験を構築できます 実際にそのオブジェクト自体から 音が出ているように感じられると イマーシブ感が増します 以上がWebXRの概要です 次に visionOSでの テストとデバッグの方法を説明します コンテンツをテストする場合 Vision Proの実機か visionOSのSimulatorを使用できます この例ではSimulatorを使用します WebXRを使用するには HTTPS Webサイトなどのセキュアな環境が 必要ですが ほかの環境例としては 開発マシンのローカルホストが挙げられます この例では 先ほどのチェスのデモを HTTPサーバで実行しています ページを開き XRセッションを 開始するボタンをテストできます WASDキーを使って3D空間を移動できます 右クリックしてドラッグすると カメラを回転させられます セッション中にウインドウをクリックすると トランジェントポインタ入力をテストできます

しかし Simulatorは ハンドトラッキングのテストには非対応です そのテストには実際のデバイスが必要です このページには パフォーマンスを 確認するためのログ作成を設定しました 現在のフレームレートと 描画呼び出しの回数を確認できます macOSのSafariの Webインスペクタを使用してページを検査し ページが適切に動作していることを 確認できます

このページには メニューから移動できます この画面ではログの確認や JavaScriptの コードの各ステップの検査 停止 実行を ローカルのWebページと同様に行えます

Simulatorは主に 体験を構築する際の 迅速なイテレーションに使用します その後 変更をサーバにプッシュし 実際のデバイスを使用して 変更を検証します

visionOSでの デバッグとテストに関する詳細は こちらのWebKitのブログ記事で確認できます このブログの情報が Vision Pro向けの WebXR体験の構築に取り組む みなさんのお役に立ちましたら幸いです まだデバイスをお持ちでない方にも有益です

Safari向けのデベロッパツールについて 包括的に解説している WWDC23でのPatrickのセッション 「Rediscover Safari developer features」もご視聴ください WebXRは Appleプラットフォームに新しく 追加された技術で まだ初期段階にあります みなさんがWebXRを利用して どのような体験を構築されるか楽しみです そして今後も この分野の開発に 貢献していただけましたら幸いです

Simulatorを使えば ご自身の WebXRプロジェクトがvisionOSと 新しいトランジェントポインタ入力に 対応しているか Vision Proをお持ちでなくても検証できます WebXRをまだ試したことがない方は ぜひご自身でお試しになってください WebXRとWebGLには 大規模で活発なコミュニティがあり グラフィックスコーディングを最近始めた デベロッパのためのリソースが多数あります

本セッションに関連するリソースや セッションもぜひご確認ください ご視聴ありがとうございました WWDCをどうぞお楽しみください