PLATEAUが重すぎて落ちた話

開発当初、私は野心に燃えていました。「国土交通省が公開しているPLATEAUのLOD2（テクスチャ付き詳細モデル）を使えば、超リアルな東京をブラウザで完全再現できるじゃないか！」と。

しかし、その夢はブラウザのクラッシュという無慈悲な現実によって打ち砕かれました。今回は、リアルな3DデータをWebで扱う難しさと、そこから現在の「軽量ジオラマスタイル」に行き着いた経緯をお話しします。

LOD2モデルの破壊力

PLATEAUのLOD2モデルは、建物の形状だけでなく、壁面の写真テクスチャまで貼り付けられた非常に高精細なデータです。これを deck.gl の Tile3DLayer を使って読み込んでみました。

PCのChromeで実行。最初は「おお！リアルだ！」と感動しましたが、東京駅周辺に視点を移動した瞬間、ファンが爆音を上げ始めました。タスクマネージャーを見ると、GPUメモリ（VRAM）の使用量が危険水準に。

そしてiPhoneで動作確認をしたところ、ページを開いて数秒で「問題が繰り返し起きました」というエラーメッセージと共にSafariが強制終了。完全にスペックオーバーでした。

主な原因は以下の2点です。

テクスチャ画像の大量読み込み: 1つ1つのビルに高解像度のテクスチャが貼られており、都心部ではそれが数千枚レベルになります。モバイル端末の限られたメモリでは展開しきれません。
ドローコールの増大: 3D Tiles形式で最適化されているとはいえ、個別のマテリアルを持つオブジェクトの描画負荷は甚大でした。

「どんなにリアルでも、動かなければ意味がない」。
泣く泣くLOD2の使用を諦め、テクスチャのないシンプルな形状データ（LOD1）への切り替えを決断しました。

しかし、ただの白い箱では味気ない。そこで導入したのが、前回の記事でも紹介した「プロシージャルテクスチャ生成」と「MapLibreのライト機能」です。容量の重い画像データを使わず、コードで生成したノイズパターンと光の演出で「模型のような質感」を出す方向にシフトしました。

結果として、スマホでもサクサク動く軽快な動作を実現できました。ユーザーからも「模型みたいで可愛い」「動作が軽くて良い」というポジティブな反応を頂いています。

Webブラウザ、特にモバイル環境をターゲットにする場合、リソースの制限は非常にシビアです。「あるものを全部出す」のではなく、「何を捨てて、何を強調するか」という取捨選択こそが、エンジニアの腕の見せ所なのだと痛感した出来事でした。