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