在 Chrome 但在 Android 浏览器中创建 WebGL 上下文时出错答案

【问题标题】：Error creating WebGL context in Chrome but not in Android Browser在 Chrome 但在 Android 浏览器中创建 WebGL 上下文时出错
【发布时间】：2015-04-12 12:49:42
【问题描述】：

我使用Three.js 构建了一个非常简单的Web GL 站点，它显示了一个旋转的立方体。当我通过默认的 android 浏览器在我的 Android 手机上运行该网站时，该网站运行良好。但是，当我使用 Chrome 时，我看到了错误：

Error creating WebGL context
THREE.WebGLRenderer
Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null

我正在使用 Chrome v40.0.2214.109 和 Android 4.1.2。我也尝试使用 Chrome Beta 并看到同样的错误。我需要该网站在 Android 上的 Chrome 上运行，以便能够在桌面上使用 Chrome 开发人员工具。有什么想法吗？

更新

当我在 Chrome for Android 中转到 http://get.webgl.org/ 时，我收到以下消息：

Hmm. While your browser seems to support WebGL, it is disabled or unavailable.

然后我在 Chrome for Android 中访问 about:flags，发现 WebGL 默认被禁用。我启用并重新启动，但我仍然看到“嗯。虽然您的浏览器似乎支持 WebGL ...”。我尝试启用其他标志但无济于事。最终，我在 Chrome for Android 中启用了每个标志，但我仍然看到上面的消息。上面的链接在 Android 浏览器和 Firefox for Android 中完美运行。谁能解释为什么 WebGL 不能在 Android v4.1.2 上与 Chrome for Android 一起使用？

【问题讨论】：

three.js 应该可以在桌面上的 Chrome 40 上开箱即用。检查 chrome://flags/ webgl 是否被禁用。否则你需要发布一些代码来找出问题所在。
刚刚更新了我的问题...

标签： google-chrome three.js

【解决方案1】：

Chrome 对某些设备有一个黑名单，并且不会让渲染在此类芯片组上正常工作。 https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists#Chrome_on_Android 您应该已经添加了您在问题中使用的 gpu。顺便说一句，我有一个带有股票浏览器版本 4.1.2 的 android 设备，它可以完美运行。忘记 chrome，我对 webgl 的体验真的很消极。我不会在移动设备和台式机上都推荐它。此外，如果您的演示在股票浏览器上运行，它们将在其他任何地方运行，因此我认为使用它进行开发会更好。直到今天（2015 年 7 月 14 日），情况没有改变，甚至 Firefox 更好。

编辑：您可以尝试在 Chrome Dev for android 中激活一些标志来强制使用 WebGL，但如果您碰巧在 Mali400 或 PowerVR SGX 540 上，即使启用了这些标志，您也不会有任何运气。

【讨论】：

【解决方案2】：

这里是你不能渲染 webgl 上下文的回调：

var supportsWebGL = ( function () {
    try {
        return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' );
    } catch( e ) {
        return false;
    }
} )();

if(supportsWebGL){
    console.log("support");
}else{
    console.log("no support");
}

【讨论】：