RYO620
DESIGN & DEVELOPMENT
BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる (1/2)
Ryosuke

BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる (1/2)

非常にレアケースかもしれませんが、備忘録を残しておきます。

  • コンシューマorスマホゲーム案件などで、既にFBXのファイルがある
  • その3Dのキャラをweb上で動かしたい

というケースをイメージしています。 以前は BlenderでJSON形式を吐き出して、JSONLoaderで読み込んでいたのですが、今回 glTF形式でやってみたいと思います。 ちなみに、自分は3Dに関する知見は非常に浅いです……。


OUTLINE

  • Get started (この記事)
    • glTF (GL Transmission Format)とは
    • Exporter の準備
    • FBXファイルの準備
    • Autodesk FBX Converter で変換
  • FBXをglTFに変換する (この記事)
    • glTF Metallic Roughness をリンク
    • glTFを出力する
  • Three.js で3Dを表示させる (次の記事)
  • glTFを表示させる (次の記事)
  • glTFをアニメーションさせる (次の記事)

Get started

glTF (GL Transmission Format)とは

Khronos Group によって開発されたJSON形式の3Dファイルフォーマットです。 「画像ならJPEG、音声ならmp3、そして 3DならglTF 」というのを目指しているとかいないとか。 Three.jsに関しては、JSON、Obj、FBX、Collada、3DMax等の形式に対応していますが、今後 glTFがメインストリームになっていくのでしょうか? 名前、もうちょっとキャッチーにして欲しい気が、最初覚えにくかった。 詳しくは[クロノス・グループ、「glTF」の有能な進展を発表][クロノス・グループ、「glTF 2.0」を発表] を。

Exporter の準備

glTF Exporter のアドオンを Blender に追加します。 KhronosGroup/glTF-Blender-Exporter

上記の scripts/addons の中にある io_scene_gltf2/ を Blenderのアドオンディレクトリに追加します。 Macの場合、 blender.app/Contents/Resources/2.79/scripts/addons/ になります。

その後、Blender上で設定を開き、 glTF Exporter を有効化すればOK。

FBXファイルの準備

HSP3オフィシャル3D素材 “珠音(たまね)” という、自由に使用させていただけそうなローポリのFBXファイルがあったので、お言葉に甘えます。 HSP、高校生の時に触ってたなぁ……。懐かしい。

Autodesk FBX Converter で変換

FBX形式は、ASCIIタイプ と Binaryタイプがあり、Blenderで読み込めるのは後者になります。Blender でASCIIタイプを読み込むと ASCII FBX files are not supported ... というエラーが出るので、Binaryタイプに変換してあげる必要があります。

Autodeskが Autodesk FBX Converter という変換器を提供してくれているので、ここからダウンロードして使いましょう。 (「FBX Converterの提供を終了しました。」とありますが、2018/01現在もDL可能です)

左中段の Add からオリジナルのFBXファイルを選択、右の FBX Save ModeBinary にしておきます。 右下の Convert を押下すると変換完了。 自動的にオリジナルファイルのFBXファイルの階層に FBX 2013/ というディレクトリが作成され、そこにアウトプットされています。 階層が一段変わったので、このままだとテクスチャの画像がリンク切れとなってしまい、インポート時にBlenderがフリーズしてしまいます。オリジナルファイルを退避して、アウトプットファイルを正しい場所に配置しておきます。

たまねちゃんのFBXファイルは元々Binaryタイプでしたが、FBXのバージョンが古いようで、 Version 6100 unsupported, must be 7100 or later とエラーが出ました。 この場合でも、同様にFBXConverterでバージョンを上げることで解決します。


FBXをglTFに変換する

Blender を開き、ファイル -> インポート -> FBX(.fbx) で用意したFBXを読み込みます。

とりあえず今回のFBX形式はデフォルト設定のまま読み込めました。素材によってはメッシュ向き、ボーンの接続について設定を修正する必要があります。 glTFはシーンをそのまま出力することになるので、カメラやライトは削除しておきました。 これらはThree.jsで追加します。

glTF Metallic Roughness をリンク

Blender の ファイル -> リンク から シェーダーをリンクさせます。 ファイル選択画面がでてくるので、glTF Exporter の追加時にダウンロードした、 glTF-Blender-Exporter-master/ を選択。 glTF-Blender-Exporter-master/pbr_node/glTF2.blend/NodeTree/ と辿っていき、 glTF Metallic Roughness をリンクさせます。

サーフェスとして glTF Metallic Roughness が追加されています。

BaseColor から 画像テクスチャ を選択。 たまねちゃんは head_SD.tgabody_SD.tga という二枚のTGAファイルで構成されていたので、PNGに変換してそれぞれ画像を適応します。

テクスチャが適応されました。

Blender の ファイル -> エクスポート -> glTF 2.0 を選択。とりあえずデフォルトのまま出力。

tamane.gltf // glTFファイル tamane.bin // 頂点データ body_SD.png // 体テクスチャ head_SD.png // 頭テクスチャ

上記のようなファイルが出力されるはずです。 FBX形式のオリジナルは 342KB でしたが、glTF + binは 164KB です。半分以下ですね。

長くなりそうなので、分けます。次はThree.jsで表示して、アニメーションです。

BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる (2/2)

※誤りなどありましたら、twitterとかで教えていただけるとありがたいです。