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 上查看此页面 • 报告此内容的问题