VS2015 Cordova App 可以在 VS Android 模拟器中运行 WebGL 吗？答案

【问题标题】：Can A VS2015 Cordova App run WebGL in the VS Android Emulator?VS2015 Cordova App 可以在 VS Android 模拟器中运行 WebGL 吗？
【发布时间】：2016-06-07 10:59:14
【问题描述】：

我环顾四周，并can't find the answer 关注以下内容。我想在跨平台应用程序中运行一些 3D 内容。我正在使用 VS2015 / Apache Cordova 工具 / Three.js / WebGL。当我在桌面 (AnyCPU) 和 iOS 远程设备或 iOS mac 模拟器上调试我的 VS2015 项目时，我的应用程序会创建一个画布，获取一个 WebGL 上下文，然后我就可以参加比赛了。当我在 VS Android Emulator 中使用 VS2015 调试我的应用程序时，canvas.getContext 失败并且 Three.js 抛出“创建 WebGL 上下文时出错”。

我已经下载（到 VS2015）一个使用 Lollipop (5.0) 的 VS Android 模拟器，并以独立模式启动它（不是来自我的 Cordova 项目）。当我遵循这些MSDN Android Emulator Set Up Instructions（将当前版本的 Chrome 替换为默认的 VS Emulator 浏览器引擎）时，VS Emulator 将正确托管和显示 Internet 上可用的 3D WebGL 内容。但是当我尝试让 VS Emulator 托管我的 Cordova 项目时，它无法创建 WebGL 上下文并且对我不利。

所以我的问题是：有没有办法配置我的 VS2015 Cordova 项目以在 VS Android 模拟器中启动和调试，并让模拟器托管我的 WebGL 3D 内容？或者还有其他一些技巧来配置 VS Android Emulator 以便它使用支持 WebGL 的引擎接受并托管我的 WebGL 项目？被难住了。

【问题讨论】：

出于好奇：您 PC 的硬件设置 (CPU/GPU) 是什么？
@MorrisonChang Windows 10 64 位； i7 930; Radeon 5970
相关帖子：stackoverflow.com/questions/35318029/… 带有指向 WebView 团队的回答线程的链接
@MorrisonChang 感谢您提供这些链接。但我没有看到这些资源解决了在 VS Android 模拟器中启动和托管的 Visual Studio Cordova WebGL 应用程序。如上所述，我已经弄清楚如何调整 VS Android 模拟器（在我的硬件上运行），以便它可以托管来自互联网的 WebGL 内容（来自 babylonjs.com 的示例）。我只是无法让我的 VS Cordova WebGL 应用程序与 VS Android 模拟器配合使用（反之亦然）。也许我错过了你的观点。再次感谢您不厌其烦地提供帮助。
我认为我的意思是这可能是不可能的，因为我希望 MS 团队只是采用现有的 AOSP webview 模拟器代码并应用了他们的更改，但 WebView 团队引用的潜在问题可能仍然是到位。如果使用设备不是入门者crosswalk-project.org/documentation/about/… 和software.intel.com/en-us/android/blogs/2014/01/02/…，您可能需要查看 Crosswalk

标签： android cordova android-emulator webgl visual-studio-cordova

【解决方案1】：

我已成功让我的 VS2015 Cordova 应用程序在 VS Emulator for Android 中正确运行，但路径并不平坦。非常感谢 Morrison Chang 向我指出 Crosswalk Project，它专门用于解决现有 Android WebView 引擎中的缺陷，最重要的是，对于我的应用程序，库存引擎对 WebGL 的粗略实现。解决方案的第一部分是在我的 Cordova 应用程序中安装 cordova crosswalk plugin。最初，VS2015 抛出了一个描述不佳的版本控制部署错误。解决方案是简单地将我的应用程序版本号从“1.0.0”增加到“1.0.1”，就像在 config.xml 文件中一样：

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.XXXXXXXXXXXX" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">

项目部署后，我的应用在从 Crosswalk 获取有效的 WebGL 上下文时遇到了很多麻烦。我解决了这个问题如下。我的应用程序目前使用 THREE r71，它在 THREE.WebGLRenderer 构造函数中使用以下代码 sn-p 创建 WebGL 上下文：

        var attributes = {
        alpha: _alpha,
        depth: _depth,
        stencil: _stencil,
        antialias: _antialias,
        premultipliedAlpha: _premultipliedAlpha,
        preserveDrawingBuffer: _preserveDrawingBuffer
    };

    _gl = _context || _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );

Crosswalk 不喜欢 THREE 使用 THREE 的默认“属性”值调用 .getContext()。除非我将“depth”属性设置为“false”，否则 Crosswalk 甚至根本不会返回 WebGL 上下文。但是通过设置 depth:false，VS Emulator 将以一种在我的应用程序中没有视觉意义的方式显示重叠网格，因为等待它，没有深度缓冲区。所以我至少可以得到一个带有 depth:false 的 WebGL 上下文——但它很糟糕。最终对我有用的是调用 .getContext 根本没有属性，就像这样：

    _gl = _context || _canvas.getContext( 'webgl' ) || _canvas.getContext( 'experimental-webgl' );

这对我有用。我将不得不重写 THREE.WebGLRenderer 构造函数并排除 Android 平台场景，但至少我现在有一个工作的 WebGL 上下文和一个工作的应用程序。我希望以上内容可以减轻其他人我刚刚经历的痛苦。现在让调试器连接到模拟器......

【讨论】：