Three.js 檢測 webgl 支持並回退到常規畫布

Question

任何使用過 Three.js 的人都可以告訴我是否可以檢測到 webgl 支持，如果不存在，則回退到標准的 Canvas 渲染？

Answer 1

是的，這是可能的。 您可以使用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

Answer 2

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();

Answer 3

不幸的是，僅僅檢測到 WebGL 支持並不自動意味着它會有任何好處。 WebGL 可以由軟件渲染器（如“google swiftshader”）或部分仿真（如“mesa 3D”）支持。 特別是對於像 Mesa 2D 這樣好的 2D 渲染器，即使 WebGL 似乎可用，手動選擇畫布也是有意義的。