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

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
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