ブラウザでのWebGLサポート検出方法

WebGLサポートの検出

WebGL（Web Graphics Library）は、プラグインなしでブラウザ内のハードウェアアクセラレーション3Dグラフィックスを可能にします。検出にはHTMLキャンバス要素を作成してWebGLレンダリングコンテキストの取得を試みます。

基本検出

function hasWebGL() {
  try {
    const canvas = document.createElement('canvas');
    return !!(
      canvas.getContext('webgl') ||
      canvas.getContext('experimental-webgl')
    );
  } catch (e) {
    return false;
  }
}

WebGL2検出

WebGL2はOpenGL ES 3.0機能セットへのアクセスを提供します。3Dテクスチャ、トランスフォームフィードバック、ユニフォームバッファオブジェクトなどの機能を追加します：

function hasWebGL2() {
  try {
    const canvas = document.createElement('canvas');
    return !!canvas.getContext('webgl2');
  } catch (e) {
    return false;
  }
}

重要な考慮事項

• ソフトウェアレンダリング: 一部のブラウザはソフトウェアレンダリングを使用していてもWebGLを利用可能と報告します。WEBGL_debug_renderer_infoでGPUを検出してください。
• コンテキスト喪失: GPUが過負荷になったりタブがバックグラウンドになるとWebGLコンテキストが失われる可能性があります。webglcontextlostイベントを常に処理してください。
• モバイルの制限: モバイルデバイスはWebGLをサポートしていても、テクスチャサイズとシェーダーの複雑さに制限がある場合があります。
• ブラウザフラグ: ユーザーや企業ポリシーにより、対応ハードウェアでもWebGLが完全に無効化されることがあります。