WebGLRenderingContext.getShaderSource() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.getShaderSource(shader)

Beschreibung

getShaderSource() liest den GLSL-Quelltext aus, den man vorher mit gl.shaderSource(shader, source) an einen Shader übergeben hat. Die Methode gibt den Text so zurück, wie er gespeichert wurde. Ob der Shader schon kompiliert ist oder ob das Kompilieren geklappt hat, spielt dafür keine Rolle.

Praktisch nützlich ist das vor allem beim Debuggen. Schlägt compileShader() fehl, liefert getShaderInfoLog() Fehlermeldungen mit Zeilennummern. Mit getShaderSource() kann man den Quelltext daneben mit Zeilennummern ausgeben und so die fehlerhafte Zeile schnell finden. Auch Werkzeuge wie Shader-Inspektoren oder Hot-Reload-Mechanismen nutzen die Methode, um den aktuell hinterlegten Quelltext zu prüfen.

Wurde für den Shader noch kein Quelltext gesetzt, liefert die Methode eine leere Zeichenkette. Bei einem Fehler, zum Beispiel wenn der Shader schon gelöscht ist oder der Kontext verloren ging, gibt sie null zurück. Die Methode gibt es genauso auch in WebGL2RenderingContext.

Parameter

Name	Typ	Default	Beschreibung
$shader Pflicht	WebGLShader		Das `WebGLShader`-Objekt, dessen Quelltext abgefragt werden soll. Es muss mit demselben Kontext erzeugt worden sein.

Rückgabewert

Typ

string | null

Beschreibung

Der hinterlegte GLSL-Quelltext als Zeichenkette. Ist noch keine Quelle gesetzt, eine leere Zeichenkette. Bei einem Fehler (etwa ungültiger Shader oder verlorener Kontext) null.

Beispiele

Quelltext setzen und wieder auslesen

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

const vertexSrc = `attribute vec4 aPosition;
void main() {
  gl_Position = aPosition;
}`;

const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, vertexSrc);

const source = gl.getShaderSource(shader);
console.log(source === vertexSrc);

true

Kompilierfehler mit nummerierten Quellzeilen ausgeben

const compileShader = (gl, type, src) => {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, src);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const numbered = gl.getShaderSource(shader)
      .split('\n')
      .map((line, i) => `${String(i + 1).padStart(3)}: ${line}`)
      .join('\n');
    console.error(`Shader-Fehler:\n${gl.getShaderInfoLog(shader)}\n${numbered}`);
    gl.deleteShader(shader);
    return null;
  }
  return shader;
};

const gl = document.createElement('canvas').getContext('webgl');
// Absichtlicher Fehler: Semikolon fehlt
compileShader(gl, gl.FRAGMENT_SHADER, `precision mediump float;\nvoid main() {\n  gl_FragColor = vec4(1.0)\n}`);

Shader-Fehler: ERROR: 0:4: '}' : syntax error 1: precision mediump float; 2: void main() { 3: gl_FragColor = vec4(1.0) 4: }

Leere Quelle bei neuem Shader

const gl = document.createElement('canvas').getContext('webgl');
const shader = gl.createShader(gl.FRAGMENT_SHADER);

console.log(JSON.stringify(gl.getShaderSource(shader)));

""

// Wichtig · Fallstricke

Die Methode gibt den ursprünglichen Quelltext zurück, nicht den Code, den der Treiber intern daraus erzeugt. Den übersetzten Quelltext (z. B. HLSL über ANGLE) liefert die Erweiterung WEBGL_debug_shaders mit getTranslatedShaderSource().
Nach gl.deleteShader() oder bei verlorenem Kontext (webglcontextlost) kann null zurückkommen. Deshalb vor Aufrufen wie .split() auf null prüfen.
Die Fehlermeldungen in getShaderInfoLog() unterscheiden sich je nach Browser und Treiber. Zeilennummern können abweichen, wenn Präprozessor-Direktiven wie #version 300 es in der ersten Zeile stehen.
Ein Shader aus einem anderen Kontext führt zum Fehler INVALID_OPERATION.
Die Methode wird in allen aktuellen Browsern mit WebGL 1 und WebGL 2 unterstützt.

Siehe auch

WebGLRenderingContext.shaderSource() WebGLRenderingContext.compileShader() WebGLRenderingContext.getShaderInfoLog() WebGLRenderingContext.getShaderParameter() WebGLRenderingContext.createShader() WebGLShader