WebGL: 網頁的 2D 和 3D 圖形

注意：此功能在 Web Workers 中可用。

WebGL (Web 圖形庫) 是一個 JavaScript API，用於在任何相容的 Web 瀏覽器中渲染高效能的互動式 3D 和 2D 圖形，而無需使用外掛。WebGL 透過引入一個與 OpenGL ES 2.0 高度相容的 API 來實現這一目標，該 API 可在 HTML 的 <canvas> 元素中使用。這種相容性使得 API 能夠利用使用者裝置提供的硬體圖形加速。

所有現代瀏覽器都支援 WebGL（請參閱下面的相容性表）；但是，使用者的裝置也必須具有支援這些功能的硬體。

WebGL 2 API 引入了對 OpenGL ES 3.0 功能集的大部分支援；它透過 WebGL2RenderingContext 介面提供。

Canvas API 也使用 <canvas> 元素在網頁上進行 2D 圖形渲染。

參考

標準介面

擴充套件

事件

常量和型別

WebGL 2

WebGL 2 是 WebGL 的一個重大更新，透過 WebGL2RenderingContext 介面提供。它基於 OpenGL ES 3.0，新功能包括：

3D 紋理,
取樣器物件,
統一緩衝區物件,
同步物件,
查詢物件,
變換反饋物件,
現已成為 WebGL 2 核心的推廣擴充套件：頂點陣列物件、例項化、多渲染目標、片段深度。

還可以參閱博文 "WebGL 2 lands in Firefox" 以及 webglsamples.org/WebGL2Samples 中的一些演示。

指南和教程

下面，您將找到各種指南，幫助您學習 WebGL 概念，以及提供分步教程和示例的教程。

指南

WebGL 中的資料: 關於編寫 WebGL 程式碼時使用的變數、緩衝區和其他資料型別的指南。
WebGL 最佳實踐: 有關如何提高 WebGL 內容的質量、效能和可靠性的技巧和建議。
使用擴充套件: 使用 WebGL 擴充套件的指南。

教程

WebGL 教程: WebGL 核心概念的入門指南。如果您沒有 WebGL 經驗，這是一個很好的起點。

示例

一個基本的 2D WebGL 動畫示例: 此示例演示了單色形狀的簡單動畫。所討論的主題包括適應縱橫比差異、用於從多個著色器集合構建著色器程式的函式，以及 WebGL 繪圖的基礎知識。
WebGL 示例: 一系列帶有簡短說明的即時示例，展示了 WebGL 的概念和功能。示例按主題和難度排序，涵蓋 WebGL 渲染上下文、著色器程式設計、紋理、幾何、使用者互動等。

高階教程

壓縮紋理格式: 如何啟用和使用壓縮紋理格式以獲得更好的記憶體效能。
WebGL 模型檢視投影: 詳細解釋了通常用於表示 3D 物件檢視的三個核心矩陣：模型、檢視和投影矩陣。
用於 Web 的矩陣數學: 關於 3D 變換矩陣如何工作以及如何在 Web 上使用它們的有用指南 — 既用於 WebGL 計算，也用於 CSS 變換。

資源

Khronos WebGL 網站 Khronos Group 的 WebGL 主網站。
WebGL 基礎知識一個基礎的 WebGL 基礎教程。
原生 WebGL：WebGL 入門 Nick Desaulniers 的演講，介紹了 WebGL 的基礎知識。
WebGL Academy 一個 HTML/JavaScript 編輯器，提供學習 WebGL 程式設計基礎知識的教程。
WebGL 統計一個提供不同平臺上瀏覽器 WebGL 功能統計資訊的網站。

庫

three.js 是一個開源的、功能齊全的 3D WebGL 庫。
Babylon.js 是一個功能強大、簡單且開源的遊戲和 3D 渲染引擎，封裝在一個友好的 JavaScript 框架中。
Pixi.js 是一個快速、開源的 2D WebGL 渲染器。
Phaser 是一個快速、免費且有趣的開源框架，用於 Canvas 和 WebGL 驅動的瀏覽器遊戲。
PlayCanvas 是一個開源遊戲引擎。
glMatrix 是一個用於高效能 WebGL 應用程式的 JavaScript 矩陣和向量庫。
twgl 是一個用於簡化 WebGL 程式設計的庫。
RedGL 是一個開源的 3D WebGL 庫。
vtk.js 是一個用於在瀏覽器中進行科學視覺化的 JavaScript 庫。
webgl-lint 將幫助您查詢 WebGL 程式碼中的錯誤並提供有用資訊。

規範

規範
WebGL 規範 # 5.14
WebGL 2.0 規範 # 3.7

瀏覽器相容性

api.WebGLRenderingContext

api.WebGL2RenderingContext

相容性說明

除了瀏覽器，GPU 本身也需要支援該功能。因此，例如，S3 紋理壓縮 (S3TC) 僅在 Tegra 系列平板電腦上可用。大多數瀏覽器透過 webgl 上下文名稱提供 WebGL 上下文，但舊版本還需要 experimental-webgl。此外，即將推出的 WebGL 2 完全向後相容，並且將擁有 webgl2 上下文名稱。

Gecko 注意事項

WebGL 除錯和測試

Firefox 提供了兩個可用的首選項，允許您為了測試目的控制 WebGL 的功能。

webgl.min_capability_mode: 一個布林屬性，當設定為 true 時，將啟用最低功能模式。在此模式下，WebGL 配置為僅支援 WebGL 規範所需的最低功能集和能力。這可以確保您的 WebGL 程式碼在任何裝置或瀏覽器上都能正常執行，無論其功能如何。預設值為 false。
webgl.disable_extensions: 一個布林屬性，當設定為 true 時，將停用所有 WebGL 擴充套件。預設值為 false。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 15 日，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤