WebVR演示:为浏览器创建公开介绍VR场景


2016年12月10日 -DOM Barnard.

本文讨论了我们如何创建一个简单的WebVR演示,以练习您的公开演讲。可以使用支持WebVR的任何VR耳机尝试演示。

什么是webvr?

WebVR允许您访问Web浏览器中的虚拟现实(VR),使用诸如Oculus Rift,合并VR,HTC Vive和Gear VR等设备。这意味着您将不再需要下载庞大的应用程序以体验VR,使其可以轻松地纳入现有网站以进行各种各样的用例。

WebVR广泛访问,并将Web作为可扩展基础架构利用。

如何尝试WebVR?

WebVR目前在Firefox中提供,Firefox.(55 +),Chrome,以及Samsung Internet浏览器的齿轮VR。

注意:并非所有浏览器和设备都可以访问WebVR内容,请检查此规格WebVR页面

您可以使用以下示例测试浏览器对WebVR的支持:

VirtualSeech WebVR示例/演示

Webvr示例使用A帧开发

导航到WebVR页面时,您需要点击VR耳机图标以进入VR模式。

我们一直在实验WebVR公开说法演示。在您的手机上查看此网页,然后点击VR体验的VR耳机图标,而无需下载应用程序。

这在Web浏览和VR体验之间产生了平滑的转换,例如您可能有兴趣购买新房,您访问一个物业网站,查看有关房屋的详细信息,然后输入WebVR模式,以VR查看360的房间耳机。这真的增强了当前的Web体验。

我们如何构建A帧演示

我们花了几天时间来审查A帧文档并采用我们目前的WebVR VR应用程序。当您输入环境时,您看到的是6平面平面,连接在一起制作立方体。6个平面每个纹理在它们上都具有不同的纹理,并且使用3ds max呈现,使它们在这种多维数据集配置中连接。然后我们将一台相机放在多维数据集的中心,给人留在会议室。

为墙壁渲染6个不同纹理的替代方案是使用A帧渲染球体并将纹理映射到该球体。然后,我们将电影纹理嵌入到前平面中,向观众的前平面添加了环境声音。

有什么帮助的是通过一个框架的例子,它提供了如何建造的源代码 - 为您的需求进行审查和适应这一目标是最接注册的最佳方式。

WebVR公开使用A-Frame说实际演示

移动视图敲击VR耳机图标后,浏览器菜单消失,结果视图类似于VR应用程序。

构建WebVR内容的其他选项

我们使用A帧来构建WebVR环境,但您也可以使用三个.js,babylon.js,primrosevr和反应VR.(由Oculus开发)。

我们发现的限制

网页可能需要一段时间才能加载:我们创建的Webvr页面约为3-4MB,对于网页而言,很大,并增加了几秒钟(根据Internet速度)到加载时间。即使在优化图像和降低视频质量之后,页面仍远远超过页面加载时间的推荐尺寸。

与某些设备和浏览器不兼容:这会影响WebVR体验的各个部分,例如,在Microsoft Edge浏览器中打开时,我们公开演讲的电影不会加载。我还有朋友在iPhone或较低的Android设备上努力查看WebVR内容。检查最新WebVR兼容性这里。

更难以开发复杂的场景:WebVR快速提高,但我仍然发现在Unity3D和Unreal引擎中创建VR场景更容易。如头像动画等元素是棘手的,以创建一个帧,但在Unity3d中创建。

Unreal发动机和Unity3d也有一个巨大的资产商店这使得快速创建原型 - 例如,您可能需要为VR创建一个空间游戏。您可以购买一个空间插件,并在一天内具有一个体面的演示。我相信在不久的将来将为WebVR创建一个资产存储商店。

未来WebVR的潜在用途

WebVR将在这些网站上工作非常好:

  • 房地产经纪人房子观看网站,用户阅读有关属性的详细信息,可以使用Web浏览检查本地学校,犯罪水平等,然后输入WebVR模式,并在惊人的360图像中查看房间。
  • 假日旅行WebVR网站,用户可以在360张图片中前往世界上不同的美丽部分,然后可能有不同区域的描述和一种评级系统。
  • 虚拟汽车经销商和驾驶经验,客户可以在360年坐在虚拟车内,检查车辆的外部,甚至可以从司机的角度下给出车辆的360次驾驶。

看看世界上最大的webvr hackathon.有关更多信息。