检测自己的浏览器是否支持WebGL
Posted 北风几吹夏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了检测自己的浏览器是否支持WebGL相关的知识,希望对你有一定的参考价值。
在浏览器地址栏输入
如果得出下面图形,就说明浏览器是支持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的主要内容,如果未能解决你的问题,请参考以下文章
如何在chrome上开启WebGL功能和判断目前浏览器是否支持