前回の浅草に引き続き、今度は新宿を表示してみようと思います。データのダウンロードやBabylon.jsでのWebXR表示については前回やりましたが、今回はLOD2という建物の外観も含めた詳細なデータを表示してみることにします。
前回と同様にglb形式に変換してみます。規模が大きく、Blenderの動きが怪しいので一区画だけにします。ここがどこだか良く分からないのですが、色が付いていれば分かる人には分かるのでしょうね。
Blender経由でLOD1浅草と同様にfbxをglbに変換して最適化したのですが、あまりデータサイズは小さくなりませんでした。一旦そのまま使うようにします。ちなみに最適化しようがしまいが80MBほどでした。
WebXRアプリケーションを作るとすると、ちょっとデータが大きいですね。
※Babylon.jsは段階的ロードに対応していますがそういう問題ではなくて、パケ放題なら兎も角スマホ利用を考えると通信量として80MBが飛ぶのはインパクトが大きい気がします。
https://doc.babylonjs.com/divingDeeper/importers/progressiveglTFLoad
glbファイルをThree.jsで表示する
弊社サービス「ARigance」で撮影して得られた静的コンテンツも一緒に表示してみます。
360度から観られるコンテンツを作成・共有できるサービスARigance、絶賛利用者募集中で御座います！
https://ar.arigance.com/
撮影時にカメラを前後に配置すれば、それで360度から観られるコンテンツが撮れます！
gltfファイルをglbファイルに変換してThree.jsで表示する
自社サービスの紹介など入れつつ…。
先ほどはBlenderから “glb”形式でエクスポートしていたのですが、バイナリではない”gltf”形式でエクスポートしてみたところファイルサイズが小さくなりました。テクスチャの関係なのかエクスポート時にjpeg形式で吐き出させたら変わりました。それを更にglb形式に変換したら12MBまで小さく出来ました。
もともとが高精度過ぎたのか、これでも十分に思える品質でビル群を表示できました。12MBであれば、工夫次第でアリだと思います。ただもし新宿全体で100MBぐらいとなると、またちょっと工夫が要りそうです。
宙に浮かせたオブジェクトから床に影を落としてみました。全体で一つではなく、それぞれ独立したメッシュとして扱えていることが分かります。
おわりに
LOD1であれば十分WebXRでも利用できると考えられるデータサイズに変換できましたが、LOD2については工夫が要りそうだなという印象です。ビルの外観が「コンクリートで一つのテクスチャ」などではなく、千差万別の外観がそのまま利用されているということもありデータサイズが大きいのではないかという想像をしています。もし建設時の3D-CADデータなどを使えて「素材が共通テクスチャのLOD4」のようなものができれば、そんなに大きなデータにならないかも知れませんね。
正直なところ、LOD2でビルの形状なども扱っており外観もほぼ正確に実現できることに驚きました。ただ、実は扱いどころが難しいLODなのではないかという印象もあります。例えばもし街歩きのようなアプリケーションを作るとしたら目の前に表示されるべきオブジェクトは精巧なLOD3やLOD4が適切だと思います。汎用的だからこそ、どの用途にも微妙に使えないのではないかという疑問があります。
データサイズから疑問が出てきましたが、そもそもOBJ形式を使えばそうでもないのでしょうか？？
浅草のLOD2以上が出たら、また記事に取り上げたいと思います。
