戴上VR眼镜,随着头部迁徙改变看到的图像也随之变革,仿佛身处一个虚拟的天下中。

没有VR眼镜,通过手指触摸或体感掌握,也能随意切换视角。

与传统视频比较,VR最大的上风便是授予每个不雅观看者以导演的权利,“ 一千个人心中有一千个哈姆雷特”,同一个虚拟天下,每个人也能走出属于自己的轨迹。

html5的在线播放页面HTML5网页若何播放VR视频 React

VR视频的播放事理?

VR视频播放是全景相机拍摄的逆过程。

拍摄时,想象把一个水晶球的表面分成多份,每一份便是一个鱼眼镜头,多个鱼眼镜头把现实天下映射成一个球体的表面贴图;

全景相机

球体表面贴图

播放时,VR播放器会用3D技能构建出一个虚拟的球体,用户身处虚拟球体的内部中央,看到的便是拍摄时水晶球映射的球体表面;

3D虚拟球体和摄像机

用户头部迁徙改变时,调度3D摄像机角度,再通过凸透镜把画面映射到用户的双眼,详情参考VR视频播放事理。

网页如何播放VR视频?

\"大众开放、平等、协作、分享\公众是互联网精神,Web是VR内容最好的传播渠道。

VR视频能丰富网页的表现形式,提高用户的参与感。

WebGL的遍及率高,并能访问底层的图形绘制API,网页渲染VR视频的刷新率能达到60赫兹,与APP一样流畅。

WebGL兼容表

three.js , A-frame 等精良的开源JS库能快速地实现在网页上播放VR视频,详细可参考干系网站, 但是经由笔者实测,直策应用也有一些缺陷:

js文件超过500Kb,影响网页加载速率

浏览器兼容以Chrome/Firefox支持为主

交互功能的开拓较繁芜,哀求前端掌3D图形学知识

play2VR(www.play2vr.com)是一款免费易用的VR视频播放器,它尺寸还不到30Kb(gzip) , 支持主流PC/移动浏览器和微信,集成CDN还支持跨域VR视频播放, 利用非常大略:

一、注册play2VR账号,上传媒体(支持全景视频和图片),设置播放选项:

二、拷贝集成代码到网页源代码中:

完成!

其余,play2VR还能直接编辑交互热点,详见前端进阶-2分钟给VR场景加上交互。