紧接上文

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

本次Demo二维码：

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

使用WebGL+WebVR做VR视频

常见的VR视频有哪些

以下截图来自网络

固定视角的VR分屏视频

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

单一视角的VR全景视频

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

双眼视角的VR全景视频

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

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

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

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

本质上也是两个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已经很不错了
不需要支持重力、陀螺仪，只要屏幕清晰即可。