緊接上文

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
1080×540， 沒法看，60FPS以上
2160×1080，有點模糊，Demo中的視訊楊洋/熱巴故事線，43FPS以上
4096×2048，可以看看，Demo中的視訊，其餘的是4k視訊 14FPS以上

頻寬的要求

4k視訊，頻寬建議50M以上吧

總結

全景雙屏VR視訊

這只是一個起步階段，目前主流手機畫素感明顯，為了達到最佳價效比，最好找個這樣的手機：
視網膜屏或者更清晰
能夠支援重力、陀螺儀
能夠支援4K硬解碼的解碼器
能夠支援4K大小紋理的GPU

大概是這樣子的
Android: 5.0以後的
iPhone: 5s以後的

固定視角雙屏VR視訊

這個比較簡單，1080P已經很不錯了
不需要支援重力、陀螺儀，只要螢幕清晰即可。