WebVR開發(fā)教程——深度剖析

時(shí)間：2023-06-22 08:48:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-22 08:48:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

WebVR開發(fā)教程——深度剖析：最近WebVR API 1.1已經(jīng)發(fā)布，2.0草案也在擬定中，在我看來(lái)，WebVR走向大眾瀏覽器是早晚的事情了，今天本人將對(duì)WebVR開發(fā)環(huán)境和開發(fā)流程進(jìn)行深入介紹。

WebVR與WebVR API

首先，WebVR指的是使用瀏覽器體驗(yàn)VR的方式，如今已經(jīng)成為了一種開放標(biāo)準(zhǔn)。
它提供了JavaScript API，使開發(fā)者可以獲取vr設(shè)備的輸入信息，來(lái)改變用戶在虛擬空間里的位置、視覺(jué)、行為等。
以下是目前主流VR及瀏覽器對(duì)WebVR的支持情況。

遺憾的是，WebVR的體驗(yàn)方式目前只能運(yùn)行在Android和Windows系統(tǒng)上。不過(guò)這并不影響我們?cè)趍ac和linux上開發(fā)與調(diào)試。

WebVR的開發(fā)環(huán)境配置

由于WebVR App需要運(yùn)行VR設(shè)備上，而目前購(gòu)買一臺(tái)VR設(shè)備的成本不低，所以這里我總結(jié)了一套開發(fā)環(huán)境下WebVR調(diào)試方案。
首先我們需要給WebVR靜態(tài)頁(yè)面起一個(gè)web server，這里我安裝 Web Server for Chrome，你也可以使用node或者上傳至github托管。

PC端調(diào)試

1. 安裝chrome擴(kuò)展程序 WebVR API Emulation

使用WebVR API Emulation擴(kuò)展程序可以模擬VR設(shè)備用戶的視角、位置等。

移動(dòng)端調(diào)試

適用于cardboard級(jí)別的WebVR App調(diào)試

1. 安裝chrome beta

目前需要webvr還屬于早期實(shí)驗(yàn)階段，需要下載chrome beta最新版，安裝完需要手動(dòng)開啟webvr支持，在瀏覽器地址欄輸入chrome://flags#enable-webvr，點(diǎn)擊啟用并重新啟動(dòng)chrome。

2. 安裝Google VR 服務(wù)

這是google給cardboard、daydream用戶提供VR服務(wù)配置，可以提供VR模式窗口，如下圖。
最后你可以在chrome上打開WebVR示例頁(yè)面驗(yàn)證是否配置成功

3. chrome inspector調(diào)試

通過(guò)手機(jī)chrome訪問(wèn)我們開發(fā)的WebVR頁(yè)面，在PC端chrome輸入chrome://inspector進(jìn)行調(diào)試，具體可以參考 遠(yuǎn)程調(diào)試 Android 設(shè)備使用入門。

完成WebVR開發(fā)環(huán)境配置之后，我們將正式進(jìn)入WebVR開發(fā)之旅。

使用WebGL開發(fā)WebVR

WebVR App實(shí)現(xiàn)依賴于WebGL技術(shù)開發(fā)，WebGL是在瀏覽器上創(chuàng)建和運(yùn)行3D圖像，它遵循OpenGL ES的規(guī)范，通過(guò)GLSL語(yǔ)言操作GPU進(jìn)行頂點(diǎn)片元渲染。

在WebGL場(chǎng)景中，3d物體都是通過(guò)矩陣變換最終形成屏幕上的2d圖像，[投影矩陣ProjectionMatrix] × [視圖矩陣ViewMatrix] × [模型矩陣ModelMatrix] × 頂點(diǎn)坐標(biāo)，其中投影矩陣和視圖矩陣可以抽象為3d場(chǎng)景中的相機(jī)屬性。

模型矩陣 × 頂點(diǎn)坐標(biāo)（相對(duì)模型） = 頂點(diǎn)世界坐標(biāo)（絕對(duì)坐標(biāo)）
視圖矩陣 × 世界坐標(biāo) = 頂點(diǎn)相機(jī)坐標(biāo)（以相機(jī)為坐標(biāo)原點(diǎn)）
投影矩陣 × 頂點(diǎn)相機(jī)坐標(biāo) = 2d屏幕坐標(biāo)

相比一般WebGL場(chǎng)景，WebVR App不同之處在于：

• WebVR需要進(jìn)行雙屏渲染，通過(guò)分屏模擬人左右眼視野，因此在每一幀動(dòng)畫渲染中，WebVR應(yīng)用都要比普通WebGL應(yīng)用多繪制一次；

• WebVR場(chǎng)景相機(jī)的方向、視野、位置（DOF）與用戶頭顯(HMD)緊密關(guān)聯(lián)。
  換句話說(shuō)，當(dāng)用戶的現(xiàn)實(shí)視角發(fā)生變化時(shí)，WebVR場(chǎng)景的相機(jī)也需要?jiǎng)討B(tài)變化。

根據(jù)以上不同之處，我梳理了一個(gè)WebVR App的簡(jiǎn)單開發(fā)流程，如下圖。

開發(fā)流程總結(jié)為： VR數(shù)據(jù)初始化 → WebGL初始化 → 動(dòng)畫渲染。

一、VR數(shù)據(jù)初始化

使用navigator.getVRDisplay()方法獲取VR實(shí)例，該方法返回值是一個(gè)promise實(shí)例，通過(guò).then(function(displays){})取得當(dāng)前使用的VR實(shí)例列表。

let vrDisplay;navigator.getVRDisplays().then(displays => { if (displays.length > 0) { vrDisplay = displays[0]; console.log('Display found',vrDisplay); drawVRScene(); } else { console.log('Display not found'); // 非VR模式下渲染 // drawScene(); }});

二、WebGL初始化

WebGL程序初始化一般分為這幾個(gè)步驟：編譯頂點(diǎn)、片元著色器程序→創(chuàng)建頂點(diǎn)、紋理緩沖區(qū)→ 設(shè)置畫布被清空時(shí)顏色→啟動(dòng)深度測(cè)試

function drawVRScene() { const canvas = document.getElementById('glcanvas'); // 獲取WebGL上下文 const gl = canvas.getContext('webgl'); // WebGL初始化 init(gl); // WebGL渲染 render(gl);}function init(gl) { // 預(yù)編譯著色器程序 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } // 創(chuàng)建頂點(diǎn)緩沖 initVertexBuffers(gl); // 創(chuàng)建紋理緩沖 initTextures(gl,'../assets/texture.jpg'); gl.clearColor(0.4, 0.4, 0.4, 1.0); // 啟動(dòng)深度測(cè)試 gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL);}

GLSL著色器程序

頂點(diǎn)著色器要做的工作是將Js輸入的頂點(diǎn)坐標(biāo)、模型-視圖-投影矩陣進(jìn)行逐頂點(diǎn)運(yùn)算。

const VSHADER_SOURCE = `attribute vec4 a_Position;uniform mat4 u_MvpMatrix;attribute vec2 a_TexCoord;varying highp vec2 v_TexCoord;void main() { gl_Position = u_MvpMatrix * a_Position; v_TexCoord = a_TexCoord;}`;片元著色器主要處理片元顏色，在這里只是將紋理坐標(biāo)和紋理對(duì)象傳給片元著色器。

const FSHADER_SOURCE = `uniform sampler2D u_Sampler;varying highp vec2 v_TexCoord;void main() { gl_FragColor = texture2D(u_Sampler,v_TexCoord);}`;WebVR前期初始化之后，我們需要?jiǎng)?chuàng)建動(dòng)畫來(lái)渲染VR場(chǎng)景。

三、動(dòng)畫渲染

1. requestAnimationFrame創(chuàng)建動(dòng)畫

通過(guò)使用vrDisplay實(shí)例的requestAnimationFrame(callback)，遞歸執(zhí)行callback函數(shù)。
該方法是window.requestAnimationFrame的一個(gè)特殊實(shí)現(xiàn)，它會(huì)優(yōu)先使用VR設(shè)備原生的刷新率而不是瀏覽器的刷新率，以達(dá)到合適的渲染幀頻。

function render(gl,vrDisplay) { // 創(chuàng)建VR幀數(shù)據(jù)對(duì)象 const frameData = new VRFrameData(); const u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); function animate() { // TODO draw(frameData,u_MvpMatrix); // 通過(guò)遞歸的方式，執(zhí)行繪圖函數(shù)，產(chǎn)生動(dòng)畫 vrDisplay.requestAnimationFrame(animate); } animate();}我們?cè)趩?dòng)動(dòng)畫遞歸之前使用new VRFrameData()方法，VRFrameData是WebVR提供的幀數(shù)據(jù)封裝對(duì)象，是WebVR渲染的關(guān)鍵數(shù)據(jù)，下文將會(huì)介紹如何使用它。

2. VR渲染

2.1 使用viewport設(shè)置雙視口

WebGL上下文提供了viewport函數(shù)，用來(lái)指定3d場(chǎng)景在canvas的繪制位置和尺寸。
默認(rèn)的情況下，WebGL渲染視口為gl.viewport(0, 0, canvas.width, canvas.height)。
其中前兩個(gè)參數(shù)代表渲染的起點(diǎn)坐標(biāo)，后兩個(gè)參數(shù)代表渲染的尺寸，這里通過(guò)依次設(shè)置左右眼渲染視口，來(lái)達(dá)到分屏效果。

function draw(frameData,u_MvpMatrix) { gl.viewport(0, 0, canvas.width * 0.5, canvas.height); // 設(shè)置左側(cè)視口 // TODO gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); // 設(shè)置右側(cè)視口 // TODO}左、右側(cè)視口的渲染寬度為canvas寬度的1/2，左視口起始點(diǎn)為(0,0)，右視口的起始點(diǎn)坐標(biāo)為(canvas.width * 0.5, 0)。

2.2 使用VRFrameData動(dòng)態(tài)渲染

前面介紹了WebVR渲染需要根據(jù)用戶行為動(dòng)態(tài)繪制每一幀場(chǎng)景，具體做法是：
1）通過(guò)WebVR API提供的VRFrameData實(shí)例獲取當(dāng)前幀的視圖矩陣和投影矩陣；
2）將視圖-投影矩陣傳入著色器進(jìn)行繪制；
3）生成下一幀數(shù)據(jù)并提交給當(dāng)前canvas；
4）進(jìn)入下一幀回調(diào)。
具體代碼如下

function draw(gl,frameData,u_MvpMatrix) { const { leftProjectionMatrix, leftViewMatrix, rightProjectionMatrix, rightViewMatrix } = frameData; // 初始化模型矩陣，模型-視圖-投影矩陣 let modelMatrix = mat4.create(), vpMatrix = mat4.create(), mvpMatrix = mat4.create(); // 將左眼視圖渲染到畫布的左側(cè) gl.viewport(0, 0, canvas.width * 0.5, canvas.height); // mvpMatrix = ProjectionMatrix × ViewMatrix × modelMatrix // 這里使用gl-matrix.js的mat4對(duì)象對(duì)float32Array進(jìn)行矩陣操作 mat4.multiply(vpMatrix,leftProjectionMatrix,leftViewMatrix); mat4.multiply(mvpMatrix,vpMatrix,modelMatrix); // 將模型-視圖-投影矩陣mvpMatrix傳入著色器 gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix); // 左側(cè)繪圖 gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); // 將右眼視圖渲染到畫布的右側(cè) gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); mat4.multiply(vpMatrix,rightProjectionMatrix,rightViewMatrix); mat4.multiply(mvpMatrix,vpMatrix,modelMatrix); gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); // 生成下一幀數(shù)據(jù)并覆蓋原來(lái)的frameData vrDisplay.getFrameData(frameData); vrDisplay.submitFrame();}首先，在動(dòng)畫渲染前通過(guò)new VRFrameData()獲得實(shí)例frameData，并傳入動(dòng)畫渲染函數(shù)；
接著，在動(dòng)畫函數(shù)里獲取frameData的屬性：

當(dāng)然VRFrameData還包括pose、orientation等屬性這里就不一一列舉了。

根據(jù)公式分別計(jì)算出左右視口的模型-視圖-投影矩陣，傳給頂點(diǎn)著色器程序，與頂點(diǎn)緩沖區(qū)的頂點(diǎn)坐標(biāo)相乘繪制出最終頂點(diǎn)。

MvpMatrix = ProjectionMatrix × ViewMatrix × modelMatrix

最后，在每一幀動(dòng)畫回調(diào)結(jié)束前，我們調(diào)用vrDisplay.getFrameData(frameData)來(lái)生成下一幀數(shù)據(jù)并覆蓋frameData，并使用vrDisplay.submitFrame()將當(dāng)前幀提交給當(dāng)前畫布渲染。

至此，WebVR的開發(fā)流程已基本走完，具體代碼可以參考下方demo

項(xiàng)目代碼：https://github.com/YoneChen/webvr-demo

結(jié)語(yǔ)：使用原生WebGL開發(fā)WebVR應(yīng)用相比three.js或者aframe代碼要復(fù)雜很多，不過(guò)通過(guò)這種方式卻能更深入的了解WebVR的工作原理。

想了解three.js開發(fā)webvr，可參考《VR大潮來(lái)襲---前端開發(fā)能做些什么》
也歡迎各位關(guān)注我的專欄 WebVR技術(shù)莊園，不定期更新~

相關(guān)資料：
計(jì)算機(jī)圖形知識(shí)：矩陣變換
WebGL快速入門：WebGL 技術(shù)儲(chǔ)備指南
谷歌開發(fā)者 | WebVR：WebVR基本原理
MDN | WebVR API：使用WebVR API