WebGLRenderingContext

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

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

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

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

要獲取 WebGL 上下文以進行 2D 和/或 3D 圖形渲染，請在 <canvas> 元素上呼叫 getContext()，並將 "webgl" 作為引數。

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

一旦有了 canvas 的 WebGL 渲染上下文，就可以在其中進行渲染。WebGL 教程提供了更多關於如何開始使用 WebGL 的資訊、示例和資源。

如果需要 WebGL 2.0 上下文，請參閱 WebGL2RenderingContext；它提供了對 OpenGL ES 3.0 圖形實現的訪問。

常量

請參閱 WebGL 常量頁面。

WebGL 上下文

以下屬性和方法提供有關 WebGL 上下文的通用資訊和功能。

WebGLRenderingContext.canvas: 對 HTMLCanvasElement 的只讀反向引用。如果未與 <canvas> 元素關聯，則可能為 null。
WebGLRenderingContext.drawingBufferWidth: 當前繪圖緩衝的只讀寬度。應與與此上下文關聯的 canvas 元素的寬度匹配。
WebGLRenderingContext.drawingBufferHeight: 當前繪圖緩衝的只讀高度。應與與此上下文關聯的 canvas 元素的高度匹配。
WebGLRenderingContext.getContextAttributes(): 返回包含實際上下文引數的 WebGLContextAttributes 物件。如果上下文丟失，則可能返回 null。
WebGLRenderingContext.isContextLost(): 如果上下文丟失，則返回 true，否則返回 false。
WebGLRenderingContext.makeXRCompatible(): 確保上下文與使用者的 XR 硬體相容，如有必要，將透過新的配置重新建立上下文。這可用於啟動使用標準 2D 呈現的應用程式，然後過渡到以後使用 VR 或 AR 模式。

檢視和裁剪

WebGLRenderingContext.scissor(): 定義剪裁框。
WebGLRenderingContext.viewport(): 設定視口。

狀態資訊

WebGLRenderingContext.activeTexture(): 選擇活動的紋理單元。
WebGLRenderingContext.blendColor(): 設定源和目標混合因子。
WebGLRenderingContext.blendEquation(): 將 RGB 混合方程和 alpha 混合方程都設定為一個方程。
WebGLRenderingContext.blendEquationSeparate(): 分別設定 RGB 混合方程和 alpha 混合方程。
WebGLRenderingContext.blendFunc(): 定義用於混合畫素算術的函式。
WebGLRenderingContext.blendFuncSeparate(): 分別定義用於混合 RGB 和 alpha 分量的畫素算術的函式。
WebGLRenderingContext.clearColor(): 指定清除顏色緩衝區時使用的顏色值。
WebGLRenderingContext.clearDepth(): 指定清除深度緩衝區時使用的深度值。
WebGLRenderingContext.clearStencil(): 指定清除模板緩衝區時使用的模板值。
WebGLRenderingContext.colorMask(): 設定在繪製或渲染到 WebGLFramebuffer 時要啟用或停用的顏色分量。
WebGLRenderingContext.cullFace(): 指定是否可以剔除正面和/或背面多邊形。
WebGLRenderingContext.depthFunc(): 指定一個函式，用於比較傳入畫素深度與當前深度緩衝區值。
WebGLRenderingContext.depthMask(): 設定是否啟用或停用寫入深度緩衝區。
WebGLRenderingContext.depthRange(): 指定從歸一化裝置座標到視窗或視口座標的深度範圍對映。
WebGLRenderingContext.disable(): 停用此上下文的特定 WebGL 功能。
WebGLRenderingContext.enable(): 啟用此上下文的特定 WebGL 功能。
WebGLRenderingContext.frontFace(): 透過設定環繞方向來指定多邊形是正面還是背面。
WebGLRenderingContext.getParameter(): 返回傳遞引數名稱的值。
WebGLRenderingContext.getError(): 返回錯誤資訊。
WebGLRenderingContext.hint(): 指定某些行為的提示。這些提示的解釋取決於實現。
WebGLRenderingContext.isEnabled(): 測試此上下文是否啟用了特定的 WebGL 功能。
WebGLRenderingContext.lineWidth(): 設定柵格化線的線寬。
WebGLRenderingContext.pixelStorei(): 指定畫素儲存模式。
WebGLRenderingContext.polygonOffset(): 指定用於計算深度值的比例因子和單位。
WebGLRenderingContext.sampleCoverage(): 指定用於抗鋸齒效果的多樣本覆蓋引數。
WebGLRenderingContext.stencilFunc(): 設定模板測試的正面和背面函式以及參考值。
WebGLRenderingContext.stencilFuncSeparate(): 分別設定模板測試的正面和/或背面函式以及參考值。
WebGLRenderingContext.stencilMask(): 控制模板平面中單個位的正面和背面寫入的啟用和停用。
WebGLRenderingContext.stencilMaskSeparate(): 控制模板平面中單個位的正面和/或背面寫入的啟用和停用。
WebGLRenderingContext.stencilOp(): 設定正面和背面模板測試操作。
WebGLRenderingContext.stencilOpSeparate(): 設定正面和/或背面模板測試操作。