WebGLProgram

Das WebGLProgram ist ein Teil der WebGL API und ist eine Kombination aus zwei kompilierten WebGLShadern, bestehend aus einem Vertex-Shader und einem Fragment-Shader (beide in GLSL geschrieben). Diese werden dann zu einem benutzbaren Programm zusammen gelinkt.

var program = gl.createProgram();

// Bereits existierende Shader hinzufügen
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
  var info = gl.getProgramInfoLog(program);
  throw "WebGL-Programm konnte nicht kompiliert werden. \n\n" + info;
}

Für weitere Informationen über das Erstellen von vertexShader und fragmentShader, lese dir WebGLShader durch.

Beispiele

Das Program benutzen

Hier wird zu erst der GPU mit geteilt, dass sie das Programm benutzen soll. Danach werden die benötigten Daten und Konfigurationen vorgenommen und zuletzt wird etwas auf den Bildschirm gezeichnet.

// Das Programm benutzen
gl.useProgram(program);

// Bereits existierende Attribute binden
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Ein einzelnes Dreieck zeichnen
gl.drawArrays(gl.TRIANGLES, 0, 3);

Das Programm löschen

Falls es bei dem Linken des Programms zu fehlern kommt oder falls du ein bereits erstelltes Programm einfach nur löschen möchtest, dann kannst du einfach WebGLRenderingContext.deleteProgram() ausführen. Dies löscht den Speicher des gelinkten Programms.

gl.deleteProgram(program);

Spezifikationen

Spezifikation Status Kommentar
WebGL 1.0
Die Definition von 'WebGLProgram' in dieser Spezifikation.
Empfehlung Erstmalige Definition

Browser-Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 4.0 (2.0) 11 12 5.1
Available in workers Nicht unterstützt 44 (44) [1] Nicht unterstützt Nicht unterstützt Nicht unterstützt
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 25 (Ja) ? 12 8.1
Available in workers Nicht unterstützt Nicht unterstützt 44.0 (44) [1] Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

Weiterführendes

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: firefligher
 Zuletzt aktualisiert von: firefligher,