3D models and animation from Blender to LibGDX

19. enero 2014

 

Let me start off by saying that exporting from Blender is always a pain in the ass.  This experience didn’t prove to be an exception.  I will describe the process in some detail.

 

First and foremost, Blender 2.69 DIDNT work.  At least not for me, not matter what I did, Blender 2.69 would not export texture information in FBX format.  This cost me many hours of my life.  Once I switched to 2.68 everything worked.  Your mileage may vary, but in my experience, 2.69 simply would not work.  Another thing, something I lost another couples hours to… you need to use GL2 in LibGDX!

 

A lot of this process takes place on the Blender end.  I obviously don’t go into depth in how to use Blender.  If you are completely new to Blender, I highly suggest you run through this tutorial, it will teach you pretty much everything you need to know to follow along.

 

STEP 1: Model your … model

 

This step is pretty straight forward, you need to model an object to be exported.  I created this:

image

I took a standard cube, went in edit mode, extrude the face, select all and sub-divided it.

 

STEP 2: Texture your model

 

Not complete sure why, but every model that is exported to FBX seems to require a texture.  Once again, YOU NEED A TEXTURE.

Next, FBX does NOT include the texture information.  This means you have to save your texture to an image file, and add that image to the assets folder of your project.

You need to UV Unwrap your object.  In Edit mode you can accomplish this by selecting all, then UV Unwrap->Smart UV Project.  In the UV/Image window, it should look like:

image

There are a couple limitations here.  You need to make sure you texture face enabled:

image

With your object selected, in materials, make sure Face Textures is selected.

 

Next be sure to select a texture:

image

Type is Image, then under the Image section, select your texture image.  This is the file that needs to be added to your assets folder.

Scroll down to Mapping, change Coordinates to UV, select your UVMap from the drop down, leave Project as flat:

image

 

At this point you can check if your texture is right by switching over to GLSL in the properties panel ( hit N key ) of the 3D View.

 

STEP 3: Set up your rig

 

This part is a bit tricky if you’ve never done it before.  You can create a series of named animations that will be exported.  You animate by setting key frames.  First you need to setup up your skeleton.  Simply select Add->Armature->Single Bone.

image

 

Position the bone within your model.  Switch into edit mode and select the end “knob” of the bode and select Extrude ( E ) to create more bones.  Repeat until it looks like this:  ( FYI, you can use Z to make a model see through, handy when placing bones ).

image

Next you want to set the bones to manipulate the underlying mesh.

In Object mode, select your mesh, then shift click select the underlying bones.  Now parent them by hit CTRL + P and select “With automatic weight”

image

 

STEP 4: Animate your model

 

Now you can set up your animations.  Since we want multiple animations in the same file we are doing this slightly differently.

First set up your duration.  In the timeline, set end to the last frame of your longest animation:

image

 

 

Bring up a dopesheet view, then select the Action Editor:

image

 

Click the + icon, or new button ( depending if you have any existing animations, your options will change )

image

Name the animation.

 

Now go to your first frame ( Frame 1 using the controls in timeline ).

Select your bone/armature and switch to POSE mode.  Press A to select all bones.

Create a keyframe by hitting I ( as in “eye” ) then in the resulting menu select LocRotScale ( as in, Location, Rotation and Scale ), which will create a keyframe tracking those three things.

image

 

Now advance to the next frame you want to create a keyframe upon, rotate, scale or move your bone, then select all bones again and create another key.

You can create multiple named animation using the same process.  SImply click the + Icon, name another animation, go back to frame 1, position it, set a keyframe, animate, setting key frames.

 

STEP 5: Exporting to FBX

 

This part is pretty hit or miss.  You have a couple options, you can select just your mesh and armature, or simply export everything.

Then select File->Export->Autodesk FBX:

image

 

The documents say to stay with the default axis settings and the FBX converter will take care of the rest.  Frankly I could never get this to work.

These are the settings I am currently using:

image

 

STEP 6: Convert to 3dgb format and add to Eclipse

Open a command prompt where ever you exported the FBX.  Make sure your texture file is there as well.  If you haven’t already, make sure to download fbx-conv, extract that file to the directory you exported your FBX to.  Open a command prompt and CD to that directory.  Next type:

fbx-conv-win32 –f yourfilename.fbx

image

 

This should generate a g3db file.  Copy it and your textures to the assets/data directory of your android project:

image

 

STEP 7: The code

 

This code demonstrates how to load a 3D model and play multiple animations.  There is no description, beyond the code comments.  If you have any questions the comments dont cover, ask them below!

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Files.FileType;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.loader.G3dModelLoader;
import com.badlogic.gdx.utils.UBJsonReader;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationDesc;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationListener;



public class ModelTest implements ApplicationListener {
    private PerspectiveCamera camera;
    private ModelBatch modelBatch;
    private Model model;
    private ModelInstance modelInstance;
    private Environment environment;
    private AnimationController controller;
    
    @Override
    public void create() {        
        // Create camera sized to screens width/height with Field of View of 75 degrees
        camera = new PerspectiveCamera(
                75,
                Gdx.graphics.getWidth(),
                Gdx.graphics.getHeight());
        
        // Move the camera 5 units back along the z-axis and look at the origin
        camera.position.set(0f,0f,7f);
        camera.lookAt(0f,0f,0f);
        
        // Near and Far (plane) represent the minimum and maximum ranges of the camera in, um, units
        camera.near = 0.1f; 
        camera.far = 300.0f;

        // A ModelBatch is like a SpriteBatch, just for models.  Use it to batch up geometry for OpenGL
        modelBatch = new ModelBatch();
        
        // Model loader needs a binary json reader to decode
        UBJsonReader jsonReader = new UBJsonReader();
        // Create a model loader passing in our json reader
        G3dModelLoader modelLoader = new G3dModelLoader(jsonReader);
        // Now load the model by name
        // Note, the model (g3db file ) and textures need to be added to the assets folder of the Android proj
        model = modelLoader.loadModel(Gdx.files.getFileHandle("data/blob.g3db", FileType.Internal));
        // Now create an instance.  Instance holds the positioning data, etc of an instance of your model
        modelInstance = new ModelInstance(model);
        
        //fbx-conv is supposed to perform this rotation for you... it doesnt seem to
        modelInstance.transform.rotate(1, 0, 0, -90);
        //move the model down a bit on the screen ( in a z-up world, down is -z ).
        modelInstance.transform.translate(0, 0, -2);

        // Finally we want some light, or we wont see our color.  The environment gets passed in during
        // the rendering process.  Create one, then create an Ambient ( non-positioned, non-directional ) light.
        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.8f, 0.8f, 0.8f, 1.0f));
        
        // You use an AnimationController to um, control animations.  Each control is tied to the model instance
        controller = new AnimationController(modelInstance);  
        // Pick the current animation by name
        controller.setAnimation("Bend",1, new AnimationListener(){

            @Override
            public void onEnd(AnimationDesc animation) {
                // this will be called when the current animation is done. 
                // queue up another animation called "balloon". 
                // Passing a negative to loop count loops forever.  1f for speed is normal speed.
                controller.queue("balloon",-1,1f,null,0f);
            }

            @Override
            public void onLoop(AnimationDesc animation) {
                // TODO Auto-generated method stub
                
            }
            
        });
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        model.dispose();
    }

    @Override
    public void render() {
        // You've seen all this before, just be sure to clear the GL_DEPTH_BUFFER_BIT when working in 3D
        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        
        // For some flavor, lets spin our camera around the Y axis by 1 degree each time render is called
        //camera.rotateAround(Vector3.Zero, new Vector3(0,1,0),1f);
        // When you change the camera details, you need to call update();
        // Also note, you need to call update() at least once.
        camera.update();
        
        // You need to call update on the animation controller so it will advance the animation.  Pass in frame delta
        controller.update(Gdx.graphics.getDeltaTime());
        // Like spriteBatch, just with models!  pass in the box Instance and the environment
        modelBatch.begin(camera);
        modelBatch.render(modelInstance, environment);
        modelBatch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

 

Now if you run it, you should see:

blenderAnimation

 

And that, is how you get a textured animated 3D model from Blender to LibGDX.

 

VIDEO EDITION!

 

Ok, that might have been a bit confusing, so I decided to screen capture the entire process.  The following video shows creating, texturing, animating then exporting a model from Blender to LibGDX.  There is no instruction beyond what is above, but it might help you seeing the entire process, especially if something I said above didn’t make sense, or if your own export doesn’t work out.

 

The video on YouTube is much higher resolution than the embedded one below.

 

Let me know if you have any questions.

Programming, Art , , ,







blog comments powered by Disqus

Building a 3D Mech model: Part 2 Getting a leg up

27. March 2014

 

Ongoing documentation of creating a 3D mech asset.  Previously we ended with the torso and upper leg, like so:

 

image

 

Since then, I’ve rotated the upper leg back, created a foot and lower leg:

imageimage

 

Current face count is at 527, but there is a hell of a lot of optimizing that could occur here.

 

There are a couple ugly areas too, that I intend to address later.  Not to much sense worrying about the ugly bits until you are cleaning things up.  One area of ugliness is the union between the foot and lower leg.  I modeled the foot first then extruded the leg up from it.  I then needed to connect it to the upper leg, which had a different number of edges.

 

I could have simply added an equal number of edge loops, but that seems like over kill, so instead I’ve created a problem to be solved later.

 

image

As you can see, I have about 5 faces blunting into a single face (top arrow ), as well as some triangle junction points.  Getting rid of the tri’s should be simple, but the lower leg presents a bit more of a challenge.  Reality is, I am using far more polygons than I really need to be, so I will probably solve things by reduction, not addition.

Art ,




Building a 3D Mech model: The initial stages.

24. March 2014

 

I have the need of a fully rigged Mech model, for a couple of reasons, so I’ve started working on one.  Figured I would document the process as I go.  It’s somewhat of a background task, so don’t expect a whole lot of speed.  This isn’t a tutorial either, look here for that, just a documentation of my process.  Hopefully some of you find it worthwhile, while I am sure some of you will find it cringe worthy!

 

Here, are the humble beginnings:

image

 

One of the challenges all modelers face is where to start?  I had trouble deciding.  Generally if I stat with a limb, I struggle a bit with proportions going forward, so this time I decided to start with the torso and upper legs.  Of course details are going to be added as I carry on in the process.  Currently we are sitting at 390 faces.  Ultimately I want to be in around the 5,000 mark.  There are several easy points of optimization here.  The eagle eyed viewer may also spot my first mistake too.

 

image

 

I always try to work in quads only, but sometimes corners just turn into triangles like this.  Look what happens if we apply a couple sub-divisions around this corner:

 

image

 

It’s not the end of the world, but not as clean as I would have liked.  In this case though, it still leaves me with proper edge loops in both directions, so I am not to phased about it.

 

 

So, where you might ask, is the concept art?  This is a good point and generally I would sketch in a front and side view, like I did in the Blender tutorial.  That said, for reasons I can’t bring myself to understand, whenever I do this with pen and paper, I just end up ripping off existing designs.  So in this case, I’m just going to wing it, although when it comes to the cockpit area, I may have to reconsider.

Art




Quixel dDo 5.3 texturing tool free for commercial use

23. March 2014

 

This tidbit comes care of reddit.  Quixel dDO 5.3 can now be downloaded (that’s a direct link) and is free for commercial use.

Here are details of the release from Quixel:

Yes, we are now making dDo as we know it free. Not only that but we have also spent some love and care on improving features, stability and UI. This version will have limited support but will still be updated as per your needs.

We sincerely hope that you who own dDo will not feel let down that you paid for something that will now be free, but rest assured we will do our best to make it up to you with a free upgrade to the all new, arguably more bad-ass, DDO.

So what exactly is dDO?  Here is the official description:

DDO empowers artists with tools to make better textures. DynaMask unlocks extreme masking control over ultra-real wear & tear and shape based coloration. The 100% customizable Smart Materials empowers artists with the easiest PBR workflow to date. And Fusion lets you plug DDO right into any app.

 

Perhaps of more use is actually seeing dDo in action.

Just a bit of a heads-up... dDo works in Photoshop, and thus requires Photoshop. Without Photoshop dDo is of no use to you.

Art




Blender 2.7 released

20. March 2014

 

Today marks the release of Blender 2.7 and you can download it here.  Let’s take a look at what’s new, with an eye towards game development.image

 

The first and most obvious thing you will notice is the changes to the user interface.

 

UI Changes

 

The number one thing you are going to notice is the toolbar tabs.  The Tools (T) pane is now organized in context sensitive tabs.  So like minded operations are grouped together, like so:

image

 

Personally I am a huge fan of this change, it makes the UI much more streamlined and cuts down on the noise. 

 

There is another UI change that I personally love, as I love very sparse windows when possible.  You can now collapse menus down.  For example, you can now go from this:

image

To this:

image

Simply right click, select Headers->Collapse Menu.  Again, I like this change.

There are several other UI refinements, but those are the most visible.

 

Modeling

 

First they’ve added the wireframe modifier, which is useful in a very limited number of scenarios.  Basically it makes a (3D) wireframe out of the selected model.  So this:

image

Becomes this:

image

 

NGon tessellation has been improved. No more holes on bad geometry.

In 2.69 it did this:

 

Now it does this:

 

Much better.

 

Bevel has more options now:

image

 

Laplacian modifier added.  To be honest, I don’t really get this one yet but it sounds pretty cool.

 

Of particular use for game exporting, the triangulate modifier has been improved with more fine control over how triangulation will occur:

image

 

Game Engine Changes

 

PSD File support added.

1st person shooter style camera controls (WASD).

Level of Detail (LoD) support added:

Manual-Level-of-Detail-Panel.png

 

Cycles Rendering

 

Cycles is probably the biggest improvement portion of this release.   Probably the biggest new feature is WIP support for volume rendering.

 

CPU support has been improved, shader language updated to increase performance and a host of other changes.

 

 

There were a host of other improvements including threading improvements for the dependency graph, API updates for the NPR (non-photorealistic) renderer, motion tracking improvements, general bug fixes and more.

 

All told a very nice release, with some great first steps for an improved UI.

News, Art




MakeHuman 1.0.0 finally released

15. March 2014

 

MakeHuman started life in 1999 as a Blender plugin named MakeHead, a plugin for procedurally creating head meshes.  In 2000 the first version of MakeHuman was released.  In 2005 it was turned into a stand alone application. Today we seem a major milestone release of MakeHuman 1.0.0!

 

So what exactly is MakeHuman?  It’s an application for generating human models.  Most impressively it generates very clean, fully rigged, quad only, Mudbox/zBrush ready models using 1170 controllable morph targets.  If you’ve ever played a video game that allowed you to fully customize your character, you have an idea what MakeHuman provides.  The major difference is MakeHuman generates a model ready for use in major 3D applications.  In many ways it is very similar to the application Poser.

 

image

 

Oh yeah, did I also mention it was completely free and open source?

 

Now for a couple key links. 

You can download MakeHuman here.

The source code is available here.

You can access the current buglist here.

The 1.0.0 press release is available here (and repeated below).

 

So why should you as a game developer care?

Well first of all, it is about one of the easiest ways to create game ready human assets.  Speaking of game ready, you also have the ability to create game appropriate rigs:

image

 

Perhaps most importantly, the resulting mesh is both clean and relatively low polygon ( unless of course you choose the smooth option ).  Here is an exported mesh opened in Blender:

image

All told its about 24K quads as currently configured.  The mesh is and ampature are both logically laid out (with clothing all as separate meshes) and ready for use:

image

 

If you need a human model for your game, you really have nothing to lose checking out MakeHuman.

 

Press release:

Art, News