最近、Babylon.js Editorのテンプレートプロジェクトを作っています。とくに、WebXRコンテンツがEditorで作れるようにとおもって、PLATEAUの3DCGモデルを使ってWebXR (immersive-vr) でウォークスルーができる仕組みを作ろうと思いました。
しかし、Babylon.js EditorでPLATEAUの3DCGモデルを表示させると、未加工だといくつかの問題があって簡単に使用できませんでした。また、途中でスクリーンショットを紹介しますが、Three.js EditorやGodot Engineでも同じ状態です。
そこで、Blenderを使ってそれらの問題を自動的に補正できるスクリプトを作っています。まだやりたいことが全てできていませんが、Three.js EditorやGodot Engineなどの他のツールでも有効と思われますので、現時点のものをいったん共有します。使用しているBlenderのバージョンは2.93です。
1. PLATEAUの3DCGモデルをBabylon.js Editorでそのまま読み込むと発生する問題点
1.1 座標が全て0, 0, 0になっていて、位置関係がわかりづらい
PLATEAUの3DCGモデルは座標をみてもx, y, zが0になっており、実際のワールド座標どの辺りに配置されているかがわかりません。
そのため、Babylon.js Editorで読み込んだPLATEAUの3DCGモデルを、UnityでいうMain Cameraの範囲に移動させたくても困難です。
他の3DCGモデルであればEditorの画面に追加すると確認することができるのですが、PLATEAUの3DCGモデルをそのまま読み込み、Go To Selected Objectを実行すると、このように真っ暗になってしまいます。
これは、Three.js EditorやGodot Engineでも同様で、3DCGモデルを読み込んでも見た目では何も表示されずフォーカスしても変化しませんでした。
■Three.js EditorでPLATEAUの3DCGモデルを読み込んだ場合
■Godot EngineでPLATEAUの3DCGモデルを読み込んだ場合
ちなみに、Unityの場合はMain CameraとPLATEAUの3DCGモデルの位置関係を確認できました。
1.2 建物の壁など、細かい単位でメッシュが分かれている
これが原因かはわからないのですが、読み込みに失敗したfbxファイルについて、メッシュをある程度統合することで読み込めるようになったことがありました。
1.3 都心部の3DCGモデルは１つのfbxで100MBを超えるものもあり、読み込み/書き出し失敗することがある
大きいものはBabylon.js Editorに限らず描画負荷が大きいです。今回は簡単なウォークスルーができればよいので個別の3DCGモデルのクオリティは多少落としたいと思っています。
2. 対応方針
Blenderを使うとそれぞれの問題を解決できます。ただ、PLATEAUの3DCGモデルは多数あるので、手作業で修正していくのはかなり大変です。そこで、やりたいことをBlenderで自動実行できるようにしています。
Blenderで処理を自動実行させるには、Pythonスクリプトを使います。Pythonを使った書き方については、公式ドキュメントや様々な記事で確認できます。以下は例です。
１点注意として、BlenderのPythonスクリプトの文法は、Blenderのバージョンが2.79以前と2.80以降で色々と変わっています。インターネット上の情報はまだ2.79のものが出やすいのもあり、書かれている通りに試してもうまくいかない場合は、2.80以降なのかを確認することをお勧めします。
ちなみに、「MRが楽しい」というブログでは、BlenderでPythonを使う方法が多数書かれております。また、2.79までの情報だけでなく、2.80以降の使い方も丁寧に書かれており、大変参考になります。
3. 現在の対応状況
PLATEAUの3DCGモデルをBlenderで読み込み、１つの建物のメッシュを結合 、１つの建物のメッシュの大きさと位置関係を10倍に変更、１つの建物のワールド座標上での位置を指定、ポリゴン数削減を行うところまで作りました。
以下のようにGitHubで公開しています。
github.com
補正した3DCGモデルをfbxで出力する場合、以下の記事もご参考ください。
4. おわりに
残りの問題は、3DCGモデルが原点から遠すぎて、Babylon.js Editorで読んだときにうまく表示できないことです。これについては、以下の記事で紹介されているようにBlenderを2D表示して原点との関係がわかるようにしてから、メッシュを全選択、手動で移動させる方法が有効です。
しかし、3DCGモデルの元の位置があまりに大きく離れすぎていると難しいし、マウス操作の繰り返しでそれなりに時間もかかるので、自動化させるか、せめて多少楽になるようにしたいと思っています。これについては出来上がったらGitHubを更新予定です。
2021/7/25 追記
対応しました
