Blender ~ glTF ~ Babylon.js 使ってみた

主業が雑務とWebエンジニアで、この間個人の興味・仕事のニーズともにあってブラウザの3Dレンダーに少し触った人です。

今回はBlenderモデルファイルからglTFフォマットに書き出して、Babylon.js でロードしてレンダーする流れを紹介しようと思います。

Babylon.js使うとはいえ、この文章ではBabylon.js sandbox でglTFレンダーするだけで、コードは1行もありません。

グラフィックス関連の膨大した知識と比べて自分はどうも経験浅いため、気になることあればぜひコメントしてください。

プレイヤー紹介

Blender

3Dモデル編集、動画、オフラインレンダリングなど大量の機能を内蔵したオープンソースソフトウェア。

glTF

3Dモデル界隈のファイルフォマットの1つ。obj, fbxより新しくオープン仕様のもので、個人はより多く利用しています。

Blenderがこのフォマットでの書き出し機能を内蔵していて、Babylon.jsもこのフォマットのloaderを内蔵しています。

ただし3Dレンダーのプロセスが複雑なものでして、同じフォマットといえど、レンダーに必要な情報がソフトウェアをまたいでキープ・認識されるわけではありません。こんなことが互換性問題を起こします。

この互換性問題とワークアラウンドについては正文でまた説明します。

Babylon.js

ブラウザ用の3Dライブラリ。個人は入門の最初にこれのドキュメント見ていた、ソースコードがTypeScriptとかの理由でよく使っています。

この系のライブラリで、他にもthree.jsなどがあります。このあたりは https://qiita.com/kouta_vr/items/2665cf60d6a618fd3b4a の紹介もご覧ください。

正文

0. Blenderでモデルファイル開く

free3d / Coca Cola bottle からダウンロード・解凍した Coca_Cola.blend を開くと、Blender: Default Workspace の状態に似た画面が見えます：

左: 3D viewport、各オブジェクトの位置と様子を見せる。モデルを編集する場合編集操作もここでする。
右上: Outline、オブジェクトの一覧
右下: Properties、選択中オブジェクト、及びグローバルの属性を編集できる。

3d viewport最初は「Solid」モード（マテリアル適用しない高速モードみたいなもの）ですが、モデルの全貌を見るために ホットキーZ開いたメニューから「Rendered」モードを選ぶとこうなります：

1. glTFへの書き出し

右上のOutlineのオブジェクト一覧の中では、コーラ瓶の他にライト、カメラなどオブジェクトが存在します。今回では使わないので、瓶自体を構成したオブジェクトだけ書き出します。

OutlineでBottle / Sticker / Straw を選んだ状態で、メニューのFile > Export > glTF v2.0からこのダイアログ開きます：

1. 右上のFormatを glTF Embedded (.gltf) にする
2. Formatの下にあるIncludeに、Limit to / Selected Objects をチェックする

この状態で書き出した .gltf ファイルは選んだコーラ瓶オブジェクトだけ含めます。

2. Babylon.js でglTFをレンダーしてみる

Babylon.jsの公式サイトに sandbox というページがあって、このページではモデルファイルのプレビューができます。この前書き出したファイルをいれると、こんなレンダー結果になります：

3. マテリアル互換性問題

BlenderのRendered状態と比べて、Babylon.js sandboxでコーラ瓶が色がついていません。この原因は、BlenderにあったマテリアルがBabylon.js まで留保されなかったからです。

BlenderにあったMaterialは右下の Shader Nodes を使って、左下のテキスチャー画像をいくつかの処理に通して、Stickerに適用しています：

ただしBabylon.js のInspectorで、コーラ瓶ラベルの部分見ると、マテリアル種類がBabylon.jsデフォルトのPBRMaterialになっているし、テキスチャーもついていない状態になります。

この違いの理由はこのStack Exchange解答によって解説されています： https://blender.stackexchange.com/a/57541/125507

簡単に訳すると「マテリアルのデータ表現が難題であり、ソフトウェアを跨ぐ互換性は一般的に望めない。レンダー側でマテリアル作り直せ」ということです

4. テキスチャー画像も書き出して、Babylon.js sandboxで適用する

Blenderからテキスチャー画像をjpgファイルに書き出して、このjpgをBabylon.js sandboxの Sticker meshに繋がった Material.003 マテリアルに「albedoTexture」として設定すると、ラベルがこうなります：

まだ見た目違いますが、UVマッピングはBlenderのときと一致するし、上のStackExchange回答にあった「UVマップまでは互換性いいがマテリアル・テキスチャーに難あり」は本当のようです。

※ここはPBRMaternalのalbedoTextureに適用しただけで、元のBlenderマテリアル同等になるわけではありません。元のマテリアルを理解して、Babylon.jsも理解していれば正確に再現する方法はあると信じますが、筆者はまだそのレベル以前にあります。

3Dグラフィックスは底なし深いけど、面白みもあるので勉強を続けたいと思います。