Meine Werkzeuge
Namensräume
Varianten

WebGL Jumpstart

Aus indiedev
Wechseln zu: Navigation, Suche
WebGL Jumpstart
Erste Schritte
Thumbnail WebGL Jumpstart 01.png
Autor Astrorenales
Programmier­sprache JavaScript
Kategorie WebGL
Diskussion Thread im Forum
Lizenz indiedev article license


Inhaltsverzeichnis

Einleitung

Seit der Einführung von WebGL 2011, hat sich viel im Bezug auf Browserunterstützung und API-Möglichkeiten für Spiele getan. [1] Aus diesem Grund möchte ich euch nun einen kleinen Einblick in die Welt von WebGL bieten. Sei es um schnell einen Prototypen für eine OpenGL-App zu entwickeln, oder ein vollwertiges WebGL-Spiel auf die Beine zu stellen: Der Browser von heute hat einiges zu bieten. Für dieses Tutorial werden einfache html und JavaScript Kenntnisse vorausgesetzt. Einzelne Details werden aber dennoch in Verbindung mit WebGL erklärt.

Das Inhaltsverzeichnis

Ich werde in diesem Artikel eine Art Inhaltsverzeichnis pflegen, das auf die Folgeartikel verweisen wird. Dieses Inhaltsverzeichnis ermöglicht die schnelle und einfache Navigation zwischen den Artikeln und man kann leicht einzelne Themengebiete wiederfinden und auch Dinge, die man bereits beherrscht überspringen.

Voraussetzungen

Um eine WebGL-Anwendung zu entwickeln wird, wie für Internetseiten im Allgemeinen, nicht viel benötigt. Es reicht ein einfacher Texteditor wie ihn jedes Betriebssystem zur Verfügung stellt und ein WebGL fähiger Browser. Da aber Programme wie Notepad nicht besonders komfortabel sind, empfehle ich Notepad2, Notepad++, oder wenn es gleich eine IDE sein soll IntelliJ Idea Community Edition. Dieses Tutorial wird allerdings ohne IDE auskommen und entsprechend erläutert.

Setup

Als erstes legen wir uns einen leeren Projektordner an und erstellen in diesem eine neue Textdatei mit dem Namen "index.html". Dies ist unsere kleine Internetseite in welcher die WebGL-Anwendung laufen wird. Nun öffnen wir diese Datei mit dem Texteditor unserer Wahl und schreiben ein typisches html5 Gerüst.


<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>WebGL Jumpstart</title>
</head>
<body>

</body>
</html>

Anschließend können wir diese Seite auch mit dem Browser öffnen und bei den folgenden Änderungen einfach aktualisieren. Bisher sieht man, außer dem Titel, noch nicht viel, doch das wird sich gleich ändern.

Das Canvas Element

Mit Html5 wurde unter anderem auch das Canvas-Element eingeführt. Dieses ermöglicht es per JavaScript in den Bereich des Elementes zu zeichnen. Dabei hat man die Möglichkeit zwischen 2D und 3D zu wählen, wobei man sich die 2D-Komponente so wie das Zeichnen in C# System.Drawing vorstellen kann. Und wie sicher schon vermutet, wird die 3D-Komponente über WebGL realisiert. Ein Canvas zu erstellen ist sehr einfach und straight forward, was wir nun auch bei unserer leeren Seite tun werden. Hierbei müssen wir dem Element eine feste Größe geben, um später diese Dimensionen für unsere Viewports und Matrizen verwenden zu können. Ebenfalls benötigt das Element eine id, damit es in JavaScript gefunden werden kann. Abschließend erhält es noch einen schwarzen Rahmen, um die Dimensionen zu Beginn besser sehen zu können.


[...]
<body>
  <canvas id="glcanvas" width="400" height="275" style="border:1px solid black">
  </canvas>
</body>
</html>

Vielleicht noch ein kleines, nettes Feature am Rande: In JavaScript kann man ein Canvas-Element auch dynamisch erstellen, ohne es in die html-Seite einzufügen. Dies eignet sich z.B. für das erstellen von prozeduralen Texturen. Man zeichnet etwas in das Canvas, nimmt die Pixeldaten und speichert sie in eine OpenGL-Textur. Anschließend kann das Canvas-Element wieder verworfen werden.

WebGL Context

Wie bei allen Grafikschnittstellen, sei es OpenGL oder DirectX, benötigen wir einen Context. Dieser ermöglicht es uns, über die angegebenen Parameter, mit der Grafikkarte zu kommunizieren. Bei normalen Desktopanwendungen müssen meist viele Parameter wie das Fenster-Handle übergeben werden. Bei WebGL funktioniert das Ganze etwas einfacher. Zuerst müssen wir unser zuvor definiertes Canvas-Element finden, damit WebGL später weiß wo es rendern soll. Über die Funktion "getElementById" können wir das ganz einfach über unsere definierte Id "glcanvas" erledigen. Folgend können wir mit dem Element-Objekt über die Funktion "getContext" unser WebGL-Context erstellen. Die Funktion benötigt dabei einen String-Parameter, welcher den Typ des gewünschten Context angibt. Wie zuvor beschrieben kann hier z.B. auch ein 2D-Context erstellt werden. In unserem Fall möchten wir aber "webgl". Es ist nun sicher verwunderlich, warum wir zwei verschiedene Möglichkeiten des String-Parameters ausprobieren. Dies geschieht aus dem Grund, dass die verschiedenen Browser unterschiedliche Parameter wollen. Mitlerweile wurde dies zwar auf "webgl" standardisiert, jedoch gibt es immer noch ältere Browserversionen, die andere Strings, wie z.B. "experimental-webgl", wollen. Hier nun das Ganze als Code:


[...]
</canvas>
<script>
window.onload = function () {
  var surface = window.document.getElementById("glcanvas");
  var gl = surface.getContext("experimental-webgl") || surface.getContext("webgl");
}
</script>
[...]

Den JavaScript-Code fügen wir entsprechend in ein "script"-Tag ein und rufen unseren Canvas-Code erst auf, wenn das Fenster fertig geladen wurde. Dies ist nötig, damit das zu findende Canvas-Element auch wirklich existiert, wenn wir danach suchen. Hierfür kann man ganz einfach eine Callback-Funktion auf "window.onload" nutzen.

Ein bunter Hintergrund

Ausgezeichnet, wir haben eine kleine Internetseite, finden unser Canvas und erstellen ein WebGL-Context. Allerdings ist unser Canvas immer noch weiß. Um zu überprüfen, ob es überhaupt funktioniert hat, wollen wir einfach mal den Hintergrund in WebGL löschen. Dies funktioniert wie bei OpenGL üblich, indem wir zuerst eine Farbe angeben und dann den ColorBuffer löschen. In WebGL werden all diese Funktionen über das Context-Objekt aufgerufen und auch alle Konstanten wie "COLOR_BUFFER_BIT" sind im Context-Objekt definiert. Den Code können wir einfach hinter die Zeile einfügen, in welcher wir unser Context erstellt haben:


gl.clearColor(0.7, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

Das Endergebnis

Wenn wir nun unsere Interseite im Browser aktualisieren, sehen wir wie unser Canvas mit dunkelroter Farbe gelöscht wird. Ausgezeichnet! Hier auch einmal das Endergebnis zum Vergleich:

Und hier noch einmal der ganze Code:


<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>WebGL Jumpstart</title>
</head>
<body>
  <canvas id="glcanvas" width="400" height="275" style="border:1px solid black"></canvas>
  <script>
  window.onload = function () {
    var surface = window.document.getElementById("glcanvas");
    var gl = surface.getContext("experimental-webgl") || surface.getContext("webgl");
    
    gl.clearColor(0.7, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
  </script>
</body>
</html>

Referenzen

  1. http://caniuse.com/#search=webgl Übersicht der WebGL Browser-Kompatibilität
Navigation
Tutorials und Artikel
Community Project
Werkzeuge