转载

使用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); }

正文到此结束