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

Posted 2023-02-27

【中文标题】Three.js 检测 webgl 支持并回退到常规画布

【英文标题】：Three.js detect webgl support and fallback to regular canvas

【发布时间】：2012-04-11 14:10:24

【问题描述】：

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

【参考方案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

【讨论】：

如果浏览器支持 WebGL 但由于某种原因（如驱动程序被列入黑名单）不能使用它，方法 1/3 将失败，这就是方法 2 使用带有 try/catch 块的函数的原因检查是否可以实际创建上下文。

值得注意的是Detector.js已经搬家，现在在github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js

【参考方案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();

【参考方案3】：

不幸的是，仅仅检测到 WebGL 支持并不意味着它会有任何好处。 WebGL 可以由诸如“google swiftshader”之类的软件渲染器或诸如“mesa 3D”之类的部分仿真器支持。尤其是对于像 Mesa 2D 这样优秀的 2D 渲染器，即使 WebGL 似乎可用，手动选择画布也是有意义的。