WebGL - 簡介

幾年前，Java 應用程式（作為 applet 和 JOGL 的組合）透過訪問 GPU（圖形處理單元）用於在 Web 上處理 3D 圖形。由於 applet 需要 JVM 才能執行，因此難以依賴 Java applet。幾年後，人們停止使用 Java applet。

Adobe（Flash、AIR）提供的 Stage3D API 提供了 GPU 硬體加速架構。使用這些技術，程式設計師可以在 Web 瀏覽器以及 IOS 和 Android 平臺上開發具有 2D 和 3D 功能的應用程式。由於 Flash 是一種專有軟體，因此它沒有被用作 Web 標準。

2011 年 3 月，WebGL 釋出。它是一個開源軟體，可以在沒有 JVM 的情況下執行。它完全由 Web 瀏覽器控制。

HTML 5 的新版本具有多個支援 3D 圖形的特性，例如 2D Canvas、WebGL、SVG、3D CSS 變換和 SMIL。在本教程中，我們將介紹 WebGL 的基礎知識。

什麼是 OpenGL？

OpenGL（開放圖形庫）是用於 2D 和 3D 圖形的跨語言、跨平臺 API。它是一組命令。OpenGL4.5 是 OpenGL 的最新版本。下表列出了與 OpenGL 相關的一組技術。

API	使用技術
OpenGL ES	它是嵌入式系統（包括控制檯、手機、家用電器和車輛）上 2D 和 3D 圖形的庫。OpenGL ES 3.1 是其最新版本。它由 Khronos Group 維護 www.khronos.org
JOGL	它是 OpenGL 的 Java 繫結。JOGL 4.5 是其最新版本，由 jogamp.org 維護。
WebGL	它是 OpenGL 的 JavaScript 繫結。WebGL 1.0 是其最新版本，由 khronos group 維護。
OpenGLSL	OpenGL 著色語言。它是一種程式語言，是 OpenGL 2.0 及更高版本的配套語言。它是核心 OpenGL 4.4 規範的一部分。它是一個專門為嵌入式系統（例如手機和平板電腦上的嵌入式系統）量身定製的 API。

注意 - 在 WebGL 中，我們使用 GLSL 來編寫著色器。

什麼是 WebGL？

WebGL（Web 圖形庫）是 Web 上 3D 圖形的新標準，它旨在用於渲染 2D 圖形和互動式 3D 圖形。它源自 OpenGL 的 ES 2.0 庫，該庫是手機和其他移動裝置的低階 3D API。WebGL 提供了與 ES 2.0（嵌入式系統）類似的功能，並在現代 3D 圖形硬體上表現良好。

它是一個 JavaScript API，可與 HTML5 結合使用。WebGL 程式碼寫在 HTML5 的 <canvas> 標籤內。它是一個規範，允許 Internet 瀏覽器訪問這些計算機上的圖形處理單元 (GPU)，這些計算機在這些計算機上使用。

誰開發了 WebGL

一位名叫Vladimir Vukicevic的美籍塞爾維亞軟體工程師完成了基礎工作並領導了 WebGL 的建立

2007 年，Vladimir 開始在 HTML 文件的 Canvas 元素上開發OpenGL原型。
2011 年 3 月，Kronos Group 建立了 WebGL。

渲染

渲染是使用計算機程式從模型生成影像的過程。在圖形中，虛擬場景使用幾何體、視點、紋理、燈光和陰影等資訊進行描述，這些資訊會透過渲染程式。此渲染程式的輸出將是數字影像。

有兩種型別的渲染 -

軟體渲染 - 所有渲染計算都在 CPU 的幫助下完成。
硬體渲染 - 所有圖形計算均由 GPU（圖形處理單元）完成。

渲染可以在本地或遠端進行。如果要渲染的影像過於複雜，則渲染會在具有足夠硬體資源以渲染複雜場景的專用伺服器上遠端進行。它也稱為基於伺服器的渲染。渲染也可以由 CPU 在本地完成。它稱為基於客戶端的渲染。

WebGL 採用基於客戶端的渲染方法來渲染 3D 場景。獲取影像所需的所有處理都在本地使用客戶端的圖形硬體進行。

GPU

根據 NVIDIA 的說法，GPU 是“一個單晶片處理器，集成了變換、照明、三角形設定/裁剪和渲染引擎，能夠每秒處理至少 1000 萬個多邊形。”與具有幾個針對順序處理最佳化的核心的多核處理器不同，GPU 由數千個較小的核心組成，可以有效地處理並行工作負載。因此，GPU 加速了為輸出到顯示器而設計的幀緩衝區（RAM 的一部分，其中包含完整的幀資料）中影像的建立。

GPU 加速計算

在 GPU 加速計算中，應用程式載入到 CPU 中。每當它遇到程式碼的計算密集型部分時，該程式碼部分將被載入並在 GPU 上執行。它使系統能夠以有效的方式處理圖形。

GPU 將具有獨立的記憶體，並且會同時執行一小部分程式碼的多個副本。GPU 處理其本地記憶體中的所有資料，而不是中央記憶體。因此，需要由 GPU 處理的資料應載入/複製到 GPU 記憶體中，然後進行處理。

在具有上述架構的系統中，應減少 CPU 和 GPU 之間的通訊開銷以實現 3D 程式的更快處理。為此，我們必須複製所有資料並將其保留在 GPU 上，而不是反覆與 GPU 通訊。

支援的瀏覽器

下表顯示了支援 WebGL 的瀏覽器列表 -

網路瀏覽器

瀏覽器名稱	版本	支援
Internet Explorer	11 及以上	完全支援
Google Chrome	39 及以上	完全支援
Safari	8	完全支援
Firefox	36 及以上	部分支援
Opera	27 及以上	部分支援

移動瀏覽器

瀏覽器名稱	版本	支援
Chrome for Android	42	部分支援
Android 瀏覽器	40	部分支援
IOS Safari	8.3	完全支援
Opera Mini	8	不支援
Blackberry 瀏覽器	10	完全支援
IE 移動版	10	部分支援

WebGL 的優點

以下是使用 WebGL 的優點 -

JavaScript 程式設計 - WebGL 應用程式是用 JavaScript 編寫的。使用這些應用程式，您可以直接與 HTML 文件的其他元素進行互動。您還可以使用其他 JavaScript 庫（例如 JQuery）和 HTML 技術來豐富 WebGL 應用程式。
移動瀏覽器支援度不斷提高 - WebGL 還支援 iOS safari、Android 瀏覽器和 Chrome for Android 等移動瀏覽器。
開源 - WebGL 是開源的。您可以訪問庫的原始碼並瞭解其工作原理以及開發方式。
無需編譯 - JavaScript 是一種半程式設計半 HTML 元件。要執行此指令碼，無需編譯檔案。相反，您可以使用任何瀏覽器直接開啟檔案並檢查結果。由於 WebGL 應用程式是使用 JavaScript 開發的，因此也無需編譯 WebGL 應用程式。
自動記憶體管理 - JavaScript 支援自動記憶體管理。無需手動分配記憶體。WebGL 繼承了 JavaScript 的此特性。
易於設定 - 由於 WebGL 整合在 HTML 5 中，因此無需進行其他設定。要編寫 WebGL 應用程式，您只需要一個文字編輯器和一個 Web 瀏覽器。

環境設定

無需為 WebGL 設定不同的環境。支援 WebGL 的瀏覽器都有自己的內建 WebGL 設定。

列印頁面