使用 Visual Studio 模拟器测试和调试 WebGL 和 HTML5 移动体验
0/5 (0投票)
在本文中，我将向您展示如何使用这些快速的 Android 模拟器测试您的 WebGL 体验。
随着Visual Studio 2015 RTM的发布，免费的适用于 Android 的 Visual Studio 模拟器也随之推出。在本文中，我将向您展示如何使用这些快速的 Android 模拟器测试您的 WebGL 体验。
首先，下载 Visual Studio 2015 RTM（例如免费社区版），或者在不安装 Visual Studio 的情况下直接安装 Android 模拟器。然后，阅读介绍 Visual Studio 的 Android 模拟器，其中解释了这款酷炫的模拟器的工作原理以及支持的功能。
注意：我最近发表了一篇文章，描述了如何在Windows Phone 上远程调试和分析 HTML5 网站和应用的性能。现在，您可以利用 Windows 10 SDK 工具的发布，使用相同的方法调试 Windows Mobile 10 和 Mobile Edge。
WebGL 测试
安装后，您可以启动该工具
并选择您感兴趣的镜像
让我们选择“5 英寸 Lollipop (5.0) XXHDPI 手机 – 类似于三星 Galaxy S4”，然后按下播放。如果这是您第一次启动模拟器，它将为您配置 Hyper-V 网络设置。
启动后，启动默认安装的浏览器，然后尝试导航到例如 http://www.babylonjs.com/，这是迄今为止最好的 WebGL 框架。如果您尝试启动我们的一个场景，您会看到一个错误
确实，随这个 Lollipop 镜像一起提供的默认浏览器不支持 WebGL。我们需要在其中安装 Chrome。
搜索Chrome APK 的 x86 版本，例如这个：Chrome 43.0.2357.93 (x86)，然后直接将APK 拖放到模拟器中。它应该会安装成功。
但是，如果您再次使用 Chrome 导航到相同的 URL，您仍然会遇到相同的错误。这次是因为 Chrome 尚未启用 WebGL，因为模拟器不在其白名单中。要强制启用它，请导航到“about:flags”并启用此选项：“Override software rendering list”
您现在应该能够启动我们的一个场景，比如我们著名的Espilit场景：http://www.babylonjs.com/index.html?ESPILIT
我的第一代联想 X1 在 Windows 10 上使用简单的 HD4000 GPU 实现了 25 帧/秒！对于模拟器来说还不错！显然，您仍然需要真实的设备来基准测试您的 WebGL 代码的性能。
更棒的是，由于模拟器完美支持触控，您还可以测试和调试 WebGL 体验中的多点触控。例如，将相机切换到“虚拟操纵杆相机”
现在，您只需触摸您的 PC 屏幕，即可用两根手指在 3D 场景中移动。
注意：为此，我们正在使用指针事件和我们的HandJS polyfill，将这些事件传播到触摸事件，因为 Chrome 尚不支持指针事件。
在 Windows Phone/Mobile 上，WebGL 默认在 IE11 和 Edge 中启用。因此，只需启动 Windows Phone 模拟器并导航到您的 WebGL 内容即可。
注意：甚至 Web Audio 在 Visual Studio 模拟器中的 Chrome 中也受支持！例如，此演示可以在其中运行：http://www.babylonjs-playground.com/index.html?22
使用 Vorlon.js 更进一步
我们最初制作 Vorlon.js 是为了简化移动 Web 开发人员的生活。如果您还没有听说过它，请随时访问我们的网站观看视频：http://www.vorlonjs.io/ 并查看这篇文章：我们为什么制作 vorlon.js 以及如何使用它远程调试您的 JavaScript
让我们首先回顾一下如何在 Android 和 Windows Phone 模拟器上调试您的层。例如，我目前在空闲时间正在使用 Flexbox 来改进 Babylon.js 网站。通过 Modernizr 插件，您可以看到模拟器支持 Flexbox，您甚至可以通过 DOM 浏览器查看布局大小。
例如，您在 Android 模拟器（左侧）中看到高亮的“Mansion”flexbox 项目，其大小当前为“172px x 112px”。
让我们在Windows Phone 模拟器（右侧）上查看同一网站
当然，IE11 Mobile 也支持 Flexbox，这一次，相同的 flexbox 项目目前大小为“140px x 91px”。
另一个有趣的特性是交互式控制台。有时，使用 WebGL，很难知道您的代码在移动设备上失败的原因。这通常是因为移动设备的 GPU 不支持特定功能，或者因为着色器无法编译。例如，我们的“景深/结束”演示就是这种情况。该着色器对于 Windows Phone 来说过于复杂，您可以使用我们的工具轻松验证它。
我们还有许多其他插件可以帮助您，我们目前正在努力添加新插件以进一步扩展功能。谁知道呢，也许在不久的将来我们也会为 babylon.js 提供一个。
更多关于 JavaScript 的实践
本文是微软技术布道师关于实用 JavaScript 学习、开源项目和互操作性最佳实践的 Web 开发系列文章的一部分，其中包括Microsoft Edge 浏览器和新的EdgeHTML 渲染引擎。
我们鼓励您在各种浏览器和设备上进行测试，包括 Windows 10 的默认浏览器 Microsoft Edge，您可以在 dev.modern.IE 上使用免费工具。
- 扫描您的网站是否存在过时库、布局问题和可访问性问题
- 将虚拟机用于 Mac、Linux 和 Windows
- 在您自己的设备上远程测试 Microsoft Edge
- GitHub 上的编程实验室：跨浏览器测试和最佳实践
来自我们工程师和布道者的 Microsoft Edge 和 Web 平台深度技术学习
- Microsoft Edge Web Summit 2015（新浏览器、新支持的 Web 平台标准以及来自 JavaScript 社区的特邀演讲嘉宾的展望）
- 哇，我可以在 Mac 和 Linux 上测试 Edge 和 IE！（来自 Rey Bango）
- 在不破坏 Web 的前提下推进 JavaScript（来自 Christian Heilmann）
- 让 Web 正常工作的 Edge 渲染引擎（来自 Jacob Rossi）
- 使用 WebGL 释放 3D 渲染（来自 David Catuhe，包括 vorlon.JS 和 babylonJS 项目）
- 托管 Web 应用程序和 Web 平台创新（来自 Kevin Hill 和 Kiril Seksenov，包括 manifold.JS 项目）
更多免费的跨平台工具和网络平台资源