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.
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.
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).