© Excellent backgrounds/Shutterstock.com
Java Magazin
Teil 1: WebGL via GWT für Browseranwendungen nutzbar machen

3-D-Welten erschaffen

Der Charme von PC-Spielen, in denen sich der Held durch Dungeons bewegt und Quests löst, verlagerte sich dank leistungsfähigerer Browser immer mehr ins Web. Die Entwicklung von 3-D-Umgebungen in Browsern war dabei fast so lang und abenteuerlich wie mancher Quest. Mit dem Erscheinen des zum HTML5-Standard gehörigen Canvas-Elements Ende 2009 und mit dem OpenGL-Ableger WebGL eröffnen 3-D-Welten im Webbrowser ganz neue Nutzerinteraktionen. In dieser zweiteiligen Reihe zeige ich Ihnen, wie Sie den Rumpf eines Role Playing Game (RPG) oder Labyrinthspiels innerhalb einer WebGL-Anwendung auf GWT-Basis implementieren. Im ersten Teil konzentrieren wir uns auf die Grundlagen von WebGL und des GWT Bindings.

Dirk Wieczorek


OpenGL ES 2.0 [1] bildet die Basis der WebGL-Spezifikation, die ein JavaScript-API für einen speziellen Canvas-Kontext darstellt. Mit der Verbindung zur Spezifikation OpenGL ES 2.0, die ein Cross-Plattform-API bereitstellt, ist die Ausführung von WebGL nicht auf klassische Browser in PC-Systemen begrenzt. Die Nutzung der Spezifikation auf mobilen Geräten hängt nur noch von entsprechend leistungsfähiger Hardware ab.

ArtikelserieTeil 1: 3-D-Welten erschaffenTeil 2: Im Labyrinth der Texturen

OpenGL ES 2.0 bietet Entwicklern eine programmierbare Grafikpipeline, deren Bestandteile ich nun genauer beschreibe. Das dabei vorgestellte WebGL-API bezieht sich auf die aktuelle Version 1.0 der WebGL-Spezifikation, die unter [2] nachgelesen werden kann. Da WebGL eine recht junge Technologie ist, erfordert das Ausprobieren entsprechend aktuelle Browserversionen. Am besten geeignet sind Firefox ab Version 11 und der Google-­Chrome-Browser ab Version 18. Bei Opera macht WebGL übrigens erst in Version 12 richtig Spaß. Sollte WebGL im aktuellen Firefox nicht laufen, könnte die Grafikkarte bzw. der -Treiber auf einer Blacklist der Mozilla Corporation stehen [3]. In diesem Fall können Sie den Browser „überzeugen“, indem Sie about:config"webgl.force-en­abled auf den Wert true setzen.

Die Rendering-Pipeline

Schauen wir uns nun die Rendering-Pipeline an, die in Abbildung 1 hervorgehoben ist und um die es im heutigen ersten Teil gehen soll. Das WebGL-API basiert auf dem HTML5-Canvas-Element. Erstellt wird der Canvas-Kontext über die Funktion canvas.get­Con­text("ex­peri­men­tal-webgl"). Der Namensvorsatz im Parameter experimental dürfte aufgrund der Stabilisierung der Implementierung und Verbreitung bald überflüssig sein. Die später beschriebene Bibliothek verdeckt dieses Detail auch entsprechend. WebGL ist eine Low-Level-Grafikbibliothek. Daher erfolgen alle Operationen auf Basis einer vorher definierten Punktmenge. Die Basisoperation ist die Methode drawElements(), die eine Punktliste und einen Interpretationsmodus dieser Punkte als Parameter erhält. Die Interpretation dieser Punktliste erfolgt anhand von drei Basistypen: Punkt, Linie und Dreieck. Darüber hinausgehende Funktionen, wie zum Beispiel eine Textausgabe, stellt das WebGL-API nicht bereit. Frei programmierbar sind die weiteren in Abbildung 1 gezeigten Komponenten der Rendering-Pipeline, die Shader. Doch dazu später mehr. Der grundsätzliche Workflow bei der Entwicklung mit der Pipeline wird durch vier Schritte definiert:

...

Java Magazin
Teil 1: WebGL via GWT für Browseranwendungen nutzbar machen

3-D-Welten erschaffen

Der Charme von PC-Spielen, in denen sich der Held durch Dungeons bewegt und Quests löst, verlagerte sich dank leistungsfähigerer Browser immer mehr ins Web. Die Entwicklung von 3-D-Umgebungen in Browsern war dabei fast so lang und abenteuerlich wie mancher Quest. Mit dem Erscheinen des zum HTML5-Standard gehörigen Canvas-Elements Ende 2009 und mit dem OpenGL-Ableger WebGL eröffnen 3-D-Welten im Webbrowser ganz neue Nutzerinteraktionen. In dieser zweiteiligen Reihe zeige ich Ihnen, wie Sie den Rumpf eines Role Playing Game (RPG) oder Labyrinthspiels innerhalb einer WebGL-Anwendung auf GWT-Basis implementieren. Im ersten Teil konzentrieren wir uns auf die Grundlagen von WebGL und des GWT Bindings.

Dirk Wieczorek


OpenGL ES 2.0 [1] bildet die Basis der WebGL-Spezifikation, die ein JavaScript-API für einen speziellen Canvas-Kontext darstellt. Mit der Verbindung zur Spezifikation OpenGL ES 2.0, die ein Cross-Plattform-API bereitstellt, ist die Ausführung von WebGL nicht auf klassische Browser in PC-Systemen begrenzt. Die Nutzung der Spezifikation auf mobilen Geräten hängt nur noch von entsprechend leistungsfähiger Hardware ab.

ArtikelserieTeil 1: 3-D-Welten erschaffenTeil 2: Im Labyrinth der Texturen

OpenGL ES 2.0 bietet Entwicklern eine programmierbare Grafikpipeline, deren Bestandteile ich nun genauer beschreibe. Das dabei vorgestellte WebGL-API bezieht sich auf die aktuelle Version 1.0 der WebGL-Spezifikation, die unter [2] nachgelesen werden kann. Da WebGL eine recht junge Technologie ist, erfordert das Ausprobieren entsprechend aktuelle Browserversionen. Am besten geeignet sind Firefox ab Version 11 und der Google-­Chrome-Browser ab Version 18. Bei Opera macht WebGL übrigens erst in Version 12 richtig Spaß. Sollte WebGL im aktuellen Firefox nicht laufen, könnte die Grafikkarte bzw. der -Treiber auf einer Blacklist der Mozilla Corporation stehen [3]. In diesem Fall können Sie den Browser „überzeugen“, indem Sie about:config"webgl.force-en­abled auf den Wert true setzen.

Die Rendering-Pipeline

Schauen wir uns nun die Rendering-Pipeline an, die in Abbildung 1 hervorgehoben ist und um die es im heutigen ersten Teil gehen soll. Das WebGL-API basiert auf dem HTML5-Canvas-Element. Erstellt wird der Canvas-Kontext über die Funktion canvas.get­Con­text("ex­peri­men­tal-webgl"). Der Namensvorsatz im Parameter experimental dürfte aufgrund der Stabilisierung der Implementierung und Verbreitung bald überflüssig sein. Die später beschriebene Bibliothek verdeckt dieses Detail auch entsprechend. WebGL ist eine Low-Level-Grafikbibliothek. Daher erfolgen alle Operationen auf Basis einer vorher definierten Punktmenge. Die Basisoperation ist die Methode drawElements(), die eine Punktliste und einen Interpretationsmodus dieser Punkte als Parameter erhält. Die Interpretation dieser Punktliste erfolgt anhand von drei Basistypen: Punkt, Linie und Dreieck. Darüber hinausgehende Funktionen, wie zum Beispiel eine Textausgabe, stellt das WebGL-API nicht bereit. Frei programmierbar sind die weiteren in Abbildung 1 gezeigten Komponenten der Rendering-Pipeline, die Shader. Doch dazu später mehr. Der grundsätzliche Workflow bei der Entwicklung mit der Pipeline wird durch vier Schritte definiert:

...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang