Three.js检测WebGL支持并回退到普通画布

Question

有没有使用过 three.js 的人能告诉我如何检测 Webgl 支持，如果不支持，是否可以回退到标准 Canvas 渲染？

- Bachalo

Answer 1

是的，这是可能的。您可以使用CanvasRenderer代替WebGLRenderer。

关于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检测器: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

- Juan Mellado

---

如果浏览器支持WebGL却由于某些原因无法使用它（例如驱动程序被列入黑名单），则方法1/3将失败。这就是为什么方法2使用带有try/catch块的函数并检查上下文是否可以实际创建的原因。 - Joan Rieu

值得注意的是，Detector.js已经移动到https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js。 - ngalstyan

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

- Abtin Forouzandeh

Answer 3

很遗憾，仅仅检测WebGL支持并不意味着它会表现良好。WebGL可以由软件渲染器（例如“google swiftshader”）或部分仿真（例如“mesa 3D”）支持。特别是在具有良好2D渲染器（如Mesa 2D）的情况下，即使WebGL似乎可用，手动选择画布也是有意义的。

- user185953