web-dev-qa-db-ja.com

Three.jsはwebglサポートと通常のキャンバスへのフォールバックを検出します

Three.jsを使用したことがある人は、webglサポートを検出でき、存在しない場合は標準のCanvasレンダリングにフォールバックできるかどうかを教えてもらえますか？

javascripthtml5-canvasthree.jswebgl
37
Bachalo

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

WebGL検出について：

1）このWebGL wiki記事を読む： 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ディテクターも確認してください： https://github.com/Modernizr/Modernizr/blob/master/feature-detects/ webgl.js

61
Juan Mellado

Juan MelladoのThree.js検出器へのポインターは非常に便利でしたが、ファイル全体をプロジェクトに持ち込むのは好ましくありません。これが、抽出されたDetector.webgl（）関数です。

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

そして、彼の例と同様に使用されます。

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