WebGLShader

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist inWeb Workers verfügbar.

DerWebGLShader ist Teil derWebGL-API und kann entweder ein Vertex- oder ein Fragment-Shader sein. EinWebGLProgram erfordert beide Shader-Typen.

Beschreibung

Um einenWebGLShader zu erstellen, verwenden SieWebGLRenderingContext.createShader, dann binden Sie den GLSL-Quellcode mitWebGLRenderingContext.shaderSource() an, und rufen Sie schließlichWebGLRenderingContext.compileShader() auf, um den Shader zu vervollständigen und zu kompilieren. Zu diesem Zeitpunkt befindet sich derWebGLShader noch nicht in einer verwendbaren Form und muss noch an einWebGLProgram 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 unterWebGLProgram.

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 aboveconst 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 aboveconst fragmentShader = createShader(  gl,  fragmentShaderSource,  gl.FRAGMENT_SHADER,);

Spezifikationen

Specification
WebGL Specification # 5.8

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

Movatterモバイル変換