WebGL：基于web的交互式2D/3D圖形引擎

推薦：使用NSDT編輯器快速搭建3D應(yīng)用場景

在本指南中，我們旨在回答與WebGL技術(shù)相關(guān)的大多數(shù)問題。首先，讓我們從WebGL定義開始。

WebGL（Web圖形庫）是一個(gè)JavaScript應(yīng)用程序編程接口（API），用于實(shí)現(xiàn)交互式Web圖形。

它允許您直接在 HTML 畫布內(nèi)運(yùn)行 GPU 加速圖形，而無需外部插件。

WebGL是一組用于繪制在瀏覽器屏幕上生成的矢量元素的函數(shù)。這是通過客戶端的圖形處理單元 （GPU） 完成的。換句話說，GPU 用于渲染矢量元素。

它與其他工具的不同之處在于它可以渲染的視覺元素的質(zhì)量和復(fù)雜性。事實(shí)上，沒有HTML和CSS方法能夠達(dá)到完全相同的影響。

WebGL技術(shù)由KhronosGroup創(chuàng)建，是OpenGL ES的直系后代，用于游戲和VR中的3D可視化。這項(xiàng)創(chuàng)新技術(shù)目前用于3D網(wǎng)頁設(shè)計(jì)，互動游戲，物理模擬，數(shù)據(jù)可視化和藝術(shù)品。

現(xiàn)在，讓我們來了解WebGL的基礎(chǔ)知識。

與常見的誤解相反，WebGL不是一個(gè)圖形套件。它不使用位圖，而是利用代碼繪制幾何對象。它還使用客戶端的 GPU 引擎在 HTML 畫布上柵格化圖形對象。

為了理解WebGL的基礎(chǔ)知識，你需要了解基本的3D圖形理論和渲染工作流程。

在 3D 場景中，每個(gè)點(diǎn)都是由其 x、y 和 z 坐標(biāo)標(biāo)識的折點(diǎn)。然后將頂點(diǎn)連接起來形成一組三角形形狀，稱為基元。

應(yīng)用光源來創(chuàng)建陰影和深度的外觀。然后對基元進(jìn)行柵格化，以將 3D 矢量圖形創(chuàng)建為 2D 像素的投影。這誘使大腦在3D計(jì)算機(jī)屏幕上看到2D對象。

WebGL代碼中有兩種類型的函數(shù)：

• 頂點(diǎn)著色器，

• 片段著色器。

它們用于告訴計(jì)算機(jī)如何在屏幕上繪制像素。雖然主程序代碼是用JavaScript編寫的，但著色器使用GL Shader語言，它與C / C++非常相似。

頂點(diǎn)著色器計(jì)算頂點(diǎn)的坐標(biāo)，片段著色器負(fù)責(zé)計(jì)算像素顏色。著色過程需要計(jì)算機(jī)執(zhí)行大量計(jì)算才能流暢地渲染圖像。CPU 處理的工作負(fù)載通常太大。出于這個(gè)原因，WebGL利用GPU來更有效地分配計(jì)算。

從本質(zhì)上講，WebGL API就是自定義著色器狀態(tài)，以控制在客戶端屏幕上繪制的內(nèi)容。

幸運(yùn)的是，無需手動創(chuàng)建程序即可開始將 3D 模型添加到您的 3D 網(wǎng)站。您可以使用 three.js、PlayCanvas 或 Unity WebGL 構(gòu)建選項(xiàng)等資源來快速設(shè)計(jì) 3D 體驗(yàn)，而無需太多的 WebGL 基礎(chǔ)知識。

總結(jié)上面提到的內(nèi)容：一組著色器告訴 GPU 如何將代碼行轉(zhuǎn)換為圖形。反過來，著色器可以通過多種方式接收數(shù)據(jù)。下面簡要介紹了四種現(xiàn)有的著色器編程方法，它們最終構(gòu)成了WebGL的關(guān)鍵概念。

緩沖區(qū)是可以包含幾乎任何要傳達(dá)的參數(shù)的數(shù)據(jù)集。例如，顏色、紋理坐標(biāo)、頂點(diǎn)位置等。屬性描述如何從緩沖區(qū)中提取數(shù)據(jù)的過程。

這些是在播放著色器函數(shù)之前必須定義的全局變量。

紋理是您可以在兩種著色器類型中公開訪問的數(shù)據(jù)。通常，紋理包含顏色和圖像數(shù)據(jù)，但實(shí)際上可以包含任何其他數(shù)據(jù)類型。

變化是在著色器之間傳輸數(shù)據(jù)的方法。在變量中設(shè)置的值將在執(zhí)行著色器時(shí)應(yīng)用。

最終，WebGL是一個(gè)復(fù)雜的工具，它使用復(fù)雜的數(shù)學(xué)和編程在用戶的屏幕上生成圖形?，F(xiàn)在，讓我們談?wù)勊膬?yōu)點(diǎn)和缺點(diǎn)。

在為您的目的選擇最佳技術(shù)堆棧時(shí)，請考慮要應(yīng)用的技術(shù)的優(yōu)缺點(diǎn)。

WebGL最重要的優(yōu)點(diǎn)如下：

• 它是原生的，在大多數(shù)常見的桌面和移動瀏覽器中都是免費(fèi)的

• 該技術(shù)相對較快，并且很容易與HTML混合

• 無需在您的設(shè)備上安裝任何東西即可運(yùn)行WebGL API

• 您可以利用外部庫制作出色的 3D Web 體驗(yàn)

另一方面，WebGL的缺點(diǎn)是這樣的：

• 它在許多方面都比它的前身OpenGL慢。

• 對于原生WebGL編程來說，學(xué)習(xí)曲線非常陡峭。

• 有安全漏洞，盡管供應(yīng)商聲稱正在處理它們

• 可能負(fù)責(zé)由于插件不兼容等而導(dǎo)致的瀏覽器崩潰。

如果您需要跨平臺和跨瀏覽器兼容性、與 HTML 的持續(xù)集成以及與所有元素的無縫交互。WebGL是最佳解決方案。

除了純粹的技術(shù)特性，WebGL還有許多其他切實(shí)的優(yōu)勢：

• 壯觀的圖形和出色的用戶體驗(yàn)

WebGL使3D圖形在用戶的瀏覽器屏幕上栩栩如生，如果您認(rèn)為這沒什么大不了的，請?jiān)傧胍幌?。?API 通過編程方式提供真實(shí) 3D 和虛擬現(xiàn)實(shí)的體驗(yàn)。這使得這項(xiàng)技術(shù)如此具有影響力。

• 更少的性能問題

WebGL使用客戶端硬件，因此，它在用戶的屏幕上運(yùn)行更流暢，并且通常具有較低的播放延遲。

• 跨平臺可用性

WebGL將在最常見的瀏覽器，設(shè)備和操作系統(tǒng)上運(yùn)行，這使得它可供各種用戶組使用。

• 比其他解決方案更安全

在WebGL出現(xiàn)之前，瀏覽器中3D圖形和動畫的顯示需要特定的插件。它們經(jīng)常崩潰并導(dǎo)致許多安全漏洞。盡管WebGL并非完全沒有安全問題，但它仍然比迄今為止任何其他類似技術(shù)都更安全。

• 為基于瀏覽器的游戲打開大門

基于瀏覽器的游戲一直需求量很大。然而，在WebGL之前交付它的唯一方法是通過使用插件，這涉及許多問題。WebGL將使您能夠輕松創(chuàng)建基于Web的游戲并進(jìn)入這個(gè)有前途的細(xì)分市場。

WebGL經(jīng)常被比作OpenGL。OpenGL也是由Kronos集團(tuán)于1992年創(chuàng)建的，是用于3D和2D圖形的API。

聽起來幾乎沒有任何區(qū)別，但是，我們不應(yīng)該忽視許多實(shí)質(zhì)性的細(xì)微差別。

• 起源

WebGL起源于OpenGL ES2，它是OpenGL的簡化版本。另一方面，OpenGL更復(fù)雜，并且具有過多的功能。

• 特征

在功能方面，OpenGL的范圍更廣。除了片段和頂點(diǎn)著色器之外，它還包括更多種類的著色器類型。

• 安裝

雖然WebGL在桌面和移動設(shè)備上的瀏覽器中運(yùn)行，但OpenGL需要驅(qū)動器并需要安裝。

• 程序設(shè)計(jì)語言

WebGL主要是用JavaScript編寫的，因此它與HTML集成良好，并且可以在HTML畫布上運(yùn)行。OpenGL的母語是C。

• 學(xué)習(xí)曲線

OpenGL的學(xué)習(xí)曲線更陡峭，因?yàn)樗獜?fù)雜得多。然而，一旦你掌握了WebGL，它就會變得更容易學(xué)習(xí)。

• 使用案例

OpenGL廣泛應(yīng)用于游戲技術(shù)，以構(gòu)建視頻游戲。WebGL為Web服務(wù)和應(yīng)用程序提供支持（下面，我們將更詳細(xì)地探討WebGL使用的示例）。

簡而言之，OpenGL和WebGL都是用于渲染圖像的API。但是，WebGL更適合Web的3D圖形和構(gòu)建基于Web的服務(wù)。WebGL也更容易學(xué)習(xí)，可以通過外部庫進(jìn)行增強(qiáng)，并且具有更好的HTML和JavaScript集成。

WebGL開發(fā)人員可以使用各種各樣的WebGL框架和庫來構(gòu)建三維網(wǎng)站。應(yīng)用預(yù)先編寫的元素可以大大提高 Web 開發(fā)的速度，而不是重新發(fā)明輪子。

現(xiàn)在讓我們快速概述一些用于使用 WebGL 開發(fā) 3D 網(wǎng)站的流行附加庫。

如果你正在尋找WebGL開發(fā)的資源，這可能是你會遇到的第一個(gè)庫。在網(wǎng)頁中創(chuàng)建內(nèi)容時(shí)，Unity WebGL允許Web開發(fā)人員直接與瀏覽器的JavaScript引擎交互。

這樣，網(wǎng)頁上的所有元素都可以相互通信。Unity WebGL提供了不同的方法來做到這一點(diǎn)。從 Unity 腳本調(diào)用 Javascript 或 C 函數(shù)，或者從瀏覽器的 JavaScript 向 Unity 腳本發(fā)送一些數(shù)據(jù)。

目前，大多數(shù)主流桌面瀏覽器都支持Unity WebGL內(nèi)容。但是，它尚不提供對移動設(shè)備的支持。

Three.js 是一個(gè)專門為 WebGL 準(zhǔn)備的 JavaScript 元素庫。該庫具有大量效果、對象、攝像機(jī)、場景、材質(zhì)、著色器和其他實(shí)用程序。這些手冊仍在編寫中，但網(wǎng)絡(luò)上的龐大開發(fā)人員社區(qū)運(yùn)行論壇和討論。

Github上的另一個(gè)開源庫Babylon通常被描述為在瀏覽器中顯示3D圖形的引擎.js。它的原始語言是Typescript，但它的代碼由所有支持WebGL和HTML5的瀏覽器本地解釋。巴比倫.js具有廣泛的應(yīng)用，包括游戲、犯罪數(shù)據(jù)可視化、時(shí)尚、醫(yī)療保健教育和軍事訓(xùn)練。

PlayCanvas 專門用于游戲，是一個(gè)由基于云的專有開發(fā)平臺支持的 3D 引擎。這允許 Web 開發(fā)團(tuán)隊(duì)從多臺計(jì)算機(jī)實(shí)時(shí)編輯 Web 項(xiàng)目。這些功能包括瀏覽器中的 3D 動畫、剛體物理模擬和聲音設(shè)計(jì)。該引擎于 2014 年開源，在 Github 上也有一個(gè)免費(fèi)的存儲庫。

此框架適用于 XR 開發(fā)（AR/VR 和混合現(xiàn)實(shí)體驗(yàn)）。它還用于在瀏覽器中顯示3D和VR元素。A-Frame本質(zhì)上是一個(gè)VR插件，它具有一系列組件，如動畫，幾何圖形，光標(biāo)，控件等。

A-Frame生成的代碼可以在大多數(shù)流行的VR頭顯上運(yùn)行，也可以在桌面和移動設(shè)備上顯示圖形。這使得A-Frame成為使瀏覽器游戲能夠在任何設(shè)備上運(yùn)行的完美庫。免費(fèi)存儲庫也可以在Github上找到。

Deck.gl 主要用于地理空間數(shù)據(jù)的可視化，非常適合使用 WebGL 處理大型數(shù)據(jù)集。從而基于分析數(shù)據(jù)創(chuàng)建復(fù)雜的可視化效果。

它與 React 集成良好，當(dāng)與 MapboxGL 結(jié)合使用時(shí)可提供出色的結(jié)果。它可以在 Mapbox 地圖頂部創(chuàng)建引人注目的 2D 或 3D 圖形疊加層。您可以使用 Deck.gl Github存儲庫來創(chuàng)建WebGL地理空間可視化。

Filament是一個(gè)用于移動解決方案的Google開源庫。它是一個(gè)實(shí)時(shí)3D渲染器，也可以在許多平臺上運(yùn)行。這是一個(gè)使用C++構(gòu)建的新庫，以獲得最佳性能。WebGL開發(fā)人員專注于保持它盡可能輕巧和緊湊。

Kick.js對于那些想要在WebGL中獲得快速實(shí)踐經(jīng)驗(yàn)的人來說是一個(gè)完美的選擇。該游戲引擎和圖形庫具有全面的文檔、教程和示例，易于學(xué)習(xí)。非常適合Web開發(fā)和創(chuàng)建交互式游戲。

ClayGL用于可視化大型集合和數(shù)據(jù)，也可以應(yīng)用于地理空間映射目的。然而，該庫也適用于需要按需擴(kuò)展的多用途 Web 應(yīng)用程序。該庫為用戶提供了高度復(fù)雜和詳細(xì)的圖形、示例和教程。

附加的 WebGL 庫總數(shù)超過 80 個(gè)，描述所有這些庫超出了本文的范圍。但是，您可以使用 GitHub 上廣泛的庫列表來找到最適合您的業(yè)務(wù)目的的庫。

為了使WebGL充分發(fā)揮其潛力，專家們制定了一系列建議來幫助實(shí)現(xiàn)最佳性能。一些WebGL最佳實(shí)踐如下：

• 消除錯(cuò)誤

通常，WebGL 錯(cuò)誤消息顯示為 JavaScript 警告。運(yùn)行WebGL的瀏覽器的問題在于，在出現(xiàn)一定數(shù)量的錯(cuò)誤后，它們會停止發(fā)送有關(guān)它們的通知。這確實(shí)阻礙了修復(fù)WebGL代碼。盡一切努力檢測所有錯(cuò)誤，并在代碼變得難以修復(fù)之前消除它們。getError

• 了解瀏覽器限制

客戶端的瀏覽器可能不支持您應(yīng)用的擴(kuò)展。如果使用擴(kuò)展，請考慮提供相同體驗(yàn)的其他方法。但是，某些擴(kuò)展提供跨瀏覽器可操作性，因此在構(gòu)建產(chǎn)品時(shí)關(guān)注它們是有意義的。

• 了解系統(tǒng)限制

運(yùn)行 WebGL 代碼的系統(tǒng)可能有局限性，其容量可能與您的系統(tǒng)容量大不相同。因此，您的項(xiàng)目可能具有不同的播放速度、性能等。然而，WebGL代碼通常不是那么耗費(fèi)資源，許多函數(shù)將得到普遍支持。

• 必要時(shí)清理代碼

刪除對象可在不再需要渲染結(jié)果時(shí)清除 WebGL 上下文。清理和刪除不必要的元素將有助于加速代碼執(zhí)行。

WebGL的用途是什么？

現(xiàn)在讓我們用這些生動的例子來探索WebGL可以做什么。下面的一些視覺體驗(yàn)確實(shí)令人著迷，并成功地展示了WebGL的能力。

1. 虛擬物理實(shí)驗(yàn)室

在教育領(lǐng)域，WebGL幫助創(chuàng)建以前只能在真實(shí)實(shí)驗(yàn)室環(huán)境中實(shí)現(xiàn)的模擬。在威賽科技，我們建立了一個(gè)虛擬物理實(shí)驗(yàn)室，幫助美國大學(xué)的學(xué)生磨練他們的學(xué)術(shù)技能。

2. 數(shù)字水母

這些3D水母看起來完全真實(shí)，但是，它們是使用WebGL創(chuàng)建的。請注意，您可以控制水母的大小、速度、計(jì)數(shù)和水湍流等參數(shù)。

3. 化學(xué)涂鴉組件

這是一個(gè)包含化學(xué)結(jié)構(gòu)、反應(yīng)和其他交互式組件的 JavaScript 3D 庫。由iChemLabs創(chuàng)建的ChemDoodle是化學(xué)網(wǎng)站和科學(xué)家的絕佳工具。

4. 解剖可視化

一個(gè)突出的WebGL例子，BioDigital的這個(gè)項(xiàng)目可視化了人體的所有系統(tǒng)。提供治療和疾病的全面可視化，并服務(wù)于醫(yī)療保健、科學(xué)和教育目的。

5. 羅馬音樂視頻

3 Dreams of Black是Rome用WebGL制作的音樂視頻。該視頻由Mirada與導(dǎo)演Chris Milk合作制作，非常壯觀，并包含游戲參考。必看！

除了這些壯觀的例子之外，整個(gè)軟件開發(fā)部分都致力于WebGL游戲。一些由WebGL提供支持的最佳瀏覽器游戲包括Shell Shockers，Derby Crash 4和Bullet Force。另外，考慮看看谷歌實(shí)驗(yàn)展示使用機(jī)器學(xué)習(xí)和WebGL制作的項(xiàng)目。

原文鏈接：WebGL：基于web的交互式2D/3D圖形引擎 (mvrlink.com)