前言

隨著3D技術(shù)在Web領(lǐng)域的應(yīng)用，帶來了用戶體驗質(zhì)量的飛躍。 后端是業(yè)務(wù)的主力軍，3D技術(shù)的進步也在不斷創(chuàng)造后端業(yè)務(wù)的新形態(tài)。 精細的3D仿真模型展示，讓用戶即使不在現(xiàn)場也能了解產(chǎn)品細節(jié)。 AR/VR技術(shù)在家居乃至醫(yī)療診斷中的廣泛應(yīng)用，讓虛擬試衣、遠程診斷成為我們?nèi)粘Ｊ褂玫墓δ堋?/p>

web3D 簡介

網(wǎng)頁圖形API開發(fā)

正是因為Web圖形API的發(fā)展，我們才有了在Web端操作圖形的能力，才能做出這么多有趣、新穎的交互產(chǎn)品。

傳統(tǒng)的HTML和CSS可以說是應(yīng)用最廣泛的圖形技術(shù)sketch engine類似應(yīng)用，而對于復(fù)雜的圖形來說，其維護成本和性能開銷都很高。 SVG在不增加質(zhì)量的情況下進行放大和縮小，這在一定程度上填補了HTML+CSS的不足，但其最小單位是圖形而不是像素，處理細節(jié)的能力不足。 這就是我們今天所熟悉的標簽。 它調(diào)用繪圖命令直接在頁面上繪制圖形，表現(xiàn)力深入到像素級別。 但這里僅限于二維世界，直到 2011 年 WebGL 1.0 標準規(guī)范發(fā)布。

相比之下，WebGL不僅降低了z軸，而且是一種越來越低級的圖形編程技術(shù)。 WebGL基于瀏覽器的實現(xiàn)，借助GPU的并行處理特性，可以渲染各種復(fù)雜的2D和3D圖形。 這也使得在處理大量數(shù)據(jù)時比以前要好很多。

去年我們可能或多或少聽說過它可以被視為下一代WebGL。 WebGL是基于瀏覽器實現(xiàn)的。 在GPU的世界里，它可以說是一個老古董了，現(xiàn)代GPU硬件技術(shù)的飛速進步并沒有在它身上得到體現(xiàn)。 為此蘋果提出了基于Metal和12的版本，去年就有消息稱要推出1.0版本。

簡單回顧一下，我們可以看到，與傳統(tǒng)游戲圖形開發(fā)相比，Web端更多的是技術(shù)棧上的差異，圖形底層套接字和實現(xiàn)技術(shù)是相同的。

引擎

有了這個圖形API，后端就已經(jīng)具備了操作圖形的能力了。 也許你讀過《WebGL編程手冊》，打開第一章，發(fā)現(xiàn)需要180多行代碼才能勾勒出一個三角形。 由此可見，普通開發(fā)者直接通過圖形庫進行開發(fā)是非常困難的。 這時候就需要用到發(fā)動機了。 就像我們后端會調(diào)用的各種庫一樣，引擎可以看作是圖形的庫，它提供了各種工具讓圖形變得更好、更高效，并為下層開發(fā)團隊提供了開發(fā)平臺。

通用發(fā)動機

目前市場上流行的引擎可以分為兩類：端端和Web端。

最后，Unity是我們比較熟悉的老式游戲引擎； -3D主要用于小游戲，可以說是國外2D小游戲的首選； Laya專注于3D小游戲。 目前，陌陌小游戲的游戲引擎主要是Laya和Cocos。

Web端比較常見的是Three.js。 它面向前端，最早的Momo小游戲中的跳躍在Three.js中使用。 但它缺乏處理復(fù)雜游戲場景的能力，更接近于3D渲染框架。 對于 2D，有 pixi.js，它是一個輕量級渲染框架。 還有綠洲，它面向前方，交互功能齊全。

綠洲

Oasis現(xiàn)已在互聯(lián)網(wǎng)開源三年，star數(shù)接近3k，并通過了上億的商業(yè)測試。 去年年初，支付寶五福的空中書寫和AR年獸就是在綠洲的支持下開發(fā)的。

綠洲面向中國聯(lián)通業(yè)務(wù)，面向前端工程師。 隨著中國聯(lián)通業(yè)務(wù)的爆發(fā)，出現(xiàn)了許多新的交互需求，但舊的框架無法滿足這些需求。 市場上面向Web的圖形引擎的交互功能比較缺乏，在不優(yōu)化后端性能的情況下，很難跨平臺運行。

針對以上痛點，Oasis定位為全功能引擎。 架構(gòu)采用組件化，可以提供多種交互功能，應(yīng)對業(yè)務(wù)復(fù)雜性。 為了一次開發(fā)，到處跑。

構(gòu)建靜態(tài)場景

了解了3D技術(shù)和后端的由來，以及引擎的概念之后，我們先來構(gòu)建一個簡單的場景。

模型

在搭建場景的時候，首先會想到需要一個模型，就像我們后端也需要美術(shù)來提供素材，才有圖片可以裁剪。 工作模型通常由藝術(shù)家在建模軟件中制作和導(dǎo)入。 我們可以先下載一個現(xiàn)成的模型。

類似于圖片世界的主流傳輸格式是png/jpg，web3D的主流格式是glTF（GL）。 這是由制定開放行業(yè)標準的行業(yè)商會發(fā)布的能夠高效傳輸和加載3D場景的規(guī)范。 其功能包括FBX（動漫）、OBJ（模型）等傳統(tǒng)模型格式，基本支持3D場景中的所有功能。 。

場景實體組件

在網(wǎng)頁上顯示glTF模型之前，我們先介紹一下3D領(lǐng)域的一些通用概念。

在基于組件的系統(tǒng)中，組合優(yōu)先于繼承。 例如，如果你想讓一個實體發(fā)光并發(fā)出聲音，你可以通過添加光組件和聲音組件來實現(xiàn)。 這些方法非常適合與這些高復(fù)雜度的業(yè)務(wù)進行交互——特定的功能只需減少一個組件即可進行擴展。

那么如何在網(wǎng)頁上顯示這個模型呢？ 我們需要先激活引擎，添加場景，然后調(diào)用引擎的資源管理器直接加載glTF模型。

//?初始化引擎
const?engine?=?new?WebGLEngine(“canvas");

//?激活場景
const?scene?=?engine.sceneManager.activeScene;
const?rootEntity?=?scene.createRootEntity();

//?加載模型
engine.resourceManager
.load(
??“*.gltf"
)
.then((gltf)?=>?{
??const?{?defaultSceneRoot?}?=?gltf;
??rootEntity.addChild(defaultSceneRoot);
})

engine.run();

此時場景仍然一片漆黑，因為一些重要的組件仍然缺失 - 我們還沒有給場景提供觀察的眼睛。

單反

就像基于組件的架構(gòu)一樣，我們可以將一個實體降低到場景中，為該實體添加一個SLR組件，調(diào)整SLR實體的位置和方向，模型就會出現(xiàn)在屏幕上。

//?添加相機
const?cameraEntity?=?rootEntity.createChild("camera");
const?camera?=?cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(15,?9,?15);
cameraEntity.transform.lookAt(new?Vector3(0,?0,?0));

其實單反是一個具體的概念。 將三維空間中的場景變換到屏幕畫布的三維投影的過程具體稱為單反。

想象一下，三維空間中有一個點是單反，從這個點輻射出來的面積就是我們能看到的到遠裁剪面的最遠距離，到近裁剪面的最短距離。 兩者之間的形狀就是所謂的視圖。 圓錐體，我們在屏幕上看到的是圓錐體范圍內(nèi)的物體，不在圓錐體范圍內(nèi)的物體會被裁剪掉，不會呈現(xiàn)在屏幕上。 影響視角FOV的不僅僅是近平面和遠平面，還有視錐體的形狀，即垂直方向的傾角； 以及圖像屏幕的縱橫比。

有正投影單反和透視投影單反兩種。 透視投影與人眼看到的世界一樣，近側(cè)大，遠側(cè)?。?昨天的視錐也是以此為基礎(chǔ)的。 正投影是指遠近大小相同，三維空間中的平行線投影到二維空間中一定是平行的。 透視單反適合大多數(shù)場景。

光

與之前類似，我們直接在場景中創(chuàng)建實體，為實體添加燈光組件，并調(diào)整燈光顏色和強度等參數(shù)。 這樣就有光了。

//?添加方向光
const?lightEntity?=?rootEntity.createChild("Light");
const?directLight?=?lightEntity.addComponent(DirectLight);
directLight.color.set(0.8,?0.8,?1,?1);
directLight.intensity?=?2;
lightEntity.transform.setRotation(-45,?0,?0);

//?設(shè)置環(huán)境光
const?ambientLight?=?scene.ambientLight;
ambientLight.diffuseSolidColor.set(0.8,?0.8,?1,?1);
ambientLight.diffuseIntensity?=?0.5;

照明可分為兩類，一類是直接照明，有平行光、點光源、聚光燈三種。 另一種是間接照明——環(huán)境光。

通常場景只需要使用默認的環(huán)境光即可。 如果環(huán)境光不滿足要求，可以添加平行光和點光來補充照明細節(jié)。 出于性能原因，盡量不要使用超過 4 個直射燈。

轉(zhuǎn)換

一般來說，場景中的模型不止一個，那么如何排列多個模型才能達到目標效果呢？

為了描述這個模型的位置，引入了坐標系，我們使用左手坐標系。 坐標系的原點位于渲染畫布的幾何中心。 對物體位置的描述是指物體的幾何中心的位置。 我們可以簡單的將空間單位理解為1=1m，這是為了與建模軟件統(tǒng)一，而不是屏幕上的實際尺寸。

對于每個實體，我們需要知道它的位置。 一般來說，當(dāng)創(chuàng)建一個新的實體時，我們會手動為這個實體添加轉(zhuǎn)換組件。 變換組件可以對實體進行位移、旋轉(zhuǎn)、縮放等操作，完成所需的幾何變換。 經(jīng)過這一系列的操作，我們已經(jīng)將模型連接到了想要的位置。

這個時候看起來還是不夠生動，所以我們不僅可以調(diào)整燈光，還可以考慮物體與光線的關(guān)系，也就是模型的材質(zhì)。

網(wǎng)狀材料

模型由兩部分組成：網(wǎng)格和材質(zhì)。 引擎中的網(wǎng)格渲染器組件很好地解釋了這一點。 如果想要達到目標形狀，需要創(chuàng)建一個實體，添加一個網(wǎng)格渲染器，并指定這個渲染器的形狀和材質(zhì)。

const?unlitEntity?=?rootEntity.createChild("unlit");
const?unlitRenderer?=?unlitEntity.addComponent(MeshRenderer);
const?unlitMaterial?=?new?UnlitMaterial(engine);
unlitRenderer.mesh?=?PrimitiveMesh.createSphere(engine,?1,?64);
unlitRenderer.setMaterial(unlitMaterial);

引擎提供了常見的幾何形狀，如球體、圓錐體、膠囊等。引擎中還有三種經(jīng)典材質(zhì)：Unlit、Blinn-Phong 和 PBR。

材質(zhì)決定了物體與光的關(guān)系。 紋理作為材質(zhì)的一個重要屬性，決定了模型頭上的圖案。 圖像、畫布、原始數(shù)據(jù)、視頻等都可以用作紋理。

對于目前的場景，從平衡整體功效和性能的角度來看，可以局部使用PBR材質(zhì)，大部分可以使用Unlit材質(zhì)。

場景背景

視覺效果的另一大變化是場景的背景。

背景可以是黑色或天空模式，天空可以是由6張紋理組成的六面體紋理生成的天空盒，也可以是HDR全景圖。

環(huán)境光照信息存儲在天空盒紋理和全景圖中。 如果讀取環(huán)境光信息并將其分配給場景，則打開 IBL 模式。 通常在使用PBR（基于圖像）材質(zhì)時，我們不會使用黑色模式，而是使用HDR紋理作為環(huán)境反射，以更好地展示PBR材質(zhì)的功效。

概括

經(jīng)過以上步驟，一個場景已經(jīng)快速搭建完成。

在展示項目中，在展品周圍滑動屏幕的需求是非常典型的。 根據(jù)基于組件的架構(gòu)的思想，可以推斷，可以降低帶有SLR的實體的組件來控制實體的位置。 如圖，就是常見的單反控件。 我們降低了這個組件，讓單反實體具備這個功能。

讓它動起來吧！卡通

場面怎么能上移呢？ 首先想到的是模型帶有動畫。

在導(dǎo)出的glTF模型中添加動畫組件，選擇要播放的動畫片段名稱，模型就可以移動了。 您可以指定它是只播放一次還是循環(huán)播放； 改變播放的速率等。

??engine.resourceManager
????.load("*.gltf")
????.then((asset)?=>?{
??????const?{?defaultSceneRoot?}?=?asset;
??????rootEntity.addChild(defaultSceneRoot);
??????const?animator?=?defaultSceneRoot.getComponent(Animator);
??????animator.play("run");
??})

3D開發(fā)中會遇到的動畫基本上可以分為兩類：2D動畫和3D動畫。 2D包括脊柱，3D動畫又可以分為骨骼動畫和變形動畫兩種。

骨骼動畫，又稱縱梁動畫，是游戲和電影中最常用的動畫技術(shù)。 它包括骨骼和縱梁的數(shù)據(jù)。 相互連接的骨骼形成骨架結(jié)構(gòu)，通過改變骨骼的方向和位置來創(chuàng)建動畫。 變形動畫是指幾何對象在變化過程中拓撲關(guān)系保持不變的動畫。 目前廣泛應(yīng)用于數(shù)字人捏臉頰。

以上動畫支持在引擎中播放。 如果一個模型上有多個動畫，還可以通過狀態(tài)機來排列動畫片段，以實現(xiàn)更靈活、豐富的動畫效果。

腳本

除了默認的動畫播放之外，如果想讓場景中的人物能夠交流，該怎么辦呢？

這時候就需要用到腳本組件了。 像往常一樣，我們將創(chuàng)建自己的腳本組件，編寫交互邏輯，并將其添加到角色實體中。

腳本組件非常強大sketch engine類似應(yīng)用，它是由引擎提供的子類擴展而來的，通過它可以編寫任何想要的功能。 它提供了非常豐富的生命周期鉤子函數(shù)，只要調(diào)用特定的反彈函數(shù)，引擎就會在特定的周期內(nèi)手動執(zhí)行相關(guān)腳本，無需手動調(diào)用。 可以類比React的生命周期來理解。

以最常用的生命周期反彈函數(shù)為例，它在每幀渲染之前調(diào)用。 如果你希望對象的行為、狀態(tài)和方向每一幀都更新，那么這個操作可以放在中間。

class?HeroScript?extends?Script?{
??/**
??*?The?main?loop,?called?frame?by?frame.
??*?@param?deltaTime?-?The?deltaTime?when?the?script?update.
??*/
??onUpdate(deltaTime:?number):?void?{
????this.entity.transform.translate(0.1,0,0.1)
??}
}

heroEntity.addComponent(HeroScript)

除了這種涉及實體狀態(tài)變化的生命周期彈跳功能之外，還有與鍵盤按鍵輸入相關(guān)的彈跳，以及與場景相關(guān)的彈跳。 使用時可以查看官方文檔，里面有非常詳細的說明。

化學(xué)系統(tǒng)

腳本組件讓我們擁有了操控三維世界的強大能力，而實體依然在自己進行通訊，與我們沒有任何交互。 如果我們希望角色跟隨我們在屏幕上的點擊并從一個地方移動到另一個地方怎么辦？

這里有必要了解與交互密不可分的引擎組件——物理系統(tǒng)。 引入數(shù)學(xué)系統(tǒng)的最大用處就是讓場景中的物體有數(shù)學(xué)響應(yīng)。 可能說得具體一點，翻譯成代碼就是引入引擎提供的化學(xué)系統(tǒng)，將碰撞器組件降到想要產(chǎn)生化學(xué)反應(yīng)的實體上，并指定這個組件的形狀。

import?{?LitePhysics?}?from?"@oasis-engine/physics-lite";

const?engine?=?new?WebGLEngine("canvas");
engine.physicsManager.initialize(LitePhysics);

const?boxCollider?=?boxEntity.addComponent(StaticCollider);
boxCollider.addShape(physicsBox);

當(dāng)兩個帶有碰撞組件的實體接觸時，兩者會根據(jù)數(shù)學(xué)定理改變原來的運動。 比如圖中的沙發(fā)掉落后撞到其他桌子，它們彈開、翻滾等，改變了原來運動的方向和速度。 還可以在腳本中觸發(fā)反彈功能，例如指定兩者碰撞時改變顏色，碰撞結(jié)束時恢復(fù)顏色。

該引擎提供PhysX和兩個化學(xué)系統(tǒng)。 PhysX功能強大，但體積也相應(yīng)較大； 重量輕，功能簡單，可根據(jù)需要進行選擇交互

如果你想讓角色跟隨屏幕上的點擊，點擊那里并移動到那里，你該怎么辦？

這是最常見的人機交互需求之一，可以簡化為兩個步驟。 第 1 步：屏幕上的點擊將轉(zhuǎn)換為 3D 空間中的點。 步驟2：對象連接到該目標點。 相信通過對腳本的理解，第二步已經(jīng)可以輕松完成了。 這樣的二維點如何轉(zhuǎn)化為三維空間呢？

主要采用射線檢測的方法，即調(diào)用SLR組件將屏幕接收到的坐標信息轉(zhuǎn)換為三維空間中的射線的方法。 當(dāng)它穿過帶有碰撞體組件的實體時，可以通過射線的方向和到碰撞體的距離得到兩者的交點，然后轉(zhuǎn)換成三維空間中的點。

對于這個場景來說，就是給地面實體一個平面形狀的碰撞體，監(jiān)聽點擊風(fēng)暴，獲取射線在地面上的交點，然后讓它到達撞擊的地方。

概括

對于這個搭建好的場景，如果想要改變實體的位置，比如金幣道具還在旋轉(zhuǎn)，那么可以給金幣所在的實體添加一個腳本組件，讓它以一定的角度旋轉(zhuǎn)每幀角度； 你想讓主角到達屏幕并點擊地點的位置可以借助射線檢查和化學(xué)系統(tǒng)中的碰撞體來實現(xiàn)； 如果你想讓主角到達該位置，就會有一個特效，此時可以播放模型中的動畫。

在此基礎(chǔ)上，已經(jīng)可以擴展出一個完整的互動游戲了。 該游戲有三個關(guān)鍵狀態(tài)：待機、游戲中、游戲結(jié)束。 不同的狀態(tài)下，場景中的人物、道具的狀態(tài)以及可以觸發(fā)的風(fēng)暴都是不同的。 這是用于對游戲邏輯進行編程的簡單狀態(tài)機的概念。 比如游戲中，角色在奔跑，待機和結(jié)局都非常到位。 金幣一開始是不連接的，但在游戲過程中會產(chǎn)生，可以吞掉。

工作流程

后面多次提到美術(shù)，那么我們后端和美術(shù)的職責(zé)是什么，整個3D開發(fā)的工作流程是怎樣的呢？

工作流程

工作流程的起點通常從原畫開始，原畫是指描述角色關(guān)鍵形狀和動作的手繪繪畫。

經(jīng)過處理后，它就成為用于構(gòu)建場景的材質(zhì)。 2D輸出材質(zhì)通常是2D精靈，3D輸出材質(zhì)通常是各種3D模型。

根據(jù)是否有編輯器，材料的使用方法會有所不同。 如果引擎有支持的編輯器，比如Unity，那么可以直接導(dǎo)出編輯器進行可視化編輯。 如果沒有編輯器，需要將資源上傳到CDN，通過代碼組裝場景。

將各種素材組合成場景后，添加腳本來編譯游戲邏輯。 當(dāng)一切都完成后，項目就會被發(fā)布。

編輯

Oasis 有一個配套編輯器。 它是一個在線網(wǎng)頁編輯器，可以根據(jù)所見即所得，用低代碼方法快速構(gòu)建場景并編輯交互邏輯。 預(yù)計今年年初對外開發(fā)，歡迎使用。

結(jié)語

我們了解了3D的起源和后端，了解了3D開發(fā)的共同核心概念，通過多種方式構(gòu)建場景和移動場景。 掌握了這些之后，普通的交互服務(wù)就已經(jīng)可以完成了。 對web3D、交互開發(fā)感興趣的朋友可以瀏覽Oasis官網(wǎng)，和我們一起探索圖形的世界。

如何聯(lián)系我們的綠洲開源社區(qū)群（釘釘）：

綠洲開源社區(qū)群（Momo）：

如有侵權(quán)請聯(lián)系刪除！