Three.jsがwebglサポートを検出し、通常のキャンバスにフォールバック

Question

three.jsを使用した人は、webglサポートを検出する可能性がある場合は教えてください。

Answer 1

はい、可能です。 WebGLRendererの代わりにCanvasRendererを使用できます。 WebGLの検出について

：

1）このWebGLのウィキ記事を読むhttp://www.khronos.org/webgl/wiki/FAQ

if (!window.WebGLRenderingContext) { 
    // the browser doesn't even know what WebGL is 
    window.location = "http://get.webgl.org"; 
    } else { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("webgl"); 
    if (!context) { 
     // browser supports WebGL but initialization failed. 
     window.location = "http://get.webgl.org/troubleshooting"; 
    } 
    } 

2） Three.jsはすでにWebGLの検出器を持っています https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer(); 

3）もチェックModernizr検出器：Three.js検出器へ https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

ファンMelladoのポインタが超便利でしたが、私は私のプロジェクトにファイル全体を持っていないことを好みます。 Detector.webgl（）関数を次に示します。

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

そして、彼の例と同様に使用されています。ブラウザはWebGLのをサポートしている場合に失敗します

renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();