Auf dem Weg in die dritte Dimension

| Im zweiten Teil dieses Artikels wurde eine beleuchtete Szene mit einem dreidimensionalen Dreieck dargestellt, das sich um die eigene Achse gedreht hat. Die Farbe der einzelnen Pixel dieses Dreiecks wurde ausgehend von den Eckpunkten über die Pixel interpoliert. Für viele Grafiken sind solche Farbverläufe nur sehr selten relevant. Wesentlich häufiger ist es sinnvoll, Bilder auf den Flächen der Dreiecke abzubilden.

Dadurch können Dreiecke erst wirklich als die Oberfläche eines realen Gegenstandes dargestellt werden. Ziegelsteine einer Mauer sind ein gutes Beispiel dafür. In Direct3D können Grafiken durch ein spezielles Feature mit der Oberfläche eines Dreiecks verknüpft werden. Dieses Feature wird Textur genannt.

Der englische Begriff Texture lässt sich mit Beschaffenheit, Konsistenz oder Struktur übersetzen. Texturen sind Bilder, die an ein oder mehrere Dreiecke geheftet werden. Richtig eingesetzt, können viele Objekte mithilfe von Texturen durch sehr wenige Dreiecke dargestellt werden. Das wirkt sich in den meisten Fällen sehr positiv auf die Geschwindigkeit der Bilddarstellung aus.

Das Textur-Koordinatensystem

Um zu verstehen, wie Texturen einem oder mehreren Dreiecken zugeordnet werden können, muss ein weiteres Koordinatensystem eingeführt werden. Es ist zweidimensional und heißt Textur-Koordinatensystem. Um seine Achsen nicht mit denen der anderen Koordinatensysteme zu verwechseln, werden diese mit den Buchstaben u und v benannt. Abbildung 1 zeigt ein Porträt. In Abbildung 2 sehen Sie, wie dieses Bild auf ein Dreieck abgebildet werden kann. Beachten Sie bitte, dass das Bild um 90 Grad gedreht ist. Da es auf eine dreieckige Fläche projiziert wird, wurde eine Hälfte des Bildes nicht dargestellt.

Um die Ausgabe wie in Abbildung 2 zu realisieren, ist ein weiteres Vertexformat notwendig. Es heißt PositionedNormalTextured. Ähnlich wie bei dem im vorangegangenen Teil dieses Artikels erklärten Format PositionedNormal sind zur Definition eines PositionedNormalTextured- Vertex eine dreidimensionale Position und ein Normalenvektor notwendig. Darüber hinaus müssen auch noch u- und v-Werte angegeben werden, die das Textur-Koordinatensystem definieren.

Textur-Koordinaten beziehen sich auf eine Position im Originalbild. Die Koordinaten (0,0) beziehen sich auf die obere linke Ecke des Bildes. Das Koordinatensystem ist automatisch so skaliert, dass der Wert u = 1 der Breite und v = 1 der Höhe des Bildes entspricht.

Die Koordinaten (0,1) beschreiben also den Punkt in der rechten oberen Ecke, während mit den Koordinaten (1,0) die linke untere Ecke des Bildes gemeint ist. Damit das Bild in Abbildung 1 um 90 Grad gedreht im Dreieck dargestellt wird, müssen die Koordinaten u und v also so angegeben werden, wie es in Abbildung 3 zu sehen ist.

Die in dem Bild angegebenen Koordinaten der einzelnen Vertizes sind Textur- Koordinaten. Durch die Textur-Koordinaten (1,0) im rechten unteren Vertex des Dreiecks wurde diesem Vertex die rechte obere Ecke des Bildes zugeordnet. Der linke untere Vertex des Dreiecks hat die Koordinaten (1,1).

Daher wird in der linken unteren Ecke des Dreiecks die rechte untere Ecke des Bildes dargestellt. Die Textur-Koordinaten im oberen Vertex des Dreiecks sind (0,1). An dieser Ecke wird also die linke untere Ecke des Bildes dargestellt. Durch diese Koordinaten wird die Drehung des Bildes um 90 Grad bewirkt.

Ähnlich wie Farbwerte und Normalenvektoren werden auch Textur-Koordinaten gleichmäßig über das Dreieck hinweg interpoliert. Der Bildpunkt in der Mitte der unteren Linie des Dreiecks entspricht daher dem Bildpunkt in der Mitte des rechten Bildrandes.

Texturen im Einsatz

Die bisher besprochene Theorie genügt, um die Beispielanwendung so zu implementieren, dass das Dreieck nun mit dem Urlaubsfoto unseres Protagonisten als Textur dargestellt wird. Dazu wird erst einmal die Methode InitializeGraphics angepasst. Diese Methode wurde schon in früheren Versionen der Beispielanwendung eingeführt.

private Texture texture;

protected bool InitializeGraphics()
{
 PresentParameters pres = new PresentParameters();
 pres.Windowed = true;
 pres.SwapEffect = SwapEffect.Discard;
 device = new Device(0,
     DeviceType.Hardware, this,
     CreateFlags.SoftwareVertexProcessing,
     pres);
 texture = CreateOverlayTexture(device);
 vertices = CreateVertexBuffer(device);
 return true;
}

protected Texture CreateOverlayTexture( Device device) {
 Texture t = TextureLoader.FromFile(device, “texture.bmp”);
 return t;
}

protected VertexBuffer CreateVertexBuffer( Device device) {
 VertexBuffer buf = new VertexBuffer(
     typeof(CustomVertex.TransformedTextured), 3,
     device, 0,
     CustomVertex.TransformedTextured.Format,
      Pool.Default);
 PopulateVertexBuffer(buf);  return buf;
}

protected void PopulateVertexBuffer( VertexBuffer vertices) {
 CustomVertex.TransformedTextured[] verts =
     (CustomVertex.TransformedTextured[])  vertices.Lock(0, 0);
 int i = 0;
 verts[i++] = new CustomVertex.TransformedTextured(
     // Vertex position
     Width / 2, Height / 4, 0.5F,
     // rhw (advanced)
     1,
     // texture coordinates
     0, 1);
 verts[i++] =
     new CustomVertex.TransformedTextured(
      Width * 3 / 4, Height * 3 / 4, 0.5F,
      1,
      1, 0);
     verts[i++] = new CustomVertex.TransformedTextured(
      Width / 4 , Height * 3 / 4, 0.5F,
      1,
      1, 1);
 vertices.Unlock();
}

protected void Render() {
 device.Clear(ClearFlags.Target, Color.Black, 1.0F, 0);
 device.BeginScene();
 device.SetTexture(0, texture);
 device.VertexFormat = CustomVertex.TransformedTextured.Format;
 device.SetStreamSource(0, vertices, 0);
 device.DrawPrimitives( PrimitiveType.TriangleList, 0, 1);
 device.EndScene();
 device.Present();
}

protected void SetupMaterials() {
 Material mat = new Material();
 // Set the properties of the material
 // (Code omitted for the moment)
 device.Material = mat;
}

protected void SetupMaterials() {
 Material mat = new Material();

 // Set the properties of the material
 // The object itself will be blue
 mat.Diffuse = Color.Blue;

 // We want it to look slightly dull,
 // so maybe a grey wide
 highlight mat.Specular = Color.LightGray;
 mat.SpecularSharpness = 15.0F;

 device.Material = mat;

 // Very important –
 // without this there is no specularity
 device.RenderState.SpecularEnable = true;
}