WebXRパフォーマンスとfoveation──高解像度XRを支える「見える場所だけ高品質」な最適化

XRでは、通常のWebページや2Dゲームよりも描画負荷が高くなりがちです。

理由は単純です。VRやARでは左右の目に別々の映像を出す必要があり、さらに高いフレームレートが求められます。ヘッドセットの表示解像度が上がるほど、GPUが処理するピクセル数も増えます。WebXRコンテンツがリッチになればなるほど、影、ポストエフェクト、PBR、パーティクル、Gaussian Splatting、動画テクスチャなども重くなります。

そこで重要になるのが、foveated rendering です。

foveated renderingは、人間の視覚が中心視野で高解像度を感じ、周辺視野では細かい情報を感じにくいことを利用する最適化です。画面の中心や注視点の近くは高品質に描き、周辺は解像度やシェーディング密度を下げることで、見た目の劣化を抑えながらGPU負荷を下げます。

WebXRにはfixed foveationがある

WebXR Layers API Level 1には、XRProjectionLayer.fixedFoveation という属性があります。W3Cの説明では、この属性はXR compositorが使うfoveation量を制御し、0が最小、1が最大で、ユーザーエージェントやデバイスが対応しない場合は null を返し、設定してもno-opになるとされています。変更は次の XRFrame から反映されます。

const glBinding = new XRWebGLBinding(session, gl);
const projectionLayer = glBinding.createProjectionLayer();

if (projectionLayer.fixedFoveation !== null) {
  projectionLayer.fixedFoveation = 0.5;
}

MDNも、fixedFoveation はXR compositorがレイヤーに使うfoveation量を表す数値で、Fixed Foveated Renderingは目のテクスチャの端を中心より低い解像度で描くことでGPU負荷を下げる、と説明しています。

Meta for Developersのドキュメントでも、FFRは周辺部のeye bufferを低解像度で描くことでレンダリングコストを節約する技術で、fragment shader boundなアプリで特に効果があると説明されています。Meta Browserではセッション開始時のoptional featureや、実行時の fixedFoveation 属性で調整する方法が紹介されています。

const sessionInit = {
  requiredFeatures: ["local-floor"],
  optionalFeatures: ["high-fixed-foveation-level"],
};

const session = await navigator.xr.requestSession("immersive-vr", sessionInit);

fixed foveationの向き不向き

fixed foveationは、視線追跡を使わず、固定されたパターンで周辺品質を下げる方式です。中心付近を高品質に保ち、端の品質を下げるため、背景や低コントラストなシーンでは目立ちにくいことがあります。

一方で、UI、細かい文字、高コントラストな線、ミニマップ、遠くの小さなオブジェクトなどでは、劣化が分かりやすくなることがあります。Metaのドキュメントでも、高コントラストまたはテキストの多いシーンではアーティファクトが目立つ可能性があるため、視覚品質への影響を評価する必要があると説明されています。

BANGEO読者向けに言うなら、fixed foveationは「とりあえず上げればよい設定」ではありません。GPU負荷、画質、UIの読みやすさを実機で見ながら調整する必要があります。

中間バッファやポストエフェクトに注意

WebXRアプリでは、いったん自前のrender targetにシーンを描き、その後ポストエフェクトをかけて最終フレームへ出す構成がよくあります。

しかし、Metaのドキュメントでは、FFRが効かない主な原因として、シーンを中間バッファに描いてから最終フレームへポスト処理する構成や、フレーム中にrender targetを切り替える構成が挙げられています。FFRは最終eye bufferへの描画に関係するため、レンダリングパイプラインの作り方によっては期待した効果が出ません。

この点はthree.js r184のWebXR更新を使う場合にも重要です。レンダラーやポストプロセスの構成によって、ブラウザやデバイス側のfoveationがどこまで効くかが変わる可能性があります。

dynamic foveationは魅力的だが、視線データが問題になる

より強力なのは、ユーザーが実際に見ている場所を高品質に描くdynamic foveationです。視線追跡対応デバイスでは、注視点の周辺だけを高品質にし、それ以外をより大胆に落とせるため、fixed foveationより大きな効果が期待できます。

しかしWebでは、視線データは非常にセンシティブです。どこを見ているかは、ユーザーの関心、認知状態、健康情報、意図の推測につながる可能性があります。

Immersive WebのGitHub issueでは、dynamic foveationはユーザーが見ている場所に応じて描画品質を調整する最適化であり、WebXRで対応するならWebコンテンツにgaze dataを露出しない形が必要だと提起されています。

2026年5月のImmersive Web face-to-faceでも、foveationのWebXR API化について議論されました。議事録では、WebGPUやVariable Rate Shadingとの関係、foveation mapの扱い、eye tracking由来の情報が漏れるプライバシーリスク、readbackを防げるかどうかが話されています。

つまりdynamic foveationは、単なるパフォーマンスAPIではありません。WebXR、WebGPU、ブラウザのセキュリティモデル、プライバシー保護が全部関係する難しい領域です。現時点では議論中のテーマとして扱うのが適切です。

WebGPUとの関係

foveationをより一般化して考えると、Variable Rate ShadingやVariable Rasterization Rateに近い話になります。WebGPU側にもVariable Rasterization Rateに関するissueがあり、fragment shaderの呼び出し密度を場所によって変え、性能と品質のバランスを取る技術として議論されています。ただし、Vulkan、D3D12、Metalで仕組みが違うため、相互運用可能なAPI設計が難しいことも説明されています。

Immersive Webの議事録でも、WebXR側だけでは完結せず、WebGPU WGとの依存関係があることが話されています。

WebXR開発者にとってのポイントは、今後の高品質XRではWebGLだけでなくWebGPUとの接続が重要になるということです。Quest Browser 146.0でWebGPU in WebXRが実験的に利用可能になった流れとあわせて、高解像度ヘッドセットや空間コンピューティング端末では、foveation、layers、WebGPU、compositorの役割分担がパフォーマンスの鍵になります。

今できる実践的な対策

現時点でWebXR開発者ができることは、まず基本的なパフォーマンス設計を固めることです。

最初に、ターゲットデバイスでフレームタイムを測ります。平均FPSだけでなく、GPUが詰まっているのか、CPUが詰まっているのか、解像度を下げると改善するのかを確認します。

次に、fixed foveationが使える環境では、低めの値から試します。UIや文字が読みにくくなる場合は、foveationレベルを下げる、UIを中心寄りに置く、文字を大きくする、重要な情報を別レイヤーに分けるなどの対策が必要です。

さらに、ポストエフェクトを多用している場合は、FFRが期待通り効いているかを確認します。中間バッファにすべて描いてから最終合成する構成では、デバイス側のfoveationの効果が薄くなる可能性があります。

最後に、dynamic foveationやWebGPU連携は「今すぐ使うTips」ではなく「追跡すべき仕様テーマ」として見ておくのが現実的です。

BANGEOでの整理

foveation トピックは標準化・対応状況ページの Foveation トピック整理で次の3段階に分けて追跡しています。

fixed foveation は fixedFoveation スライダー付きデモで実機確認できます。dynamic foveation と WebGPU 連携は、確定 API ではなく議論中のテーマとして扱っています。

関連リンク

• WebXR Layers API Level 1
• XRProjectionLayer: fixedFoveation（MDN）
• WebXR Fixed Foveated Rendering（Meta for Developers）
• Dynamic Foveation（immersive-web/webxr#1420）
• Variable Rasterization Rate（gpuweb/gpuweb#450）
• Immersive Web face-to-face May 2026 day 1（議事録）
• WebXR仕様が更新──inline-stereoとSpace Warpの実装ポイントを整理
• BANGEO：標準化・対応状況