使用 HTML5 在浏览器中开发虚拟现实业务

在 SFHTML5 小组（San Francisco HTML5 User Group）组织的一场会议中，与会者们的讨论焦点围绕着两个主题：使用 HTML5 技术——如 WebGL、WebVR、Three.js 和 GLAM——创建虚拟现实体验，以及 Firefox 和 Chrome 对这些技术提供支持的当前开发进展。这一切背后的目的在于，将整个互联网带入虚拟现实（以下简称 VR）的世界中。

Tony Parisi 是 VRML 和 X3D ISO 标准的创造者之一，在会上他介绍了 WebVR ——它结合了虚拟现实和 Web 技术。目前， VR 软件基本上都属于游戏式，在创建和操纵图形方面做了大量的工作。大部分已有的 VR 应用都借助于 Unity 引擎构建，然而精通该引擎的人却并不多。Parisi 的理念是降低该领域的门槛，让所有开发者都能够使用 JavaScript 与 WebGL 这样的基础 Web 技术创建 VR。 Three.js 是一个 JavaScript 类库，用来在 WebGL 中渲染 2D/3D 图像。借助 Three.js，开发者将更易于渲染 VR 场景，代码量仅为对应的 WebGL 版本的 1/10 到 1/3。Parisi 目前还在致力于创建另一个不同的解决方案 GLAM ，这是一门用来创建 3D Web 内容的声明式语言。它将令 VR 渲染变得更加简单。使用 GLAM 渲染一个旋转的 3D 立方体，需要引入 glam.js 并这样使用 Tag：

#photocube {
    image:url(../images/flowers.jpg);
    rx:30deg;
}

Parisi 还介绍了，Chrome（实验版本，Blink 源码分支）和Firefox（ nightly ）都开始实现头部跟踪方面的 WebVR API，这些 API 可以用来跟踪 VR 设备的运动情况（目前支持 Oculus Rift，稍后也会增加对其他设备的支持），并支持对 WebGL/CSS3 内容进行 3D 立体渲染。目前已有一个更简单的可用方案，由 Google Cardboard 、智能手机和一个 VR 应用（例如 Cardboard ）组成。该应用使用智能手机的摄像头和运动传感器，在手机浏览器中使用 WebGL 生成活动的立体图像

来自 Mozilla 的 Firefox OS 首席 UX 设计师 Josh Carpenter，在他的演讲“ WebVR 的 UI/UX 设计”中，展示了结合 Firefox 使用 Oculus Rift 的效果，并针对开放的“网络化（Webby）”虚拟现实体验总结了一些他所期望的特性：

• 通过链接，无缝且安全地从一个地方切换到另一个地方的能力。包括对导航链接、缩放、滚动、后退、填写信息等方面的控制。简而言之，让用户在使用 VR 头戴设备的时候能够获得类似于浏览器的体验。
• 易于开发。为了实现这一点，需要开发一些新的工具。“JavaScript-Three.js-WebVR-WebGL- 浏览器”这条工具链尚处于新生阶段。
• 能够在任何设备上获得 VR 体验。
• 能够将当今世界中的网站自动化转换为 VR 体验。这意味着在访问老式网站的时候，应该同样能够获得 3D VR 体验。
• VR 商品化：更多的设备、嵌入性以及更好的性能。

Carpenter 还演示了一些早期阶段的工作，这些工作使得普通网站带入 VR 世界而不必要求这些网站升级其的内容。他还创建了一系列在不同 VR 站点之间切换时使用的转场效果。在设计VR 浏览器方面，Carpenter 看到了许多潜在的可能性，因为目前我们已经可以使用具备空间动画能力的360 度Canvas。

来自Google 的WebGL 和WebVR 开发者Brandon Jones，在他的演讲 Web 浏览器的 VR 内部实现中，提供了一些用于 VR 应用方面的代码样例，以介绍在渲染 VR 场景时所需的必要条件。在刚开始对站点进行 VR 渲染的时候，或许有许多令人生畏的工作，但如果我们通过像下面代码段中展示的一样使用 Three.js，这一切都会变得简单许多。

 // Normal scene setup, then...
 
var vrControls = new THREE.VRControls(camera);
var vrEffect = new THREE.VREffect(renderer);
 
function onEnterVRFullscreen() {
   vrEffect.setFullScreen(true);
} 
function onWindowResize() {
   vrEffect.setSize(window.innerWidth, window.innerHeight);
} 
function onRequestAnimationFrame() {
   vrControls.update();
   vrEffect.render(scene, camera);
}

Jones 承认，尽管 Three.js 并未将 VR 作为优先考虑的内容，也尚未针对 VR 渲染做优化，甚至它本身可能还需要进行一些优化，但它至少已经能够肩负起 VR 渲染的工作。针对 VR 应用开发者，Jones 给出了一些建议：

• 优先考虑轻量级顶点渲染引擎
• 当遇到性能问题的时候，减少 canvas 分辨率而不是帧数。
• 永远不要把与视点无关的东西（如阴影或环境地图）重复渲染。
• 对每个眼睛看到的场景逐一完全绘制，在面对状态转换时，是一件非常沉重的任务。在具体场景下，或许更高效的做法是：针对每个物体，先绘制左眼所见场景，当切换视图后再绘制右眼所见场景。

Jones 还演示了在 Chrome 中渲染 Quake 3 VR 场景。

来源： SFHTML5 会议视频， WebVR API 新手指南， Mozilla VR （一个完全采用 VR 的网站）， Google Cardboard ， Chrome VR 实验， GLAM ， Mozilla WebVR Mailing List 。

查看英文原文： The Current Status of Browser-based Virtual Reality in HTML5