WebGL via GWT für Browseranwendungen nutzbar machen

Im Labyrinth der Texturen


Im Mittelpunkt des ersten Teils unserer Serie standen die Grundlagen der Web Graphics Library (WebGL) und deren Nutzung im GWT. Nun bringen wir Leben in die einfachen Wände, die wir beim ­letzten Mal erbaut haben. Wir lesen ein einfaches Labyrinth ein, zeichnen dieses, bewegen uns darin fort und rücken die entstandene Szene ins richtige Licht.

Artikelserie

Teil 1: 3-D-Welten erschaffen
Teil 2: Im Labyrinth der Texturen

Nachdem wir uns in der letzten Ausgabe ausführlich mit der Rendering Pipeline beschäftigt haben, geht es heute um den beeindruckenden und interaktiven Teil beim Erstellen einer browserbasierten 3-D-Umgebung. Ich zeige Ihnen die wesentlichen Schritte der Datenbereitstellung (Abb. 1). Bevor wir uns jedoch mit den einzelnen Themenblöcken von Szenedaten bis zur Kamerasteuerung beschäftigen, streifen wir die Verwendung von Texturen.

wieczorek_1.tif_fmt1.jpgAbb. 1: Artikelinhalt im Überblick

Realistische Texturen anlegen

In der letzten Ausgabe haben wir gelernt, wie wir Objekten mit Vertex- und Fragment-Shadern eine feste Farbe zuordnen. Das reicht jedoch kaum aus, um Gegenstände realistisch erscheinen zu lassen. Jede aktuelle 3-D-Grafikpipeline erlaubt daher das Verwenden von Bildern für eine realistische Darstellung von Gegenständen. Die Polygonzahl des Objekts bleibt dabei gleich. So ist es üblich, für 3-D-Objekte in WebGL Image-Dateien in den Formaten PNG und JPG zu verwenden. Dabei werden die einzelnen Punkte des Bildes, auch Texel genannt, auf die Polygonstruktur abgebildet. Dieses Vorgehen bezeichnet man als Textur-Mapping. Konkret werden dabei die Bildkoordinaten (uv-Koordinaten aus dem Wertebereich von [0,1]) über den Fragment-Shader auf die zu texturierenden Vertex-Koordinaten aufgetragen. Interessant wird das Ganze, wenn die Textur größer oder kleiner als das projizierte Objekt ist – was eigentlich der Normalfall ist. Denn die feste Zuordnung von dreidimensionalen Vertex-Punkten zu zweidimensionalen Texel-Koordinaten definiert das Größenverhältnis und steuert das Mapping der Koordinaten aus dem uv-Raum auf die xyz-Koordinaten. Interpoliert werden die zwischen den Fixpunkten liegenden Texturkoordinaten letztlich über die Grafikpipeline. Die beiden wesentlichen Methoden zur Anwendung von Texturen zeigt Listing 1 – das sind erstens die Texturenverwaltung über die Klasse createTexture und zweitens das Mapping von Vertex auf Texel mit buildVertex.

Listing 1

private WebGLTexture createTexture(final ImageResource image, final WebGLRenderingContext gl) { final We...

Neugierig geworden?

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