WebGLProgram

Baseline 廣泛可用 *

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

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

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

WebGLProgram 是 WebGL API 的一部分，它由兩個已編譯的 WebGLShader 組成，一個頂點著色器和一個片段著色器（都用 GLSL 編寫）。

要建立 WebGLProgram，請呼叫 GL 上下文的 createProgram() 函式。在透過 attachShader() 附加著色器程式後，您將它們連結成一個可用的程式。下面程式碼所示。

const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw new Error(`Could not compile WebGL program. \n\n${info}`);
}

有關建立上述示例中的 vertexShader 和 fragmentShader 的資訊，請參閱 WebGLShader。

示例

使用程式

要實際使用程式完成一些工作，步驟包括指示 GPU 使用該程式、繫結相應的資料和配置選項，最後將內容繪製到螢幕上。

// Use the program
gl.useProgram(program);

// Bind existing attribute data
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);

刪除程式

如果在連結程式時出錯，或者您希望刪除現有程式，只需執行 WebGLRenderingContext.deleteProgram() 即可。這將釋放已連結程式的記憶體。

gl.deleteProgram(program);

規範

規範
WebGL 規範 # 5.6

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年5月23日，作者是 MDN 貢獻者。

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