はじめに
10 月に、PLATEAU の千代田区 LOD2 建物を Web の 3D 地図エンジン 5 つで描き、Mac 2 台と iPhone 16 Pro で測りました（PLATEAU 3D 都市モデルの描画性能比較）。どれも速い機械で、差はあまり出ませんでした。そこで今回は、もっと厳しい機械で測りました。2018 年の iPhone XS と、普及帯の Android タブレット Galaxy Tab A11+ です。エンジンはどれも 11 月 11 日時点の最新版にそろえました。分かったことは 3 つです。
- Navara は、どの計り方でも崩れませんでした。 2 台とも周回とズームで画面の上限（59.5〜60.3 fps）を保ち、遅いフレームはほぼ 0 でした。Android の初回表示も振れが一番小さく、かっちり作られたエンジンだと感じました。
- 普及機でも 60 fps は出ます。 ortho-earth と Navara は 2 台とも 60 fps に張り付き、CesiumJS も Android で周回 57 fps・ズーム 60 fps でした。MapLibre＋deck.gl は周回で 60 fps に届きません。
- CesiumJS 1.147 は、古い iPhone でも動くようになりました。 前の版（1.146）は、XS で読み込み中に落ちていました。1.147 は 1 回なら最後まで完走します。ただし、続けて測ると途中で Safari が落ちました。
先に断っておくと、私は ortho-earth の開発者です。身内びいきにならないよう、条件は全エンジンでそろえ、測った数字のとおりに書きます。
比べ方
前回と同じ、PLATEAU 千代田区の建築物 LOD2（テクスチャなし）3D Tiles を、全エンジンに同じオリジンから読ませました。シナリオも同じです。初回表示（東京駅の上空 1,500 m・俯角 60°）、周回（高度 500 m・半径 1 km を 30 秒で 1 周）、ズーム（高度 10 km から 300 m まで 20 秒）を、それぞれ 5 周測り、中央値を取りました。1 周ごとにエンジンの順番を 1 つずらしています。
| iPhone XS | Galaxy Tab A11+ | |
|---|---|---|
| 位置づけ | 2018 年発売 | 現行の普及帯 |
| 中身 | A12 Bionic・iOS 18.7 | MediaTek MT8775・メモリ 6 GB・Android 16 |
| ブラウザ | Safari 18.7 | Chrome 156 |
| 画面 | 60 Hz | 60 Hz（計測の前後で確認）、描画 800×1184 |
| 配信 | Mac から Wi-Fi | Mac から USB |
| エンジン | 版 |
|---|---|
| MapLibre GL JS ＋ deck.gl | 6.17.0 ＋ 9.4.1（Tile3DLayer を重ね描き） |
| CesiumJS | 1.147.0 |
| Navara | @navaramap/three 0.3.1 |
| ortho-earth | @ortho-earth/globe 2.4.1 |
エンジンの機能差を混ぜないよう、次の条件をそろえました。
- 描画解像度は全エンジン 1x（CSS ピクセル）。ortho-earth は既定でスマホを 2x で描くので、1x に固定しました。
- 細かさの倍率は全エンジンで同じ。Navara は既定でモバイルの細かさを下げるので、倍率 1 に固定しました。
- 初回表示の完了は「タイルの読み込みが 5 秒止まった時刻」。キャッシュは無効です。
- 2 台を同じ回線で、同時に測りました。 タイルを取り合ううえに、計測中の通信状態にもばらつきがありました。初回表示は目安として読んでください。fps は回線の影響を受けません。
- TerriaJS は描画に CesiumJS を使っているので、今回は特に測っていません。
結果 1：動かしたとき
ortho-earth と Navara は、2 台とも周回とズームで画面の上限の 60 fps でした。
| エンジン | XS 周回 | XS ズーム | Android 周回 | Android ズーム |
|---|---|---|---|---|
| Navara | 59.5 | 60.0 | 60.3 | 60.2 |
| ortho-earth | 59.6 | 59.6 | 60.1 | 59.9 |
| CesiumJS | —（結果 3） | — | 57.4 | 60.5 |
| MapLibre ＋ deck.gl | 46.8 ※ | ※ | 38.5 ※ | 58.6 ※ |
（fps、5 周の中央値。60 が画面更新の上限。※ は下の注を参照）
遅いフレーム（1 フレーム 33 ms 超）の割合は、周回で Navara が XS 0.2%・Android 0%、ortho-earth が 0.7%・0.1%、CesiumJS が Android 2.4%、MapLibre＋deck.gl が 14%・21% でした。
※ MapLibre＋deck.gl は、地図の上に deck.gl が別のキャンバスを重ねて描きます。そのため数えた fps が画面の更新と合わず、XS のズームでは 80 fps と、上限を超える値が出ました。主スレッドの更新は周回で XS 23・Android 19 回/秒なので、実際の見た目は表の値より低いと考えてください。MapLibre の本業は 2D のベクトルタイルで、3D Tiles は deck.gl を借りて描いています。
結果 2：初回表示
| エンジン | iPhone XS | Galaxy Tab A11+ |
|---|---|---|
| MapLibre ＋ deck.gl | 12.3 秒（10.7〜17.1） | 6.0 秒（5.1〜7.4） |
| Navara | 15.4 秒（11.4〜23.9） | 8.3 秒（6.3〜9.3） |
| ortho-earth | 18.9 秒（11.6〜25.6） | 10.0 秒（8.5〜12.1） |
| CesiumJS | 11.1 秒（1 回） | 10.2 秒（9.4〜14.5） |
（5 周の中央値、括弧内は最小〜最大）
通信状態のばらつきで、同じエンジンでも XS では周によって 2 倍近く違いました。エンジンの間の差はこの振れより小さいので、順位は付けません。その中で Android の Navara は 6.3〜9.3 秒と、振れが一番小さく出ています。
結果 3：iPhone XS の CesiumJS
CesiumJS だけを先に単独で 1 回測ると、XS でも初回表示 11.1 秒・周回 56.1 fps・ズーム 60.0 fps で最後まで走りました。前の版の 1.146 は、読み込み中に Safari ごと落ちていました。ただし、他のエンジンと順に 5 周測ると、1 周目のズームで Safari が落ちました。そのため XS の表からは外しています。Android では 5 周とも完走しました。
エンジンごとに
Navara：今回いちばん印象に残ったエンジンです。細かさの倍率を他とそろえて、モバイルでの手加減を外しても、古い iPhone でも普及機でも 60 fps を崩しませんでした。遅いフレームもほぼ出ず、初回表示の振れも小さい。データの解読と形の組み立てを Rust（WebAssembly）で行い、描画を Three.js に任せる作りが、弱い機械でもそのまま効いています。かっちり作られている、というのが素直な感想です。
CesiumJS：1.147 で、古い iPhone でも 1 回なら最後まで走るようになりました。Android では周回 57 fps・ズーム 60 fps で、普及機でも十分に滑らかです。
ortho-earth：2.4.1 のいちばんの成果は、CesiumJS に機能の面でほぼ追いついたことです。Cesium の公式例（Sandcastle）304 本が全部動き、264 本で同じ絵、残る 40 本も同じ答えになりました。そのうえで性能を見たのが今回の計測です。2.4.1 では 3D Tiles の描き方も軽くしました。片面の建物は裏面を描かず、深度の持ち方を変えて GPU が早めに描かない画素を捨てられるようにしています。その結果、2 台とも 60 fps に届きました。
MapLibre＋deck.gl：2D の地図では定番の組み合わせですが、3D Tiles を重ね描きすると、弱い機械では周回で 60 fps に届きませんでした。前回の Mac と iPhone 16 Pro でも同じ傾向です。初回表示は、今回も速い側に入っています。
おわりに
古い iPhone と普及機のタブレットでも、PLATEAU の千代田区を 60 fps で回せるエンジンが、もう複数あります。速い機械だけでなく、多くの人が実際に持っている機械でも、都市の 3D を気軽に見られるようになってきた、というのが今回のいちばんの収穫でした。
ただし、今回の結果には限りがあります。前回と同じく、測ったのは千代田区のテクスチャなしの建物だけで、データの規模が小さすぎました。ほとんどのエンジンが 60 fps の天井に届いてしまい、地力の差は見えていません。ortho-earth が WebGPU で描くことによる速さも、実はまだ評価できていません。XS の Safari 18 には WebGPU が無く、ここでは WebGL2 で動いています。Android では WebGPU で動いていますが、天井に届いているので差が出ません。WebGPU の効き目を確かめるには、都心の複数の区、テクスチャ付きの建物、地形や背景地図まで載せた大規模なデータでの評価が必要です。次はそれを測るつもりです。