WebGLShader

Baseline 廣泛可用 *

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

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

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

WebGLShader 是 WebGL API 的一部分，它可以是頂點著色器（vertex shader）或片段著色器（fragment shader）。一個 WebGLProgram 需要兩種型別的著色器。

描述

要建立一個 WebGLShader，請使用 WebGLRenderingContext.createShader，然後使用 WebGLRenderingContext.shaderSource() 關聯 GLSL 原始碼，最後呼叫 WebGLRenderingContext.compileShader() 來完成並編譯著色器。此時，WebGLShader 仍未處於可用狀態，必須將其附加到 WebGLProgram。

function createShader(gl, sourceCode, type) {
  // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw new Error(`Could not compile WebGL program. \n\n${info}`);
  }
  return shader;
}

有關附加著色器的資訊，請參閱 WebGLProgram。

示例

建立頂點著色器

請注意，編寫和訪問著色器原始碼字串有許多其他策略。這些示例僅用於說明目的。

const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  "  gl_Position = position;\n" +
  "}\n";

// Use the createShader function from the example above
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);

建立片段著色器

const fragmentShaderSource = `void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

// Use the createShader function from the example above
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT_SHADER,
);

規範

規範
WebGL 規範 # 5.8

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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