WebGLProgram

Das WebGLProgram ist ein Teil der WebGL API und ist eine Kombination aus zwei kompilierten WebGLShader (en-US)n, 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 (en-US) 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() (en-US) 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! (en-US)
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