XNA und Blender: Texturierter Würfel

Im zweiten Teil dieser „XNA und Blender“ Artikelreihe möchte ich zeigen, wie man die erste Textur von Blender in XNA überführen kann. Dies zählt natürlich immer noch zu den absoluten Basics und dies ist eigentlich auch nicht weiter schwer, trotzdem haben viele leider immer wieder Probleme damit. Dies möchte ich mit diesem Artikel nun ändern. Es gibt auch direkt eine Besonderheit: Der Blender-Teil dieses Artikels ist als Video-Tutorial ausgelegt. Dies ist mein erster Versuch in diesem Bereich und ich hoffe auf positives Feedback.

Los gehts

Wie schon im Teaser angekündigt, wird dieses Tutorial in zwei Bereiche aufgeteilt sein. Der Blender-Teil wird ein Video-Tutorial sein in dem ich euch erkläre und vor allem zeige, wie ihr einen texturierten Würfel in Blender erzeugt und diesen anschliessend zur Verwendung in XNA exportiert.

Hier also das Video-Tutorial (21.08.2011, das Video-Tutorial wurde aktualisiert):


Ursprüngliches Video mit nervigem Zoom

Darstellung in XNA

Ich hoffe, daß Video-Tutorial hat euch gefallen. Verbesserungsvorschläge und Wünsche dazu nehme ich natürlich in den Kommentaren gerne entgegen.

Um etwas Routine in die Standard-Arbeitsabläufe zu bekommen, werde ich nun noch mal bei null anfangen, dabei aber im Grunde genommen eine etwas zusammengefasste Variante des letzten „XNA und Blender“ Artikels liefern. Das Endergebnis ist natürlich ein anderes. Über den Menüpunkt Datei/Neu/Projekt erzeugen wir zunächst ein neues Projekt vom Typ „Windows Game (4.0)“.

Wir nennen das Projekt „TexturedCube“ und machen gleich mit dem ersten Code weiter. Wie immer werde ich am Ende des Tutorials nochmals den gesamten Code in einem Stück präsentieren, damit die Übersicht gewahrt bleibt.

Als erstes definieren wir ein paar Member-Variablen, die wir im weiteren Verlauf benötigen werden. Dies sind im einzelnen folgende und wir definieren diese im Kopf der Game-Klasse direkt nach der Definition des SpriteBatch. Dies ist exakt der gleiche Code, der auch bereits im letzten Teil verwendet wurde.

        Model cubeModel;

        Matrix worldMatrix;
        Matrix viewMatrix;
        Matrix projectionMatrix;

Weiter geht es in der LoadContent-Methode der Game-Klasse, die unmittelbar nach der Initalisierung des GraphicsDevice aufgerufen wird. Dort erzeugen wir unsere Matrizen und laden unser Modell.

            // setup the matrices
            this.worldMatrix = Matrix.Identity;
            this.viewMatrix = Matrix.CreateLookAt(new Vector3(5.0f, 5.0f, 5.0f), new Vector3(0.0f, 0.0f, 0.0f), Vector3.Up);
            this.projectionMatrix = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, GraphicsDevice.Viewport.AspectRatio, 1.0f, 100.0f);

            // Load and setup the model
            this.cubeModel = Content.Load<Model>("texturedCube");
            foreach (ModelMesh m in this.cubeModel.Meshes)
            {
                foreach (BasicEffect e in m.Effects)
                {
                    e.EnableDefaultLighting();
                }
            }

Wer aufgepasst hat, der hat nun festgestellt, daß natürlich noch das Model im Content-Projekt fehlt. Zunächst kopieren wir die Textur die wir in Blender gespeichert haben, sowie das exportierte FBX-Modell in den Ordner des Content-Projektes. Dieser befindet sich in der Projektmappe, die wir zu Beginn angelegt haben. Dort müsste ein Ordner „TexturedCubeContent“ vorhanden sein, in den die beiden Dateien kopiert werden. Die FBX-Datei fügen wir nun zum Content-Projekt hinzu. Rechte Maustaste, Hinzufügen, Vorhandenes Objekt ist uns dabei behilflich. Wir wählen einfach die Dateie aus und sind auch schon fertig. Alles weitere erledigt Visual Studio und die Content-Pipeline für uns. Die Textur müssen (und dürfen) wir nicht hinzufügen. Diese wird vom Model referenziert und automatisch eingebunden.

Die Vorbereitungen sind abgeschlossen, nun geht es ans Rendern. Das geschieht natürlich wieder mit der Draw-Methode und ist immer noch nur eine einzige Zeile, da auch hier das XNA-Framework bestens ausgerüstet ist. Die folgende Zeile fügen wir direkt nach dem Löschen des Bildschirms mit GraphicsDevice.Clear ein.

this.cubeModel.Draw(this.worldMatrix, this.viewMatrix, this.projectionMatrix);

Drücken wir nun F5 zum kompilieren und starten, erhalten wir folgende Ausgabe.

Dies ist unser Würfel und diesmal auch, wie nicht anders erwartet, mit der Textur, die wir in Blender aufgelegt haben. Da wir in Blender wieder keinen Edge Split gemacht haben, ist das Shading auch hier wieder eher gewöhnungsbedürftig. Eines fällt aber sofort auf: Durch die Textur sieht das „falsche“ Shading weitaus weniger seltsam aus, als noch im ersten Teil dieses Tutorials. Wie man dieses Problem löst, hatte ich ja bereits im ersten Teil ausführlich erklärt, daher hier nicht noch einmal.

Abschluss und Aussicht

Dieser Artikel war eine Premiere, denn ich habe mein erstes Video-Tutorial veröffentlicht. Aber wir haben auch wieder einen kleinen Schritt weiter in Richtung 3D-Profi gemacht. Wir können nun einfache Modelle in Blender texturieren und diese in XNA überführen und mit Texturen darstellen. Sicherlich war dies noch nichts aussergewöhnliches und sicherlich ist dies auch erst der Anfang, aber wir haben damit bereits einen ersten wichtigen Schritt getan. Dieser Teil war vom XNA-Teil her gesehen deutlich kürzer als der letzte Teil. Eigentlich hat sich nicht viel verändert, mit Ausnahme eines anderen Modells, das wir geladen haben. XNA spielt hier seine stärken aus. Einfache Anwendungen sind auch einfach umzusetzen, daher beschränkt sich bisher die Hauptarbeit auf Blender.

Es gibt weiterhin noch keine konkrete Planung für weitere Artikel in dieser Reihe und die Leser der Reihe Terrain 101 erwarten auch weiterhin die nächsten Artikel.

Weitere Themen, die ich grob angedacht habe:

  • Weiterführende Texturierungsthemen
  • Tipps und Tricks im Zusammenspiel Blender/XNA
  • „Modelling Magic“ – kleine Tricks für ein besseres visuelles Ergebnis
  • Details backen (Lightmaps, Schatten, Licht, Ambient Occlusion)
  • Erzeugung von Normal-Maps und Verwendung in XNA
  • Animationen
  • Optimierung der Modellstruktur
  • Vorbereitungen für Physik

Wie ihr seht: genügend Material für weitere Tutorials in einem doch recht komplexen Thema.

Der gesamte Sourcecode

Zum Abschluss noch mal der gesamte Source-Code der Game-Klasse aus Visual Studio zur besseren Übersicht. Viel hat sich nicht getan seit dem letzten mal, eigentlich hat sich nur der Name des Modells geändert, sowie der Titel.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace SimpleCube
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        Model cubeModel;

        Matrix worldMatrix;
        Matrix viewMatrix;
        Matrix projectionMatrix;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            this.Window.Title = "XNA und Blender: TexturedCube - Tutorial #02";

            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // setup the matrices
            this.worldMatrix = Matrix.Identity;
            this.viewMatrix = Matrix.CreateLookAt(new Vector3(5.0f, 5.0f, 5.0f), new Vector3(0.0f, 0.0f, 0.0f), Vector3.Up);
            this.projectionMatrix = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, GraphicsDevice.Viewport.AspectRatio, 1.0f, 100.0f);

            // Load and setup the model
            this.cubeModel = Content.Load<Model>("TexturedCube");
            foreach (ModelMesh m in this.cubeModel.Meshes)
            {
                foreach (BasicEffect e in m.Effects)
                {
                    e.EnableDefaultLighting();
                }
            }
        }

        protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed ||
                Keyboard.GetState().IsKeyDown(Keys.Escape))
                this.Exit();

            // TODO: Add your update logic here

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            this.cubeModel.Draw(this.worldMatrix, this.viewMatrix, this.projectionMatrix);

            base.Draw(gameTime);
        }
    }
}
Advertisements

Veröffentlicht am 19.08.2011 in 3D, Blender, Grundlagen, Tutorial, Windows Phone, XBox360, XNA, XNA 4.0 und mit , , , , , getaggt. Setze ein Lesezeichen auf den Permalink. 38 Kommentare.

  1. Das mit dem Video ist ja mal was neues 🙂
    Ich hoffe, dass es nicht das letzte mal war.. der Text war wie immer gut geschrieben.

  2. Yay, auf das habe ich gewartet! Endlich kann ich mein Asteroidenfeld mit Texturen versehen.
    Und es ist einfacher als ich dachte (kein .fx rumhantiere wie in vielen anderen Tuts zu diesem Thema).

    Erneut vielen Dank für dieses leicht verständliche Tutorial!

  3. Sehr verständlich erklärt! Normalerweise drücke ich mich vor der Arbeit mit solchen 3D Bearbeitungsprogrammen, nun habe ich leider keine Ausrede mehr dafür =). Nur ein klein wenig hat es gestört, wenn du im Video Bildschirmausschnitte gezeigt hast und die Maus dann nicht mehr in diesem Ausschnitt zu sehen war. Ich hoffe auf weitere so wundervolle Artikel und freue mich auf jeden deiner grob angedachten Themen. Setze bitte alle um! 😀

    • Danke schön, freut mich, daß es dir gefallen hat, daß ist Motivation für weitere Teile 🙂

      Das mit den Bildausschnitten war so nicht beabsichtigt. Die Screen-Capture-Software hat da ein wenig ein Eigenleben entwickelt. Eigentlich war die Auflösung für den gesamten Screen passend und so war es geplant. Beim nächsten mal werde ich das auch sicherstellen.

  4. Erstmal schönes Tutorial, sehr gut erklärt.
    wie schon erwähnt wurde war das zommen teilweise nicht gepasst, weiterhin war der Ton nicht immer der besste (in der Mitte geht er kurz fast weg).
    Als weitern verbesserungs Vorschlag, du hast sehr oft „hier“ oder „dort“ benutzt, es wäre besser wenn du unten Links in der Ecke oder rechts in der Auswahlleist nimmst. Beim MCT-Training heist das ganze X/Y-Sprache.
    So das sind alle kleinigkeiten die mir aufgefallen sind und ich denke beim nächsten Cast wirst du es besser machen.

    MfG René

    • Hi René, danke für den netten Kommentar und das gute Feedback.

      Ich lade aktuell eine neue Version vom Video hoch, die ich verlinken werde, sobald diese online ist. Wird noch ein paar Minuten dauern. In dieser Version ist der nervige Zoom nicht mehr vorhanden. Wegen des Tons: Keine Ahnung was da passiert ist. Hast du die Stelle etwas genauer? Würde mir das gerne mal anhören…

      Der Hinweis mit der „X/Y-Sprache“ ist ein sehr guter Tipp. Ich werde da beim nächsten Tutorial drauf achten. Ich kann gut nachvollziehen, daß dies „unschön“ ist und nicht unbedingt immer günstig. Ist ja schliesslich nicht zielführend und auch nicht immer möglich, daß man ständig dem Mauszeiger folgen muss.

      • Wegen der Tone Probleme, nach dem ich es mir noch mehrmals angehört habe glaube ich es lag nicht am Video sondern an meiner Verbindung oder Youtube (ich hatte Lautstärkeporblem bei 6:01, 8:20, 9:33, jeweils für ca. 10 bis 15“), da es auch ohne durchlief manchmal

  5. Hätte es den Artikel früher gegeben gäbs schonmal 2 Threads weniger auf xnamag.de ^^

  6. Du solltest auf youtube eine XNA Tutorial Serie machen, echt gutes Video man!

  7. Hey in Opera sieht dein Template irgendwie seltsam aus.

    • Hmmm, eigenartig, da es sich um ein „offizielles“ Template von WordPress handelt. Kannst du mir einen Screenshot oder ähnliches schicken, damit ich mir das mal anschauen kann und ggfls. an WordPress zur Korrektur weiterleiten kann?

  8. Bist du dir sicher dass man die Textur nicht hinzufügen muss in das Content-Projekt???
    Bei gibt er dann einen Fehler aus und kompieliert nicht mehr…

    Aber echt cooles Tut
    genaus was ich brauche
    XNA+Blender findet man selten
    Ich freue mich auf weitere

  9. Nico Jacobs

    Ein wirklich sehr gutes Tutorial,
    leider bekomm ich es nicht hin, dass die Textur in meinem XNA Projekt angezeigt wird, ich seh immer nur den nackten Würfel, ohne Textur und ich find den Grund einfach nicht

    • Danke sehr 🙂

      Wenn du willst kannst du mir deine .blend-Datei und das XNA-Projekt mal per EMail schicken und dann schaue ich mir das mal an…

      • Nico Jacobs

        Gerne=)

        Vielen Dank, hab aber nochmal ein bisschen dran gesessen und habs doch noch hinbekommen

  10. Das Tutorial war sehr hilfreich danke:)
    nur könntest du vielleicht nochmal nen Tutorial machen, indem gezeigt wird, wie man den Würfel zum Rotieren oder zum bewegen bringt?

  11. Frederik jacobs

    Hey, echt gutes Tutorial, mir hat das sehr geholfen! 🙂
    ich bin noch Anfänger was die ganze Modellierungs-Welt angeht, trotzdem versuche ich folgendes:
    vielleicht kennst du NUIverse, das ist ein Programm -entwickelt von einem Hobbyprogrammierer-, welches über das XNA Game Studio läuft. In diesem kann man sich durch unser gesamtes Sonnensystem bewegen, und dabei alle möglichen Planeten, Monde, sowie deren Umlaufbahnen und andere Daten anzigen lassen kann. -> http://nuiverse.com/
    Ich habe es mithilfe deines Videos geschafft, immerhin ein Modell an sich in NUIverse zu integrieren, allerings scheitere ich an der Textur.
    Um extra Objekte in NUIverse einzufügen braucht man neben zwei Texturen (normale und „emissive texture“) und einer XML, in der bestimmte Werte, das Modell und die Texturen deklariert werden, noch das entsprechende Modell als XNB.
    Der einzige Weg, um XNBs zu erzeugen, den ich kenne, ist über den „XNA-Formatter“, einem Tool von XNA, mit welchem man FBX und X zu XNB konvertieren kann.
    Genauer steht alles hier: http://drdave.co.uk/blog/2013/1/20/extensibility-model-part-2

    Nicht, dass ich dir jetzt mein gesamtes Projekt übergeben will, aber vielleicht weißt du ja eine Möglichkeit, von Visual Studio eine XNB zu exportieren oder weißt auf Anhieb, warum die Textur in NUIverse nicht angezeigt wird?

    Würde mich sehr über eine Antwort freuen 🙂

    • Danke sehr 🙂

      Um XNB’s aus einem FBX-Modell zu erzeugen kannst du Content Pipeline von XNA benutzen. Diese ist in das XNA Game Studio und damit in Visual Studio über den Projekttyp „Content-Project“ integriert.

      Um mehrere Texturen auf einem Modell zu verwenden benötigst du mehrere UV-Koordinaten-Sätze. Diese kannst du in Blender über „Object Data“ „UV-Maps“ erzeugen.

      Hilft dir das weiter, oder habe ich jetzt was falsch verstanden?

      • Frederik jacobs

        Hey, vielen Dank erstmal für die superschnelle Antwort! 🙂

        genau das ist mein Ziel! Nur kenne ich mich noch NULL mit Visual Studio aus und weiß nicht, wie ich zum Projekttyp „Content-Projekt“ komme. Könntest du mir vielleicht so einen Pfad oder etwas in der Art aufschreiben, mit dem ich das in Visual Studio finde?
        Und kommt dann quasi auch eine einzige XNB heraus? Denn die brauche ich, um sie bei NUIverse zu integrieren.

        Und das mit den mehreren Texturen probiere ich erst dann aus, wenn ich erst mal mit einer einzigen geschafft habe 😀

      • Du machst einfach ein ganz normales XNA Windows Projekt in Visual Studio (unter Datei/Neues Projekt). Dafür musst du halt nur XNA installiert haben. Du hast dann ein Spiele-Projekt und ein Content-Projekt. Im Content-Projekt fügst du einfach die Texture hinzu und mit F5 compilierst du. In einem der Unterverzeichnisse des Projektes findest du dann die XNB-Datei.

        Ich hab das leider jetzt nur aus dem Kopf schreiben können, da ich momentan keinen Zugriff auf einen Rechner mit XNA hab 😦 Alternativ kannst du aber auch bei http://www.indiedev.de (meinem Forum) fragen, denn da gibts ein paar User, die noch XNA installiert haben.

      • Frederik jacobs

        Tschuldige die Unordnung, aber irgendwie taucht der „Antworten“-Button nicht bei deiner letzten Frage auf.

        Habe es gefunden, vielen Dank! 🙂
        Allerdings habe ich jetzt ein neues Problem, und zwar nimmt NUIverse die XNB-Textur, die ich in dem Ordner gefunden habe, nicht an (bzw. es stürzt immer ab). Leider funktioniert es auch nicht, wenn ich die XNB-Textur zur PNG mache (zwar stürzt NUIverse dann nicht mehr ab, aber angezeigt wird trotzdem keine Textur).
        Aber ich glaube das geht jetzt über den Inhalt deines Artikels hinaus, ich glaube nämlich, dass man NUIverse noch irgendwie sagen muss, wie es diese XNB-Textur nutzen kann (denn das XNB-Modell an sich benötigt diese anscheinend ja).

        Vielleicht fällt dir dazu ja doch etwas ein, aber trotzdem nochmal danke für bisher, jetzt weiß ich zumindest genau wo der Fehler liegt.

      • Frederik jacobs

        Ok das hat sich jetzt auch erledigt 😀
        Bin jetzt schon soweit, dass es mit einzelnen Modellen klappt, allerdings noch nicht mit Satelliten, also mit Modellen die mehr als eine textur besitzen.
        Weißt du wie man in Blender mehrere Texturen zu einer kombiniert, welche dann alle einzelnen Meshes texturiert?
        Wenn ich das wüsste, hätte ich glaube ich alles gelöst:-)

      • Du kannst in Blender einfach Texturen backen. Dann werden aus vielen Texturen eine Einzige. Das sollte helfen, denke ich…

  12. Frederik jacobs

    Hey, hier ist nochmal der mit dem NUIverse-Programm 😉

    Und zwar habe ich noch eine Frage zu Visual Studio:
    In Blender gibt es ja die Funktion „Smooth“, die die betreffenden Objekte weicher macht. Dies ist zwar manchmal ganz hilfreich, nur leider macht Visual Studio das auch. Ich möchte aber mein Modell ungeglättet als XNB haben. Wie kann ich das Smoothing beim Erstellen der XNB-Datei ausstellen?
    Kannst du mir das weiterhelfen?

    Beste Grüße
    Frederik

    • Was genau meinst du mit „Smooth“?

      • Frederik jacobs

        Wenn man in Blender in dem „Object Tools“ Menü (aufrufbar in der 3D-Ansicht mit Tastenkürzel „T“) das Shading auf „Smooth“ stellt, statt auf „Flat“, dann erscheint das Objekt an den Kanten abgerundet, wodurch sich auch die Lichteigenschaften ändern.

      • Ah, ok… Das kann man nicht „abschalten“, weil das daran liegt, wie Blender die Normalen exportiert. Hier im Blog gibt es bereits eine genaue Beschreibung und den Lösungsansatz: https://mitohnehaare.de/2011/08/13/xna-und-blender-simplecube/

        Evtl. könnte man noch mit einem speziellen Shader in XNA (Flat-Shading) arbeiten, dann müsste man aber Flächennormale aus Blender exportieren.

      • Frederik jacobs

        YES!!! Gewusst wie 🙂
        Vielen, vielen Dank!!
        Wow, jetzt kann ich endlich alle Modelle mal ordentlich aufpeppen. Dann sehen die um EINIGES besser aus!
        Ich glaube ohne deinen Blog wäre ich nicht soweit gekommen! Danke!

      • Frederik jacobs

        P.S.: Ich konvertiere die FBX inzwischen gar nicht mehr über das Rendern in Visual Studio, sondern ganz einfach mit dem XNA Formatter.

        Wahrscheinlich kennst du den auch schon, falls nicht hier der Link:
        http://www.softpedia.com/get/Others/Miscellaneous/XNA-Formatter.shtml

        Der macht das alles ohne den ganzen Programmiercode und erziehlt zumindest auch dieselben Ergebnisse. Ob er das jetzt etwas anders macht, weiß ich nicht, höchstwahrscheinlich ja aber genauso wie Visual Studio.

  1. Pingback: XNA und Blender: Texturierter Würfel (Update) « "Mit ohne Haare"

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: