使用html5在浏览器中开发虚拟现实业务 -凯发k8官方网

在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目前还在致力于创建另一个不同的凯发k8官方网的解决方案glam，这是一门用来创建3d web内容的声明式语言。它将令vr渲染变得更加简单。使用glam渲染一个旋转的3d立方体，需要引入glam.js并这样使用tag：

\\\#photocube {\ image:;\ 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

总结

以上是凯发k8官方网为你收集整理的使用html5在浏览器中开发虚拟现实业务的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。