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

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

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

というケースをイメージしています。 以前は BlenderでJSON形式を吐き出して、JSONLoaderで読み込んでいたのですが、今回 glTF形式でやってみたいと思います。

ちなみに、自分は3Dに関する知見は非常に浅いです。。。😌


OUTLINE

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

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です。半分以下ですね👏

長くなりそうなので、分けます。

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

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

NEWER POST
OLDER POST