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

紧接上文

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

本次Demo所需二维码

视频演示

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

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

二维码如下:
24. WebVR播放器: 在豪宅里看电影

操作指南

App首页指南

APP是个演示Demo不具有线上产品的体验,点检《影视ICON》进入播放器页面
24. WebVR播放器: 在豪宅里看电影

视频播放器指南

图中有3个按钮一个输入框,用户可以自定义在线视频的URL,并根据视频的内容来选择哪种方式打开。这里为了方便演示,作者已经预置了一个单屏全景视频URL,提供给大家测试使用。
24. WebVR播放器: 在豪宅里看电影

沉浸式2D电影体验

就是普通的电影了,优酷高清视频基本都是720P了。720P在iPhone plus上看,我是觉得有点模糊的,但在我客厅的48寸电视中,我知道视频内容往往也就是720P,我就感觉可以接受。为什么视频清晰度一样的情况下,5.5英寸的屏幕反而比48寸的屏幕更不能让人接受呢?

单屏全景电影播放

这个很简单了,参考之前的文章《22. WebAR那些事: 20行代码做全景》的那篇,把视频作为一个图像纹理,再通过three.js渲染出球形纹理,播放就好了。
如果点击进入VR模式,那么就相当于生成两个一样的球形纹理,把相机的位置根据左右调整参数,就可以实现VR效果了

分屏全景电影播放

首先用户要确定视频的来源是否是分屏的,这个很重要,否则播放效果会出现乱七八糟的情况。单屏模式,只是把视频的一半,也就是左边的部分作为球形纹理,展示在屏幕上。
当用户点击VR模式的时候,会根据左右两部分各生成一个球形纹理,摄像机的位置无需调整,因为视频内容已经调整过了。

用户输入框

输入自己喜欢的视频,自己体验吧。如果需要,我这里有4K的单屏全景视频《极地星空》非常漂亮,因为视频太大了,就不放到线上,可以线下分享给大家。

效果展示

沉浸式2D视频

邀请你到精装修豪宅中,体验超大屏幕播放电影的快感
24. WebVR播放器: 在豪宅里看电影

支持一键切换VR模式

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

全屏全景/VR模式

同样支持一键进入VR模式
24. WebVR播放器: 在豪宅里看电影

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

分屏全景视频

这个直接在首页,播放迪丽热巴故事视频就可以了。

WebVR现状的解读

天空盒VS球形纹理

之前我们一直使用球形纹理作为全景的素材,球形纹理VS天空盒的优劣在哪里?

功能对比

  1. 不清楚的可以翻看我之前写的WebGL技术文章
  2. 通常手机支持的最大纹理长度为2048x2048,好一些的手机,可以支持4096x4096。球形纹理的常见长宽比是2:1,也就是说,最简单高效的展示清晰的全景图片,可以用一张4096x2048的球形纹理。
  3. 天空盒是6面体,也就需要6张纹理作为6个面,最大的清晰度,可以做到6张4096x4096的纹理,作为贴图,清晰度明显比全景要高

开发效率

一张全景图片总比六张贴图要更方便管理。。
而且天空盒需要通过球形纹理二次加工生成,目前主流的全景相机,都是支持一键生成球形纹理,目前我还没有找到一键生成天空盒的相机。
有的话,请亲们留言,因为我更喜欢用天空盒。

性能对比

同等画质的情况下,天空盒要比球形纹理性能更好,这个先挖坑,后续讨论。

WebVR世界的初始坐标

当3D世界建立起来时,手机的当前位置,就是当前坐标系,如下图所示
24. WebVR播放器: 在豪宅里看电影

天空盒与贴图的映射

六个面,上下左右前后,如下图:
24. WebVR播放器: 在豪宅里看电影

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播放器
敬请期待

上一篇:23. WebVR播放器: 消费升级带来的机遇


下一篇:22. WebAR那些事: 20行代码做全景