Monogame and Blender (Part 3)

It’s time to learn texture mapping!  I’m going to show the easiest example possible: Texture mapping a cube using Blender (version 2.79b).

Before we get started, let’s create a new project in Monogame.  As before, just select a new Monogame Windows Project.  Then create a texture.  Your texture needs to be a square image that is a multiple of 2Note 1.  Like a 128 x 128 bit image.  You can create a new texture or use the one I created for this blog post:

128×128 Image

Save the image inside your Content folder of your project.  I named mine texture_1.jpg:

I included the image inside the project.  When we select an image for a texture in Blender, we’ll navigate to this image.  That will guarantee that the path used by the fbx file will match the Monogame path.

Creating the Cube in Blender

Create a new project in Blender.  There should be a default shape of a cube in at the 3D origin:

New Blender Cube Project

In the upper right corner of the view screen is a triangle stretch control (it’s called an area split widget):

Area Split Widget

Grab that control and stretch out a new window pane:

In the right pane, there is a menu at the bottom left corner (see arrow in image above), select UVImage Editor.  Your right pane will switch to look like this:

UVImage Editor Pane

The right pane is a 2D flattened version of your 3D cube (not shown yet).  Once we flatten the cube, we can manipulate the 2D texture that we’ll assign to each side.

Next, you’ll want to click in the 3D pane (left pane) and press the Tab key, or select Edit Mode from the menu under the cube (it currently says Object Mode).

Now you want to work with the individual faces of the cube.  So you need to use Ctrl -> Tab to activate the pop-up menu to select face mode:

Ctrl-Tab Menu

Click on Face.

Now you can Right-Click on any face of the cube.  Your cube will show which face is selected by drawing an orange line around the edges and shading in the face:

Front Face Selected

Basic Blender Navigation

I’m going to take a quick break here to describe how to navigate around the 3D space of Blender.  If you are already an expert with Blender, you can skip over to the next section to continue on with the texture mapping instructions.

You can use the mouse wheel to zoom in and out of your scene.

If you click on your mouse wheel, you can move your mouse around to rotate and look at your cube from different angles:

Cube From Below

Attaching a Texture

The trick to attaching a texture is to unwrap the side of the cube.  Select one side by right-clicking on it.  Then hit the “U” key.  A menu will pop-up:

“U” key pressed

Click on “Unwrap” to unwrap the one side.  You’ll see the UV diagram in the right pane change like this:

There is an Open menu at the bottom of the right pane:

Open a Texture File

Click on it and navigate to the jpg texture file that you saved at the beginning of this blog post.  If you used the same image that I posted at the top, your screen should look like this:

Texture Image Opened

Select Material Mode in the properties window (the ball with a checker pattern on it):

Click on the Material in the list box and click “Assign”.

Now click on the Texture Mode (checker patterned icon):

Texture Mode

Set the Type to “Image or Movie”.

Click to select the texture that is already imported (texture_1.jpg):

Your screen will look like this:

In the “Mapping” panel, you’ll see a “Coordinates” drop down.  It is set to “Generated” (see at the bottom of the image above).  Change the “Generated” to “UV”:

Now you can save your progress and then export an FBX file.  If you’ve followed along in parts 1 and 2, you’ll remember that you need to export a binary FBX file to the Monogame content directory, include in the project and then open the Content Pipeline Tool and “Add Existing File” to that.  Let’s create some simple code, using some of the code from part 2.

Monogame Code

In your Monogame code, copy the code from DemoMonogame3 (that was from the second demo in part 2, click the link and download from GitHub).

Start by replacing the lighting to the default lighting in the Draw method:

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

	foreach (var mesh in model.Meshes)
	{
		foreach (var effect1 in mesh.Effects)
		{
			var effect = (BasicEffect)effect1;

			// default lighting
			effect.EnableDefaultLighting();
			effect.PreferPerPixelLighting = true;


			// rotation, translation, scaling
			effect.World = BlenderRotateFix;
			effect.World *= Matrix.CreateRotationY(MathHelper.ToRadians(45));
			effect.World *= Matrix.CreateRotationX(CubeRotation.X);
			effect.World *= Matrix.CreateRotationY(CubeRotation.Y);
			effect.World *= Matrix.CreateRotationZ(CubeRotation.Z);


			var cameraPosition = new Vector3(0, 0, 10);
			var cameraLookAtVector = Vector3.Zero;
			var cameraUpVector = Vector3.UnitY;

			effect.View = Matrix.CreateLookAt(cameraPosition, cameraLookAtVector, cameraUpVector);
			float aspectRatio = graphics.PreferredBackBufferWidth / (float)graphics.PreferredBackBufferHeight;
			float fieldOfView = MathHelper.PiOver4;
			float nearClipPlane = 1;
			float farClipPlane = 200;
			effect.Projection = Matrix.CreatePerspectiveFieldOfView(fieldOfView, aspectRatio, nearClipPlane, farClipPlane);
		}

		mesh.Draw();
	}

	base.Draw(gameTime);
}

Change your Model load to load the new object that you exported.  I named mine “textured_cube”  (my FBX file is named textured_cube.fbx).  That is the FBX file that you exported from Blender and included in your content folder.

Now run your code.  You should see this:

Textured Cube

Notice how only one side is textured.  That’s because we only attached the texture to one side.  Next, I’ll show how to add the same texture to each side of the cube.

Adding Texture to All Sides in Blender

Go back to your cube in Blender.  Right-click on another face and you’ll see this:

In the right pane, you’ll see that the orange outline went away.  If you hit the “U” key and select “Unwrap”, you’ll see the outline appear:

Now in the properties window, click on the Material window:

Then click on the “Assign” button.

Now right-click on another side (you may have to rotate the cube by clicking and holding down the mousewheel button and moving your mouse).

Hit “U” key and select “Unwrap”.  Click on “Assign”.

Repeat until you have all the sides assigned to the pattern.

Finally, re-export your FBX file (you should also save your blender file too).

Now run your program:

Where to Find The code

You can download the code used by this blog post by going to my GitHub account (click here).

Note 1

The image you use must be multiples of 2 (2,4,8,16,32,64,128,256,512, etc).  The width and height can be different numbers (you don’t need a square image).  If you’re unsure, you can try an image and then rebuild your assets in the content pipeline tool.  The tool will complain if your image is not a multiple of 2.

Leave a Reply