3d Game Programming With Java and libGDX — Setting Up a Model With Blender
Or… the journey through the x, y, and z axes through the lens of a computer screen.
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
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.
- Delete the un-necessary components
- Find (or create) a model
- Convert the model (if required)
- Import the model
- Update the scale units (if required)
- UV unwrapping
- Check the stretching
- Creating seams (if required)
- Adding an image material to the model
- 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.
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’.
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.
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:
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:
- Drag the file onto the box or click on the ‘CHOOSE FILE’ button,
- Click on the ‘CONVERT’ button
- Wait for it to finish…
- Download the converted file
Step 4 — Import the model
Once the model has been imported, you will be presented with the following screen:
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.
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.
- Select the ‘UV Editing’ tab from the top menu bar (highlighted above) and the two panels will be shown.
- If the model on the right hand side is not selected press the ‘A’ key (for select all).
- Press the ‘U’ key and a context menu will be shown.
- Select the ‘Smart UV Project’ option from the drop down.
The following screen will be shown:
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
Highlighted above is a small arrow which needs to be clicked and dragged to the left, which will reveal the options
- Select the ‘View’ top in the options pane
- in the ‘Overlays’ tree
- Select the ‘Stretching’ checkbox
- The ‘Type’ should be left as ‘Angle’
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.
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)
- Press the ‘A’ key to select all
- Right Click on the model
- Select the ‘Mark Seam’ option (or press the ‘M’ key)
- 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.
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
- Left click to select a edges (or use the ‘Shift’ key whilst left clicking to select multiple edges)
- Right click on the model
- 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:
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:
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):
To add an image to the model, select the ‘Material Properties’ tab from the right hand tabbed menu highlighted below:
Click on the ‘New’ button
Then click on the circle to the right of the ‘Base Color’ label, which will bring up a context menu. Select ‘Image Texture’.
The ‘Base Color’ label will now show the value ‘Image Texture’ with an additional two buttons, namely ‘New’, and ‘Open’.
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.
Which then gets wrapped around the 3d object using the UV Map, thusly
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.
If you cannot see the option, you will need to reduce the right hand menu options as shown below.
Step 10 — Exporting the model
The model should be exported to the .fbx file format.
- Select ‘File’ from the menu
- Select ‘Export’
- Select the ‘FBX (.fbx)’ option
I named it ‘medium-rhombic.fbx’, however, whatever you named it, remember the name and location to the file.
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).
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
directory of your libGDX project or it will not load properly.