WebXR深度センシング徹底解説：デプスバッファ設定をマスターする

ウェブは情報の二次元平面から、三次元の没入型空間へと進化しています。この変革の最前線にあるのが、仮想現実（VR）と拡張現実（AR）をブラウザにもたらす強力なAPI、WebXRです。ウェブ上の初期のAR体験は印象的でしたが、現実世界から切り離されているように感じられることがよくありました。仮想オブジェクトは現実世界の家具や壁を通り抜けてしまい、存在感なく不自然に空間に浮かんでいました。

そこで登場するのがWebXR深度センシングAPIです。この画期的な機能は大きな飛躍であり、ウェブアプリケーションがユーザーの環境のジオメトリを理解できるようにします。これはデジタルと物理的な世界の間のギャップを埋め、仮想コンテンツが現実世界の法則やレイアウトを尊重する、真に没入感のあるインタラクティブな体験を可能にします。この力を解き放つ鍵は、デプスバッファを理解し、正しく設定することにあります。

この包括的なガイドは、ウェブ開発者、XR愛好家、クリエイティブテクノロジストといった世界中の読者を対象としています。私たちは深度センシングの基礎を探求し、WebXR APIの設定オプションを分析し、リアルなオクルージョンや物理演算といった高度なAR機能を実装するための実践的でステップバイステップのガイダンスを提供します。最後まで読めば、デプスバッファ設定をマスターし、次世代の魅力的でコンテキストアウェアなWebXRアプリケーションを構築するための知識を身につけることができるでしょう。

コアコンセプトの理解

APIの詳細に入る前に、しっかりとした基礎を築くことが重要です。深度認識型拡張現実を支えるコアコンセプトを解き明かしていきましょう。

デプスマップ（深度マップ）とは？

部屋を見ていると想像してみてください。あなたの脳は、テーブルが壁よりも近くにあり、椅子がテーブルの前にあることを瞬時に処理し、シーンを理解します。デプスマップは、この理解をデジタルで表現したものです。その核となるデプスマップは2D画像であり、各ピクセルの値は色ではなく、物理世界のその点がセンサー（デバイスのカメラ）からどれだけ離れているかという距離を表します。

グレースケール画像を思い浮かべてください。暗いピクセルは非常に近いオブジェクトを表し、明るいピクセルは遠いオブジェクトを表すかもしれません（または、慣例によってはその逆もあります）。このデータは、通常、次のような特殊なハードウェアによってキャプチャされます：

• Time-of-Flight (ToF) センサー： これらのセンサーは赤外光のパルスを発し、光が物体に当たって跳ね返ってくるまでの時間を測定します。この時間差が直接距離に変換されます。
• LiDAR (Light Detection and Ranging)： ToFと似ていますが、より高精度な場合が多いLiDARは、レーザーパルスを使用して環境の高解像度な点群を作成し、それをデプスマップに変換します。
• ステレオスコピックカメラ： 2つ以上のカメラを使用することで、デバイスは人間の両眼視を模倣できます。各カメラからの画像の差異（視差）を分析して深度を計算します。

WebXR APIは、基盤となるハードウェアを抽象化し、デバイスに関係なく、開発者が扱える標準化されたデプスマップを提供します。

なぜ深度センシングはARにとって重要なのか？

シンプルなデプスマップは、ユーザーのAR体験を根本的に変え、単なる目新しさから真に信憑性のあるインタラクションへと昇華させる、無限の可能性を解き放ちます。

• オクルージョン： これは間違いなく最も重要な利点です。オクルージョンとは、現実世界の物体が仮想オブジェクトの視界を遮る能力のことです。デプスマップを使えば、アプリケーションは各ピクセルにおける現実世界の表面の正確な距離を知ることができます。レンダリングしている仮想オブジェクトが、同じピクセルにある現実世界の表面よりも遠くにある場合、単純にそれを描画しないように選択できます。この単純な行為により、仮想のキャラクターが現実のソファの後ろを説得力を持って歩いたり、デジタルのボールが現実のテーブルの下を転がったりすることができ、深い一体感が生まれます。
• 物理演算とインタラクション： 静的な仮想オブジェクトは興味深いですが、インタラクティブなものは魅力的です。深度センシングはリアルな物理シミュレーションを可能にします。仮想のボールが現実の床で跳ねたり、デジタルのキャラクターが実際の家具の周りを移動したり、仮想のペンキが物理的な壁に飛び散ったりすることができます。これにより、ダイナミックで応答性の高い体験が生まれます。
• シーンの再構築： 時間の経過とともにデプスマップを分析することで、アプリケーションは環境の単純化された3Dメッシュを構築できます。この幾何学的な理解は、リアルなライティング（現実の表面に影を落とす）やインテリジェントなオブジェクト配置（仮想の花瓶を現実のテーブルに置く）などの高度なAR機能を実現するために不可欠です。
• リアリズムの向上： 最終的に、これらすべての機能が、よりリアルで没入感のある体験に貢献します。デジタルコンテンツがユーザーの物理空間を認識し、相互作用するとき、それは世界の間の障壁を打ち破り、より深い存在感を育みます。

WebXR深度センシングAPI：概要

深度センシングモジュールは、コアとなるWebXR Device APIの拡張機能です。多くの最先端ウェブ技術と同様に、すべてのブラウザでデフォルトで有効になっているわけではなく、特定のフラグが必要であったり、オリジントライアルの一部であったりする場合があります。機能を使用しようとする前に必ずサポート状況を確認し、アプリケーションを防御的に構築することが不可欠です。

サポート状況の確認

セッションをリクエストする前に、まずブラウザが'depth-sensing'機能を備えた'immersive-ar'モードをサポートしているかどうかを尋ねる必要があります。これは`navigator.xr.isSessionSupported()`メソッドを使用して行います。

async function checkDepthSensingSupport() {
  if (!navigator.xr) {
    console.log("WebXRは利用できません。");
    return false;
  }

  try {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
        // ここで特定の機能を確認します
        const session = await navigator.xr.requestSession('immersive-ar', {
            requiredFeatures: ['depth-sensing']
        });
        // これが成功すれば、機能はサポートされています。テストセッションを終了できます。
        await session.end();
        console.log("深度センシング付きのWebXR ARはサポートされています！");
        return true;
    } else {
        console.log("このデバイスではWebXR ARはサポートされていません。");
        return false;
    }
  } catch (error) {
    console.log("深度センシングのサポート状況確認中にエラーが発生しました：", error);
    return false;
  }
}

より直接的で、完全ではありませんが、セッションを直接リクエストしてエラーをキャッチする方法もありますが、上記の方法の方が事前に能力を確認する上でより堅牢です。

セッションのリクエスト

サポートを確認したら、`requiredFeatures`または`optionalFeatures`配列に'depth-sensing'を含めてXRセッションをリクエストします。重要なのは、機能名ととも設定オブジェクトを渡すことで、ここで私たちの希望を定義します。

async function startXRSession() {
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['local-floor', 'dom-overlay'], // 他の一般的な機能
    optionalFeatures: [
      {
        name: 'depth-sensing',
        usagePreference: ['cpu-optimized', 'gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    ]
  });
  // ... セッションのセットアップを続行
}

'depth-sensing'がオブジェクトになっていることに注意してください。ここでブラウザに設定のヒントを提供します。これらの重要なオプションを分解してみましょう。

デプスバッファの設定：問題の核心

深度センシングAPIの力はその柔軟性にあります。深度データをどのように使用するつもりかをブラウザに伝えることで、ブラウザはユースケースに最も効率的な形式で情報を提供できます。この設定は、主に`usagePreference`と`dataFormatPreference`の2つのプロパティを通じて、機能記述子オブジェクト内で行われます。

`usagePreference`: CPUかGPUか？

`usagePreference`プロパティは、あなたの主要なユースケースをユーザーエージェント（UA）、つまりブラウザに伝える文字列の配列です。これにより、システムはパフォーマンス、精度、および消費電力を最適化できます。複数の使用法を優先順にリクエストできます。

'gpu-optimized'

• 意味： ブラウザに対して、主な目的がGPU上で、おそらくはシェーダー内でレンダリング目的で深度データを直接使用することだと伝えています。
• データ提供方法： デプスマップは`WebGLTexture`として公開されます。データがレンダリングに使用されるためにGPUのメモリから出る必要がないため、これは非常に効率的です。
• 主なユースケース： オクルージョン。フラグメントシェーダーでこのテクスチャをサンプリングすることにより、現実世界の深度と仮想オブジェクトの深度を比較し、隠れるべきフラグメントを破棄できます。これは、深度を考慮したパーティクルやリアルな影など、他のGPUベースのエフェクトにも役立ちます。
• パフォーマンス： これはレンダリングタスクにとって最高のパフォーマンスオプションです。フレームごとに大量のデータをGPUからCPUに転送するという大きなボトルネックを回避します。

'cpu-optimized'

• 意味： CPU上のJavaScriptコードで生の深度値に直接アクセスする必要があります。
• データ提供方法： デプスマップはJavaScriptからアクセス可能な`ArrayBuffer`として公開されます。すべての深度値を読み取り、解析し、分析することができます。
• 主なユースケース： 物理演算、衝突検出、シーン分析。 例えば、ユーザーがタップした点の3D座標を見つけるためにレイキャストを実行したり、データを分析してテーブルや床などの平らな面を見つけてオブジェクトを配置したりできます。
• パフォーマンス： このオプションには大きなパフォーマンスコストがかかります。深度データは、CPUがアクセスするためにデバイスのセンサー/GPUからシステムのメインメモリにコピーする必要があります。JavaScriptでフレームごとにこの大量のデータ配列に対して複雑な計算を実行すると、パフォーマンスの問題や低いフレームレートに簡単につながる可能性があります。意図的に、そして控えめに使用すべきです。

推奨： オクルージョンを実装する予定がある場合は、常に'gpu-optimized'をリクエストしてください。両方をリクエストすることも可能です。例：`['gpu-optimized', 'cpu-optimized']`。ブラウザは最初の希望を尊重しようとします。あなたのコードは、システムによって実際にどの使用モデルが付与されたかを確認し、両方のケースを処理できるほど堅牢でなければなりません。

`dataFormatPreference`: 精度か互換性か

`dataFormatPreference`プロパティは、深度値の望ましいデータ形式と精度を示唆する文字列の配列です。この選択は、精度とハードウェアの互換性の両方に影響します。

'float32'

• 意味： 各深度値は完全な32ビット浮動小数点数です。
• 仕組み： 値は直接メートル単位の距離を表します。デコードする必要はなく、そのまま使用できます。例えば、バッファ内の値1.5は、その点が1.5メートル離れていることを意味します。
• 長所： 高精度で、シェーダーとJavaScriptの両方で非常に使いやすいです。これは精度にとって理想的な形式です。
• 短所： WebGL 2と、浮動小数点テクスチャをサポートするハードウェア（`OES_texture_float`拡張機能など）が必要です。この形式は、すべての、特に古いモバイルデバイスで利用できるとは限りません。

'luminance-alpha'

• 意味： これはWebGL 1およびfloatテクスチャをサポートしないハードウェアとの互換性のために設計された形式です。2つの8ビットチャンネル（輝度とアルファ）を使用して16ビットの深度値を格納します。
• 仕組み： 生の16ビット深度値は2つの8ビット部分に分割されます。実際の深度を得るには、コード内でこれらの部分を再結合する必要があります。通常、式は次のようになります：`decodedValue = luminanceValue + alphaValue / 255.0`。結果は0.0から1.0の間の正規化された値であり、メートル単位の距離を得るためには、別の係数でスケーリングする必要があります。
• 長所： はるかに広いハードウェア互換性。'float32'がサポートされていない場合の信頼できるフォールバックです。
• 短所： シェーダーまたはJavaScriptで追加のデコードステップが必要となり、わずかな複雑さが加わります。また、'float32'と比較して精度が低い（16ビット）です。

推奨： 最も望ましい形式を最初に指定して、両方をリクエストしてください：`['float32', 'luminance-alpha']`。これはブラウザに高精度形式を好むが、必要であれば互換性の高い形式も扱えることを伝えます。繰り返しになりますが、アプリケーションはどの形式が付与されたかを確認し、データを処理するための正しいロジックを適用する必要があります。

実践的な実装：ステップバイステップガイド

さて、これらのコンセプトを実践的な実装に組み合わせてみましょう。最も一般的なユースケースである、GPU最適化されたデプスバッファを使用したリアルなオクルージョンに焦点を当てます。

ステップ1：堅牢なXRセッションリクエストの設定

理想的な設定でセッションをリクエストしますが、代替案も処理できるようにアプリケーションを設計します。

let xrSession = null;
let xrDepthInfo = null;

async function onXRButtonClick() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['local-floor'],
      domOverlay: { root: document.body }, // 他の機能の例
      depthSensing: {
        usagePreference: ['gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    });

    // ... セッション開始ロジック、キャンバスやWebGLコンテキストの設定など
    // セッション開始ロジックで、深度センシングの設定を取得
    const depthSensing = xrSession.depthSensing;
    if (depthSensing) {
      console.log(`Depth sensing granted with usage: ${depthSensing.usage}`);
      console.log(`Depth sensing granted with data format: ${depthSensing.dataFormat}`);
    } else {
      console.warn("深度センシングがリクエストされましたが付与されませんでした。");
    }
    
    xrSession.requestAnimationFrame(onXRFrame);
  } catch (e) {
    console.error("XRセッションの開始に失敗しました。", e);
  }
}

ステップ2：レンダリングループでの深度情報へのアクセス

フレームごとに呼び出される`onXRFrame`関数内で、現在のビューの深度情報を取得する必要があります。

function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrReferenceSpace);
  if (!pose) return;

  const glLayer = session.renderState.baseLayer;
  const gl = webglContext; // あなたのWebGLコンテキスト
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // 重要なステップ：深度情報を取得
    const depthInfo = frame.getDepthInformation(view);

    if (depthInfo) {
      // このフレームとビューの深度データがあります！
      // これをレンダリング関数に渡します
      renderScene(view, depthInfo);
    } else {
      // このフレームで利用可能な深度データはありません
      renderScene(view, null);
    }
  }
}

`depthInfo`オブジェクト（`XRDepthInformation`のインスタンス）には、必要なものがすべて含まれています：

• `depthInfo.texture`: ('gpu-optimized'を使用している場合)深度マップを含む`WebGLTexture`。
• `depthInfo.width`, `depthInfo.height`: 深度テクスチャの寸法。
• `depthInfo.normDepthFromNormView`: 正規化されたビュー座標を深度マップをサンプリングするための正しいテクスチャ座標に変換するために使用される`XRRigidTransform`（行列）。これは、深度データをカラーカメラ画像と正しく位置合わせするために不可欠です。
• `depthInfo.rawValueToMeters`: スケール係数。テクスチャから得た生の値にこの数値を掛けることで、メートル単位の距離が得られます。

ステップ3：GPU最適化デプスバッファによるオクルージョンの実装

ここが魔法が起こる場所、GLSLシェーダーの内部です。目標は、現実世界の深度（テクスチャから）を、現在描画している仮想オブジェクトの深度と比較することです。

頂点シェーダー（簡易版）

頂点シェーダーはほとんど標準的なものです。オブジェクトの頂点を変換し、重要なこととして、クリップ空間座標をフラグメントシェーダーに渡します。

// GLSL (頂点シェーダー)
attribute vec3 a_position;
uniform mat4 u_projectionMatrix;
uniform mat4 u_modelViewMatrix;
varying vec4 v_clipPosition;

void main() {
  vec4 position = u_modelViewMatrix * vec4(a_position, 1.0);
  gl_Position = u_projectionMatrix * position;
  v_clipPosition = gl_Position;
}

フラグメントシェーダー（コアロジック）

フラグメントシェーダーが重労働を担います。深度テクスチャとそれに関連するメタデータをuniformとして渡す必要があります。

// GLSL (フラグメントシェーダー)
precision mediump float;

varying vec4 v_clipPosition;

uniform sampler2D u_depthTexture;
uniform mat4 u_normDepthFromNormViewMatrix;
uniform float u_rawValueToMeters;
// float32とluminance-alphaのどちらを使用しているかをシェーダーに伝えるuniform
uniform bool u_isFloatTexture;

// 現在のフラグメントに対応する現実世界の深度をメートル単位で取得する関数
float getDepth(vec2 screenUV) {
  // スクリーンUVから深度テクスチャUVに変換
  vec2 depthUV = (u_normDepthFromNormViewMatrix * vec4(screenUV, 0.0, 1.0)).xy;

  // テクスチャの外側をサンプリングしないように保証
  if (depthUV.x < 0.0 || depthUV.x > 1.0 || depthUV.y < 0.0 || depthUV.y > 1.0) {
    return 10000.0; // 範囲外の場合は大きな値を返す
  }

  float rawDepth;
  if (u_isFloatTexture) {
    rawDepth = texture2D(u_depthTexture, depthUV).r;
  } else {
    // luminance-alpha形式からデコード
    vec2 encodedDepth = texture2D(u_depthTexture, depthUV).ra; // .raは.laと等価
    rawDepth = encodedDepth.x + (encodedDepth.y / 255.0);
  }

  // 無効な深度値（多くは0.0）を処理
  if (rawDepth == 0.0) {
    return 10000.0; // 非常に遠いものとして扱う
  }

  return rawDepth * u_rawValueToMeters;
}

void main() {
  // このフラグメントのスクリーン空間UV座標を計算
  // v_clipPosition.w はパースペクティブ除算の係数
  vec2 screenUV = (v_clipPosition.xy / v_clipPosition.w) * 0.5 + 0.5;

  float realWorldDepth = getDepth(screenUV);

  // 仮想オブジェクトの深度を取得
  // gl_FragCoord.z は現在のフラグメントの正規化された深度 [0, 1]
  // これをメートルに戻す必要があります（これはプロジェクション行列のnear/far平面に依存します）
  // デモンストレーションのための単純化された線形変換：
  float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;

  // オクルージョンチェック
  if (virtualObjectDepth > realWorldDepth) {
    discard; // このフラグメントは現実世界のオブジェクトの後ろにあるので、描画しない
  }

  // ここに来た場合、オブジェクトは表示されます。描画します。
  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0); // 例：マゼンタ色
}

深度変換に関する重要な注意： `gl_FragCoord.z`やクリップ空間のZをメートル単位の線形距離に戻すことは、プロジェクション行列に依存する簡単な作業ではありません。`float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;`という行はビュー空間の深度を提供し、これは比較の出発点として適しています。完璧な精度を得るためには、カメラのnearおよびfarクリッピング平面を含む式を使用して、デプスバッファの値を線形化する必要があります。

ベストプラクティスとパフォーマンスに関する考慮事項

堅牢でパフォーマンスの高い深度認識型体験を構築するには、次の点を慎重に考慮する必要があります。

• 柔軟かつ防御的に： 希望する設定が付与されると決して思い込まないでください。常にアクティブな`xrSession.depthSensing`オブジェクトをクエリして、付与された`usage`と`dataFormat`を確認してください。サポートする意思のあるすべての可能な組み合わせを処理できるようにレンダリングロジックを記述してください。
• レンダリングにはGPUを優先： パフォーマンスの差は非常に大きいです。深度の視覚化やオクルージョンを含むタスクには、'gpu-optimized'パスがスムーズな60/90fps体験のための唯一の実行可能な選択肢です。
• CPU作業の最小化と遅延： 物理演算やレイキャスティングのために'cpu-optimized'データを使用しなければならない場合は、フレームごとにバッファ全体を処理しないでください。対象を絞った読み取りを実行してください。例えば、ユーザーが画面をタップしたときに、その特定の座標の深度値のみを読み取ります。メインスレッドから重い分析をオフロードするためにWeb Workerの使用を検討してください。
• 欠損データを適切に処理： 深度センサーは完璧ではありません。結果として得られるデプスマップには、特に反射面や透明な表面で穴、ノイズの多いデータ、不正確さが生じます。オクルージョンシェーダーと物理ロジックは、視覚的なアーティファクトや不正な動作を避けるために、無効な深度値（多くは0として表される）を処理する必要があります。
• 座標系をマスターする： これは開発者にとって一般的な失敗点です。ビュー、クリップ、正規化デバイス、テクスチャなど、さまざまな座標系に細心の注意を払い、`normDepthFromNormView`のような提供された行列を正しく使用してすべてを位置合わせしていることを確認してください。
• 消費電力の管理： 深度センシングハードウェア、特にLiDARのようなアクティブセンサーは、かなりのバッテリー電力を消費する可能性があります。アプリケーションが本当に必要な場合にのみ'depth-sensing'機能をリクエストしてください。ユーザーが積極的に関与していないときは、電力を節約するためにXRセッションが適切に中断および終了されるようにしてください。

WebXR深度センシングの未来

深度センシングは基盤技術であり、WebXR仕様はそれを取り巻いて進化し続けています。世界の開発者コミュニティは、将来的にはさらに強力な機能を期待できます：

• シーンの理解とメッシュ化： 次の論理的なステップはXRMeshモジュールであり、深度データから構築された環境の実際の3D三角形メッシュを提供します。これにより、さらにリアルな物理演算、ナビゲーション、ライティングが可能になります。
• セマンティックラベル： 表面のジオメトリを知るだけでなく、それが「床」「壁」「テーブル」であることを知ることを想像してみてください。将来のAPIは、このようなセマンティック情報を提供する可能性が高く、信じられないほどインテリジェントでコンテキストアウェアなアプリケーションを可能にします。
• ハードウェア統合の向上： ARグラスやモバイルデバイスがより強力になり、より優れたセンサーとプロセッサーを搭載するにつれて、WebXRに提供される深度データの品質、解像度、精度は劇的に向上し、新たな創造的可能性を切り開くでしょう。

結論

WebXR深度センシングAPIは、開発者が新しいクラスのウェブベース拡張現実体験を創造することを可能にする変革的な技術です。単純なオブジェクト配置を超え、環境理解を取り入れることで、よりリアルで、インタラクティブで、ユーザーの世界と真に統合されたアプリケーションを構築できます。デプスバッファの設定をマスターすること、つまり'cpu-optimized'と'gpu-optimized'の使用法、および'float32'と'luminance-alpha'データ形式の間のトレードオフを理解することが、この可能性を解き放つために必要な重要なスキルです。

ユーザーのデバイス能力に適応できる、柔軟で、パフォーマンスが高く、堅牢なアプリケーションを構築することで、あなたは単一の体験を創造しているだけではありません。あなたは没入型で空間的なウェブの基盤に貢献しているのです。ツールはあなたの手の中にあります。深く掘り下げ、未来を構築する時です。