WebGLShader

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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

Beschreibung

Um einen WebGLShader zu erstellen, verwenden Sie WebGLRenderingContext.createShader, dann binden Sie den GLSL-Quellcode mit WebGLRenderingContext.shaderSource() an, und rufen Sie schließlich WebGLRenderingContext.compileShader() auf, um den Shader zu vervollständigen und zu kompilieren. Zu diesem Zeitpunkt befindet sich 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 new Error(`Could not compile WebGL program. \n\n${info}`);
  }
  return shader;
}

Weitere Informationen zum Anhängen der Shader finden Sie unter WebGLProgram.

Beispiele

Erstellen eines Vertex-Shaders

Beachten Sie, dass es viele andere Strategien zum Schreiben und Zugreifen auf Shader-Quellcodes 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() {
  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,
);

Spezifikationen

Spezifikation
WebGL Specification # 5.8

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden