vr虚拟现实编程
Web开发人员用于构建Web虚拟现实体验的可用方法正在Swift而激动人心地增长！ 去年，我曾介绍过去年如何在网络上构建VR，自那时以来，它已经发展了很多。 2016年出现了很多用于构建网络虚拟现实体验的选项-在过去的两周中，我们探索了A-Frame（一种开源可扩展VR网络框架）并使用Primrose在VR中构建VR 。 上个月，谷歌自己宣布了另一个激动人心的选项，即嵌入式VR视图，它将为网络带来更多的VR。
什么是VR视图？
“ VR视图”使开发人员能够将360度虚拟现实图像和视频嵌入到台式机和移动设备的网站中。 VR Views也可以嵌入Android和iOS的本机应用程序中。 在本文中，我们将探讨将360度全景图像嵌入到现有网站中有多么简单。
设备兼容性
Google的VR View可在台式机和移动设备上的以下浏览器的最新版本上使用：
- 在Android，iOS，Windows，Mac OS X和Linux上使用Chrome。
- iOS和Mac OS X上的Safari。
- Windows，Mac OS X和Linux上的Firefox。
- Windows上的IE 11和Edge。
对于台式机版本，您的“虚拟现实”体验主要是全景体验，您可以用鼠标拖动视图。 他们称这种体验为“魔术窗口”，类似于几年前可能已经看到的桌面Quicktime VR全景体验。 但是，当今Google的VR视图是使用JavaScript而非第三方插件完成的，并且可以使用Google Cardboard通过真实的VR视图进行增强。
拍摄全景照片
Google有一个“ Cardboard Camera”应用程序，可以在Android上拍摄360度全景照片。 对于iOS上的用户，有一个名为Optonaut的应用程序， 它还可以拍摄360张照片。 我不太确定Optonaut照片在其他地方导出和使用有多容易，因此，如果您确实有iOS设备并且可以尝试一下-我很想听听它的进展！
使用Google Cardboard相机，您可以按照屏幕上的说明站在一个地方并绕圈移动，以拍摄360度照片。 最有效的场景是在室外拍摄的场景，这些场景应具有广阔的开放空间，并且图像底部或顶部的细节不要太多。 如果您正在拍摄较小房间的照片，则可能需要先调整图像，然后图像才能看起来正确（我们将在下面介绍如何操作）。
使用相机拍摄照片后，应该可以在/sdcard/DCIM/CardboardCamera上找到手机上的360度照片。 将其复制到将要进行开发的计算机上。
准备影像
如果您的场景中没有大量的天空和地面，则图像在这些区域中可能会显得有些奇怪。 有时，尤其是对于室内拍摄，这是不可避免的。 我们使用了SitePoint办公室的照片（感谢Angela！） ，该照片很好地说明了在底部有很多不可避免的细节的图像底部的样子：
为避免图像顶部和底部的细节过多，可以在图像上方和下方添加空间，以使外观看起来更加整洁。 有很多技术可以尝试使顶部和底部的区域不会过度压缩，到目前为止，我最喜欢的是在顶部和底部都添加模糊的反转图像。
若要尝试此方法，请在photoshop中创建一个2048 x 1024的图像，并将其中的三个全景图像粘贴到其中：
拉伸所有三个，使其充满画布，然后使用“ 编辑”>“变换”>“垂直翻转”翻转顶部和底部的图像：
看起来应该像这样：
复制顶部和底部的图像，然后使用“ 滤镜”>“模糊”>“高斯模糊”对副本进行模糊处理 ：
尝试使用不同的半径值，因为某些场景在出现更多模糊时会看起来更好，反之亦然：
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
拉伸每个模糊的图层，以使它们延伸到图像之外（因为边缘将逐渐淡出，并且我们不希望它们在画布的边缘上逐渐淡出）：
这些图像的最终结果应如下所示：
如果您具有Photoshop技能，则可以想出其他方法来减少图像底部和顶部的明显异象。 有些场景会比其他场景更容易且不那么明显！
嵌入我们的形象
有两种方法可以将我们的图像嵌入到VR视图中。 我们可以嵌入Google托管的VR View或托管我们自己的版本。 目前，将我们自己的版本托管在同一服务器上更加可靠。 当VR View和图像托管在不同的服务器上时，在iOS Safari上无法正常运行。 如果使用Google托管的VR View，则带有映像的服务器还需要能够允许跨域资源共享（CORS）。
使用Google的托管VR视图
为了快速测试VR View的外观，您可以在网页中添加以下内容：
<iframe width="100%"
height="300px"
allowfullscreen
frameborder="0"
src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&
is_stereo=true">
</iframe>来自Google的示例代码看起来像这样：
默认情况下，您将在珊瑚礁中看到360度的可爱鱼类全景！ 如果您在iframe的URL中更改image=参数，则可以将全景图设置为您自己的图像。 只要用于托管映像的服务器与CORS一起使用，此方法就应该起作用。
您将在其中看到一个is_stereo=true属性-这是在将图像设置为在一个图像中复制全景图的情况。 为简单起见，在我们的自定义图像示例中，我们没有走这条路！ 有关此的更多信息， 请参阅有关VR View的Google文档 。
托管VR视图自己
Google托管的VR View非常方便，并且与嵌入YouTube视频一样简单，非常适合快速嵌入全景内容。 但是，如果要在许多平台上将其用于大量观众，则需要自己托管VR View。 否则，图像将在iOS Safari上出现错误的方向错误。 希望这将尽快解决，并且不再需要自我托管！
设置自我托管并不难。 从Google的VR View GitHub下载代码，并将其托管在具有公共访问权限的位置。 如果将其保存在服务器上名为“ vrview”的文件夹中，则可以通过//yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true访问它。 如果直接为此设置了主机（或直接指向域名），则可以避免使用/vrview位。
要添加其他图像，请将它们包含在服务器中的images/yourimage.jpg （例如images/yourimage.jpg ），然后更改上面的URL以查找此新图像（例如//yourdomain.com/vrview/?image=images/yourimage.jpg ）。
如果您只是想使用自己的图像快速进行测试，而又没有准备好自己托管，那么一个不错的选择是使用GitHub Pages。
在GitHub Pages上托管VR视图
通过分叉Google的存储库，然后使用GitHub Pages将其托管在您的GitHub帐户上，可以避免自己下载和托管VR View。
首先，转到Google的VR View GitHub存储库 ，然后单击“ Fork”：
然后，在仓库的分支中，找到CNAME文件并单击它：
该文件将为您的GitHub页面分配一个域名。 如果您准备使用一个域名，并且想对其进行设置，请阅读GitHub指南，以将自定义域与GitHub Pages一起使用 。 否则，请单击右侧的垃圾桶图标，以从分叉版本的存储库中删除此文件。 相反，它将允许您使用典型的http://you.github.io/地址。
提交更改：
最后，在您的VR视图的分支版本中创建一个新分支，并将其称为“ gh-pages” 。 该分支中的所有内容都可以在您的GitHub页面上访问此仓库：
如果现在访问http://you.github.io/vrview/?image=examples/coral.jpg ，那么您应该拥有自己的VR View工作版本！
在这里，您可以随心所欲地添加自己的图像，就像上面的自托管一样。 在这种情况下，您需要将该图像直接添加到gh-pages分支，或将其添加到master ，然后从那里将其带入gh-pages分支。 如果您是GitHub的新用户，则可以避免命令行的大部分混乱，只需在打开图像文件夹的同时将图像拖到浏览器窗口中即可。
更新图像后，请更改URL以该图像为目标（例如，http: http://you.github.io/vrview/?image=yourimage.jpg image= http://you.github.io/vrview/?image=yourimage.jpg ），您应该会在辉煌的360度全景图中看到它！
在行动！
这是360度偷窥SitePoint办公室的工作情况-最后，所有SitePoint工作人员都可以在业余时间重新访问办公室！ 通过单击右下角的全屏图标，您可以全屏查看它。 如果您使用的是智能手机，那么它旁边也会有一个VR图标。 如果您拥有Google Cardboard耳机，请点击并享受！
您可以在我的VR View GitHub Page上单独查看VR View ！
结论
Google的VR View添加了另一个简单的选项，可以为网络创建360 VR内容，并且非常容易组合！
如果您将自己的360度视图放在一起，我很乐意看到您创建的内容！ 在下面的评论中让我知道，或者在Twitter上@thatpatrickguy与我联系 。
翻译自: https://www.sitepoint.com/embedding-virtual-reality-across-the-web-with-vr-views/
vr虚拟现实编程
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
