现在做 Web 全景合适吗?

Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体。随着一些运营商推出大王卡等免流服务,以及 4G 环境的普及,大流量的应用也逐渐得到推广。比如,我们是否可以将静态低流量的全景图片,变为动态直播的全景视频呢?在一定网速带宽下,是可以实现的。后面,我们来了解一下,如何在 Web 端实现全景视频。先看一下实例 gif:

tl;dr;

使用 three.js 实现全景技术

UV 映射原理简介

3D 坐标原理和移动控制

Web 陀螺仪简介

iv-panorama 简单库介绍

基于 Three.js

全景视频是基于 3D 空间,而在 Web 中,能够非常方便触摸到 3D 空间的技术,就是 WebGL。为了简化,这里就直接采用 Three.js 库。具体的工作原理就是将正在播放的 video 元素,映射到纹理(texture) 空间中,通过 UV 映射,直接贴到一个球面上。精简代码为:

具体的过程差不多就是上面的代码。上面代码中有两块需要注意一下,一个是 相机的视野范围值,一个是几何球体的相关参数设置。

相机视野范围

具体代码为:

这里主要利用透视类型的相机,模拟人眼的效果。设置合适的视野效果,这里的范围还需要根据球体的直径来决定,通常为 2*radius + 100,反正只要比球体直径大就行。

几何球体的参数设置

上面其实有两个部分需要讲解一下

球体参数设置里面有三个属性值比较重要,该 API 格式为: 。

raidus: 设置球体的半径,半径越大,视频在 canvas 上绘制的内容也会被放大,该设置值合适就行。

width/height Segments: 切片数,主要用来控制球体在宽高两个维度上最多细分为多少个三角切片数量,越高纹理拼接的边角越清晰。不过,并不是无限制高的,高的同时性能损耗也是有的。

在几何绘制时,通过坐标变换使 X 轴的像素点朝内,让用户看起来不会存在 凸出放大的效果。具体代码为: 。

UV 映射

上面只是简单介绍了一下代码,如果仅仅只是为了应用,那么这也就足够了。但是,如果后面遇到优化的问题,不知道更底层的或者更细节内容的话,就感觉很尴尬。在全景视频中,有两个非常重要的点:

UV 映射

3D 移动

这里,我们主要探索一下 UV 映射的细节。UV 映射主要目的就是将 2D 图片映射到三维物体上,最经典的解释就是:

盒子是一个三维物体,正如同加到场景中的一个曲面网络("mesh")方块.如果沿着边缝或折痕剪开盒子,可以把盒子摊开在一个桌面上.当我们从上往下俯视桌子时,我们可以认为U是左右方向,V是上下方向.盒子上的图片就在一个二维坐标中.我们使用U V代表"纹理坐标系"来代替通常在三维空间使用的 X Y.在盒子重新被组装时,纸板上的特定的UV坐标被对应到盒子的一个空间(X Y Z)位置.这就是将2D图像包裹在3D物体上时计算机所做的.

from 浙江研报

这里,我们通过代码来细致讲解一下。我们需要完成一个贴图,将如下的 sprite,贴到一个正方体上。

from iefreer

这里,我们先将图片加载到纹理空间:

那么,现在我们有一个如下的纹理空间区域:

这块内容,就实际涉及到 WebGL 的知识,纹理空间和物理空间并不是在一块,WebGL 中的 GLSL 语法,就是将纹理内容通过相关规则,映射到指定的三角形区域的表面。

这里需要注意的是,纹理空间并不存在所谓的最小三角区域,这里适应的只是在物理空间中划分的三角区域。为了简单起见,我们设置的 boxGeometry 只使用单位为 1 的 Segments,减少需要划分的三角形数量。

这样,就存在 12 块需要贴的三角区域。这里,我们就需要利用 来手动划分一下纹理空间的区域,实际在映射的时候,就是按顺序,将物理空间的定点 和 纹理空间的定点一一映射,这样就实现了将纹理和物理空间联系到一起的步骤。

因为,Three.js 中 在划分物理空间时,定义的面分解三角形的顺序 是 根据逆时针方向,按序号划分,如下图所示:

根据上图的定义,我们可以得到每个几何物体的面映射到纹理空间的坐标值可以分为:

所以,我们需要定义一下纹理坐标值:

定点 UV 映射 API 具体格式为:

则定义具体面的映射为:

如果,你写过原生的 WebGL 代码,对于理解 UV 映射原理应该很容易了。

3D 移动原理

这里需要注意的是 Web 全景不是 WebVR。全景没有 VR 那种沉浸式体验,单单只涉及三个维度上的旋转而没有移动距离这个说法。

上面的描述中,提到了三维,旋转角度 这两个概念,很容易让我们想到《高中数学》学到的一个坐标系--球坐标系(这里默认都是右手坐标系)。

φ 是和 z 轴正方向

∂ 是和 x 轴正方向

p 是空间点距离原点的直线距离

计算公式为:

现在,如果应用到 Web 全景,我们可以知道几个已知条件:

p:定义的球体(SphereBufferGeometry)的半径大小

∆φ:用户在 y 轴上移动的距离

∆∂:用户在 x 轴上移动的距离

p 这个是不变的,而 ∆φ 和 ∆∂ 则是根据用户输入来决定的大小值。这里,就需要一个算法来统一协定。该算法控制的主要内容就是:

用户的手指在 x/y 平面轴上的 ∆x/∆y 通过一定的比例换算成为 ∆φ/∆∂

如果考虑到陀螺仪就是:

用户的手指在 x/y 平面轴上的 ∆x/∆y 通过一定的比例换算成为 ∆φ/∆∂,用户在 x/y 轴上旋转的角度值 ∆φ'/∆∂',分别和视角角度进行合并,算出结果。

为了更宽泛的兼容性,我们这里根据第二种算法的描述来进行讲解。上面 ∆φ/∆∂ 的变动主要映射的是我们视野范围的变化。

在 Threejs 中,就是用来控制相机的视野范围。那我们如何在 ThreeJS 控制视野范围呢?下面是最简代码:

这里主要模拟地球坐标:

lat 代表维度(latitude): 用户上下滑动改变的值,或者手机上下旋转

lon 代表经度(lontitude): 用户左右滑动改变的值,或者手机左右旋转

具体内容为:

在通常实践当中,改变全景视角的维度有两种,一种直接通过手滑,一种则根据陀螺仪旋转。

简单来说,就是监听 和 事件,根据触发信息来手动改变 lat/lon 的值。不过,这里有一个注意事项:

latitude 方向上最多只能达到 (-90,90),否则会造成屏幕翻转的效果,这种体验非常不好。

我们分别通过代码来实践一下。

添加 touch 控制

Touch 相关的事件在 Web 中,其实可以讲到你崩溃为止,比如,用户用几个手指触摸屏幕?用户具体在屏幕上的手势是什么( , )?

这里,我们简单起见,只针对一个手指滑动的距离来作为 相机 视角移动的数据。具体代码为:

touchYSens/touchXSens 用来控制灵敏度,这可以自行调试,比如 0.5。

x/y: 手指单次移动的距离

: 控制 latitude 的移动范围值

添加陀螺仪控制

Web 获取陀螺仪的信息主要是通过 事件获取的。其会提供相关的陀螺仪参数,alpha、beta、gamma。如果,不了解其内部的原理,光看它的参数来说,你也基本上是不会用的。具体原理,可以参考一下:orientation 陀螺仪 API。

简单来说,陀螺仪的参数在标准情况下,手机有两份坐标:

地球坐标 x/y/z:在任何情况下,都是恒定方向

手机平面坐标 x/y/z:相当于手机屏幕定义的方向

以手机本身为坐标点,地球坐标如图所示:

x:表示东西朝向,X 正向指向东

y:表示南北朝向,Y 正向指向北

z:垂直于地心,Z 正向指向上

手机参考点是手机平面,同样也有 3 个坐标系 X/Y/Z。

X:平行于屏幕向右

Y:平行于屏幕向上

Z:正向为垂直于手机屏幕向上

然后,手机自身在旋转或者移动时,取一下变换值就可以得到 ,alpha、beta、gamma。

其余的内容,直接参考一下 陀螺仪 API 即可。这里,我们就直接来看一下怎样通过陀螺仪来改变 相机 角度:

beta 是手机上下转动,lon 是手机左右转动。每次通过返回 orientation 的变动值,应用到具体 latitude 和 lontitude 的变化结果。

对于 3D 直播来说,还有很多点可以说,比如,全景点击,全景切换等等。如果想自己手动打造一个全景直播组件,这个就没必要了,这里,Now IVWeb 团队提供了一个 iv-panorama 的组件,里面提供了很多便捷的特性,比如,touch 控制,陀螺仪控制,图片全景,视频全景等功能。

iv-panorama 简介

iv-panorama 是 IVWEB 团队,针对于全景直播这个热点专门开发的一个播放器。现在 Web 对 VR 支持度也不是特别友好,但是,对于全景视频来说,在机器换代更新的前提下,全景在性能方面的瓶颈慢慢消失了。其主要特性为:

依赖于 Three.js,需要预先挂载到 window 对象上

灵活配置,内置支持陀螺仪和 touch 控制。

支持灵敏度参数的动态调整

使用 ES6 语法

兼容 React,jQuery(简单凑数的)

项目地址为:iv-panorama。该项目使用非常简单,有两种全景模式,一个是 图片,一个是视频:

全景资源都已经放在 github 仓库了,有兴趣的可以实践观察一下。

本文来自企鹅号 - 前端小吉米媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

【零一】#操作教程贴#从0开始,教你如何做数据分析#中阶#第八篇

大家好,我是零一。第一次用手机写文章,哈。在车上的时间看了一本书,余下的时间,我想应该可以写一篇文章。图片等到了地儿了,再用电脑补上。 我的公众微信号是sta...

22750
来自专栏程序你好

Tensorflow实现在浏览器的深度学习

12130
来自专栏北京马哥教育

一步步用python制作游戏外挂

? 作者:晴明 来源: http://blog.csdn.net/qq_37267015/article/details/71330600 玩过电脑游戏的同...

1.3K70
来自专栏量子位

TensorFlow 1.9.0正式版来了!新手指南全新改版,支持梯度提升树估计器

12520
来自专栏前端儿

无线网络覆盖

我们的乐乐同学对于网络可算得上是情有独钟,他有一个计划,那就是用无线网覆盖郑州大学。

17510
来自专栏数据小魔方

市场细分矩阵(MEKKO)

今天要跟大家分享的图表是细分市场矩阵! ▽▼▽ 只是名字听起来比较洋气,其实在制作方法上,还不外乎我们这几期所讲解的,数据错行组织及时间刻度的技巧! ●●●●●...

513120
来自专栏新智元

百度开源移动端深度学习框架MDL,手机部署CNN支持iOS GPU

【新智元导读】百度开源了其移动端深度学习框架Mobile Deep Learning (MDL)的全部代码和脚本。MDL是一个基于卷积的神经网络,支持iOS g...

43970
来自专栏数据小魔方

像电影一样记录数据可视化

之前写过两篇关于使用animation包来制作时间维度动态可视化GIF图,效果还是很棒的,最近又发现了一个好玩的包——gganimate,它也是主打制作时间维度...

31850
来自专栏即时通讯技术

腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦。”

84510
来自专栏灯塔大数据

干货|一步步用python制作游戏外挂

玩过电脑游戏的同学对于外挂肯定不陌生,但是你在用外挂的时候有没有想过如何做一个外挂呢?(当然用外挂不是那么道义哈,呵呵),那我们就来看一下如何用Python来制...

1K120

扫码关注云+社区

领取腾讯云代金券