24. WebVR播放器: 在豪宅里看电影

紧接上文

消费升级的必然是体验升级，AR/VR技术是提升用户体验的方式之一。智能手机让用户可以AnyTime、AnyWhere的体验移动生活服务，再结合扁平化UI设计，在小小的手机屏幕上，实现了可以媲美PC的体验，用户已经从开始的惊艳，慢慢变成了适应，认为智能手机就应该是这样子，即我们所说的《审美疲劳》。为了提升用户体验，硬件厂商也是操碎了心，不断提升手机屏幕尺寸、清晰度、分辨率、曲面屏等等。其背后的推力，就是消费升级的表现。
虽然我们不是硬件厂商，但在这场变革中，我们可以通过软件来实现自我价值。举个例子，如果把完整的《清明上河图》放在手机上来展示，效果和亲临世博会相差万里。如果有了VR技术，把手机屏幕作为通向虚拟展厅的眼睛，就像深入其境的到了“中国馆”，会不会给用户带来极大的体验提升呢？

本次Demo所需二维码

视频演示

增加了播放器页面，用户可以自己输入在线视频的URL，使用三种方式播放：

1. 沉浸式体验，让用户可以体验在豪宅看电影
2. 单屏全景视频，通过软件模拟VR分屏效果
3. 分屏全景视频，这个需要视频源支持才可以哦

二维码如下：

操作指南

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天空盒的优劣在哪里？

功能对比

1. 不清楚的可以翻看我之前写的WebGL技术文章
2. 通常手机支持的最大纹理长度为2048x2048，好一些的手机，可以支持4096x4096。球形纹理的常见长宽比是2：1，也就是说，最简单高效的展示清晰的全景图片，可以用一张4096x2048的球形纹理。
3. 天空盒是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，慢慢打磨吧

性能上的不足

性能分两块来看待：

1. JS的运行速度，相比Native，确实慢很多，表现在加载时间上，耗时较多
2. GL的渲染速度，相比Unity3D，丝毫不逊色，红米Note3表现60FPS的强劲性能

体验上的不足

1. 加载的时候，应该增加等待框
2. 网络加载失败时，应该有对应的错误处理
3. 视频源不够清晰

小结

这是个Demo，慢慢会好的

畅想

沉浸式体验的深度

目前只是做了一个全景，简单的模拟了沉浸式体验。但远远不够，需要更多的功能细节和技术变革来完善。比如：

1. 虚拟世界的时间不够真实，亦辰不变导致视觉疲劳
2. 光线没有变化，开灯、关灯、早上、夜晚等等，更接近真实
3. 如果场景和视频的内容相互影响，需要机器学习来分析视频的场景，营造电影院效果
   4.虚拟伙伴，比如我想在VR世界来找个美女朋友一起观影~~
4. 等等

想象空间巨大

通过VR技术，可以做房产导购、家装市场、电商的垂直体验、心理/身体安慰，作为技术人员，我们可以预感到3~5年之后的变化，把空间留给产品去吹牛，把技术难度留给自己，哈哈。

下一回

我们继续讨论基于WebVRSDK的VR播放器
敬请期待