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

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

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

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

它允許您直接在 HTML 畫(huà)布內運行 GPU 加速圖形，而無(wú)需外部插件。

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

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

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

現在，讓我們來(lái)了解WebGL的基礎知識。

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

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

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

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

WebGL代碼中有兩種類(lèi)型的函數：

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

• 片段著(zhù)色器。

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

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

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

幸運的是，無(wú)需手動(dòng)創(chuàng )建程序即可開(kāi)始將 3D 模型添加到您的 3D 網(wǎng)站。您可以使用 three.js、PlayCanvas 或 Unity WebGL 構建選項等資源來(lái)快速設計 3D 體驗，而無(wú)需太多的 WebGL 基礎知識。

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

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

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

紋理是您可以在兩種著(zhù)色器類(lèi)型中公開(kāi)訪(fǎng)問(wèn)的數據。通常，紋理包含顏色和圖像數據，但實(shí)際上可以包含任何其他數據類(lèi)型。

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

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

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

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

• 它是原生的，在大多數常見(jiàn)的桌面和移動(dòng)瀏覽器中都是免費的

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

• 無(wú)需在您的設備上安裝任何東西即可運行WebGL API

• 您可以利用外部庫制作出色的 3D Web 體驗

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

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

• 對于原生WebGL編程來(lái)說(shuō)，學(xué)習曲線(xiàn)非常陡峭。

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

• 可能負責由于插件不兼容等而導致的瀏覽器崩潰。

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

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

• 壯觀(guān)的圖形和出色的用戶(hù)體驗

WebGL使3D圖形在用戶(hù)的瀏覽器屏幕上栩栩如生，如果您認為這沒(méi)什么大不了的，請再想一想。此 API 通過(guò)編程方式提供真實(shí) 3D 和虛擬現實(shí)的體驗。這使得這項技術(shù)如此具有影響力。

• 更少的性能問(wèn)題

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

• 跨平臺可用性

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

• 比其他解決方案更安全

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

• 為基于瀏覽器的游戲打開(kāi)大門(mén)

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

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

聽(tīng)起來(lái)幾乎沒(méi)有任何區別，但是，我們不應該忽視許多實(shí)質(zhì)性的細微差別。

• 起源

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

• 特征

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

• 安裝

雖然WebGL在桌面和移動(dòng)設備上的瀏覽器中運行，但OpenGL需要驅動(dòng)器并需要安裝。

• 程序設計語(yǔ)言

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

• 學(xué)習曲線(xiàn)

OpenGL的學(xué)習曲線(xiàn)更陡峭，因為它要復雜得多。然而，一旦你掌握了WebGL，它就會(huì )變得更容易學(xué)習。

• 使用案例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 消除錯誤

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

• 了解瀏覽器限制

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

• 了解系統限制

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

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

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

WebGL的用途是什么？

現在讓我們用這些生動(dòng)的例子來(lái)探索WebGL可以做什么。下面的一些視覺(jué)體驗確實(shí)令人著(zhù)迷，并成功地展示了WebGL的能力。

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

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

2. 數字水母

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

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

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

4. 解剖可視化

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

5. 羅馬音樂(lè )視頻

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

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

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