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

2021-10-13 01:57:38

紧接上文

消费升级的必然是体验升级，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播放器
敬请期待

码农公寓