WebGLShader

基线 广泛可用

此功能已确立，并在许多设备和浏览器版本中运行。它已在浏览器中可用，自 2015 年 7 月.

WebGLShader 是 WebGL API 的一部分，可以是顶点着色器或片段着色器。一个 WebGLProgram 需要两种类型的着色器。

WebGLObject WebGLShader

描述

要创建 WebGLShader，请使用 WebGLRenderingContext.createShader，然后使用 WebGLRenderingContext.shaderSource() 连接 GLSL 源代码，最后调用 WebGLRenderingContext.compileShader() 完成并编译着色器。此时，WebGLShader 仍然不可用，必须附加到 WebGLProgram。

js
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 `Could not compile WebGL program. \n\n${info}`;
  }
  return shader;
}

有关附加着色器的信息，请参阅 WebGLProgram。

示例

创建顶点着色器

请注意，还有许多其他编写和访问着色器源代码字符串的策略。这些示例仅用于说明目的。

js
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);

创建片段着色器

js
const fragmentShaderSource =
  "void main() {\n" + "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

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

规范

规范
WebGL 规范
# 5.8

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅