WebVR开发教程——深度剖析

最近WebVR API 1.1已经发布，2.0草案也在拟定中，在我看来，WebVR走向大众浏览器是早晚的事情了，今天本人将对WebVR开发环境和开发流程进行深入介绍。

WebVR与WebVR API

首先，WebVR指的是使用浏览器体验VR的方式，如今已经成为了一种开放标准。
它提供了JavaScript API，使开发者可以获取vr设备的输入信息，来改变用户在虚拟空间里的位置、视觉、行为等。
以下是目前主流VR及浏览器对WebVR的支持情况。

遗憾的是，WebVR的体验方式目前只能运行在Android和Windows系统上。不过这并不影响我们在mac和linux上开发与调试。

移动VR两巨头：Daydream 与 Gear VR

WebVR的开发环境配置

由于WebVR App需要运行VR设备上，而目前购买一台VR设备的成本不低，所以这里我总结了一套开发环境下WebVR调试方案。
首先我们需要给WebVR静态页面起一个web server，这里我安装 Web Server for Chrome，你也可以使用node或者上传至github托管。

PC端调试

1. 安装chrome扩展程序 WebVR API Emulation

使用WebVR API Emulation扩展程序可以模拟VR设备用户的视角、位置等。

WebVR API Emulation模拟VR体验

移动端调试

适用于cardboard级别的WebVR App调试

1. 安装chrome beta

目前需要webvr还属于早期实验阶段，需要下载chrome beta最新版，安装完需要手动开启webvr支持，在浏览器地址栏输入chrome://flags#enable-webvr，点击启用并重新启动chrome。

2. 安装Google VR 服务

这是google给cardboard、daydream用户提供VR服务配置，可以提供VR模式窗口，如下图。
最后你可以在chrome上打开WebVR示例页面验证是否配置成功

WebVR示例应用

3. chrome inspector调试

通过手机chrome访问我们开发的WebVR页面，在PC端chrome输入chrome://inspector进行调试，具体可以参考 远程调试 Android 设备使用入门。

完成WebVR开发环境配置之后，我们将正式进入WebVR开发之旅。

使用WebGL开发WebVR

WebVR App实现依赖于WebGL技术开发，WebGL是在浏览器上创建和运行3D图像，它遵循OpenGL ES的规范，通过GLSL语言操作GPU进行顶点片元渲染。

3维模型矩阵变换

在WebGL场景中，3d物体都是通过矩阵变换最终形成屏幕上的2d图像，[投影矩阵ProjectionMatrix] × [视图矩阵ViewMatrix] × [模型矩阵ModelMatrix] × 顶点坐标，其中投影矩阵和视图矩阵可以抽象为3d场景中的相机属性。

模型矩阵 × 顶点坐标（相对模型） = 顶点世界坐标（绝对坐标）
视图矩阵 × 世界坐标 = 顶点相机坐标（以相机为坐标原点）
投影矩阵 × 顶点相机坐标 = 2d屏幕坐标

相比一般WebGL场景，WebVR App不同之处在于࿱