三次元空間をタイル状に区切って逐次データを読み込み描画！ 3D Tiles を利用した Meta Bath がおもしろい
メタバースじゃなくて、メタバス
今回ご紹介するのは、日本の昔ながらの銭湯をテーマにした WebGL のコンテンツです。
こちらは公益財団法人東京都歴史文化財団と東京都が企画したもののようで、日本の文化に親しんでもらおう、知ってもらおうみたいな背景があるのかなと思います。
技術的には、ポイントクラウドや地形データを表示する際に用いられることが多い技術が使われているようで、なかなかおもしろい事例となっています。
リンク：
Cesium が提案する 3D Tiles を利用
今回のサイト、一度開いてみるとわかると思うのですが、3D データが最初は粗い状態で、時間が経過するごとに徐々に鮮明になっていくというおもしろい変化をたどります。
データを逐次読み込みし徐々に解像度を上げていく感じは、ウェブ上だと画像の読み込みなどでも類似の技術が用いられていますよね。（最初はボケてるけどだんだん鮮明になっていくやつ）
最初から詳細なデータを描画しようとするのではなく、まず軽量なデータを持ってきて描画を開始するというアプローチは、実利的な意味ももちろんあるんでしょうけれども、グラフィックスとして見ていてもなかなかおもしろいです。
ゲーム開発などで用いられる LOD の考え方ともまた違って、カメラに近いとか遠いとかではなく、画角にそれが含まれるかどうかなどを基準に逐次データを読み込みしているようですね。
視点を動かすと、その都度細かくデータが読み込み・パースされているのがわかると思います。
サイト内にあるメニューなどから「本サイトの使用技術」の項目を見ると、3D Tiles という技術と three.js を使っていると記載があります。
気になってちょっとだけ調べてみたのですが、Cesium がオープンソースで仕様を管理している同名のプロジェクトがあったので、たぶんこれを使っているんでしょうね。
スクロール操作を行うことでカメラはある程度自動で進んでいってくれますが、場面によっては、一度立ち止まってより詳細な情報を探索するようなモードへと移行できます。
アイコンをクリックすることで説明文が表示されるほか、対象となっている部分にカメラがフォーカスするように自動で動いてくれます。
もちろん、そのような演出上のカメラの移動が発生した場合でも非同期でどんどんデータが読み込まれてきて、リアルタイムに 3D シーンが更新されていきます。
Cesium は WebGL に詳しい方であればほとんどの人が名前を知っていると思いますが、地図データや地形データ、都市のデータなどを扱うためのさまざまな研究開発を行っている組織です。
ものすごくいろいろ省略してざっくり言うと、glTF と Draco を使って軽量化された地形データを逐次読み込みする、というのが 3D Tiles のやっていることみたいですが、今回のように文化的アーカイブに用いられているのは素晴らしい活用方法だなと感じました。
資料としても、またウェブコンテンツとしてもなかなかよく考えて作り込まれていると思います。
ぜひチェックしてみてください。
