ブログ記事 (3件)
UnityでWebXRコンテンツをビルドする
Unityプロジェクトの作成からWebXR Exportパッケージの導入、VR/ARコンテンツのWebGLビルドとPC・スマホ・VRヘッドセットでのテスト方法まで、一連の手順を解説します。
WebXR JPのアドベントカレンダー2025が始まりました
WebXR界隈を盛り上げるアドベントカレンダーが今年もスタート。XR系デバイスやAndroidXR、主要ブラウザのWebGPU対応など、WebXRがより盛り上がってきそうな2025年の動向を追います。
【実践】WebXR Shared Spaces でマルチユーザーARを体験する
Meta Quest Browser(v39以降)の実験機能「Shared Spaces」を使って、複数のQuestデバイスが同じ物理空間を自動的に共有するマルチユーザーAR体験を解説。実際に動くデモと、その仕組みを詳しく紹介します。
実験 (46件)
Anchors Basic
XRAnchorを作成し、世界座標に固定した仮想オブジェクトを継続表示する基本デモ。
約5分AudioContext in XR
immersiveセッション中のAudioContextライフサイクル/サスペンド・再開挙動を確認するテスト。
約5分Body Tracking
Body Tracking(proposal)で全身スケルトンを取得し、アバターを駆動する検証。
約5分Camera Access in AR
Raw camera access (proposal) を使い、ARセッション中のカメラフィードをテクスチャ化して表示。
約5分Composition Layers
XRQuadLayer/XRCylinderLayer等の合成レイヤーを並列でレンダリングし品質比較。
約5分Controller Input Advanced
Gamepad API経由でトリガー圧・スティック軸・バイブレーションを扱う高度なコントローラー入力処理。
約5分Depth Sensing
XRDepthInformationから深度マップを取得し、点群/ヒートマップとして可視化するデモ。
約5分DOM Overlay
domOverlayStateを利用し、WebXRコンテンツ上にDOM UIを重ねる表示テスト。
約5分Eye Tracking Basic
WebXR Eye Tracking(proposal)から視線方向を取得し、注視点を可視化する基本デモ。
約5分Face Tracking
Face Tracking(proposal)から表情パラメータを取得し、アバター表情に反映するデモ。
約5分Foveated Rendering
視線座標を用いて中心高解像・周辺低解像に描き分けるフォビエーテッドレンダリング(eye-tracking利用)。
約5分Frame Timing
XRFrame.predictedDisplayTimeを利用したタイミング計測とドロップフレーム検知。
約5分Gamepad API for XR
Gamepad APIを用いてXRInputSource.gamepadを読み取り、ボタン/軸/ハプティクスを処理する汎用パターン。
約5分Geo Anchors
Geo Alignment/GeoAnchors提案を用い、緯度経度に基づくアンカー配置(VPS連携想定)。
約5分Grab Interaction
ピンチ/トリガーでオブジェクトを掴み、親子付けして移動・回転させるグラブ操作デモ。
約5分Hand Haptics
Hand-trackingデバイス向けの触覚(提案段階)を想定し、バーチャルハプティクス入力を試すデモ。
約5分Hand Mesh Visualization
Hand Inputの関節・メッシュデータを可視化し、精度やスキニング状態を確認するデバッグデモ。
約5分Haptics Pulse
連続するPulseパターンを構成し、複数強度のシーケンスを試すフィードバック検証。
約5分Head Tracking
XRFrame.getViewerPoseを用いた6DOFヘッドポーズの取得と適用。
約5分Hit Test Advanced
複数のXRHitTestSource(view/eyeレイとスクリーンタップ)の優先順位制御とオブジェクト配置。
約5分Hit Test Basic
XRHitTestSourceで得たポーズを可視化し、検出平面にオブジェクトを配置する基本パス。
約5分Image Tracking
Image Tracking(proposal)で画像ターゲットを検出し、アンカーとしてコンテンツを配置。
約5分Immersive AR Basic
immersive-arセッション開始とXRWebGLLayerへの背景ビデオ描画を行う最小構成。
約5分Inline Session
inlineセッションを使用した非没入型XR体験。
約5分Layers API
XRProjectionLayer/XRQuadLayerなど複数レイヤータイプを組み合わせるLayers API入門。
約5分LOD System
距離に応じてメッシュを低/中/高詳細モデルへ差し替えるLOD管理。
約5分Persistent Anchors
Anchors Persistence(proposal)でアンカーを保存・復元し、セッションを跨いで位置を保持。
約5分Plane Detection
XRPlaneSetから得た平面境界ポリゴンを可視化し、追従更新するデモ。
約5分Ray Casting
コントローラー由来のレイを3Dシーンに飛ばし、オブジェクトとの交差をハイライトする選択デモ。
約5分Scene Mesh & Occlusion
Real World Meshing提案で環境メッシュを取得し、仮想オブジェクトの遮蔽と当たり判定を検証。
約5分Reference Space
local/local-floor/bounded-floor/stage/unboundedのリファレンススペース差異を比較するデモ。
約5分Render Optimization
レンダリング負荷を計測し、解像度スケール/LOD/バッチ削減で最適化する実験。
約5分Room Tracking
bounded-floor/stageリファレンススペースでプレイエリア境界を取得し、空間を可視化するデモ。
約5分Session End Events
XRSession.end()後のイベントハンドリングとリソース解放を確認するデモ。
約5分Session Features
XRSessionInitでrequired/optionalFeaturesを指定し、利用可否を検査するパターン。
約5分Session Lifecycle
XRSession開始/終了、requestReferenceSpace、フレームループと後始末までのライフサイクル全体デモ。
約5分Session Modes
immersive-vr / immersive-ar / inline のセッションモード差異と用途を比較。
約5分Spatial Audio Advanced
距離減衰モデル、方向性、ドップラー効果をパラメータ調整しながら試せる空間オーディオ検証。
約5分Stereo Rendering
XRView(左/右)のビュー行列とビューポートを使ったステレオ描画パス。
約5分Teleportation
コントローラーで宙に弧線を投げ、getOffsetReferenceSpace()でビュー位置を移動させるテレポート。
約5分Tracked Pointer
XRInputSource.targetRayMode=tracked-pointerのビームを可視化し、UIヒットを検証。
約5分UI Interaction in XR
ワールド空間に置いたUIパネルをレイキャストでフォーカスし、hover/select状態を持たせるデモ。
約5分Viewer Pose
XRFrame.getViewerPoseで得たビューアーポーズを使い、カメラ行列をシーンに適用するデモ。
約5分WebGL XR Integration
WebGLコンテキストをXRCompatibleにし、XRWebGLLayerへ描画する統合パス。
約5分WebGPU XR Integration
WebGPU swapchainをXRWebGLLayer相当へブリッジし、XRフレームにGPU描画する統合実装(proposal)。
約5分XR Frame Loop
XRSession.requestAnimationFrameでXRFrameを取得し、ビューごとにレンダリングする基本ループ。
約5分