Question

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

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

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可用的情况下，手动选择画布也是有意义的。

Three.js检测webgl支持并回退到常规画布

3 个答案: