WebGLShader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Der WebGLShader ist Teil der WebGL-API und kann entweder ein Vertex- oder ein Fragment-Shader sein. Ein WebGLProgram erfordert beide Typen von Shadern.

Beschreibung

Um einen WebGLShader zu erstellen, verwenden Sie WebGLRenderingContext.createShader, dann verbinden Sie den GLSL-Quellcode mit WebGLRenderingContext.shaderSource(), und schließlich rufen Sie WebGLRenderingContext.compileShader() auf, um den Shader fertigzustellen und zu kompilieren. An diesem Punkt ist der WebGLShader noch nicht in einer verwendbaren Form und muss noch an ein WebGLProgram angehängt werden.

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;
}

Siehe WebGLProgram für Informationen zum Anhängen der Shader.

Beispiele

Erstellen eines Vertex-Shaders

Beachten Sie, dass es viele andere Strategien zum Schreiben und Zugreifen auf Quellcode-Strings für Shader gibt. Diese Beispiele dienen nur zu Illustrationszwecken.

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

Erstellen eines Fragment-Shaders

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

Spezifikationen

Specification
WebGL Specification # 5.8

Browser-Kompatibilität

BCD tables only load in the browser