WebGPU対応ブラウザが増えても、すべての端末でWebGPU経路を前提にできるわけではありません。
このデモでは、navigator.gpu と requestAdapter() で GPU adapter を取得した結果を見ながら、feature detection / WebGPU優先 / WebGL固定の描画経路を切り替えます。実際のレンダリングはCanvasによる可視化ですが、公開デモで必要になる「WebGPUが使えない時にWebGLへ fallback する」という判断を体験できます。
通常プレビュー
feature detection / WebGPU優先 / WebGL固定を切り替え、WebGPU未対応時にWebGLへ fallback する状態を確認できます。
WebXRデモ
WebXR表示自体は広く動くWebGLで描画し、端末がWebGPUに対応しているかを画面上で確認します。
試せること
- 現在のブラウザでWebGPUの adapter が取得できるか確認する
- WebGPUを優先した時に、未対応環境ではWebGLへ fallback する流れを見る
- 描画時間の目安を見ながら、fallback 設計の説明に使う
学べること
WebGPUは、APIが存在するかどうかと、実際にその端末で安定して使えるかが別問題です。
WebXRデモでは、WebGPUが使える場合だけ高負荷な表現を有効にし、使えない場合はWebGL経路や lightweight rendering に落とす設計が必要になります。特にQuestやAndroid端末では、GPUやブラウザバージョンによって有効な経路が変わる可能性があります。
対応環境
| 環境 | 状態 |
|---|---|
| デスクトップChrome / Edge | WebGPUまたはWebGL fallback |
| Quest Browser 146.0以降 | Experimental WebGPU検証向け |
| iOS Safari | WebGL fallback |
Quest Browser 146.x メモ
Meta Horizon OS Developers release notesでは、Quest Browser 146.0（2026年4月21日）で Experimental WebGPU support が追加されています。このページでは、navigator.gpu があることと実デモで安定して使えることを分け、WebGL fallback へ落とす判断を確認します。
実装メモ
- 体験パターン: WebGPU対応確認とWebGLへの fallback
- 描画: Canvas 2Dによる通常プレビュー / Three.jsによるWebXRデモ
- 対応検出:
navigator.gpu/requestAdapter() - XR: WebXRは任意
- fallback: WebGPU不可の場合はWebGL相当の軽量経路へ切り替え
用語メモ
| 用語 | このページでの意味 |
|---|---|
| adapter | WebGPU の requestAdapter() で取得する GPU adapter。WebGPU の実行先を表す |
| feature detection | 端末の対応状況を見て、WebGPUかWebGL fallback かをページ側で選ぶこと |
| fallback | WebGPUが使えない時に、広く対応しているWebGLの描画へ切り替えること（graceful degradation） |
| lightweight rendering | fallback 時に負荷を下げた軽量描画経路 |