Einführung in WebGL

von 4 Mitwirkenden:

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Mit WebGL steht eine API zur Verfügung, die auf OpenGL ES 2.0 basiert, um 3D Rendering im HTML canvas Element zu ermöglichen. Die Unterstützung von WebGL ist in einer zukünftigen Version von Firefox geplant. Zum Testen kann ein Nightly oder Beta Build von Firefox heruntergeladen werden.

Hinweis: Falls WebGL nicht funktionieren sollte, stellen Sie sicher, dass "webgl.enabled_for_all_sites" auf true gesetzt ist. Diese Einstellung ist seit den Nightly-Builds vom 17. September 2010 standardmäßig aktiviert.

Dieser Artikel stellt eine Einführung in die Grundlagen von WebGL dar. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel versucht nicht OpenGL selbst zu verdeutlichen.

Vorbereitungen

Um WebGL benutzen zu können, wird als erstes ein canvas Element benötigt. Das folgende HTML-Markup legt eine canvas Zeichenfläche fest und setzt einen onload Eventhandler, der zur Initialisierung des WebGL-Kontextes notwendig ist:

<body onload="start()">

  <canvas id="glcanvas" width="640" height="480">
    Ihr Browser scheint das HTML5 <canvas> Element nicht zu unterstützen.
  </canvas>
</body>

Vorbereitung eines WebGL-Kontextes

Die start() Funktion wird aufgerufen nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.

var gl; // Globale Variable für den WebGl-Kontext

function start() {
  canvas = document.getElementById("glcanvas");

  gl = initWebGL(canvas);      // Initialisierung des WebGL Kontextes
  
  // Es geht nur weiter, wenn WebGl verfügbar ist.
  
  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);                // Setzt die Farbe auf Schwarz, vollständig sichtbar
    gl.enable(gl.DEPTH_TEST);                         // Aktiviere Tiefentest
    gl.depthFunc(gl.LEQUAL);                          // Nähere Objekte verdecken entferntere Objekte
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT) // Lösche alles, um die neue Farbe sichtbar zu machen
  }
}

Als erstes verschaffen wir uns Bezug zum canvas Element, in dem wir eine globale Variable namens canvas festlegen. Wenn nicht mehrmals Bezug zum canvas hergestellt wird, muss die Variable nicht unbedingt gespeichert werden.

Sobald wir den Bezug zum canvas haben, können wir die Funktion initWebGL() aufrufen. Diese Funktion werden wir vorübergehend definieren, um den WebGL-Kontext zu initialisieren.

Wenn der Kontext erfolgreich initialisiert wurde, ist gl eine Variable für den Kontext. In diesem Fall setzen wir clearColor auf Schwarz, dann löschen wir mit clearDepth den Kontext, damit die Schwarze Farbe in Erscheinung tritt. Jetzt kann der Kontext von Parametern konfiguriert werden. An dieser Stelle aktivieren wir den Tiefentest und legen fest, dass Objekte von den Objekten, die näher sind, verdeckt werden.

Herstellen eines WebGL-Kontextes

Die initWebGL() Funktion sieht so aus:

function initWebGL() {
  gl = null;
  
  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {
  }
  
  // Wenn wir keinen WebGl Kontext haben
  
  if (!gl) {
    alert("WebGL konnte nicht initialisiert werden.");
    gl = null;
  }

  return gl;
}

Um einen WebGL-Kontext für unser Canvas herzustellen, versuchen wir uns den Kontext "webgl" zu holen. Sollte das fehlschlagen, können wir versuchen "experimental-webgl" aufzurufen. Wenn das ebenfalls fehlschlägt, lassen wir den Benutzer mittels alert() wissen, dass keine Unterstützung für WebGL vorhanden ist. Jetzt ist gl entweder null (d.h. es ist kein WebGL-Kontext verfügbar) oder es ein Bezug vorhanden, den wir zum Rendering benutzen können.

Der Kontextname "experimental-webgl" ist ein temporärer Name für den Kontext, solange die Spezifikation noch in Entwicklung ist. Später wird "webgl" benutzt werden, wenn die Spezifikation fertig ist.

An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.

Das Live Beispiel anschauen (mit einem WebGL kompatiblen Browser).

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: xhallix, manni66, fscholz, teoli
Zuletzt aktualisiert von: xhallix,