WebGL Demo 02: 3D model loader and preview

When you want to display a complex 3D mesh in your 3D application, you must want to find an external model format for you to use. They would be COLLADA(.dae), FBX(.fbx), or OBJ(.obj). However, If you want to make a 3D engine, you must want to support more kinds of formats. Therefore, I start to research FBX SDK.

FBX SDK supports .fbx, .dxf, .dae, and .obj file formats' importer/exporter, and .3ds format has been retired. FBX technology can be used to sharing scene assets, storing, packing models for sale, and processing animation, it supports import/export functions in Autodesk's products(3ds Max, Maya, AutoCAD...). The FBX SDK is a part of Autodesk FBX technology, it is C++ Software Development Kit. You can use it to create plug-ins, converters, and other applications. FBX SDK's source code is not public opening, therefore, we just can use their SDK interface, and if you want to redistribute or repacked, you should write permission from Autodesk, and include a link to the Autodesk FBX website to user install the required version of the FBX SDK. (http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775847)

FBX SDK is divided into three parts:

• FBX SDK
  C++ library, you can integrate it with your content creating pipeline, to make file parser, converter, importer, and exporter.
• FBX extension
  For customizing the behavior of the FBX importing and exporting by define dynamically loaded library.
• Python FBX
  Using Python binding C++ library of FBX SDK, it allows us to write Python scripts that can use classes and functions of FBX SDK.

FBX formats:

Most of classes in the FBX SDK are derived from FbxObject.

FbxScene, the FBX scene graph is organized as a tree of FbxNode objects. These nodes are cameras, meshes, lights...elements, These scene elements are specialized instances of FbxNodeAttribute.

I/O objects, FbxImporter and FbxExporter objects are used to import and export scene.

Collections, most container classes are derived from the FbxCollection class. FbxScene is just derived from FbxCollection through FbxDocument.

FbxScene:

The scene graph is abstracted by FbxScene class. It is a hierarchy nodes. The scene element is defined by combining a FbxNode with a subclass of FbxNodeAttribute.

FbxNodeAttribute: FbxNode is combined by Transformation Data and Node attributes(FbxAttrubute).

FbxSurfaceMaterial:

FbxTexture:

Load fbx/dae/obj model to scene:

#include "fbxsdk .h"
#include "fbxfilesdk/fbxio/fbxiosettings.h"

// Create the FBX SDK manager
FbxManager* lSdkManager = FbxManager::Create();

// Create an IOSettings object.
FbxIOSettings * ios = FbxIOSettings::Create(lSdkManager, IOSROOT );
lSdkManager->SetIOSettings(ios);

// ... Configure the FbxIOSettings object ...

// Create an importer.
FbxImporter* lImporter = FbxImporter::Create(lSdkManager, "");

// Declare the path and filename of the file containing the scene.
// In this case, we are assuming the file is in the same directory as the executable.
const char* lFilename = "file.xxx"; // the file extension can be dae, obj, fbx

// Initialize the importer.
bool lImportStatus = lImporter->Initialize(lFilename, -1, lSdkManager->GetIOSettings());
// Create a new scene so it can be populated by the imported file.
FbxScene* lScene = FbxScene::Create(lSdkManager,"myScene");

// Import the contents of the file into the scene.
lImporter->Import(lScene);
// The file has been imported; we can get rid of the importer.
lImporter->Destroy();

Convert FBX model:
My demo engine uses three.js engine, it has provided the fbx/convert_to_threejs.py converter, which uses Python binding C++ library of FBX SDK. You can use the Python SDK import your fbx file by your converter. In your terminal window, insert

convert_to_threejs.py [source_file] [output_file] [options]

You can find the output folder has a three.js in-house model file, which is json format, and you also see the textures your model needs have been copied to your folder[that is my contribution on three.js].

Preview in three.js:
Load your model

function loadScene() {
  var loader = new THREE.SceneLoader();
  loader.load( 'outFBX/basketball/basketball.js', callbackFinished );
}

function callbackFinished( result ) {
                         
  result.scene.traverse( function ( object ) {                    
     _scene.add( object );
  } );                
}

Result:

Model is downloaded from: http://tf3dm.com/3d-model/official-nba-spalding-basketball-86751.html

Reference:
Autodesk FBX SDK doucment: http://docs.autodesk.com/FBX/2013/ENU/FBX-SDK-Documentation/index.html
three.js: https://github.com/mrdoob/three.js