Viewport3D mit WPF und .NET 5

Der Viewport3D mit WPF und .NET 5 ist der schnelle und einfache Einstieg um in einer C# Windows Anwendung 3D Szenen zu visualisieren. Ich zeige wie man ausschließlich mit XAML die ersten 3D Objekte rendert.

Viewport3D mit WPF und .NET 5

Um 3D Szenen darzustellen greifen erfahrene Entwickler auf C++ und idealerweise auf eine 3D Engine zurück. Heute gibt es zahlreiche professionelle Frameworks auf die man auch kostenfrei zurückgreifen kann. Um schnell eine Visualisierung zu implementieren eignet sich auch C# und die Windows Presentation Foundation kurz WPF. Da ich aktuell an einem Algorithmus zur Pfadsuche arbeite habe ich mir gedacht ich visualisiere das Ergebnis mit .NET.

3D Szene mit XAML

Der Startpunkt für das Vorhaben ist die Dokumentation von Microsoft. In dem kurzen und knappen Artikel werden alle Themen angeschnitten. Das fertige Visual Studio Projekt findest du wie immer auf meiner GitHub Seite. In meiner C# Projektmappe findest du nun das WPF3D Projekt.

Wir beginnen deshalb in einem neuen Projekt damit ein Viewport3D Element dem XAML hinzuzufügen. Das Viewport3D Element ist eine Fläche in der später die 3D Szene hineingerendert wird. D.h. die damit definierte Fläche ist die Projektionseben der 3D Szene. Anders als zum Beispiel ein Button hat diese definierte Fläche keine Parameter wie beispielsweise eine Hintergrundfarbe. Die Fläche zeigt nur die 3D Szene und ist deshalb transparent. Ich möchte eine schwarze Hintergrundfarbe für die Szene. Die Farbe füge ich deshalb dem Elternelement  (in meinem Fall dem Grid) als Attributhinzu:

Grid Background="Black"

XAML oder nicht XAML?

Mit dem Viewport3D sind wir nun eigentlich bereits fertig mit dem Fenster. Die restliche 3D Szene kann man nun im Code programmieren. Alternativ lässt sich zumindest der statische Anteil  bzw. die initiale Szene auch mittels XAML Tags realisieren. Ich habe deshalb eine kleine 3D Szene erstellt die einen Würfel zeichnet. Damit aber noch nicht genug…

• Kamera
  eine minimale 3D Szene beginnt immer mit einer Kamera. Definiert wird diese durch einen Punkt (Position der Kamera) und einem Vektor (Blickrichtung). Aus dieser Perspektive wird die 3D Szene gerendert. Realisiert wird das mit dem PerspectiveCamera Tag und einer Position und einer Blickrichtung als Attribute. In meinem Fall eine beliebige Position und den selben Vektor mit negativen Werten als Blickrichtung zum Koordinatenursprung.

  PerspectiveCamera Position="x y z" LookDirection="-x -y -z"

• Content
  jede 3D Szene braucht Inhalt, der gerendert wird. Zum Content gehören neben Geometrie auch alles was diese Geometrie verändert wie beispielsweise Texturen, Brushes oder einfach Lichtquellen.
  • Geometrie
    Damit überhaupt mal etwas angezeigt wird habe ich über den MeshGeometry3D einen Würfel erstellt. 3D Daten werden über Vertices (Punkte im 3D Raum) und Indices (die Nummern der Punkte die in Gruppen von jeweils 3 Stück eine Dreiecksfläche ergeben) definiert. Ein Würfel wird über 8 Punkte und 6 Seiten definiert. Die 6 Seiten werden jeweils durch 2 Dreiecke repräsentiert, d.h. in Summe gibt es 12 Triangles.

    MeshGeometry3D Positions="0 0 0  0 0 1 ..." TriangleIndices="2 3 1  2 1 0 ..."

  • Material
    Geometrie alleine ist unsichtbar. Erst durch ein Material wird dessen Oberfläche definiert. Neben Farbe oder Textur definiert man auch die Eigenschaft vom Material. Das heißt ob es das beispielsweise Licht diffus zurückwirft oder eine spiegelnde Oberfläche besitzt. Eine einfaches diffuses Material mit einer Farbe wird über die Tags DiffuseMaterial und SolidColorBrush definiert.
  • Licht
    Damit man Objekte sehen kann braucht man eine Lichtquelle. Es gibt viele unterschiedliche Beleuchtungsarten und mehrere unterschiedliche Lightquellen. Das einfachste ist das AmbientLight, welches in einer 3D Szene eine allgemeine Beleuchtung darstellt. Definiert wird es über ein Tag und einer Farbe als Attribut.

    AmbientLight Color="#22222"

Fazit

Mit WPF und .NET 5 kann man eine statische 3D Szene mit dem Viewport3D komplett mit XAML Code definieren. Das Beispiel zeigt den einfachsten Fall eines Würfels. Aufgabe des Programmierers ist nun C# Code hinzuzufügen, damit diese Szene dynamisch wird. Beispielsweise in dem man das Objekt bewegt oder über die Interaktion mit Maus und Tastatur die Kamera bewegt.