王辰啟　王一帆　陳翔宇　梁創(chuàng)恒　劉亞萍

關(guān)鍵詞：Verge3D；網(wǎng)頁；應(yīng)用；3D 技術(shù)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）36-0092-03

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，網(wǎng)頁技術(shù)的融合、創(chuàng)新與突破給Web3D發(fā)展提供了良好的條件，不僅是在傳統(tǒng)的客戶端類網(wǎng)頁，還是在當(dāng)下流行的手機(jī)端網(wǎng)頁，漸漸地都可以看到3D圖形的影子。現(xiàn)在，制作3D 網(wǎng)頁所流行的工具大部分為基于WebGL[1]的three.js 引擎，采用JavaScript代碼封裝WebGL部分功能的庫，Verge3D 進(jìn)一步對three.js 進(jìn)行封裝，面向的用戶更廣，渲染三維模型更加簡潔。

1 3D 技術(shù)發(fā)展與問題

隨著Web2.0的興起，3D網(wǎng)頁的相關(guān)開發(fā)與設(shè)計(jì)也在不斷地探索與實(shí)踐，3D網(wǎng)頁自身的直觀性、可交互性能夠吸引更多的用戶，推動(dòng)其自身的經(jīng)濟(jì)價(jià)值的實(shí)現(xiàn)，WebGL的出現(xiàn)使得3D網(wǎng)頁從理論變?yōu)榱藢?shí)踐，但在3D網(wǎng)頁進(jìn)行制作的過程中，如果直接使用Web?GL進(jìn)行制作，由于其原理復(fù)雜，上手難度較大，會(huì)影響開發(fā)效率，同時(shí)提高設(shè)計(jì)與開發(fā)難度，影響設(shè)計(jì)開發(fā)的總體花費(fèi)。因此，實(shí)際應(yīng)用中，會(huì)采用對WebGL 封裝成3D 圖形引擎庫來制作網(wǎng)頁中的3D 動(dòng)畫和模型。

2 Verge3D 技術(shù)支持分析

Verge3D底層封裝了three.js、tween.js、ammo.js等JavaScript庫，從源碼上進(jìn)行解析，還要回歸到WebGL（Web Graphics Library），即3D繪圖協(xié)議，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL Es 2.0結(jié)合在一起，通過OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。在Web?GL應(yīng)用過程中，省卻了確保3D 網(wǎng)頁運(yùn)行的插件的安裝，能夠直接通過Javascript 的腳本語言來確保Web交互式三維動(dòng)畫的制作與實(shí)現(xiàn)；其次，WebGL 的應(yīng)用也能夠?qū)?D 模型的渲染起到加速作用，其直接通過OpenGL 的接口，對圖形硬件的加速功能進(jìn)行應(yīng)用，從而提高模型和圖形渲染的效果和質(zhì)量[2-3]。

Three.js則是對WebGL進(jìn)行了封裝，是運(yùn)行在瀏覽器的3D 引擎，用JavaScript 編寫的WebGL 第三方庫，相對于WebGL原生的API添加了更多的圖形引擎，只需開發(fā)者調(diào)用相應(yīng)的API就可以直接在瀏覽器中創(chuàng)建豐富的3D場景，無須再考慮如何進(jìn)行場景的渲染[4-5]。

如果說WebGL為了解決的網(wǎng)頁插件和跨平臺(tái)問題，three.js為了解決編程簡單化和可視化問題，那么Verge3D就是為了解決以下問題：第一，網(wǎng)頁3D實(shí)現(xiàn)度不高，材料系統(tǒng)以及物理渲染煩瑣；第二，編程代碼煩瑣，對程序員本身要求較高，適應(yīng)群眾較窄；第三，提供的接口較少，兼容主流軟件較少；實(shí)現(xiàn)的3D頁面通過以下幾個(gè)特點(diǎn)解決：

（1）PBR材質(zhì)

PBR（Physicallly-Based Rendering），指基于物理渲染材質(zhì)。生活中物體顯示出的顏色通常由兩種因素決定：自身因素和外部因素，外部因素大部分是由光照決定；因此基于物體就需關(guān)注物體本身和光照兩個(gè)方面。首先對于物體本身，考慮物體表面不可能是絕對光滑的平面，所以需要引入微表面理論，基于微表面進(jìn)行研究；然后需要關(guān)注光的物理性質(zhì)，光包括了顏色、光通量、光強(qiáng)度、光亮度等一系列概念，擁有諸如反射、折射等性質(zhì)，還會(huì)產(chǎn)生諸如菲涅爾等效果；此外在光與物體交互時(shí)，光線可能發(fā)生遮擋，也可能被吸收，要遵循能量守恒定律。所以概括來說就是在遵循微表面理論，光學(xué)特性和能量守恒的前提下，根據(jù)物體本身特性通過數(shù)學(xué)推算出的物體表面的屬性集就叫作PBR材質(zhì)。

在應(yīng)用的過程中，通常情況下會(huì)根據(jù)物體的金屬度和粗糙度兩個(gè)屬性一同構(gòu)建PBR材質(zhì)，通過cooktorrence模型中提到的F、G、D來說明金屬度和粗糙度是如何影響PBR材質(zhì)的[6]。

（2）Puzzles拼圖編輯器

Puzzles拼圖編輯器，也稱為可視化邏輯編輯器，基于谷歌開源項(xiàng)目Blockly進(jìn)行的開發(fā)，方式類似MIT 的兒童編程語言Scratch，類似玩樂高積木一樣一塊塊拼圖構(gòu)建出應(yīng)用程序。每一個(gè)圖形對應(yīng)的都是代碼塊，如圖1所示，原理則是將Blockly代碼塊中代碼轉(zhuǎn)換成JavaScript，Dart，Python或者XML代碼，之后編譯器對轉(zhuǎn)換的代碼進(jìn)行處理，實(shí)現(xiàn)所需要的邏輯效果。[7-9]

（3）glTF格式

glTF格式本質(zhì)上是一個(gè)JSON文件。這一文件描述了整個(gè)3D場景的內(nèi)容。它包含了對場景結(jié)構(gòu)進(jìn)行描述的場景圖。場景中的3D對象通過場景節(jié)點(diǎn)引用網(wǎng)格進(jìn)行定義。材質(zhì)定義了3D對象的外觀，動(dòng)畫定義了3D對象的變換操作（比如選擇、平移操作）。蒙皮定義了3D對象如何進(jìn)行骨骼變換，相機(jī)定義了渲染程序的視錐體設(shè)置。場景對象將以數(shù)組的形式存儲(chǔ)在JSON文件中。

glTF格式的JSON部分頂級元素如圖2所示：scene：glTF格式的場景結(jié)構(gòu)描述條目。它通過引用node來定義場景圖。

node：場景圖中的一個(gè)節(jié)點(diǎn)。它可以包含一個(gè)變換（比如旋轉(zhuǎn)或平移），引用更多的子結(jié)點(diǎn)。它可以引用網(wǎng)格和相機(jī)，以及描述網(wǎng)格變換的蒙皮。

camera：定義了用于渲染場景的視錐體配置。

mesh：描述了場景中出現(xiàn)的3D對象的網(wǎng)格數(shù)據(jù)。它引用的accessor對象可以用來訪問真實(shí)的幾何數(shù)據(jù)。它引用的material對象定義了3D對象的外觀。

skin：定義了用于蒙皮的參數(shù)，參數(shù)的值通過一個(gè)accessor對象獲得。

animation：描述了一些節(jié)點(diǎn)如何隨時(shí)間進(jìn)行變換（比如旋轉(zhuǎn)或平移）。

accessor：一個(gè)訪問任意數(shù)據(jù)的抽象數(shù)據(jù)源。被mesh、skin和animation元素使用來提供幾何數(shù)據(jù)，蒙皮參數(shù)和基于時(shí)間的動(dòng)畫值。它通過引用一個(gè)bufferView對象，來引用實(shí)際的二進(jìn)制數(shù)據(jù)。

material：包含了定義3D對象外觀的參數(shù)。它通常引用了用于3D對象渲染的texture對象。

texture：定義了一個(gè)sampler對象和一個(gè)image對象。sampler對象定義了image對象在3D對象上的張貼方式[10]。

需要注意的是，上述都是常規(guī)的glTF結(jié)構(gòu)，但是在實(shí)際的應(yīng)用場景中，一些幾何文件、紋理文件，包括圖片文件都不在這個(gè)json文件中，因此需要外部引入，于是glTF也采用了和3d tiles一樣的uri方式引入文件，除此之外glTF還可以讀取和管理外部的文件，如二進(jìn)制文件，圖片文件等等。

3 Verge3D 制作3D網(wǎng)頁

在應(yīng)用的過程中，Verge3D不用再和three.js一樣需要學(xué)習(xí)大量的模型代碼進(jìn)行構(gòu)建模型，也不需要關(guān)心在構(gòu)建模型的同時(shí)構(gòu)建動(dòng)畫等效果，只需要在自己所熟悉的三維設(shè)計(jì)工具中構(gòu)建模型，最后發(fā)布到網(wǎng)頁上進(jìn)行動(dòng)畫的拼圖實(shí)現(xiàn)即可。所以Verge3D在3D網(wǎng)頁開發(fā)中可以分成兩個(gè)部分，第一部分為3D模型構(gòu)建部分，第二部分為3D模型部署在網(wǎng)頁的部分：

（1）模型構(gòu)建

在應(yīng)用的過程中，Verge3D具有g(shù)lTF這樣的格式，再加上當(dāng)前前端主流開發(fā)模式采用vue+node.js的開發(fā)方式，使得JSON文件在前端的數(shù)據(jù)交換變得十分的常見，所以Verge3D兼容市面上大部分3D建模開發(fā)工具，如Blender、3dMax、Maya等，人們可以借助這些3D建模開發(fā)工具，來實(shí)現(xiàn)整個(gè)網(wǎng)頁制作過程中對場景的構(gòu)建，攝像機(jī)的擺放，材質(zhì)的渲染。模型的構(gòu)建大概方式如下：

第一、新建App

相當(dāng)于為3D模型創(chuàng)建一個(gè)三維場景，該場景提供模板和模塊。

第二、在建模軟件導(dǎo)入相關(guān)插件

Verge3D提供了多種插件以滿足多種建模軟件的需要，提供glTF的導(dǎo)出格式，使得建模軟件創(chuàng)建的數(shù)據(jù)能以JSON的格式傳入到前段頁面。

第三、建立模型

模型可直接通過軟件進(jìn)行建立，不必再利用代碼實(shí)現(xiàn)模型對象的創(chuàng)建，同時(shí)可以直接設(shè)置好渲染器，攝像機(jī)，光源，物體的材質(zhì)，世界的環(huán)境等。最后都會(huì)以JSON對象的形式導(dǎo)出為glTF文件。

（2）網(wǎng)頁部署

在我們通過自己的三維設(shè)計(jì)模型工具成功導(dǎo)出glTF格式的模型后，可以對模型再次加工使其具有如動(dòng)畫，事件等功能，同時(shí)還要將該模型鑲嵌在網(wǎng)頁當(dāng)中，大致方法如下：

第一、拼圖編程事件綁定

將模型導(dǎo)出到Verge3D后，便可對傳入glTF文件進(jìn)行解析，在網(wǎng)頁端渲染成3D頁面，Verge3D提供的拼圖式編程，可以讓人們?yōu)?D模型對象直接添加動(dòng)畫或者事件。

第二、網(wǎng)頁構(gòu)建

Verge3D支持將文件上傳至云，也可以部署到本地服務(wù)器中，在我們自己的頁面中，只需要在元素中調(diào)取對應(yīng)url，就可以在個(gè)人的網(wǎng)頁中實(shí)現(xiàn)3D效果。最終效果如圖3所示。

4 Verge3D 的優(yōu)勢總結(jié)

Verge3D在3D網(wǎng)頁開發(fā)中的優(yōu)勢十分明顯，首先因其結(jié)合了多種3D網(wǎng)頁編程的js庫，功能上向下兼容，可拓展性更強(qiáng)，其次在這些基礎(chǔ)上延伸出可視化編程，方便了零計(jì)算機(jī)基礎(chǔ)的藝術(shù)家和高計(jì)算機(jī)基礎(chǔ)的程序員進(jìn)行3D網(wǎng)頁開發(fā)。并且因其具有PBR材質(zhì)的渲染，所能達(dá)到的效果也比較驚人，外加簡單的開發(fā)步驟，只需要導(dǎo)出為相對應(yīng)的格式，就可以實(shí)現(xiàn)3D 場景。

5 結(jié)束語

本文旨在讓更多的人了解到3D網(wǎng)頁的開發(fā)，對Verge3D的技術(shù)支持和開發(fā)方式進(jìn)行了簡單的分析，簡單介紹了運(yùn)用Verge3D與其他開發(fā)軟件進(jìn)行3D網(wǎng)頁開發(fā)的異同，Verge3D作為一種工具，提高了設(shè)計(jì)師設(shè)計(jì)頁面的開發(fā)效率。3D網(wǎng)頁開發(fā)作為當(dāng)前網(wǎng)絡(luò)趨勢，在更加未來的元宇宙構(gòu)建當(dāng)中，無疑會(huì)成為其核心力量，這也說明了3D網(wǎng)頁還有很長的路要走，還有很多值得去學(xué)習(xí)。