WebGL2RenderingContext

Baseline 廣泛可用 *

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 2021 年 9 月起，所有瀏覽器均已支援此功能。

* 此特性的某些部分可能存在不同級別的支援。

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

WebGL2RenderingContext 介面為 HTML <canvas> 元素的繪圖表面提供了 OpenGL ES 3.0 渲染上下文。

要獲取此介面的物件，請在 <canvas> 元素上呼叫 getContext()，並將 "webgl2" 作為引數。

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl2");

注意： WebGL 2 是 WebGL 1 的擴充套件。WebGL2RenderingContext 介面實現了 WebGLRenderingContext 介面的所有成員。在 WebGL 2 上下文中，WebGL 1 上下文的一些方法可以接受附加值。您會在 WebGL 1 參考頁面上找到這些資訊。

有關如何開始使用 WebGL 的更多資訊、示例和資源，請參閱 WebGL 教程。

常量

請參閱 WebGL 常量頁面。

狀態資訊

WebGL2RenderingContext.getIndexedParameter(): 返回給定 target 的索引值。

緩衝區

WebGL2RenderingContext.bufferData(): 初始化並建立緩衝物件的資料儲存。
WebGL2RenderingContext.bufferSubData(): 更新緩衝物件資料儲存的子集。
WebGL2RenderingContext.copyBufferSubData(): 將一個緩衝的部分資料複製到另一個緩衝。
WebGL2RenderingContext.getBufferSubData(): 從緩衝讀取資料並將其寫入 ArrayBuffer 或 SharedArrayBuffer。

幀緩衝

WebGL2RenderingContext.blitFramebuffer(): 將畫素塊從讀取幀緩衝傳輸到繪製幀緩衝。
WebGL2RenderingContext.framebufferTextureLayer(): 將紋理的單個圖層附加到幀緩衝。
WebGL2RenderingContext.invalidateFramebuffer(): 使幀緩衝中的附件內容無效。
WebGL2RenderingContext.invalidateSubFramebuffer(): 使幀緩衝附件的部分內容無效。
WebGL2RenderingContext.readBuffer(): 選擇一個顏色緩衝作為畫素源。

渲染緩衝

WebGL2RenderingContext.getInternalformatParameter(): 返回關於內部格式的實現相關支援的資訊。
WebGL2RenderingContext.renderbufferStorageMultisample(): 建立並初始化渲染緩衝物件的資料儲存，並允許指定使用的樣本數。

紋理

WebGL2RenderingContext.texStorage2D(): 指定二維紋理儲存的所有層級。
WebGL2RenderingContext.texStorage3D(): 指定三維紋理或二維陣列紋理的所有層級。
WebGL2RenderingContext.texImage3D(): 指定三維紋理影像。
WebGL2RenderingContext.texSubImage3D(): 指定當前 3D 紋理的子矩形。
WebGL2RenderingContext.copyTexSubImage3D(): 將當前 WebGLFramebuffer 的畫素複製到一個現有的 3D 紋理子影像中。
WebGL2RenderingContext.compressedTexImage3D: 以壓縮格式指定三維紋理影像。
WebGL2RenderingContext.compressedTexSubImage3D(): 以壓縮格式指定紋理影像的三維子矩形。

程式和著色器

WebGL2RenderingContext.getFragDataLocation(): 返回顏色編號與使用者定義的 varying 輸出變數的繫結。

統一變數和屬性

WebGL2RenderingContext.uniform[1234][uif][v](): 指定統一變數值的函式。
WebGL2RenderingContext.uniformMatrix[234]x[234]fv(): 指定統一變數的矩陣值的函式。
WebGL2RenderingContext.vertexAttribI4[u]i[v](): 指定通用頂點屬性的整數值的函式。
WebGL2RenderingContext.vertexAttribIPointer(): 指定頂點屬性陣列中整數資料格式和位置。

顏色空間

WebGL2RenderingContext.drawingBufferColorSpace: 指定 WebGL 繪製緩衝的顏色空間。
WebGL2RenderingContext.unpackColorSpace: 指定匯入紋理時要轉換到的顏色空間。

繪製緩衝

WebGL2RenderingContext.vertexAttribDivisor(): 修改使用 gl.drawArraysInstanced() 和 gl.drawElementsInstanced() 渲染多個圖元例項時通用頂點屬性前進的速率。
WebGL2RenderingContext.drawArraysInstanced(): 從陣列資料渲染圖元。此外，它還可以執行指定範圍元素的多個例項。
WebGL2RenderingContext.drawElementsInstanced(): 從陣列資料渲染圖元。此外，它還可以執行指定元素集合的多個例項。
WebGL2RenderingContext.drawRangeElements(): 在給定範圍內從陣列資料渲染圖元。
WebGL2RenderingContext.drawBuffers(): 指定要繪製到的顏色緩衝列表。
WebGL2RenderingContext.clearBuffer[fiuv](): 清除當前繫結幀緩衝中的緩衝。

查詢物件

處理 WebGLQuery 物件的函式。

WebGL2RenderingContext.createQuery(): 建立一個新的 WebGLQuery 物件。
WebGL2RenderingContext.deleteQuery(): 刪除給定的 WebGLQuery 物件。
WebGL2RenderingContext.isQuery(): 如果給定的物件是有效的 WebGLQuery 物件，則返回 true。
WebGL2RenderingContext.beginQuery(): 開始一個非同步查詢。
WebGL2RenderingContext.endQuery(): 標記非同步查詢的結束。
WebGL2RenderingContext.getQuery(): 返回給定目標的 WebGLQuery 物件。
WebGL2RenderingContext.getQueryParameter(): 返回關於查詢的資訊。

取樣器物件

WebGL2RenderingContext.createSampler(): 建立一個新的 WebGLSampler 物件。
WebGL2RenderingContext.deleteSampler(): 刪除給定的 WebGLSampler 物件。
WebGL2RenderingContext.bindSampler(): 將給定的 WebGLSampler 繫結到紋理單元。
WebGL2RenderingContext.isSampler(): 如果給定的物件是有效的 WebGLSampler 物件，則返回 true。
WebGL2RenderingContext.samplerParameter[if](): 設定取樣器引數。
WebGL2RenderingContext.getSamplerParameter(): 返回取樣器引數資訊。

同步物件

WebGL2RenderingContext.fenceSync(): 建立一個新的 WebGLSync 物件，並將其插入 GL 命令流。
WebGL2RenderingContext.isSync(): 如果傳入的物件是有效的 WebGLSync 物件，則返回 true。
WebGL2RenderingContext.deleteSync(): 刪除給定的 WebGLSync 物件。
WebGL2RenderingContext.clientWaitSync(): 阻塞並等待 WebGLSync 物件被觸發或達到給定的超時時間。
WebGL2RenderingContext.waitSync(): 立即返回，但在 GL 伺服器端等待，直到給定的 WebGLSync 物件被觸發。
WebGL2RenderingContext.getSyncParameter(): 返回 WebGLSync 物件的引數資訊。

變換反饋

WebGL2RenderingContext.createTransformFeedback(): 建立並初始化 WebGLTransformFeedback 物件。
WebGL2RenderingContext.deleteTransformFeedback(): 刪除給定的 WebGLTransformFeedback 物件。
WebGL2RenderingContext.isTransformFeedback(): 如果傳入的物件是有效的 WebGLTransformFeedback 物件，則返回 true。
WebGL2RenderingContext.bindTransformFeedback(): 將給定的 WebGLTransformFeedback 物件繫結到當前的 GL 狀態。
WebGL2RenderingContext.beginTransformFeedback(): 開始一個變換反饋操作。
WebGL2RenderingContext.endTransformFeedback(): 結束一個變換反饋操作。
WebGL2RenderingContext.transformFeedbackVaryings(): 指定要在 WebGLTransformFeedback 緩衝區中記錄的值。
WebGL2RenderingContext.getTransformFeedbackVarying(): 從 WebGLTransformFeedback 緩衝區獲取 varying 變數的資訊。
WebGL2RenderingContext.pauseTransformFeedback(): 暫停一個變換反饋操作。
WebGL2RenderingContext.resumeTransformFeedback(): 恢復一個變換反饋操作。

統一緩衝物件

WebGL2RenderingContext.bindBufferBase(): 將給定的 WebGLBuffer 繫結到指定的繫結點 (target) 和索引 (index)。
WebGL2RenderingContext.bindBufferRange(): 將給定的 WebGLBuffer 的一個範圍繫結到指定的繫結點 (target) 和索引 (index)。
WebGL2RenderingContext.getUniformIndices(): 檢索 WebGLProgram 中一組 uniform 的索引。
WebGL2RenderingContext.getActiveUniforms(): 檢索 WebGLProgram 中活動 uniform 的資訊。
WebGL2RenderingContext.getUniformBlockIndex(): 檢索 WebGLProgram 中 uniform 塊的索引。
WebGL2RenderingContext.getActiveUniformBlockParameter(): 檢索 WebGLProgram 中活動 uniform 塊的資訊。
WebGL2RenderingContext.getActiveUniformBlockName(): 檢索 WebGLProgram 中指定索引處的活動 uniform 塊的名稱。
WebGL2RenderingContext.uniformBlockBinding(): 為活動 uniform 塊分配繫結點。

頂點陣列物件

處理 WebGLVertexArrayObject (VAO) 物件的函式。

WebGL2RenderingContext.createVertexArray(): 建立一個新的 WebGLVertexArrayObject。
WebGL2RenderingContext.deleteVertexArray(): 刪除給定的 WebGLVertexArrayObject。
WebGL2RenderingContext.isVertexArray(): 如果給定的物件是有效的 WebGLVertexArrayObject，則返回 true。
WebGL2RenderingContext.bindVertexArray(): 將給定的 WebGLVertexArrayObject 繫結到緩衝區。

規範

規範
WebGL 2.0 規範 # 3.7

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2024年10月16日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題