17. Html5的局: VR全景分屏视频距离我们有多远?-阿里云开发者社区

开发者社区> 人工智能> 正文
登录阅读全文

17. Html5的局: VR全景分屏视频距离我们有多远?

简介: #紧接上文 WebGL+WebVR可以轻松打造出一款VR游戏,而且整个游戏代码竟然可以精简到100k以内,加上JS及时编译和调试的特性,打造一款简单的3D场景,要比U3D这种Native方式廉价、高效很多。 U3D作为传统的Native引擎,包体动辄几十M,使用C/C++、C#等编译语言,效率明显不如JS+Chrome,不过好处十分明显,运行性能良好。 #本次Demo二维码: 依旧80

紧接上文

WebGL+WebVR可以轻松打造出一款VR游戏,而且整个游戏代码竟然可以精简到100k以内,加上JS及时编译和调试的特性,打造一款简单的3D场景,要比U3D这种Native方式廉价、高效很多。
U3D作为传统的Native引擎,包体动辄几十M,使用C/C++、C#等编译语言,效率明显不如JS+Chrome,不过好处十分明显,运行性能良好。

本次Demo二维码:

依旧800k的APK,包含VR游戏与VR视频,进一步完善了WebVR的兼容性:
vr_1_0

使用WebGL+WebVR做VR视频

常见的VR视频有哪些

以下截图来自网络

固定视角的VR分屏视频

6d81800a19d8bc3e412085ac858ba61ea8d345a8_jpg
用户只能从摄影师提供的固定角度观看视频,视觉范围比较小,本质上是位于不同摄像头的两种视频的合并。常见的比如电影院的3D视频,通过3D/VR眼镜偏光使左右眼看到不同影响,给人以立体感。

单一视角的VR全景视频

121320xywfwf5r28edfc2y
摄影师通过全景相机拍摄的360°全景视频,视频通常是固定的长宽2:1的比例(完美比例应该是3.1415926...),用户用VRPlayer播放视频时,将视频的每一帧生成一个球形纹理,用户的视角在球心的位置,通过重力感应、陀螺仪等切换不同的视角。
这种情况下,如果强行切换成VR分屏模式观看,左右视角播放的视频内容本质上是一样的,颜色没有井深,呈现的3D立体感较弱

双眼视角的VR全景视频

摄影师通过双摄像头拍摄的360°全景视频,视频原始数据相当于2个1.1.2中的视频,但视频呈现模式不同场景区别很大,由于标准尚未统一的缘故,常见的有两种

谷歌Cardboard提供的Demo中1:1的比例内容

andes
本质上是两个2:1的图像合并成一个正方形的图像,原始图像未压缩也不失真,效果清晰但文件偏大。VRPlayer播放时,使用OpenGL生成两个球形纹理、两个摄像机,分别模拟人的左右眼。第一个球形纹理使用上半部分图像,第二个使用下半部分图像,两个全景效果。

Three.js上提供的Demo中2:1的比例内容

WechatIMG1_jpeg

本质上也是两个2:1的图像合并成的一个2:1的图像,为了降低文件的大小,先将两个视频源从2:1压缩到1:1,在左右拼接,合并成2:1的图像。
VRPlayer播放时,用两个1:1的图像生成两个球形纹理,理想比例是3.1415926..,看官也该知道了,视频被拉伸了,图像质量也降低了,但文件减小了一倍。

VR视频要求有多高?

手机屏幕的要求

手机屏幕经过VR眼镜之后,手机屏幕距离人眼的距离更近了,图像被放大了2倍以上,像素感明显。目前主流的视网膜屏幕,通常是眼镜看手持设备屏幕时,看不出像素感。VR行业的屏幕标准尚未统一,如果哪一天VR真的进入商业化,对屏幕的要求更高,目前iPhone等手机,作为VR屏幕,只能说是入门级

视频清晰度的要求

这里我们只说VR全景双屏视频,测试设备:我的魅蓝Note3
1080x540, 没法看,60FPS以上
2160x1080,有点模糊,Demo中的视频杨洋/热巴故事线,43FPS以上
4096x2048,可以看看,Demo中的视频,其余的是4k视频 14FPS以上

带宽的要求

4k视频,带宽建议50M以上吧

总结

全景双屏VR视频

这只是一个起步阶段,目前主流手机像素感明显,为了达到最佳性价比,最好找个这样的手机:
视网膜屏或者更清晰
能够支持重力、陀螺仪
能够支持4K硬解码的解码器
能够支持4K大小纹理的GPU

大概是这样子的
Android: 5.0以后的
iPhone: 5s以后的

固定视角双屏VR视频

这个比较简单,1080P已经很不错了
不需要支持重力、陀螺仪,只要屏幕清晰即可。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: