博客專欄

EEPW首頁 > 博客 > WebGL:基于web的交互式2D/3D圖形引擎

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

發(fā)布人:ygtu 時(shí)間:2023-08-30 來源:工程師 發(fā)布文章
推薦:使用NSDT編輯器快速搭建3D應(yīng)用場(chǎng)景

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

什么是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ì),互動(dòng)游戲,物理模擬,數(shù)據(jù)可視化和藝術(shù)品。

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

WebGL 基礎(chǔ)

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

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

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

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

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

3D 和 2D 圖形的關(guān)鍵概念

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

屬性和緩沖區(qū)

緩沖區(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)。

WebGL的優(yōu)缺點(diǎn)

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

WebGL開發(fā)的優(yōu)點(diǎn)和缺點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

交互式應(yīng)用程序橙色橫幅 - 偉沙科技博客

對(duì)企業(yè)的優(yōu)勢(shì)

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

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

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

  • 更少的性能問題

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

  • 跨平臺(tái)可用性

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

  • 比其他解決方案更安全

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

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

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

WebGL vs OpenGL:異同

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

WebGL vs OpenGL

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

  • 起源

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

  • 特征

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

  • 安裝

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

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

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

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

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

  • 使用案例

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

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

WebGL 的其他庫

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

最佳 WebGL 框架

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

Unity WebGL

如果你正在尋找WebGL開發(fā)的資源,這可能是你會(huì)遇到的第一個(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)容。但是,它尚不提供對(duì)移動(dòng)設(shè)備的支持。

Three.js

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

巴比倫.js

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

游戲畫布

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

A-Frame

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

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

Deck.gl

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存儲(chǔ)庫來創(chuàng)建WebGL地理空間可視化。

Filament

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

Kick.js

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

ClayGL

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

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

2D 和 3D 圖形最佳實(shí)踐

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

  • 消除錯(cuò)誤

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

  • 了解瀏覽器限制

客戶端的瀏覽器可能不支持您應(yīng)用的擴(kuò)展。如果使用擴(kuò)展,請(qǐng)考慮提供相同體驗(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í)清理代碼

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

WebGL技術(shù)的5個(gè)生動(dòng)例子

WebGL的用途是什么?

現(xiàn)在讓我們用這些生動(dòng)的例子來探索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)室,幫助美國(guó)大學(xué)的學(xué)生磨練他們的學(xué)術(shù)技能。

2. 數(shù)字水母

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

WebGL水母

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

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

3D JS

4. 解剖可視化

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

生物數(shù)碼

5. 羅馬音樂視頻

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

3 羅馬的黑色之夢(mèng)

除了這些壯觀的例子之外,整個(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)


*博客內(nèi)容為網(wǎng)友個(gè)人發(fā)布,僅代表博主個(gè)人觀點(diǎn),如有侵權(quán)請(qǐng)聯(lián)系工作人員刪除。



關(guān)鍵詞: webgl 圖形引擎

技術(shù)專區(qū)

關(guān)閉