摘要：全景在以前帶寬有限的條件下常常用來(lái)作為街景和全景圖片的查看。后面，我們來(lái)了解一下，如何在端實(shí)現(xiàn)全景視頻。現(xiàn)在對(duì)支持度也不是特別友好，但是，對(duì)于全景視頻來(lái)說(shuō)，在機(jī)器換代更新的前提下，全景在性能方面的瓶頸慢慢消失了。

Web 全景在以前帶寬有限的條件下常常用來(lái)作為街景和 360° 全景圖片的查看。它可以給用戶(hù)一種 self-immersive 的體驗(yàn)，通過(guò)簡(jiǎn)單的操作，自由的查看周?chē)奈矬w。隨著一些運(yùn)營(yíng)商推出大王卡等免流服務(wù)，以及 4G 環(huán)境的普及，大流量的應(yīng)用也逐漸得到推廣。比如，我們是否可以將靜態(tài)低流量的全景圖片，變?yōu)閯?dòng)態(tài)直播的全景視頻呢？在一定網(wǎng)速帶寬下，是可以實(shí)現(xiàn)的。后面，我們來(lái)了解一下，如何在 Web 端實(shí)現(xiàn)全景視頻。先看一下實(shí)例 gif：

使用 three.js 實(shí)現(xiàn)全景技術(shù)

UV 映射原理簡(jiǎn)介

3D 坐標(biāo)原理和移動(dòng)控制

Web 陀螺儀簡(jiǎn)介

iv-panorama 簡(jiǎn)單庫(kù)介紹

全景視頻是基于 3D 空間，而在 Web 中，能夠非常方便觸摸到 3D 空間的技術(shù)，就是 WebGL。為了簡(jiǎn)化，這里就直接采用 Three.js 庫(kù)。具體的工作原理就是將正在播放的 video 元素，映射到紋理(texture) 空間中，通過(guò) UV 映射，直接貼到一個(gè)球面上。精簡(jiǎn)代碼為：

let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100); 
// 添加相機(jī)


camera.target = new THREE.Vector3(0, 0, 0); 
// 設(shè)置相機(jī)的觀察位置，通常在球心

scene = new THREE.Scene();
let  geometry = new THREE.SphereBufferGeometry(400, 60, 60);
// 在貼圖的時(shí)候，讓像素點(diǎn)朝內(nèi)（非常重要）
geometry.scale(-1, 1, 1);

// 傳入視頻 VideoEle 進(jìn)行繪制
var texture = new THREE.VideoTexture(videoElement);

var material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio); // canvas 的比例
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

具體的過(guò)程差不多就是上面的代碼。上面代碼中有兩塊需要注意一下，一個(gè)是 相機(jī)的視野范圍值，一個(gè)是幾何球體的相關(guān)參數(shù)設(shè)置。

相機(jī)視野范圍

具體代碼為：

let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100); 

這里主要利用透視類(lèi)型的相機(jī)，模擬人眼的效果。設(shè)置合適的視野效果，這里的范圍還需要根據(jù)球體的直徑來(lái)決定，通常為 2*radius + 100，反正只要比球體直徑大就行。

幾何球體的參數(shù)設(shè)置

let  geometry = new THREE.SphereBufferGeometry(400, 60, 60);
// 在貼圖的時(shí)候，讓像素點(diǎn)朝內(nèi)（非常重要）
geometry.scale(-1, 1, 1);

上面其實(shí)有兩個(gè)部分需要講解一下

球體參數(shù)設(shè)置里面有三個(gè)屬性值比較重要，該 API 格式為：SphereBufferGeometry(radius, widthSegments, heightSegments,...)。

raidus： 設(shè)置球體的半徑，半徑越大，視頻在 canvas 上繪制的內(nèi)容也會(huì)被放大，該設(shè)置值合適就行。

width/height Segments: 切片數(shù)，主要用來(lái)控制球體在寬高兩個(gè)維度上最多細(xì)分為多少個(gè)三角切片數(shù)量，越高紋理拼接的邊角越清晰。不過(guò)，并不是無(wú)限制高的，高的同時(shí)性能損耗也是有的。

在幾何繪制時(shí)，通過(guò)坐標(biāo)變換使 X 軸的像素點(diǎn)朝內(nèi)，讓用戶(hù)看起來(lái)不會(huì)存在 凸出放大的效果。具體代碼為：geometry.scale(-1, 1, 1)。

上面只是簡(jiǎn)單介紹了一下代碼，如果僅僅只是為了應(yīng)用，那么這也就足夠了。但是，如果后面遇到優(yōu)化的問(wèn)題，不知道更底層的或者更細(xì)節(jié)內(nèi)容的話，就感覺(jué)很尷尬。在全景視頻中，有兩個(gè)非常重要的點(diǎn)：

UV 映射

3D 移動(dòng)

這里，我們主要探索一下 UV 映射的細(xì)節(jié)。UV 映射主要目的就是將 2D 圖片映射到三維物體上，最經(jīng)典的解釋就是：

盒子是一個(gè)三維物體,正如同加到場(chǎng)景中的一個(gè)曲面網(wǎng)絡(luò)("mesh")方塊.
如果沿著邊縫或折痕剪開(kāi)盒子,可以把盒子攤開(kāi)在一個(gè)桌面上.當(dāng)我們從上往下俯視桌子時(shí),我們可以認(rèn)為U是左右方向,V是上下方向.盒子上的圖片就在一個(gè)二維坐標(biāo)中.我們使用U V代表"紋理坐標(biāo)系"來(lái)代替通常在三維空間使用的 X Y.
在盒子重新被組裝時(shí),紙板上的特定的UV坐標(biāo)被對(duì)應(yīng)到盒子的一個(gè)空間(X Y Z)位置.這就是將2D圖像包裹在3D物體上時(shí)計(jì)算機(jī)所做的.

from 浙江研報(bào)

這里，我們通過(guò)代碼來(lái)細(xì)致講解一下。我們需要完成一個(gè)貼圖，將如下的 sprite，貼到一個(gè)正方體上。

from iefreer

這里，我們先將圖片加載到紋理空間：

var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture("images/texture-atlas.jpg") } );

那么，現(xiàn)在我們有一個(gè)如下的紋理空間區(qū)域：

這塊內(nèi)容，就實(shí)際涉及到 WebGL 的知識(shí)，紋理空間和物理空間并不是在一塊，WebGL 中的 GLSL 語(yǔ)法，就是將紋理內(nèi)容通過(guò)相關(guān)規(guī)則，映射到指定的三角形區(qū)域的表面。

這里需要注意的是，紋理空間并不存在所謂的最小三角區(qū)域，這里適應(yīng)的只是在物理空間中劃分的三角區(qū)域。為了簡(jiǎn)單起見(jiàn)，我們?cè)O(shè)置的 boxGeometry 只使用單位為 1 的 Segments，減少需要?jiǎng)澐值娜切螖?shù)量。

這樣，就存在 12 塊需要貼的三角區(qū)域。這里，我們就需要利用 Vector2 來(lái)手動(dòng)劃分一下紋理空間的區(qū)域，實(shí)際在映射的時(shí)候，就是按順序，將物理空間的定點(diǎn) 和 紋理空間的定點(diǎn)一一映射，這樣就實(shí)現(xiàn)了將紋理和物理空間聯(lián)系到一起的步驟。

因?yàn)椋琓hree.js 中 geometry.faceVertexUvs 在劃分物理空間時(shí)，定義的面分解三角形的順序 是 根據(jù)逆時(shí)針?lè)较颍葱蛱?hào)劃分，如下圖所示：

根據(jù)上圖的定義，我們可以得到每個(gè)幾何物體的面映射到紋理空間的坐標(biāo)值可以分為：

left-bottom = [0,1,3]
right-top = [1,2,3]

所以，我們需要定義一下紋理坐標(biāo)值：

face1_left = [new THREE.Vector2(0, 0),new THREE.Vector2(.5, 0),new THREE.Vector2(0, .333)]
face1_right = [new THREE.Vector2(.5, 0),new THREE.Vector2(.5, .333),new THREE.Vector2(0, .333)]

//... 剩下 10 個(gè)面

定點(diǎn) UV 映射 API 具體格式為：

geometry.faceVertexUvs[ 0 ][ faceIndex ][ vertexIndex ]

則定義具體面的映射為：

geometry.faceVertexUvs[0][0] = face1_left;
geometry.faceVertexUvs[0][0] = face1_right;
//...剩下 10 個(gè)面

如果，你寫(xiě)過(guò)原生的 WebGL 代碼，對(duì)于理解 UV 映射原理應(yīng)該很容易了。

這里需要注意的是 Web 全景不是 WebVR。全景沒(méi)有 VR 那種沉浸式體驗(yàn)，單單只涉及三個(gè)維度上的旋轉(zhuǎn)而沒(méi)有移動(dòng)距離這個(gè)說(shuō)法。

上面的描述中，提到了三維，旋轉(zhuǎn)角度 這兩個(gè)概念，很容易讓我們想到《高中數(shù)學(xué)》學(xué)到的一個(gè)坐標(biāo)系--球坐標(biāo)系（這里默認(rèn)都是右手坐標(biāo)系）。

φ 是和 z 軸正方向 <=180°的夾角

? 是和 x 軸正方向 <=180°的夾角

p 是空間點(diǎn)距離原點(diǎn)的直線距離

計(jì)算公式為：

現(xiàn)在，如果應(yīng)用到 Web 全景，我們可以知道幾個(gè)已知條件:

p：定義的球體（SphereBufferGeometry）的半徑大小

?φ：用戶(hù)在 y 軸上移動(dòng)的距離

??：用戶(hù)在 x 軸上移動(dòng)的距離

p 這個(gè)是不變的，而 ?φ 和 ?? 則是根據(jù)用戶(hù)輸入來(lái)決定的大小值。這里，就需要一個(gè)算法來(lái)統(tǒng)一協(xié)定。該算法控制的主要內(nèi)容就是:

用戶(hù)的手指在 x/y 平面軸上的 ?x/?y 通過(guò)一定的比例換算成為 ?φ/??

如果考慮到陀螺儀就是：

用戶(hù)的手指在 x/y 平面軸上的 ?x/?y 通過(guò)一定的比例換算成為 ?φ/??，用戶(hù)在 x/y 軸上旋轉(zhuǎn)的角度值 ?φ"/??"，分別和視角角度進(jìn)行合并，算出結(jié)果。

為了更寬泛的兼容性，我們這里根據(jù)第二種算法的描述來(lái)進(jìn)行講解。上面 ?φ/?? 的變動(dòng)主要映射的是我們視野范圍的變化。

在 Threejs 中，就是用來(lái)控制相機(jī)的視野范圍。那我們?nèi)绾卧?ThreeJS 控制視野范圍呢？下面是最簡(jiǎn)代碼：

phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(-lon);
camera.position.x = distance * Math.sin(phi) * Math.cos(theta);
camera.position.y = distance * Math.cos(phi);
camera.position.z = distance * Math.sin(phi) * Math.sin(theta);

這里主要模擬地球坐標(biāo)：

lat 代表維度（latitude）: 用戶(hù)上下滑動(dòng)改變的值，或者手機(jī)上下旋轉(zhuǎn)

lon 代表經(jīng)度（lontitude）: 用戶(hù)左右滑動(dòng)改變的值，或者手機(jī)左右旋轉(zhuǎn)

具體內(nèi)容為：

在通常實(shí)踐當(dāng)中，改變?nèi)耙暯堑木S度有兩種，一種直接通過(guò)手滑，一種則根據(jù)陀螺儀旋轉(zhuǎn)。

簡(jiǎn)單來(lái)說(shuō)，就是監(jiān)聽(tīng) touch 和 orientation 事件，根據(jù)觸發(fā)信息來(lái)手動(dòng)改變 lat/lon 的值。不過(guò)，這里有一個(gè)注意事項(xiàng)：

latitude 方向上最多只能達(dá)到 (-90,90)，否則會(huì)造成屏幕翻轉(zhuǎn)的效果，這種體驗(yàn)非常不好。

我們分別通過(guò)代碼來(lái)實(shí)踐一下。

Touch 相關(guān)的事件在 Web 中，其實(shí)可以講到你崩潰為止，比如，用戶(hù)用幾個(gè)手指觸摸屏幕？用戶(hù)具體在屏幕上的手勢(shì)是什么(swipe，zoom)？

這里，我們簡(jiǎn)單起見(jiàn)，只針對(duì)一個(gè)手指滑動(dòng)的距離來(lái)作為 相機(jī) 視角移動(dòng)的數(shù)據(jù)。具體代碼為：

// 為了給自己博客拉量，完整版可以去我的博客查看：
https://www.villainhr.com

iv-panorama 是 IVWEB 團(tuán)隊(duì)，針對(duì)于全景直播這個(gè)熱點(diǎn)專(zhuān)門(mén)開(kāi)發(fā)的一個(gè)播放器。現(xiàn)在 Web 對(duì) VR 支持度也不是特別友好，但是，對(duì)于全景視頻來(lái)說(shuō)，在機(jī)器換代更新的前提下，全景在性能方面的瓶頸慢慢消失了。其主要特性為：

依賴(lài)于 Three.js，需要預(yù)先掛載到 window 對(duì)象上

靈活配置，內(nèi)置支持陀螺儀和 touch 控制。

支持靈敏度參數(shù)的動(dòng)態(tài)調(diào)整

使用 ES6 語(yǔ)法

兼容 React，jQuery（簡(jiǎn)單湊數(shù)的）

項(xiàng)目地址為：iv-panorama。該項(xiàng)目使用非常簡(jiǎn)單，有兩種全景模式，一個(gè)是 圖片，一個(gè)是視頻：

import VRPlayer from "iv-panorama";

new VRPlayer({
        player: {
            url: "/test/003.mp4"
        },
        container:document.getElementById("container")
    });
    
// image

let panorama = new VRPlayer({
    image: {
            url: "./banner.png"
        },
        container:document.getElementById("container")
    });

全景資源都已經(jīng)放在 github 倉(cāng)庫(kù)了，有興趣的可以實(shí)踐觀察一下。