現(xiàn)代前端、游戲和Web開發(fā)正是WebGL可以轉(zhuǎn)化為數(shù)字杰作的東西。使用GPU繪制在瀏覽器屏幕上生成的矢量元素，WebGL創(chuàng)建交互式Web圖形，從而獲得用戶體驗(yàn)。視覺元素的質(zhì)量和復(fù)雜性使該工具在HTML或CSS等其他方法中脫穎而出。

WebGL基礎(chǔ)

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

在 3D 場景中，每個(gè)點(diǎn)都是由其 x，y，z 坐標(biāo)標(biāo)識(shí)的頂點(diǎn)。然后將頂點(diǎn)連接起來形成一組三角形形狀，稱為基元。應(yīng)用光源來創(chuàng)建陰影和深度的外觀。然后將基元柵格化以將 3D 矢量圖形創(chuàng)建為 2D 像素的投影，從而誘使大腦在 2D 計(jì)算機(jī)屏幕上看到 3D 對象。

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 圖形?？梢允褂?Three.j、Unity WebGL構(gòu)建選項(xiàng)等資源來快速設(shè)計(jì) 3D 體驗(yàn)，也可以用用像Sovit3D可視化編輯器來快速設(shè)計(jì)，無需太多的 WebGL 基礎(chǔ)知識(shí)。

WebGL其他庫

Web開發(fā)人員可以使用各種各樣的WebGL框架和庫來構(gòu)建Web產(chǎn)品。應(yīng)用預(yù)先編寫的元素可以大大提高 Web 開發(fā)的速度。

現(xiàn)在讓我們快速概述一下一些用于使用 WebGL 開發(fā)應(yī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)容。但是，它尚不提供對移動(dòng)設(shè)備的支持。

Three.js

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

Babylon.js

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

PlayCanvas

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ǔ)庫。

AFrame

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

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

Deck.gl

Deck.gl 主要用于地理空間數(shù)據(jù)的可視化，非常適合使用 WebGL 處理大型數(shù)據(jù)集，并根據(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地理空間可視化。

結(jié)語

WebGL用于3D網(wǎng)頁設(shè)計(jì)、交互式應(yīng)用程序、游戲、物理模擬、數(shù)據(jù)可視化等，被認(rèn)為是創(chuàng)造引人入勝的交互式用戶體驗(yàn)的創(chuàng)新技術(shù)之一。該技術(shù)由KhronosGroup創(chuàng)建，是OpenGL ES的直系后代，用于游戲和VR中的3D可視化。

延伸

Sovit3D是基于HTML5的3D可視化場景編輯器，平臺(tái)采用B/S架構(gòu)，基于WebGL繪圖技術(shù)標(biāo)準(zhǔn)，提供基于Web瀏覽器的3D可視化行業(yè)組件，支持HTML5/SVG等最新技術(shù)，可方便的在瀏覽器上進(jìn)行瀏覽和調(diào)試。 幫助軟件開發(fā)公司、解決方案提供商輕松搭建3D可視化界面。平臺(tái)聚焦工業(yè)數(shù)字孿生的生產(chǎn)管控、智慧城市的監(jiān)控運(yùn)維等可視化應(yīng)用領(lǐng)域，產(chǎn)品的模塊組態(tài)化形式可以滿足全要素智慧場景的構(gòu)建。廣泛應(yīng)用于電力能源、水利、物聯(lián)網(wǎng)、工業(yè)互聯(lián)網(wǎng)、智慧城市、智慧醫(yī)療、智慧農(nóng)業(yè)、IT運(yùn)維等各行業(yè)多領(lǐng)域。

如果正在尋找跨平臺(tái)和跨瀏覽器的兼容性，與HTML的集成以及與所有元素的無縫交互，WebGL無疑是最好的選擇。文章來源地址http://www.zghlxwxcb.cn/news/detail-601236.html