基于Verge3D的3D技術在網頁中的應用

王辰啟　王一帆　陳翔宇　梁創恒　劉亞萍

關鍵詞：Verge3D；網頁；應用；3D 技術

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2022）36-0092-03

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

1 3D 技術發展與問題

隨著Web2.0的興起，3D網頁的相關開發與設計也在不斷地探索與實踐，3D網頁自身的直觀性、可交互性能夠吸引更多的用戶，推動其自身的經濟價值的實現，WebGL的出現使得3D網頁從理論變為了實踐，但在3D網頁進行制作的過程中，如果直接使用Web?GL進行制作，由于其原理復雜，上手難度較大，會影響開發效率，同時提高設計與開發難度，影響設計開發的總體花費。因此，實際應用中，會采用對WebGL 封裝成3D 圖形引擎庫來制作網頁中的3D 動畫和模型。

2 Verge3D 技術支持分析

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

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

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

（1）PBR材質

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

在應用的過程中，通常情況下會根據物體的金屬度和粗糙度兩個屬性一同構建PBR材質，通過cooktorrence模型中提到的F、G、D來說明金屬度和粗糙度是如何影響PBR材質的[6]。

（2）Puzzles拼圖編輯器

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

（3）glTF格式

glTF格式本質上是一個JSON文件。這一文件描述了整個3D場景的內容。它包含了對場景結構進行描述的場景圖。場景中的3D對象通過場景節點引用網格進行定義。材質定義了3D對象的外觀，動畫定義了3D對象的變換操作（比如選擇、平移操作）。蒙皮定義了3D對象如何進行骨骼變換，相機定義了渲染程序的視錐體設置。場景對象將以數組的形式存儲在JSON文件中。

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

node：場景圖中的一個節點。它可以包含一個變換（比如旋轉或平移），引用更多的子結點。它可以引用網格和相機，以及描述網格變換的蒙皮。

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

mesh：描述了場景中出現的3D對象的網格數據。它引用的accessor對象可以用來訪問真實的幾何數據。它引用的material對象定義了3D對象的外觀。

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

animation：描述了一些節點如何隨時間進行變換（比如旋轉或平移）。

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

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

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

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

3 Verge3D 制作3D網頁

在應用的過程中，Verge3D不用再和three.js一樣需要學習大量的模型代碼進行構建模型，也不需要關心在構建模型的同時構建動畫等效果，只需要在自己所熟悉的三維設計工具中構建模型，最后發布到網頁上進行動畫的拼圖實現即可。所以Verge3D在3D網頁開發中可以分成兩個部分，第一部分為3D模型構建部分，第二部分為3D模型部署在網頁的部分：

（1）模型構建

在應用的過程中，Verge3D具有glTF這樣的格式，再加上當前前端主流開發模式采用vue+node.js的開發方式，使得JSON文件在前端的數據交換變得十分的常見，所以Verge3D兼容市面上大部分3D建模開發工具，如Blender、3dMax、Maya等，人們可以借助這些3D建模開發工具，來實現整個網頁制作過程中對場景的構建，攝像機的擺放，材質的渲染。模型的構建大概方式如下：

第一、新建App

相當于為3D模型創建一個三維場景，該場景提供模板和模塊。

第二、在建模軟件導入相關插件

Verge3D提供了多種插件以滿足多種建模軟件的需要，提供glTF的導出格式，使得建模軟件創建的數據能以JSON的格式傳入到前段頁面。

第三、建立模型

模型可直接通過軟件進行建立，不必再利用代碼實現模型對象的創建，同時可以直接設置好渲染器，攝像機，光源，物體的材質，世界的環境等。最后都會以JSON對象的形式導出為glTF文件。

（2）網頁部署

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

第一、拼圖編程事件綁定

將模型導出到Verge3D后，便可對傳入glTF文件進行解析，在網頁端渲染成3D頁面，Verge3D提供的拼圖式編程，可以讓人們為3D模型對象直接添加動畫或者事件。

第二、網頁構建

Verge3D支持將文件上傳至云，也可以部署到本地服務器中，在我們自己的頁面中，只需要在元素中調取對應url，就可以在個人的網頁中實現3D效果。最終效果如圖3所示。

4 Verge3D 的優勢總結

Verge3D在3D網頁開發中的優勢十分明顯，首先因其結合了多種3D網頁編程的js庫，功能上向下兼容，可拓展性更強，其次在這些基礎上延伸出可視化編程，方便了零計算機基礎的藝術家和高計算機基礎的程序員進行3D網頁開發。并且因其具有PBR材質的渲染，所能達到的效果也比較驚人，外加簡單的開發步驟，只需要導出為相對應的格式，就可以實現3D 場景。

5 結束語

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