2014年3月14日 星期五

30+ Cross Platform Mobile App and Game Development Tools


30+ Cross Platform Mobile App and Game Development Tools

http://www.riaxe.com/blog/top-cross-platform-mobile-development-tools/?fb_action_ids=10201601507067999&fb_action_types=og.comments&fb_source=other_multiline&action_object_map=[233188210202347]&action_type_map=[%22og.comments%22]&action_ref_map=[]

2014年3月10日 星期一

Using remote debugging for HTML5 on iOS

Debugging on mobile devices always has to back on your desktop devices, just like Android chrome debugging. (http://coderellis.blogspot.tw/2013/04/porting-html5-game-to-mobile-platform.html)

This article I would like to describe the approach by using web-inspector, its advantage is native supported by Apple, we needn't install any plugin. However, its disadvantage is you must have a Mac system devices, because it requires to use Safari version 6 later, and Windows' Safari' version is only available to version 5.1.7.

1. Enable web inspector
Go to your iOS device setting page. Enable the web inspector in the Safari->Advance. And then, connect your iOS device using USB connector to your Mac device.
 
2. Enable developer mode on Safari
Go to the Safari of your Mac, open the Setting->Advance, check the the enable developer menu.
Using the iOS device to open the web page you wanna debug. Then, go to Menu->Developer on your Safari of Mac, you could see your iOS device. Click the page to debug.



3. Enable WebGL
At the default setting of Mac's Safari browser, the WebGL function is disable, if we wanna use this feature, we have to enable it in the Menu->Developer.

4. Debug
Finally, we can start to debug iOS web page on our Mac. The debugging steps is simple and familiar, the usage approach is like other browsers' dev tool.


2014年3月9日 星期日

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