检测自己的浏览器是否支持WebGL

Posted 北风几吹夏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了检测自己的浏览器是否支持WebGL相关的知识,希望对你有一定的参考价值。

在浏览器地址栏输入

https://get.webgl.org/

如果得出下面图形,就说明浏览器是支持WebGLS的,经过尝试,发现Chome浏览器,微软Edge以及搜狗浏览器都能很好的支持WebGL。

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

【中文标题】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 似乎可用,手动选择画布也是有意义的。

【讨论】:

以上是关于检测自己的浏览器是否支持WebGL的主要内容,如果未能解决你的问题,请参考以下文章

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

浏览器特性检测插件Feature.js

如何在chrome上开启WebGL功能和判断目前浏览器是否支持

IE9 是不是支持 WebGL 和/或 WebSockets? [关闭]

Android WebView支持WebGL

在后端录制 HTML5 WebGL 的视频