开发者社区> 淘朗英> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: #紧接上文 消费升级的必然是体验升级,AR/VR技术是提升用户体验的方式之一。智能手机让用户可以AnyTime、AnyWhere的体验移动生活服务,再结合扁平化UI设计,在小小的手机屏幕上,实现了可以媲美PC的体验,用户已经从开始的惊艳,慢慢变成了适应,认为智能手机就应该是这样子,即我们所说的《审
+关注继续查看

紧接上文

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

本次Demo所需二维码

视频演示

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

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

二维码如下:
1484320287.png

操作指南

App首页指南

APP是个演示Demo不具有线上产品的体验,点检《影视ICON》进入播放器页面
11111.jpg

视频播放器指南

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

沉浸式2D电影体验

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

单屏全景电影播放

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

分屏全景电影播放

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

用户输入框

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

效果展示

沉浸式2D视频

邀请你到精装修豪宅中,体验超大屏幕播放电影的快感
5fbc714b560d321233406b5eb7e38e43.png

支持一键切换VR模式

dd6b0cb701db243b63c528f119459f3b.png

全屏全景/VR模式

同样支持一键进入VR模式
854e1e73e65197af6310d17b03111cdf.png

c197d795db0e6a08ba663c752e690227.png

分屏全景视频

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

WebVR现状的解读

天空盒VS球形纹理

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

功能对比

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

开发效率

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

性能对比

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

WebVR世界的初始坐标

当3D世界建立起来时,手机的当前位置,就是当前坐标系,如下图所示
timg.jpeg

天空盒与贴图的映射

六个面,上下左右前后,如下图:
20160217172423270.jpeg

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于WebStorm这些也许你还不知道
平时开发过程中总会去想如何可以提高开发的效率,各处搜集的时候比较零散,想着可以写下来沉淀一下,本文主要是谈一下使用Webstorm的一些自己的想法,如果大家如果有好的点子或者想法也可以留言或者评论文章,谢谢。
104 0
下一代响应式Web设计:组件驱动式Web设计(3)
下一代响应式Web设计:组件驱动式Web设计
32 0
下一代响应式Web设计:组件驱动式Web设计(3)
下一代响应式Web设计:组件驱动式Web设计
40 0
Bootstrap响应式前端框架笔记十——导航栏相关组件(二)
Bootstrap响应式前端框架笔记十——导航栏相关组件
92 0
.NET webbrowser自动填充登录
HtmlElement name = webBrowser1.Document.GetElementById("ctl00$content$loginname"); if (name != null) name.
737 0
在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件
原文:在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser。 我在《WebBrowser控件使用技巧分享》一文中曾谈到过“我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件”,出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值。
933 0
c# WebBrowser 操作
使用:http://wenku.baidu.com/view/511d37faf705cc17552709d4.html  (含验证码,点击等) 用法 :http://wenku.baidu.com/view/4efa281a6bd97f192279e9f0.html
452 0
WebBrowser控件使用详解
方法 说明 GoBack 相当于IE的“后退”按钮,使你在当前历史列表中后退一项  GoForward 相当于IE的“前进”按钮,使你在当前历史列表中前进一项  GoHome 相当于IE的“主...
846 0
+关注
淘朗英
专注于高性能H5内核研发,用C/C++挖掘设备硬件的潜能,让JS提升开发效率,打造一种所见即所得的开发方式。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
电影特效行业与云技术的结合
立即下载
你的游戏,真的安全吗
立即下载
你的游戏,真的安全么?
立即下载