元宇宙勢不可擋，facebook已更名Meta，前端人又能做什么？
點(diǎn)擊上方關(guān)注?前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步
7 月 28 日 扎克伯格表示，該公司正在組建一個(gè)產(chǎn)品團(tuán)隊(duì)，致力于元宇宙（Metaverse）的開發(fā)。“未來五年內(nèi)，將 Facebook 從社交媒體網(wǎng)絡(luò)轉(zhuǎn)變?yōu)橐粋€(gè)元宇宙公司。” 英偉達(dá)通過一部紀(jì)錄片自曝：“今年 4 月份那場發(fā)布會(huì)，全部是合成的” 今年3月初，“元宇宙第一股” 的美國多人在線 3D 創(chuàng)意社區(qū) Roblox（羅布樂思） 已在紐交所上市，而其當(dāng)天股價(jià)暴漲 54.4% 騰訊拿下了 Roblox 中國區(qū)代理 2020 年 12 月，騰訊 CEO 馬化騰表示，移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)過去，全真互聯(lián)網(wǎng)時(shí)代才是未來。 
游戲公司 Epic Games 在 4 月獲得 10 億美元投資用來構(gòu)建元宇宙 國內(nèi)方面號(hào)稱要打造全年齡段元宇宙世界的 MeteApp 公司，在 Roblox 上市后拿到了 SIG 海納亞洲資本領(lǐng)投的 1 億美元 C 輪融資 字節(jié)跳動(dòng)于 4 月被曝光已投資 “中國版 Roblox ” 代碼乾坤近億元 陌陌王力表示，未來隨著虛擬現(xiàn)實(shí)的進(jìn)一步發(fā)展，VR/AR 硬件的不斷成熟向家用普及以及人機(jī)交互模式的變化，必然會(huì)出現(xiàn)新的機(jī)會(huì)，也就是一種直接將人背后的生活串聯(lián)起來的方式。 阿里前端委員會(huì)互動(dòng)技術(shù)方向重點(diǎn)也是“虛擬角色”和“ AR/VR ”
可以看到：“交互娛樂類資本瞄準(zhǔn)的互聯(lián)網(wǎng)未來 - 元宇宙”
何為元宇宙
首次出現(xiàn)：1992 年尼爾·斯蒂芬森的科幻小說《雪崩》當(dāng)中，在這部小說中講述了大量有關(guān)虛擬化身、賽博朋克等場景。
維基百科：通過虛擬增強(qiáng)的物理現(xiàn)實(shí)，呈現(xiàn)收斂性和物理持久性特征，基于未來互聯(lián)網(wǎng)，具有鏈接感知和共享特征的3D虛擬空間。
簡單點(diǎn)講就是：我們在虛擬世界中與一個(gè)全新的身份一一對應(yīng)，并且不會(huì)間斷地“生活下去” Roblox?提出一個(gè)真正的元宇宙產(chǎn)品應(yīng)該具備八大要素，很容易就能讓人聯(lián)想到《頭號(hào)玩家》這部電影：
身份：擁有一個(gè)虛擬身份，無論與現(xiàn)實(shí)身份有沒有相關(guān)性。
朋友：在元宇宙當(dāng)中擁有朋友，可以社交，無論在現(xiàn)實(shí)中是否認(rèn)識(shí)。
沉浸感：能夠沉浸在元宇宙的體驗(yàn)當(dāng)中，忽略其他的一切。
低延遲：元宇宙中的一切都是同步發(fā)生的，沒有異步性或延遲性。
多元化：元宇宙提供多種豐富內(nèi)容，包括玩法、道具、美術(shù)素材等。
隨地：可以使用任何設(shè)備登錄元宇宙，隨時(shí)隨地沉浸其中。
經(jīng)濟(jì)系統(tǒng)：與任何復(fù)雜的大型游戲一樣，元宇宙應(yīng)該有自己的經(jīng)濟(jì)系統(tǒng)。
文明：元宇宙應(yīng)該是一種虛擬的文明。
作為大家口中的“互聯(lián)網(wǎng)的最終形態(tài)”，需要如今大熱的包括 AR、VR、5G、云計(jì)算、區(qū)塊鏈等軟硬件技術(shù)的成熟。才能構(gòu)建出一個(gè)去中心化的、不受單一控制的、永續(xù)的、不會(huì)終止的世界。
上面提到的各項(xiàng)技術(shù)，和目前前端關(guān)聯(lián)比較大的，便是 AR、VR。
AR 現(xiàn)狀
有種新瓶裝舊酒的感覺，VR、AR 概念大火的時(shí)候還是 17、18 年。幾年來，AR 被用來創(chuàng)建虛擬的地方游覽、設(shè)計(jì)和協(xié)作 3D 模型、游戲、娛樂、購物、營銷、學(xué)習(xí)、可視化等等。從可用到易用，再到體驗(yàn)的升級(jí)，這是用戶體驗(yàn) UX 上一輪的主要革新命題，新一輪的用戶體驗(yàn)革命會(huì)聚焦在如何真正提供體驗(yàn)的價(jià)值。目前 AR 在生活中發(fā)揮的就是這樣的作用。
案例：
AR + 旅游：導(dǎo)航、門店提示、廣告、優(yōu)惠活動(dòng)提示等等 
image.png 
購物：AR 試鞋、試衣、試妝 
游戲： 
WebXR
WebXR 是標(biāo)準(zhǔn)也是概念，指的基于 Web 實(shí)現(xiàn)虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)的能力。
其實(shí)就是在 Web 上開發(fā) AR（Augmented Reality）和 VR（Virtual Reality）應(yīng)用的 API， “X”代表沉浸式體驗(yàn)中的任何事物。
API
API 演進(jìn)：主要是 google 在推進(jìn)，從 2016 年開始提出的 WebVR 標(biāo)準(zhǔn)，到由于缺了增強(qiáng)現(xiàn)實(shí)這一塊，2018 年改為?WebXR[1] 相關(guān) API 示例：immersive-web.github.io/webxr-sampl…[2] 最新動(dòng)態(tài)：2021 年 4月13日 Chrome 的 90 版本增加新 WebXR API： WebXR Depth API：獲取用戶的設(shè)備與現(xiàn)實(shí)環(huán)境中物體的距離 WebXR AR Lighting Estimation：獲取環(huán)境的光線情況 示例代碼：
async?function?activateXR()?{
??//?創(chuàng)建?WebGL?上下文
??const?canvas?=?document.createElement("canvas");
??document.body.appendChild(canvas);
??const?gl?=?canvas.getContext("webgl",?{?xrCompatible:?true?});
??//?初始化three.js
??const?scene?=?new?THREE.Scene();
??//?創(chuàng)建一個(gè)有不同顏色面的立方體
??const?materials?=?[
????new?THREE.MeshBasicMaterial({?color:?0xff0000?}),
????new?THREE.MeshBasicMaterial({?color:?0x0000ff?}),
????new?THREE.MeshBasicMaterial({?color:?0x00ff00?}),
????new?THREE.MeshBasicMaterial({?color:?0xff00ff?}),
????new?THREE.MeshBasicMaterial({?color:?0x00ffff?}),
????new?THREE.MeshBasicMaterial({?color:?0xffff00?})
??];
??//?將立方體添加到場景中
??const?cube?=?new?THREE.Mesh(new?THREE.BoxBufferGeometry(0.2,?0.2,?0.2),?materials);
??cube.position.set(1,?1,?1);
??scene.add(cube);
??//?使用three.js設(shè)置渲染：創(chuàng)建渲染器、掛載相機(jī)
??const?renderer?=?new?THREE.WebGLRenderer({
????alpha:?true,
????preserveDrawingBuffer:?true,
????canvas:?canvas,
????context:?gl
??});
??renderer.autoClear?=?false;
??//?API?直接更新相機(jī)矩陣
??//?禁用矩陣自動(dòng)更新
??const?camera?=?new?THREE.PerspectiveCamera();
??camera.matrixAutoUpdate?=?false;
??//?使用“immersive-ar”初始化?WebXR?會(huì)話
??const?session?=?await?navigator.xr.requestSession("immersive-ar");
??session.updateRenderState({
????baseLayer:?new?XRWebGLLayer(session,?gl)
??});
??const?referenceSpace?=?await?session.requestReferenceSpace('local');
??//?創(chuàng)建一個(gè)渲染循環(huán)，允許我們在?AR?視圖上繪圖
??const?onXRFrame?=?(time,?frame)?=>?{
????session.requestAnimationFrame(onXRFrame);
????//?將圖形幀緩沖區(qū)綁定到?baseLayer?的幀緩沖區(qū)
????gl.bindFramebuffer(gl.FRAMEBUFFER,?session.renderState.baseLayer.framebuffer)
????//?檢索設(shè)備的姿態(tài)
????//?XRFrame.getViewerPose?可以在會(huì)話嘗試建立跟蹤時(shí)返回?null
????const?pose?=?frame.getViewerPose(referenceSpace);
????if?(pose)?{
??????//?在移動(dòng)端?AR?中，只有一個(gè)視圖
??????const?view?=?pose.views[0];
??????const?viewport?=?session.renderState.baseLayer.getViewport(view);
??????renderer.setSize(viewport.width,?viewport.height)
??????//?使用視圖的變換矩陣和投影矩陣來配置?THREE.camera
??????camera.matrix.fromArray(view.transform.matrix)
??????camera.projectionMatrix.fromArray(view.projectionMatrix);
??????camera.updateMatrixWorld(true);
??????//?使用?THREE.WebGLRenderer?渲染場景
??????renderer.render(scene,?camera)
????}
??}
??session.requestAnimationFrame(onXRFrame);
}
復(fù)制代碼
兼容性：作為 W3C 的前沿標(biāo)準(zhǔn)，目前主要是 Chrome 在推進(jìn)。市面上瀏覽器對 WebXR 的支持整體較弱，后面會(huì)介紹相關(guān)的兼容庫和現(xiàn)成的解決方案。 
模型觀察者：model-viewer[3]
谷歌實(shí)現(xiàn)的一個(gè) web component，可用于查看 Web 上的 3D 模型并與之交互
?
??
??
?
