科技魔方

Mozilla发布VR视频沉浸式媒体内容创作入门指南

AR/VR

2019年02月13日

  2019年02月13日,Mozilla日前撰写了一份“Immersive Media Content Creation Guide(沉浸式媒体内容创作指南)”,希望为有意加入或新加入这一领域的创作者提供借鉴参考。以下是映维网的具体整理:

  1. 图片

  无论是作为单独的照片还是作为交互式游览体验的组成元素,网页都是分享沉浸式图像的绝佳方式。大多数浏览器都可以显示沉浸式图像,但它们需要一定的帮助。通常来说,这类图像是用180度或360度相机拍摄的常规JPG或PNG文件。根据确切的格式,你可能需要不同的软件以在浏览器中进行显示。你可以在自己的服务器上托管图像,又或者是利用各个不同的图片网站。

  1.1 等量矩形(Equirectangular)图像

  360度相机通常以等量矩形格式拍摄照片,这意味着宽高比为2:1。你可以在Flickr发现一大批示例。

  要利用Web并在虚拟现实中显示示例图片,你需要一个图像查看器库,如:

  Arame的a-sky组件;交互式示例

  基于SphereBuffer几何的ThreeJS:交互式示例和源。

  基于带有等量矩形纹理的PhotoDome的Babylon.js:交互式示例。

  亚马逊Sumerian Skybox。

  PhotoSphereViewer:一个更易于使用的库,基于ThreeJS。

  谷歌的VRView

  1.2 球形图像和3D图像

  一些360度相机将图像保存为球形投影,它们通常看起来像一个或两个圆圈。这种图像通常应该使用相机附带的工具转换为等量矩形。来自180度相机的3D图像通常是并排的两个图像,或者一个位于另一个之上。大多数相机厂商都提供了将图像用于网页的工具,详细可查看相机的文档说明。

  1.3 游览体验

  将沉浸式图像用于网页的最佳方式之一是:利用它们建立交互式游览体验。有一系列基于Web的优秀工具可帮助构建360度游览体验,如:

  Google Tour Builder

  Marzipano

  Roundme

  IPanorama 360: Virtual Tour builder for WordPress

  3DVista

  WondaVR

  HoloBuilder

  2. 视频

  360度和3D视频类似于普通视频。它们通常用h264编解码器编码,并存储在mp4容器内。但360度和3D视频的体积非常大。正常来说你不会希望将其拖关于自己的Web服务器。相反,你希望将其上传至YouTube或Vimeo等视频平台,而他们都提供了如何处理和上传视频的解释说明。

  YouTube 360度视频上传指引

  Vimeo 360度视频上传指引

  如果选择在标准Web服务器托管视频文件,你需要利用AFrame或ThreeJS等VR框架构建的视频查看器库。

  A-Frame 360度视频播放器示例

  Valiant,一款基于ThreeJS的360度视频播放器

  2.1 3D视频

  3D视频通常只是两个180度或360度视频合在一起。这通常称为“上下并排”格式,这意味着每个视频帧都是一个包含两个等量矩形图像的正方形,上半部分用于左眼,下半部分则用于右眼。

  Youtube:关于VR/3D视频的文档;非360度的VR视频

  谷歌:360度媒体综述

  Vimeo:将Vimeo视频流式传输至WebVR应用程序的demo代码

  3. 压缩建议

  选择尽可能高的质量,并让视频提供商根据需要进行转换。如果你自己动手,请使用相机支持的最高比特率,并选择在h264中录制4k。

  4. 拍摄360度视频与图像的设备

  专门的360度,180度或3D相机应该可以为你提供最佳的效果。亚马逊上有一系列的优质产品,而它们都应该附带用于拍摄和转换照片与视频的说明和软件。

  Mozilla Mixed Reality团队亲测建议:

  联想Lenovo Mirage Camera with Daydream

  理光Ricoh Theta 360 series

  尽管专用相机可为你提供更好的效果,但你同时可以选择通过定制的智能手机相机应用(如FOV,Cardboard Camera和Facebook)拍摄360度图像。更多信息可参阅相应的教程。

  5. 分享你的沉浸式内容

  你可以在自己的网站上分享内容,但如果没有自己的网站,你可以考虑众多的360度内容托管网站:

  PanoMoments

  Within

  Kuula

  Momento360

  360cities.net

  Vizor360

  Panotica

+1

来源:yivian

推荐文章