WebXR 実験

Quest / スマートフォン / PCで動作するデモ

Anchors BasicAR
初級

Anchors Basic

XRAnchorを作成し、世界座標に固定した仮想オブジェクトを継続表示する基本デモ。

5
AR Lighting EstimationAR
上級

AR Lighting Estimation

現実に仮想オブジェクトを馴染ませるための環境光推定プロトタイプ。

15
AudioContext in XRAudio
中級

AudioContext in XR

immersiveセッション中のAudioContextライフサイクル/サスペンド・再開挙動を確認するテスト。

5
Body TrackingTracking
上級

Body Tracking

Body Tracking(proposal)で全身スケルトンを取得し、アバターを駆動する検証。

5
Camera Access in ARAR
上級

Camera Access in AR

Raw camera access (proposal) を使い、ARセッション中のカメラフィードをテクスチャ化して表示。

5
Composition LayersAdvanced
上級

Composition Layers

XRQuadLayer/XRCylinderLayer等の合成レイヤーを並列でレンダリングし品質比較。

5
Controller HapticsHaptics
初級

Controller Haptics

ゲームパッドAPI経由でのXRコントローラー振動フィードバックの強弱テスト。

5
Controller Input AdvancedInput
中級

Controller Input Advanced

Gamepad API経由でトリガー圧・スティック軸・バイブレーションを扱う高度なコントローラー入力処理。

5
Controller Input BasicInput
初級

Controller Input Basic

XRInputSourceのgrip/targetRayポーズとselectイベントを用いた基本的なコントローラー入力処理。

5
Depth SensingAR
中級

Depth Sensing

XRDepthInformationから深度マップを取得し、点群/ヒートマップとして可視化するデモ。

5
DOM OverlayAdvanced
中級

DOM Overlay

domOverlayStateを利用し、WebXRコンテンツ上にDOM UIを重ねる表示テスト。

5
Eye Tracking BasicInput
中級

Eye Tracking Basic

WebXR Eye Tracking(proposal)から視線方向を取得し、注視点を可視化する基本デモ。

5
Face TrackingTracking
中級

Face Tracking

Face Tracking(proposal)から表情パラメータを取得し、アバター表情に反映するデモ。

5
Foveated RenderingRendering
上級

Foveated Rendering

視線座標を用いて中心高解像・周辺低解像に描き分けるフォビエーテッドレンダリング(eye-tracking利用)。

5
Frame TimingPerformance
中級

Frame Timing

XRFrame.predictedDisplayTimeを利用したタイミング計測とドロップフレーム検知。

5
Gamepad API for XRInput
中級

Gamepad API for XR

Gamepad APIを用いてXRInputSource.gamepadを読み取り、ボタン/軸/ハプティクスを処理する汎用パターン。

5
Geo AnchorsAR
上級

Geo Anchors

Geo Alignment/GeoAnchors提案を用い、緯度経度に基づくアンカー配置(VPS連携想定)。

5
Grab InteractionInteraction
中級

Grab Interaction

ピンチ/トリガーでオブジェクトを掴み、親子付けして移動・回転させるグラブ操作デモ。

5
Hand HapticsHaptics
上級

Hand Haptics

Hand-trackingデバイス向けの触覚(提案段階)を想定し、バーチャルハプティクス入力を試すデモ。

5
Hand Mesh VisualizationInput
上級

Hand Mesh Visualization

Hand Inputの関節・メッシュデータを可視化し、精度やスキニング状態を確認するデバッグデモ。

5
Hand Tracking AdvancedInput
中級

Hand Tracking Advanced

ピンチとグラブの指カール強度を可視化するハンド入力の応用デモ。

8
Hand Tracking BasicInput
初級

Hand Tracking Basic

WebXR Hand Input APIを使用した基本的な指のトラッキング実験。

5
Haptics PulseHaptics
中級

Haptics Pulse

連続するPulseパターンを構成し、複数強度のシーケンスを試すフィードバック検証。

5
Head TrackingTracking
初級

Head Tracking

XRFrame.getViewerPoseを用いた6DOFヘッドポーズの取得と適用。

5
Hit Test AdvancedAR
中級

Hit Test Advanced

複数のXRHitTestSource(view/eyeレイとスクリーンタップ)の優先順位制御とオブジェクト配置。

5
Hit Test BasicAR
初級

Hit Test Basic

XRHitTestSourceで得たポーズを可視化し、検出平面にオブジェクトを配置する基本パス。

5
Image TrackingAR
中級

Image Tracking

Image Tracking(proposal)で画像ターゲットを検出し、アンカーとしてコンテンツを配置。

5
Immersive AR BasicAR
初級

Immersive AR Basic

immersive-arセッション開始とXRWebGLLayerへの背景ビデオ描画を行う最小構成。

5
Inline SessionSession
初級

Inline Session

inlineセッションを使用した非没入型XR体験。

5
Layers APIAdvanced
上級

Layers API

XRProjectionLayer/XRQuadLayerなど複数レイヤータイプを組み合わせるLayers API入門。

5
LOD SystemPerformance
中級

LOD System

距離に応じてメッシュを低/中/高詳細モデルへ差し替えるLOD管理。

5
Persistent AnchorsSession
上級

Persistent Anchors

Anchors Persistence(proposal)でアンカーを保存・復元し、セッションを跨いで位置を保持。

5
Plane DetectionAR
中級

Plane Detection

XRPlaneSetから得た平面境界ポリゴンを可視化し、追従更新するデモ。

5
Ray CastingInteraction
初級

Ray Casting

コントローラー由来のレイを3Dシーンに飛ばし、オブジェクトとの交差をハイライトする選択デモ。

5
Scene Mesh & OcclusionAR
上級

Scene Mesh & Occlusion

Real World Meshing提案で環境メッシュを取得し、仮想オブジェクトの遮蔽と当たり判定を検証。

5
Reference SpaceRendering
初級

Reference Space

local/local-floor/bounded-floor/stage/unboundedのリファレンススペース差異を比較するデモ。

5
Render OptimizationPerformance
上級

Render Optimization

レンダリング負荷を計測し、解像度スケール/LOD/バッチ削減で最適化する実験。

5
Room TrackingTracking
中級

Room Tracking

bounded-floor/stageリファレンススペースでプレイエリア境界を取得し、空間を可視化するデモ。

5
🧪
Input中級

ハンドトラッキングサンプル

WebXR Hand Tracking APIを使った基本的なジェスチャー認識

45分
Session End EventsSession
中級

Session End Events

XRSession.end()後のイベントハンドリングとリソース解放を確認するデモ。

5
Session FeaturesSession
中級

Session Features

XRSessionInitでrequired/optionalFeaturesを指定し、利用可否を検査するパターン。

5
Session LifecycleSession
初級

Session Lifecycle

XRSession開始/終了、requestReferenceSpace、フレームループと後始末までのライフサイクル全体デモ。

5
Session ModesSession
初級

Session Modes

immersive-vr / immersive-ar / inline のセッションモード差異と用途を比較。

5
Spatial Audio AdvancedAudio
中級

Spatial Audio Advanced

距離減衰モデル、方向性、ドップラー効果をパラメータ調整しながら試せる空間オーディオ検証。

5
Stereo RenderingRendering
中級

Stereo Rendering

XRView(左/右)のビュー行列とビューポートを使ったステレオ描画パス。

5
TeleportationInteraction
中級

Teleportation

コントローラーで宙に弧線を投げ、getOffsetReferenceSpace()でビュー位置を移動させるテレポート。

5
Tracked PointerTracking
初級

Tracked Pointer

XRInputSource.targetRayMode=tracked-pointerのビームを可視化し、UIヒットを検証。

5
UI Interaction in XRInteraction
中級

UI Interaction in XR

ワールド空間に置いたUIパネルをレイキャストでフォーカスし、hover/select状態を持たせるデモ。

5
Viewer PoseRendering
初級

Viewer Pose

XRFrame.getViewerPoseで得たビューアーポーズを使い、カメラ行列をシーンに適用するデモ。

5
WebGL XR IntegrationRendering
中級

WebGL XR Integration

WebGLコンテキストをXRCompatibleにし、XRWebGLLayerへ描画する統合パス。

5
WebGPU XR IntegrationRendering
上級

WebGPU XR Integration

WebGPU swapchainをXRWebGLLayer相当へブリッジし、XRフレームにGPU描画する統合実装(proposal)。

5
Spatial Audio LabAudio
中級

Spatial Audio Lab

PannerNodeを用いた3D空間オーディオの減衰と定位の検証。

10
XR Frame LoopRendering
初級

XR Frame Loop

XRSession.requestAnimationFrameでXRFrameを取得し、ビューごとにレンダリングする基本ループ。

5