紧接上文
消费升级的必然是体验升级，AR/VR技术是提升用户体验的方式之一。智能手机让用户可以AnyTime、AnyWhere的体验移动生活服务，再结合扁平化UI设计，在小小的手机屏幕上，实现了可以媲美PC的体验，用户已经从开始的惊艳，慢慢变成了适应，认为智能手机就应该是这样子，即我们所说的《审美疲劳》。为了提升用户体验，硬件厂商也是操碎了心，不断提升手机屏幕尺寸、清晰度、分辨率、曲面屏等等。其背后的推力，就是消费升级的表现。
虽然我们不是硬件厂商，但在这场变革中，我们可以通过软件来实现自我价值。举个例子，如果把完整的《清明上河图》放在手机上来展示，效果和亲临世博会相差万里。如果有了VR技术，把手机屏幕作为通向虚拟展厅的眼睛，就像深入其境的到了“中国馆”，会不会给用户带来极大的体验提升呢？
本次Demo所需二维码
视频演示
增加了播放器页面，用户可以自己输入在线视频的URL，使用三种方式播放：
- 沉浸式体验，让用户可以体验在豪宅看电影
- 单屏全景视频，通过软件模拟VR分屏效果
- 分屏全景视频，这个需要视频源支持才可以哦
二维码如下：
操作指南
App首页指南
APP是个演示Demo不具有线上产品的体验，点检《影视ICON》进入播放器页面
视频播放器指南
图中有3个按钮一个输入框，用户可以自定义在线视频的URL，并根据视频的内容来选择哪种方式打开。这里为了方便演示，作者已经预置了一个单屏全景视频URL，提供给大家测试使用。
沉浸式2D电影体验
就是普通的电影了，优酷高清视频基本都是720P了。720P在iPhone plus上看，我是觉得有点模糊的，但在我客厅的48寸电视中，我知道视频内容往往也就是720P，我就感觉可以接受。为什么视频清晰度一样的情况下，5.5英寸的屏幕反而比48寸的屏幕更不能让人接受呢？
单屏全景电影播放
这个很简单了，参考之前的文章《22. WebAR那些事: 20行代码做全景》的那篇，把视频作为一个图像纹理，再通过three.js渲染出球形纹理，播放就好了。
如果点击进入VR模式，那么就相当于生成两个一样的球形纹理，把相机的位置根据左右调整参数，就可以实现VR效果了
分屏全景电影播放
首先用户要确定视频的来源是否是分屏的，这个很重要，否则播放效果会出现乱七八糟的情况。单屏模式，只是把视频的一半，也就是左边的部分作为球形纹理，展示在屏幕上。
当用户点击VR模式的时候，会根据左右两部分各生成一个球形纹理，摄像机的位置无需调整，因为视频内容已经调整过了。
用户输入框
输入自己喜欢的视频，自己体验吧。如果需要，我这里有4K的单屏全景视频《极地星空》非常漂亮，因为视频太大了，就不放到线上，可以线下分享给大家。
效果展示
沉浸式2D视频
邀请你到精装修豪宅中，体验超大屏幕播放电影的快感
支持一键切换VR模式
全屏全景/VR模式
同样支持一键进入VR模式
分屏全景视频
这个直接在首页，播放迪丽热巴故事视频就可以了。
WebVR现状的解读
天空盒VS球形纹理
之前我们一直使用球形纹理作为全景的素材，球形纹理VS天空盒的优劣在哪里？
功能对比
- 不清楚的可以翻看我之前写的WebGL技术文章
- 通常手机支持的最大纹理长度为2048x2048，好一些的手机，可以支持4096x4096。球形纹理的常见长宽比是2：1，也就是说，最简单高效的展示清晰的全景图片，可以用一张4096x2048的球形纹理。
- 天空盒是6面体，也就需要6张纹理作为6个面，最大的清晰度，可以做到6张4096x4096的纹理，作为贴图，清晰度明显比全景要高
开发效率
一张全景图片总比六张贴图要更方便管理。。
而且天空盒需要通过球形纹理二次加工生成，目前主流的全景相机，都是支持一键生成球形纹理，目前我还没有找到一键生成天空盒的相机。
有的话，请亲们留言，因为我更喜欢用天空盒。
性能对比
同等画质的情况下，天空盒要比球形纹理性能更好，这个先挖坑，后续讨论。
WebVR世界的初始坐标
当3D世界建立起来时，手机的当前位置，就是当前坐标系，如下图所示
天空盒与贴图的映射
六个面，上下左右前后，如下图：
THREE.JS中映射关系
THREE.JS为了方便记忆，简单的理解为：
[ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ]结合上面提到的坐标轴，中文正确的理解方式为:
正X轴、负X轴、正Y轴、负Y轴、正Z轴、负Z轴，分别指向的贴图
核心代码
代码示例
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var path = 'http://aeapp.oss-cn-hangzhou.aliyuncs.com/skybox/home/';
var cube = [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ];
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
var effect = new THREE.VREffect(renderer);
var loader = new THREE.TextureLoader();
var control = new THREE.VRControls(camera);
var video = document.createElement('video');
video.src = getQueryString("src");
video.loop = true;
video.muted = true;
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.play();
var texture = new THREE.VideoTexture(video);
texture.format = THREE.RGBFormat;
texture.minFilter = THREE.NearestFilter;
texture.maxFilter = THREE.NearestFilter;
texture.generateMipmaps = false;
var screen = new THREE.Mesh(new THREE.PlaneBufferGeometry(40, 20), new THREE.MeshBasicMaterial({
map : texture
}));
screen.position.z = -40;
var scene = new THREE.Scene();
scene.add(screen);
scene.add(new THREE.AmbientLight(0xFFFFFF));
scene.background = new THREE.CubeTextureLoader().setPath(path).load(cube);
animate();
function animate() {
effect.requestAnimationFrame(animate);
control.update();
effect.render(scene, camera);
}
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r) {
return unescape(r[2]);
}
return null;
}代码解读
天空盒是VR世界的背景
scene.background = new THREE.CubeTextureLoader().setPath(path).load(cube);电视机是VR世界的一个面
var screen = new THREE.Mesh(new THREE.PlaneBufferGeometry(40, 20), new THREE.MeshBasicMaterial({
map : texture
}));
screen.position.z = -40;电视机的3D坐标
[0, 0, -40]
也就是说在在用户正前方，距离40个单位的地方
代码不足的地方
参数调整不够完善
应为是个Demo的缘故，这里不做具体细节的展示
内存管理的不足
业余时间开发的SDK，慢慢打磨吧
性能上的不足
性能分两块来看待：
- JS的运行速度，相比Native，确实慢很多，表现在加载时间上，耗时较多
- GL的渲染速度，相比Unity3D，丝毫不逊色，红米Note3表现60FPS的强劲性能
体验上的不足
- 加载的时候，应该增加等待框
- 网络加载失败时，应该有对应的错误处理
- 视频源不够清晰
小结
这是个Demo，慢慢会好的
畅想
沉浸式体验的深度
目前只是做了一个全景，简单的模拟了沉浸式体验。但远远不够，需要更多的功能细节和技术变革来完善。比如：
- 虚拟世界的时间不够真实，亦辰不变导致视觉疲劳
- 光线没有变化，开灯、关灯、早上、夜晚等等，更接近真实
- 如果场景和视频的内容相互影响，需要机器学习来分析视频的场景，营造电影院效果
4.虚拟伙伴，比如我想在VR世界来找个美女朋友一起观影~~ - 等等
想象空间巨大
通过VR技术，可以做房产导购、家装市场、电商的垂直体验、心理/身体安慰，作为技术人员，我们可以预感到3~5年之后的变化，把空间留给产品去吹牛，把技术难度留给自己，哈哈。
下一回
我们继续讨论基于WebVRSDK的VR播放器
敬请期待
