身為一個3D列印及建模的業餘愛好者,關注不同建模軟體的特性是自然之事,最近發現一個能在瀏覽器上運行的3D雕塑軟體,畫面流暢性令人驚訝,我也留意到該網頁的標題為「A WebGL sculpting app」?為什麼是WebGL?

瀏覽器中的建模軟體

玩弄3D列印與建模至今,不覺已經有近四年的時間,作為一名程式開發者,當初首選程式碼作為建模的表達方式,因而使用OpenSCAD作為建模軟體,但在建模軟體的光譜中,它是一個極端,因為它完全依賴程式碼來建立模型,使用者的滑鼠操作對於移動、調整模型而言,是沒有作用的。

OpenSCAD適合基於立方體、圓柱體、球體等幾何體的組合建模,但如果想要建構柔軟的曲線面,找出相對應的數學公式會是比較困難的,因而近來我將目光望向了光譜的另一端──3D雕塑軟體。這類軟體的起點,通常是個代表泥塊的圓球,幾乎完全依賴滑鼠塑形為想要的模型。

這類3D雕塑軟體的代表,包括了功能強大的商用軟體ZBrush,或者是開放自由的Sculptris,由於通常被泥塑的對象需要細緻的網格(Mesh),在這些部分逐漸龐多而複雜之後,在繪圖呈現上就會是個負擔。然而,不久前,我發現基於瀏覽器的SculptGL(https://bit.ly/2fur76q),雖然也是個雕塑軟體,在瀏覽器中執行的流暢性,卻令人訝異。

簡單來說,SculptGL是基於WebGL的網頁應用程式,實際上,OpenSCAD也有瀏覽器的移植版OpenJSCAD(https://openjscad.org),可使用JavaScript建模,同時,也有採用積木語言來建模的BlockSCAD(https://bit.ly/2tYKEBo),我仔細調查了一下,它們在3D繪圖上也都是基於WebGL。

在更專業的建模軟體部份,著名的SketchUp於2018年推出基於瀏覽器的免費版本;跨平臺2D/3D遊戲引擎Unity,在Unity5時,也延伸到基於WebGL技術的HTML5網頁平臺……我不禁好奇了,WebGL是什麼神器?目前瀏覽器的支援度,以及相關工具的成熟度到哪了?

瀏覽器裡的OpenGL?

根據維基百科的記載,WebGL在2011年3月首次發布規範,2017年1月完成2.0規範,至今各大主流瀏覽器的新版本都有支援,連IE11都有支援(儘管微軟官方已說IE只是個相容性方案了)。

就功能而言,WebGL是基於OpenGL ES(OpenGL for Embedded Systems),是OpenGL的嵌入式系統特化版本。瀏覽器可以透過WebGL,將大部份的繪圖渲染運算,送進專司影像運算的圖形處理器(GPU),從而增加瀏覽器上的繪圖效率。

就運用方式來說,WebGL常被誤解為一套JavaScript API,實際上,除了JavaScript語言,以及封裝OpenGL ES的JavaScript API之外,想要使用WebGL,同時還需要瞭解GLSL(OpenGL Shading Language)──這是一個類似C語言的著色語言,開發者需要使用GLSL撰寫著色器(Shader)程式,透過JavaScript API編譯並送入GPU,而JavaScript語言則負責繪圖以外的運算工作,並將繪圖需要的資料透過API送給著色器來渲染。

實際上,WebGL本身不複雜,一般人初學這項技術時,主要是面對頂點著色器(Vertex shader),以及片段著色器(Fragment shader),前者主要負責頂點的運算,將頂點對應至畫面上的二維座標;後者則是計算出需要繪製的像素顏色值,最簡單的繪製是一個點,其次是線,然後是三角形,之後更複雜的圖形,就要自己想辦法用三角形組成了,而處理這類細節會比較麻煩,複雜的部份往往涉及艱深的圖學與數學。

簡單來說,WebGL是個柵格化(Rasterization)引擎,它只關心兩件事:空間中的座標及顏色。例如,繪製三角形,必須計算出三個頂點於二維畫面上的位置,然後對這三個點圍起的三角形做像素填充,這就是頂點著色器與片段著色器的作用,想要認識WebGL,〈WebGL Fundamentals〉(https://bit.ly/1TgmSbk)是個不錯而全面的網站。

而在該網站第一篇文件中,就談到「WebGL實際上是個很簡單的API」,這並不誇大,它需要的部分,就是頂點著色器、片段著色器,以便繪製點、線、三角形。如果需要對整個圖形做平移、旋轉、變形等,開發者必須自己來,也就是說,要回歸到對電腦圖學的認識。

WebGL的夥伴們

當然,直接編寫WebGL相關程式碼,本身還是充滿細節而比較枯燥,對於常用的繪圖需求,封裝為程式庫是必要的,時至今日,確實有著不少封裝WebGL、提供高階操作的程式庫,而其中最有名的就是Three.js。

雖然Three.js本身也有不少的類別與函式,其核心概念卻很簡單。程式庫本身的隱喻,就像是在搭建舞臺,有個場景作為容器,可以加入網格物件、燈光等,相機則決定了場景中哪些物件是可見的,渲染器則會根據相機看到的東西,計算出場景中的物件應當如何渲染,而最常使用的渲染器,就是WebGLRenderer(也有基於SVG等的渲染器)。

Three.js中的網格物件,是由幾何(Geometry),以及材質(Material)物件組成──根據程式碼中指定的幾何物件資訊(例如立方體的長寬高),會自動計算出相關頂點;而材質會與燈光等物件結合,運算出應有的顏色;對於大量物件的高效率繪製,Three.js也提供了粒子系統的支援。掌握這些基本概念之後,剩下的就是挑選出Three.js中適當的API,例如,正交或投影相機、基礎或法向材質等來繪製出想要達到的效果。

除了作為動畫、遊戲基礎之外,Three.js也可結合ThreeBSP的擴充,進行聯集、交集、減集等操作,而這可用來建立類似OpenSCAD,也就是一套可以運行於瀏覽器中的建模軟體。如果想要系統性地學習Three.js,可以參考《Learning Three.js: The JavaScript 3D Library for WebGL》。

當然,WebGL可以繪製3D,要用來繪製2D圖形自然不成問題,基於WebGL的2D程式庫,最常見的是PixiJS。相較於直接基於Canvas API或SVG的程式庫(例如D3.js),PixiJS這類程式庫在大量資料呈現,會有效能優勢。

除了Three.js、Pixi.js,還有其他基於WebGL的程式庫,有些進一步整合了動畫或遊戲的功能,有興趣的話,可以參考〈3D探索──Web 3D哪家強?〉(https://bit.ly/2XOoBei),其中針對了各家程式庫在2D/3D WebGL的支援等做了比較。

實踐圖學與數學

雖然不用處理細節,然而在運用Three.js這類封裝WebGL的程式庫時,有圖學與幾何數學作為基礎非常有用,實際上Three.js也允許自訂頂點,必要時也可基於三角形來定義更複雜的圖形,這讓我想到先前為OpenSCAD打造程式庫時,也曾自行定義三角形,來實作出貝茲曲面、路徑跟隨(Sweep)或者是處理頂點等功能。

現今可選的WebGL程式庫繁多,但能從中實踐圖學與數學才是重點,就算直接面對WebGL也不例外,我在研究WebGL的過程中,意識到GLSL實作著色器,實際上就是操作點、線、三角形之後,雖然先前玩OpenSCAD是為了建模,然而累積的相關圖學與數學技巧,在理解與撰寫WebGL時就派上用場,而這類可過渡的知識才是真正有價值的地方!

作者簡介


Advertisement

更多 iThome相關內容