55

複数のブラウザーで WebGL サポートを検出しようとしていますが、次のシナリオに遭遇しました。現在のバージョンの Firefox は、訪問者のビデオ カードがブラックリストに登録されている場合や WebGL が無効になっている場合でも、次のチェックを使用して肯定的なサポートを報告しているようです。

if (window.WebGLRenderingContext) {
    // This is true in Firefox under certain circumstances,
    // even when WebGL is disabled...
}

次の手順を使用して、ユーザーに WebGL を有効にするように指示してみました。これは、場合によっては機能しますが、常に機能するとは限りません。明らかに、これは私が一般大衆に要求できるものではありません。

  1. Firefox のアドレス バーにabout:configと入力します。
  2. WebGL を有効にするには、webgl.force-enabledを trueに設定します

これにより、jQuery を使用してキャンバス要素を挿入してサポートを検出する独自のサポート検出方法を作成することにしました。これは、私がさまざまな WebGL ライブラリとプラグインで見つけた多くのテクニックを利用しています。問題は、テストが非常に難しいことです (以下のリンクが機能するかどうかについてのコメントは大歓迎です!)。これを客観的な質問にするために、すべてのブラウザーで WebGL のサポートを検出する普遍的に受け入れられている方法があるかどうかを知りたいです。

テスト URL:

http://jsfiddle.net/Jn49q/5/

4

7 に答える 7

53

実際、優れた Three ライブラリには、次のものを検出するメカニズムがあります。

  1. WebGL のサポート
  2. ファイル API のサポート
  3. 労働者のサポート

特に WebGL の場合、使用されるコードは次のとおりです。

function webgl_support () { 
   try {
    var canvas = document.createElement('canvas'); 
    return !!window.WebGLRenderingContext &&
      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
   } catch(e) {
     return false;
   }
 };

そのコード スニペットは、対応するエラー メッセージをユーザーに表示することもできるDetectorクラスの一部です。

于 2014-04-09T04:53:42.127 に答える
37

[ 2014 年 10 月]現在の実装と一致するように modernizrs の例を更新しました。これは、以下のhttp://get.webgl.org/からクリーンアップされたバージョンです。

Modernizrは、

var canvas;
var ctx;
var exts;

try {
  canvas = createElement('canvas');
  ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  exts = ctx.getSupportedExtensions();
}
catch (e) {
  return;
}

if (ctx !== undefined) {
  Modernizr.webglextensions = new Boolean(true);
}

for (var i = -1, len = exts.length; ++i < len; ){
  Modernizr.webglextensions[exts[i]] = true;
}

canvas = undefined;

Chromiumは、正規サポートの実装についてhttp://get.webgl.org/を指しています。

try { gl = canvas.getContext("webgl"); }
catch (x) { gl = null; }

if (gl == null) {
    try { gl = canvas.getContext("experimental-webgl"); experimental = true; }
    catch (x) { gl = null; }
}
于 2012-08-08T18:51:01.047 に答える