3d Game Programming With Java and libGDX — Setting Up a Model With Blender

synapticloop
Sep 8 · 11 min read

r… the journey through the x, y, and z axes through the lens of a computer screen.

TL;DR

Using Blender to get your Model UV unwrapped with an image texture, 100% correct, so that it can be easily imported into your libGDX project.

Note: this is part of a series of articles: See 3d Game Programming with Java and libGDX — Overview of Articles


What You Will Need

  • Download blender if you don’t have it yet — at the time of writing it is version v2.90.0
  • fbx-conv to convert from .fbx file formats to .g3db file formats (.g3db is the native file format for libGDX) — pre-compiled packages can be downloaded from here.
A screenshot of the startup screen of a newly installed Blender programme version 2.90.0
A screenshot of the startup screen of a newly installed Blender programme version 2.90.0
A screenshot of the startup screen of a newly installed Blender programme version 2.90.0

Things to note:

  • There was a major UI overhaul with the version 2.80+ series, so, in order to follow the instructions you will need to be on at least version 2.80.
  • There are lots of good tutorials around using the blender programme — if you are new to the programme, the ‘Learn the basics’ videos on the thank-you page is a great way to start. However — make sure that you search for tutorials about blender 2.8 which will show the new interface.

The Steps

  1. Delete the un-necessary components
  2. Find (or create) a model
  3. Convert the model (if required)
  4. Import the model
  5. Update the scale units (if required)
  6. UV unwrapping
  7. Check the stretching
  8. Creating seams (if required)
  9. Adding an image material to the model
  10. Converting the model

The Starting Model

When you start up blender, it automatically creates a scene for you, with a cube (centred at 0,0,0), a camera, and a light, as shown below.

Image for post
Image for post
The default model and screen when blender is started

Step 1 —Delete the un-necessary components

Which is to say pretty much everything :). On the top right of the window, you will see the objects within the ‘Collection’.

Image for post
Image for post

From this area, delete the ‘Camera’, the ‘Cube’, and the ‘Light’, as they will not be used, and do not need to be exported. To do this, either:

  • Right click on each item to get the contextual menu up and select the ‘Delete’ option, or,
  • Just left click and press the ‘X’ key to delete.
Image for post
Image for post

Step 2 — Find (or create) a model

The cube is not the most exciting of models, and easily UV unwraps, and consequently doesn’t go through some of the problems that you may come across with other more complex models. So, either create your own model (which is an advanced topic) or download a model from a 3d model site (for example GrabCAD) — but do be careful of licensing restrictions on your model.

The example used here is the Rhombic Dodecahedron which looks like the following:

Rendering of a rhombic dodecahedron
Rendering of a rhombic dodecahedron
Rendering of a rhombic dodecahedron

When downloading a model, ensure that it is easily importable into blender — the file formats that are supported:

  • Collada (.dae)
  • Alembic (.abc)
  • Motion Capture (.bvh)
  • Scalable Vector Graphics (.svg)
  • Stanford (.ply)
  • Stl (.stl)
  • FBX (.fbx)
  • glTF 2.0(.glb/.gltl)
  • Wavefront (.obj)
  • X3D Extensible 3D (.x3d/.wrl)

Never fear, if you cannot find a model in any of the above formats, there are free online format converters which will do this for you.

Step 3 — Convert the model (if required)

A lot of the models on GrabCAD models are made with SolidWorks — which are in an .SLDPRT file format. The AnyConv.com site can easily do the conversion from .sldprt to .stl. As a side note, AnyConv supports a wide range of format conversions, all of which are enumerated here.

It is a simple process, all done online, no sign-up needed:

  1. Drag the file onto the box or click on the ‘CHOOSE FILE’ button,
  2. Click on the ‘CONVERT’ button
  3. Wait for it to finish…
  4. Download the converted file

Step 4 — Import the model

Screenshot of blender option to import an .stl file
Screenshot of blender option to import an .stl file
Screenshot of blender option to import an .stl file

Once the model has been imported, you will be presented with the following screen:

Image for post
Image for post
The imported file

Step 4 — Update the scale units (if required)

By default, blender’s model scaling is far too large (generally the ‘Unit Scale’ is set to ‘1.00’) — if your model looks HUGE ehrn you load it into libGDX, you can update the scale from the right hand side menu: (make sure that the item that you want to scale is selected — or you could just press the ‘A’ key to select all).

Side note: A reasonable ‘Unit Scale’ is ‘0.01’ as blender uses metres, whilst libGDX uses centimetres, so dividing by 100 is a good idea.

Image for post
Image for post

Step 5 — UV Unwrapping

UV mapping or unwrapping is the process of projecting a 2D image texture onto a 3D object

Now that the model is imported, it is time to unwrap the 3d model into 2d space so that a texture can be applied to it.

Image for post
Image for post
  1. Select the ‘UV Editing’ tab from the top menu bar (highlighted above) and the two panels will be shown.
  2. If the model on the right hand side is not selected press the ‘A’ key (for select all).
  3. Press the ‘U’ key and a context menu will be shown.
  4. Select the ‘Smart UV Project’ option from the drop down.

The following screen will be shown:

Image for post
Image for post
Blender panes showing the model (right) and the UV projection (left).

Check the stretching

Stretching occurs when the 3d model is projected (or laid flat) on a 2 dimensional surface, and some of the surfaces need to be stretched (or compressed) so that there is a correlation between 1 pixel in 2d space to 1 pixel in 3d space. If there is any stretching, you will need to know about it and create seams (which will be explained in the next section).

To view which areas are stretched there is an option hidden away in blender

Image for post
Image for post
Arrow to display the view options

Highlighted above is a small arrow which needs to be clicked and dragged to the left, which will reveal the options

Image for post
Image for post
  1. Select the ‘View’ top in the options pane
  2. in the ‘Overlays’ tree
  3. Select the ‘Stretching’ checkbox
  4. The ‘Type’ should be left as ‘Angle
Image for post
Image for post

This slide out menu can now be dragged back to the side until it completely disappears.

The stretched areas will be shown from cooler to warmer colours:

  • Dark blue — not stretched
  • Green — slightly stretched
  • Red — stretched a lot

In the below image, there are some stretched areas (in green) and some non-stretched areas (in dark blue), which we will fix in the next section.

Image for post
Image for post

Creating seams (if required)

Depending on the number of faces on your model an easy way to UV project the entire model is

  • Click on the the ‘User Perspective’ pane on the right hand side
  • Make sure that the ‘Edge Select’ mode is on (see the menu at the top of the User Perspective screen)
Image for post
Image for post
The ‘Edge Select’ mode is selected
  • Press the ‘A’ key to select all
  • Right Click on the model
  • Select the ‘Mark Seam’ option (or press the ‘M’ key)
Image for post
Image for post
The ‘Mark Seam’ context menu option
  • Press the ‘U’ key to bring up the ‘UV Mapping’ context menu
  • Select the ‘Unwrap’ option (or press the ‘U’ key)

When the UV unwrapping is completed, all of the faces will have been split out into their triangular parts.

Image for post
Image for post

This sort of UV unwrapping may not be the most suitable mode for everbody so it is possiblle to individually select the edges and mark the seams.

The process is almost identical

  1. Left click to select a edges (or use the ‘Shift’ key whilst left clicking to select multiple edges)
  2. Right click on the model
  3. Select the ‘Mark Seam’ option from the context menu

Rinse and repeat steps 1 to 3 until all of the seams are marked, then

  • Press the ‘A’ key to select all on the model
  • Press the ‘U’ key
  • Select the ‘UVnwrap’ option from the context menu

And you should end up with a UV map like the following:

Image for post
Image for post
Individually selected seams and the UV Map

Although the above UV Map is problematic in that it is not using all the the space efficiently, nevertheless, below is a video of the process:

Image for post
Image for post

Step 9 — Adding an image to the model

Before I add an image, I created additional seams to mark out all of the Rhombuses. This allowed UV Mapped areas to be distributed more equally across the 2d plane (shown on the left below):

Image for post
Image for post

To add an image to the model, select the ‘Material Properties’ tab from the right hand tabbed menu highlighted below:

Image for post
Image for post

Click on the ‘New’ button

Image for post
Image for post

Then click on the circle to the right of the ‘Base Color’ label, which will bring up a context menu. Select ‘Image Texture’.

Image for post
Image for post

The ‘Base Color’ label will now show the value ‘Image Texture’ with an additional two buttons, namely ‘New’, and ‘Open’.

Image for post
Image for post

Click on the ‘Open’ button, select an image and everything should be fine…

The following image was used for the test, it has a white cross in the centre to show how it gets mapped from 2d to 3d.

Image for post
Image for post

Which then gets wrapped around the 3d object using the UV Map, thusly

Image for post
Image for post

You will notice that the white cross in the image does not align completely with the sides. To ensure that every side is mapped the way in which it should against an object — the next part will go through how to ensure that an image turns up where it should.

If the image does not show on the model, your ‘Viewport Shading’ mode may still be in ‘Solid’, rather than ‘Material Preview’.

This is a simple change, although you may need to reduce the size of some of the option windows to be able to click on the correct viewport shading mode which can be found in the top right hand corner of the User Perspective pane.

Image for post
Image for post

If you cannot see the option, you will need to reduce the right hand menu options as shown below.

Image for post
Image for post

Step 10 — Exporting the model

The model should be exported to the .fbx file format.

  1. Select ‘File’ from the menu
  2. Select ‘Export
  3. Select the ‘FBX (.fbx)’ option

I named it ‘medium-rhombic.fbx’, however, whatever you named it, remember the name and location to the file.

Image for post
Image for post

Step 11 — Converting the model

fbx-conv is the programme that can translate an .fbx model into .g3db format which libgdx can use natively.

from a terminal (or command prompt), the usage is:

Usage: fbx-conv.exe [options] <input> [<output>]Options:
-? : Display this help information.
-o <type>: Set the type of the output file to <type>
-f : Flip the V texture coordinates.
-p : Pack vertex colors to one float.
-m <size>: The maximum amount of vertices or indices a mesh may contain (default: 32k)
-b <size>: The maximum amount of bones a nodepart can contain (default: 12)
-w <size>: The maximum amount of bone weights per vertex (default: 4)
-v : Verbose: print additional progress information
<input> : The filename of the file to convert.
<output> : The filename of the converted file.
<type> : FBX, G3DJ (json) or G3DB (binary).

The highlighted lines above are the important options that need to be set

  • -o — this is the file type and must be set. Either ‘G3DB’ or ‘G3DJ’ may be used —G3DJ is a text format and can be used for debugging, however, for your final release you should use G3BB
  • -f — this flips the V texture coordinates and is necessary as blender and libGDX position the ‘x’ coordinates at different places (blender is top left, libGDX is bottom left). This manifests itself when you load the model and the image texture is upside down — this option fixes that
  • -v — this is the verbose option, which gives handy output that you can check against to ensure that all the textures are there and the model will be loaded

running the conversion command on the ‘medium-rhombic.fbx’ file that was exported in Step 10:

fbx-conv -v -f -o G3DB medium-rhombic.fbx medium-rhombic.g3dbINFO: FBX to G3Dx converter, version 0.01.0000 x64 , FBXSDK 2019.00
STATUS: Loading source file
STATUS: FBX file version 7 4 0
PROGRESS: Import FBX 100.00%
VERBOSE: [Rhombic Dohecahedron] polygons: 24 (72 indices), control points: 14
STATUS: Converting source file
STATUS: Closing source file
VERBOSE: Listing model information:
VERBOSE: ID :
VERBOSE: Version : Hi=0, Lo=1
VERBOSE: Meshes : 1 (60 vertices, 1 parts, 72 indices)
VERBOSE: Nodes : 1 root, 1 total, 1 parts
VERBOSE: Materials : 1 (1 textures)
STATUS: Exporting to G3DB file: medium-rhombic.g3db
STATUS: Closing exported file

Note the line above:

VERBOSE: Materials : 1 (1 textures)

If there are no materials, then libGDX will fail to load the model, so check to make sure that a material is exported. (Hence the ‘-v’, or verbose, command line argument was used with fbx-conv).


Wrap-up

So, through this guide, you have seen how to import a model and map an image texture to it. In the next guide, I will run through how to align the image to the edges and make sure that everything looks neat and tidy.

Important Note: You will need to have both the texture image file and the newly created .g3db file in the

/core/assets/ 

directory of your libGDX project or it will not load properly.

The Startup

Medium's largest active publication, followed by +704K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store