Mapbox GL JS + deck.gl で高度な 3D データ表現

この記事は Mapbox Advent Calendar 2022 の12日目の記事です。

Mapbox の弱点として、3D のデータ表現が弱いということが言われます。確かに、3D 地図の上空に何かを配置したり、3D の点群を地図に重ね合わせて表示するための標準的な機能はありません。もちろん、カスタムスタイルレイヤーを使って、直接 WebGL もしくは Three.js のようなライブラリで 3D オブジェクトを配置することもできますが、あまり手軽ではありません。あるいは fill-extrusion レイヤーの fill-extrusion-base プロパティを使って、宙に浮いた押し出しポリゴンの物体を表示するという方法もありますが、何となく無理やり感が拭いきれません。

そこで便利な方法が、Mapbox GL JS と deck.gl の組み合わせです。deck.gl の GeoJsonLayer は Mapbox とは異なり、GeoJSON の高さパラメータ（GeoJSON 仕様 RFC 7946 ではオプショナル）をちゃんと解釈して 3D 空間に GeoJSON の要素を配置してくれるため、データを用意するだけで表示できるので手軽です。また、LineLayer、PathLayer、ScatterplotLayer、SolidPolygonLayer を使ってプリミティブな要素を表示することもできますし、地点間の繋がりを 3D の弧で表現できる ArcLayer や、loaders.gl でロードした 3D オブジェクトや luma.gl の 3D オブジェクトを表示する SimpleMeshLayer など、表現力の高いレイヤーを利用することもできます。

deck.gl の各レイヤーを Mapbox に組み込むには主に3つの方法があります（オーバーレイ、インターリーブの違いはこちらのページの図がわかりやすいです）。

1. MapboxOverlay を使ったオーバーレイ

Mapbox のレイヤーは1つの Canvas に、deck.gl のレイヤーは別の Canvas に描画し、最後に重ね合わせます。2D マップに適しています。

2. MapboxOverlay を使ったインターリーブ

Mapbox の各レイヤーと deck.gl の各レイヤーを共通の WebGL コンテキストで描画します。deck.gl のレイヤーはまとめて Mapbox のコントロールとして追加します。3D マップに適しています。

3. MapboxLayer を使ったインターリーブ

Mapbox の各レイヤーと deck.gl の各レイヤーを共通の WebGL コンテキストで描画します。deck.gl の各レイヤーは個別に Mapbox のカスタムスタイルレイヤーとして追加します。3D マップに適しています。

おすすめは「2. MapboxOverlay を使ったインターリーブ」です。共通の WebGL コンテキストを使って各レイヤーを描画するため、レイヤーをまたがって 3D オブジェクトの深度テストが行われ、物体の前後関係がきちんと反映されます。また、オブジェクトピッキング（マウス座標のオブジェクトの特定）にも対応します。

次のコードは、deck.gl の ScatterplotLayer を MapboxOverlay を使って Mapbox にインターリーブする例です。

import {Map} from 'mapbox-gl';
import {MapboxOverlay} from '@deck.gl/mapbox';
import {ScatterplotLayer} from '@deck.gl/layers';

const map = new Map({
    center: [139.7670, 35.6814],
    zoom: 14,
    pitch: 60
});

const overlay = new MapboxOverlay({
    interleaved: true,
    layers: [
        new ScatterplotLayer({
            id: 'my-scatterplot',
            data: [
                {position: [139.7670, 35.6814, 1000], size: 100}
            ],
            getPosition: d => d.position,
            getRadius: d => d.size,
            getFillColor: [255, 0, 0],

            beforeId: 'admin_labels' // この Mapbox レイヤー ID の直下に挿入する
        })
    ]
});

map.addControl(overlay);

地下に物体を配置した時の問題

さて、これで一件落着というところですが、このままでは地下に物体を配置した時に問題が起きる場合があります。具体的には、ズームレベルを変えたり、ピッチを変えたりしたときに地下のオブジェクトが欠けたり見えなくなることがあります。これはいったい何でしょう？

通常 3D 表示を行うアプリケーションは、描画パフォーマンス最適化のために、カメラを向けた空間を視錐台（Viewing frustum）と呼ばれる領域に区切り、その内部にある物体のみを描画します。Mapbox や deck.gl も例に漏れずこれに従っていますが、地表面にあるものの表示に最適化しているためか、基本的に地下の領域は見えないものとして扱っているフシがあります。

次の図は、視錐台を横から見た様子です。実装のコードを見てみると、視錐台の後方クリップ面は視野内の地表全体が見えるぎりぎりのところまで視点寄りになるように計算されています。視点から後方クリップ面までの距離（farZ）は、視野内の地表の最も遠い距離（furthestDistance）と、視界が届くものと仮定する距離（horizonDistance）のいずれか小さい方になります。そして horizonDistance は、カメラから地表までの距離（cameraToSeaLevelDistance）の10倍という固定値になっています。

真上から見た場合、furthestDistance は地表までの距離と同じになるため、地下の物体はまったく表示されません。水平線が見えない程度のピッチの場合、furthestDistance は画面上端に当たる部分の地表までの距離になりますが、この場合見える物体と見えない物体が出ますし、地下深くのものはいずれにしろ見えないでしょう。さらに、画面に水平線が見えている場合は、furthestDistance は無限大（実際にはクリップされて非常に大きい値）になりますので horizonDistance が支配的になりますが、cameraToSeaLevelDistance の10倍より遠くの物体は表示されなくなるため、特にズームインした時の地下の見える範囲が狭まります。

ビューポートの farZ パラメータを調整する

対策はどのようになるでしょうか。直感的に思いつくのは、地下の物体が見えるように後方クリップ面を大きく後方にずらすことです。しかし、これの弊害は、表示する 3D オブジェクトの数が増える可能性があり、最悪の場合描画パフォーマンスが大幅に落ちること、そして、深度テストを行う際の計算誤差が出やすくなり、ポリゴンのちらつき（z-fighting）が起こる可能性が増えることです。このため、ずらすにしてもできる限り影響の少ない量にする必要があります。

例えば、地下1kmまでの何らかの分布データを表示することを想定しましょう。まず、furthestDistance による判定は、不要なので考慮から外します。そして新たな farZ の値は、horizonDistance か、(cameraToSeaLevelDistance + 1km) のいずれか大きい方、とすればおおよそ良いのではないかと思います。

では、視錐台を決定するビューポートの farZ の設定はどこで行なっているでしょうか。Mapbox では src/geo/projection/far_z.js の 26行目、

return Math.min(furthestDistance * 1.01, horizonDistance);

というところを

return Math.max(horizonDistance, cameraToSeaLevelDistance + (1000m));

のように変えてやれば良いはずです。しかし注意が必要です。ここでの距離の単位はメートルではなく「スクリーンピクセル」です。メートルをスクリーンピクセルに単位変換するには、tr.pixelsPerMeter を掛けてやれば良さそうです。

return Math.max(horizonDistance, cameraToSeaLevelDistance + 1000 * tr.pixelsPerMeter);

一方、deck.gl は math.gl の modules/web-mercator/src/web-mercator-utils.ts の 334行目、

const farZ = Math.min(furthestDistance * farZMultiplier, horizonDistance);

というところを

const farZ = Math.max(horizonDistance, cameraToSeaLevelDistance + (1000m));

と変えれば良さそうです。こちらは単位は「スクリーン（スクリーンの高さを1とする）」です。しかし、math.gl には単位変換するための係数がないため、このコードが含まれる getProjectionParameters を呼び出している deck.gl の modules/core/src/viewports/web-mercator-viewport.ts の 157-167行目に次の赤字の行の unitsPerMeter というパラメータを加えてやります。

projectionParameters = getProjectionParameters({
    width,
    height,
    scale,
    center: position && [0, 0, position[2] * unitsPerMeter(latitude)],
    offset,
    pitch,
    fovy,
    nearZMultiplier,
    farZMultiplier,
    unitsPerMeter: scale * unitsPerMeter(latitude) / height
});

そして math.gl の modules/web-mercator/src/web-mercator-utils.ts の 276-298行目でその unitsPerMeter を受け取ってやり、

export function getProjectionParameters(options: {
    width: number;
    height: number;
    scale?: number;
    center?: number[];
    offset?: [number, number];
    fovy?: number;
    altitude?: number;
    pitch?: number;
    nearZMultiplier?: number;
    farZMultiplier?: number;
    unitsPerMeter:? number;
}): ProjectionParameters {
    const {
        width,
        height,
        altitude,
        pitch = 0,
        offset,
        center,
        scale,
        nearZMultiplier = 1,
        farZMultiplier = 1,
        unitsPerMeter
  } = options;

先ほどの334行目を次のように変えてやります。

const farZ = Math.max(horizonDistance, cameraToSeaLevelDistance + 1000 * unitsPerMeter);

最後に

さて、以上の通り、地下に物体を配置するために Mapbox GL JS、deck.gl の両方のコード本体に手を入れるというハッキングを行いました。ビューポートはそれぞれで設定しているのですが、結果は正確に一致していないと深度テストの結果が正しくなくなり表示がおかしくなるので解明に苦労しました。描画パフォーマンスとのトレードオフなので、本体にコントリビュートするというのはちょっとないかな、と思っています。

この手法は、Mini Tokyo 3D の地下鉄路線や列車の表示、そして Japan EQ Locator の地下の震源の表示でも使われています。

Mini Tokyo 3D × PLATEAU

この記事は 3D都市モデル Project PLATEAU Advent Calendar 2022 の17日目の記事です（既に終了しておりますが、空いている日付にエントリーさせてもらいます！）。

ここ数年開発を続けている東京の公共交通のリアルタイム3Dマップ Mini Tokyo 3D ですが、2020年末に国土交通省が Project PLATEAU を発表して以来、何か面白いデータの活用ができないかと考えを巡らせておりました。今回 PLATEAU の精巧な3D都市モデルを Mini Tokyo 3D のマップ上に組み込んで表示する Mini Tokyo 3D プラグイン PLATEAU plugin for Mini Tokyo 3D の公開に至ったので、概要をご紹介したいと思います。

使い方

まずは https://minitokyo3d.com にアクセスし、画面右側の下から3つ目の「レイヤー設定」ボタンを押して、「PLATEAU」レイヤーを選択して有効にしてください。PLATEAU レイヤーは非常に負荷が高く多くのリソースを消費するため、おそらくモバイルデバイス等ではうまく動かないと思います（デフォルトで機能を無効にしているのはこのため）。快適に利用するには、ハイエンドの GPU を搭載した PC をご利用ください。あと、建築物のデータが表示されるまでにだいぶ時間がかかるので、気長にお待ちくださいね。

あとは通常の Mini Tokyo 3D の操作同様、マップ上を自由に移動したり、列車をクリックして追跡しながら周囲の風景をお楽しみください！

PLATEAU では東京都23区全域に加え、首都圏のいくつかの都市のモデルも含まれているのですが、全部表示しようとすると非常に重たくなってしまうため、現時点では千代田区、中央区、港区、新宿区、品川区、渋谷区、豊島区のデータのみに絞っています。

しくみ

Mini Tokyo 3D は Mapbox GL JS をベースマップとして使用し、deck.gl の GeoJsonLayer を Mapbox にオーバーレイする形で地下の構造や駅のハイライトの表示に使っています。幸いなことに、Project PLATEAU では PLATEAU配信サービス（試験運用）-チュートリアルにて建築物モデル等の 3DTiles データ、地形モデルの Terraindb データ、航空写真オルソ画像タイルデータが Mapbox および deck.gl（もしくは Cesium 等の他のマップライブラリ）ですぐに使える形で配信されているため、これらをデータソースとして利用しています。いや、これは素晴らしいオープンデータの公開の取り組みですよ。その筋のプロの犯行ですね。

本プラグインでは、Mapbox のラスターレイヤーで航空写真オルソ画像を表示し、deck.gl の Tile3DLayer を新たに組み込んでテクスチャ付きの建築物を表示しています。

課題と対応

少し実装上の課題と、それらへの対応についても書いておきたいと思います。

まず、PLATEAU で公開されている3D都市モデルの空間参照系は「日本測地系2011における経緯度座標系」であり、高さは「東京湾平均海面を基準とする標高」です。Mapbox や deck.gl が前提とする WGS84 と日本測地系2011はほぼ同一であるため、緯度経度は問題ありません。しかし、Mini Tokyo 3D では地形（Terrain）データを使わず、建築物は全て同じ平面上に配置することを前提としているため、それぞれの建築物に高さ情報を含む3D都市モデルを表示しようとすると問題が起こります。

具体的には、次の記事でも指摘されているように「モデルが浮く問題」として顕在化します。そこで、モデルの高さをマップ平面に合うように調整する必要があります。記事中では、タイルロード時に呼び出される Tile3DLayer の onTileLoad コールバックの中で cartographicOrigin.z から一律40mを引くことで対処しています。しかし、これはあくまで都心沿岸部での見た目をましにするための対策なので、内陸の丘陵部では依然モデルが浮いたままです。

一つの対処法としては、標高データを使ってロードされたタイルの位置の標高分の高さを下げる、という方法が考えられます。しかし、実際やってみたところまだビルが浮いていたり、逆に沈み込んでいるのが目立ったりしていて、満足できる感じではありませんでした。タイルの中心座標の標高を使って調整するのですが、これだとタイルが表現する領域内の起伏をうまく反映できるとは限らず、たまたま中心座標の標高が周囲より突出している場合にモデル全体が浮いてしまうという状況が起こりやすくなります。

そこで、やや手間がかかるのですが、onTileLoad の中でアクセスできるバイナリデータ content.batchTableBinary.buffer の中から、建築物毎の最小の高さが入っている部分の数列を読み出し、ソートした上で中央値を取り出します。これにより、タイルに含まれる建築物の基礎の統計的な標高の目安がわかります。さらに、タイルロード時にセットされている cartographicOrigin.z は標高ではなく楕円体高のようなので、建築物の基礎の標高に加えて東京駅付近のジオイド高 36.6641m を引いてやります。

onTileLoad: d => {
    const {content} = d;
    const buffer = content.batchTableBinary.buffer;
    const key = content.batchTableJson;
    const len = key._gml_id.length;
    const zMinView = new DataView(buffer, key._zmin.byteOffset, len * 8);
    const zMins = [];

    for (let i = 0; i < len; i++) {
        zMins.push(zMinView.getFloat64(i * 8, true));
    }
    zMins.sort((a, b) => a - b);
    content.cartographicOrigin.z -= 36.6641 + zMins[Math.floor(len / 2)];
}

するとどうでしょう、赤レンガの東京駅が地面にぴったり。少し内陸の渋谷のハチ公前もばっちりです。もちろんジオイド高も場所によって変わりますが、首都圏平野部ならあまり目立たない誤差の範囲に収まるかと思います。

次に課題になったのは、Tile3DLayer で単純に建築物を表示しただけだと、全体的に暗い色調になってしまうことです。これは deck.gl のグローバルなライティングの設定によるものだろう、ということで deck.gl の初期値を調べてみると

• AmbientLight（環境光）: 強さ 1.0
• DirectionalLight 1（平行ライト）: 強さ 1.0
• DirectionalLight 2（平行ライト）: 強さ 0.9

ということだったので、これはもっと強力なライトを当てないといかん、そして Mini Tokyo 3D では時間経過とともに色合いが変わる地図にしているため、ライトの色もそれに合わせないといかん、ということでそれを実装してみました。調整の結果、最終的には

• AmbientLight: 強さ 3.0
• DirectionalLight: 強さ 9.0

になり、これに加えて航空写真オルソのラスターレイヤーも、時間に応じて raster-brightness-max プロパティを変化させて明るさを調整しています。

さらに、Mini Tokyo 3D では Mapbox の Sky レイヤーを使って空に太陽を表示しているため、上の DirectionalLight の光の方向が太陽の位置と同期していたら良さげになるはずです。ということで、SunCalc ライブラリを使って Unix Time、緯度経度から天球上の太陽の位置を取得し、DirectionalLight の方向を都度設定するようにしました。

const now = Date.now();
const {lat, lng} = map.getCenter();
const sunPos = SunCalc.getPosition(now, lat, lng);
const azimuth = Math.PI + sunPos.azimuth;
const altitude = -sunPos.altitude;

directionalLight.direction = [
    Math.sin(azimuth) * Math.cos(altitude),
    Math.cos(azimuth) * Math.cos(altitude),
    -Math.sin(altitude)
];

都心から望む夕日の雰囲気もパーフェクトです。ちゃんとビル群に夕日の光の反射が見えます。

Mini Tokyo 3D、PLATEAU Plugin for Mini Tokyo 3D は GitHub で公開されているので、チェックしてね！

Mini Tokyo 3D バージョン 3.2.0 リリース

Mini Tokyo 3D バージョン 3.2.0 がリリースされました (GitHub)。3.1.0 からの追加・修正機能を見ていきましょう。

新しい追跡モードと追跡モード設定パネルの追加

列車・旅客機の追跡モードを大幅に強化しました。画面右側のビデオカメラのアイコンボタンを押すと表示される追跡モード設定パネルで、「位置のみ」「前方」「前方上空」「後方」「後方上空」「ヘリコプター」「ドローン」「鳥」の8種類の視点を選べます。

おすすめは「鳥」追跡モード。方角、ズーム、ピッチ全てがスムーズかつダイナミックに変化するため、時間を忘れて列車の旅を楽しむことができるでしょう。

API からも新しい追跡モードの指定ができるようになっています。

列車・旅客機の高度に応じたスケーリングとズームの調整

地下を走る列車のスケーリングおよび追跡時のズームレベルの計算を修正しました（左: 修正前、右: 修正後）。修正前は地下で列車がやや小さく見えてしまっていましたが、列車位置の標高に応じた見え方の一貫性が保たれるようになりました。また、スケーリングの計算を GPU で行うように最適化し、性能への影響を最小限に抑えています。

追跡前の視点への復帰

列車や旅客機をクリックまたはタップすると追跡が開始され、前述の追跡モードの設定によっては対象の列車や旅客機にズームインしていきますが、これまでは追跡を解除した時に現在位置を見失いがちで不便に感じることがあったかと思います。

そこで追跡前の視点を記憶しておき、追跡が解除された際には元の視点に戻るようにしました。駅やライブカメラを選択した場合も同様に、選択解除後に元の視点に戻ります。

動的な車両形式情報のローディング

車両形式データを動的に読み込むことに対応しました。何かのイベント開催時や臨時列車が走るときに、サーバ側のデータを更新することで簡単に特定の車両を走らせることができるようになります。

この機能を利用し、鉄道開業150年記念「黒い山手線」の現在位置表示に対応。150年前に新橋〜横浜間で運行した1号機関車をモチーフにした黒塗りの車両が山手線を走ります（運用は毎日変わりますが、実際の運用状況を反映しています！）。2022年12月31日までの期間限定。

アイコンスタイル更新

内部で利用しているアイコンフォントライブラリのアップデートにより、一部のアイコンスタイルが更新されました。これまでと比べて見た目の統一感が増し、視認性が上がっているのがわかりますかね？

ダイヤ改正対応

東京メトロ銀座線・丸ノ内線・東西線・千代田線の 2022/8/27 ダイヤ改正に対応。また、ふかや花園プレミアム・アウトレット開業に伴う秩父鉄道の 2022/10/1 ダイヤ改正にも対応。さらに、特急成田エクスプレスの 2022/10/1 からの全列車の運転再開に対応し、東京〜新宿間が日中1時間に2本ペースになりました。

ライブカメラの拡充

ライブカメラプラグインで表示される、沿線のライブカメラがさらに追加されました。

• 恵比寿ライブカメラ
• 目黒ライブカメラ
• 汐留ライブカメラ3
• 保土ヶ谷ライブカメラ

Mini Tokyo 3D バージョン 3.1.0 リリース

Mini Tokyo 3D バージョン 3.1.0 がリリースされました (GitHub)。

Mini Tokyo 3D は昨年の第4回東京公共交通オープンデータチャレンジに応募しておりましたが、第3回の受賞に引き続き、完成度の高さを評価いただいて今回は審査員特別賞を受賞することができました。東京公共交通オープンデータチャレンジは今回で終了になりましたが、Mini Tokyo 3D は引き続き進化を続けていきます。

それでは 3.0.0 からの追加・修正機能を見ていきましょう。

公共交通データソースの切り替え

東京公共交通オープンデータチャレンジの終了に伴い、これまで東京公共交通オープンデータチャレンジのデータを利用していたところを、公共交通オープンデータセンターのデータに切り替えました。これにより、一部のリアルタイム遅延情報が利用できなくなっており、遅延マーカーが表示されません。また、旅客機の表示も国内線に限定されています。

開発者が Mini Tokyo 3D をビルドする際には、東京公共交通オープンデータチャレンジのトークンは不要になりました。

ダイヤ改正対応

ゆりかもめの 2021/12/13 ダイヤ改正に対応。さらに、都営浅草線、京急、京成、北総、芝山鉄道の 2022/2/26 ダイヤ改正、JR 東日本、りんかい線、東京メトロ、都営、横浜市営、京王、東武、西武、小田急、東急、みなとみらい線、相鉄、埼玉高速鉄道、つくばエクスプレス、東葉高速鉄道、関東鉄道、小湊鐵道、いすみ鉄道、ニューシャトル、多摩モノレールの 2022/3/12 ダイヤ改正に対応しています。

列車情報の修正

データソースの切り替えとダイヤ改正対応に伴い、データ全体の検証を強化したところ、多くの不具合が見つかりました。次のデータの修正を行い、データの正確性が向上しました。

• 京急モーニング・ウィング三浦海岸〜横須賀中央間が非表示だった問題を修正
• 京急逗子線から京急本線への直通列車の追跡が中断してしまう問題を修正
• 新京成線新鎌ヶ谷、鎌ヶ谷大仏を全列車通過していた問題を修正
• いすみ鉄道で城見ヶ丘を全列車が通過していた問題を修正
• 千葉モノレール1号線の土休日の列車の行き先が一部表示されていなかった問題を修正
• 湘南モノレールで全列車が富士見町を通過していた問題を修正
• 東急こどもの国線は多客期ダイヤだったのを通常ダイヤに変更
• 東武東上線の一部列車で和光市〜志木間で列車が表示されていなかった問題を修正
• 西武秩父線の一部列車で行き先が間違っていた問題を修正
• 西武多摩川線の白糸台始発の列車が表示されていなかった問題を修正

列車名表示の追加

京急ウィング号の列車名と号数、ホリデー快速おくたま・ホリデー快速あきがわの列車名が表示されるようになりました。そして京王ライナー Mt.TAKAO 号が臨時便から通年運行になったので、Mini Tokyo 3D にも現れるようになっています。

ボタンを大きくして操作性改善

ボタンのサイズを1.3倍に拡大して操作性を改善しました。最近のスマホの高解像度化でボタンサイズが相対的に小さくなっているため、Mapbox のデフォルトのボタンサイズだと少しタップしにくかったので改良を加えました。

ポルトガル語サポート

コミュニティーのコントリビューションにより、ポルトガル語（ブラジル）に対応しました。

アプリ起動の高速化

アプリ起動時のデータローディングの並列化を実装し、起動時間の短縮を図りました。

降水プラグインが雪のアニメーションに対応

内部で使用している Mapbox プラグインのアップデートに伴い、Mini Tokyo 3D 降水プラグインでも降雪アニメーションの表示に対応しました。

ライブカメラの拡充

ライブカメラプラグインで、東京近郊鉄道沿線のライブカメラを大幅に追加し、現在の東京の様子がより身近に感じられるようになりました。

• 保谷ライブカメラ
• 汐留ライブカメラ2
• 小手指ライブカメラ
• 七里ヶ浜ライブカメラ
• 高尾ライブカメラ
• 奥多摩ライブカメラ
• 足柄ライブカメラ
• 東雲ライブカメラ
• 石神井公園ライブカメラ
• 谷在家ライブカメラ
• 田町ライブカメラ
• 新宿ライブカメラ2
• 武蔵小杉ライブカメラ

Mini Tokyo 3D バージョン 3.0.0 リリース

Mini Tokyo 3D バージョン 3.0.0 がリリースされました (GitHub)。前回のリリースからだいぶ時間が経ってしまいました。バージョン 2.x からのメジャーアップグレードということで、多くの変更や改善（開発者向け API の互換性に影響のあるものを含む）が入っています。

また、本バージョンは Mini Tokyo 3D 2021 として第4回 東京公共交通オープンデータチャレンジの応募作品になっています。応募用の YouTube 動画も公開していますので、そちらもご覧ください。

それでは、2.8.0 からの追加・修正機能を見ていきましょう。

描画性能の大幅な改善

3D モデルレンダリングコードを刷新しました。インスタンシングと GPU ピッキングの導入で、列車と旅客機の描画・ピッキング処理を GPU 側に寄せることで大幅に効率化しました。これまでは、ピーク時で 1,500 程度のオブジェクトの表示でしたが、処理能力に余裕ができたことで後述の路線の拡張が可能になり、2,200 程度のオブジェクトの表示も問題なく実現できています。

列車・旅客機のハイライト表示、旅客機の尾翼形状の改善

上記の改善に加え、シェーダーにある程度のロジックを追加し、マップのズーム操作や地上・地下切り替えに伴う変換行列の再演算や透過率の計算をCPU側からGPU側に移動。旅客機をズームした時の尾翼の取り付き方の改良やフォーカス時のアウトラインの均等化などの細かい改善も追加しました。

対応路線・エリアが大幅に拡大

対応路線・エリアが大幅に拡大し、これまでの路線を含めると合計 150路線（支線・連絡線含む）、1,684駅、平日の列車本数は 47,310本になりました。いわゆる首都圏近郊はJR・私鉄含めほぼカバーされました。

路線	説明
JR 横須賀線	大船〜久里浜間を追加
JR 横須賀線	大船〜熱海間を追加
JR 伊東線	熱海〜伊東間が新規開通
JR 相模線	茅ヶ崎〜橋本間が新規開通
JR 青梅線	青梅〜奥多摩間を追加
JR 高崎線	鴻巣〜高崎間を追加
JR 八高線	小川町〜高崎間を追加
JR 宇都宮線	久喜〜宇都宮間を追加
JR 常磐線	取手〜水戸間が新規開通
JR 総武本線	八街〜銚子間を追加
JR 東金線	大網〜成東間が新規開通
JR 成田線	滑河〜銚子間を追加
JR 鹿島線	香取〜鹿島サッカースタジアム間が新規開通
JR 内房線	君津〜安房鴨川間を追加
JR 外房線	上総一ノ宮〜安房鴨川間を追加
JR 久留里線	木更津〜上総亀山間が新規開通
京急本線	金沢八景〜浦賀間を追加
京急逗子線	金沢八景〜逗子・葉山間が新規開通
京急久里浜線	堀ノ内〜三崎口間が新規開通
都電荒川線	三ノ輪橋〜早稲田間が新規開通
東武伊勢崎線	久喜〜伊勢崎間を追加
東武佐野線	館林〜葛生間が新規開通
東武小泉線	館林〜西小泉間、太田〜東小泉間が新規開通
東武桐生線	太田〜赤城間が新規開通
東武日光線	東武動物公園〜東武日光間が新規開通
東武鬼怒川線	下今市〜新藤原間が新規開通
東武東上線	小川町〜寄居間を追加
東武越生線	坂戸〜越生間が新規開通
西武池袋線	飯能〜吾野間を追加
西武秩父線	吾野〜西武秩父間が新規開通
西武山口線	多摩湖〜西武球場前間が新規開通
小田急小田原線	伊勢原〜小田原間を追加
小田急江ノ島線	藤沢〜片瀬江ノ島間を追加
関東鉄道常総線	取手〜下館間が新規開通
関東鉄道竜ヶ崎線	佐貫〜竜ヶ崎間が新規開通
流鉄流山線	馬橋〜流山間が新規開通
小湊鉄道線	五井〜上総中野間が新規開通
いすみ鉄道いすみ線	大原〜上総中野間が新規開通
金沢シーサイドライン	新杉田〜金沢八景間が新規開通
江ノ島電鉄線	藤沢〜鎌倉間が新規開通
湘南モノレール江の島線	大船〜湘南江の島間が新規開通
山万ユーカリが丘線	ユーカリが丘〜ユーカリが丘間が新規開通
ニューシャトル	大宮〜内宿間が新規開通
秩父鉄道秩父本線	羽生〜三峰口間が新規開通

ダイヤ改正対応

前バージョンで未対応だった、りんかい線、つくばエクスプレス、相鉄の 3/13 ダイヤ改正に対応。このほか、都営浅草線、京急、京成、北総、芝山鉄道の 3/27 ダイヤ改正、横浜市営地下鉄の 6/26 ダイヤ改正、関東鉄道常総線の 10/2 ダイヤ改正、京急久里浜線の 10/18 ダイヤ変更、京成スカイライナーの一部列車の運転再開 (10/30)、京王ライナー土休日の明大前停車開始 (10/30)、などに対応しています。

新しい降水プラグイン

新しい Mini Tokyo 3D 降水プラグインは、以前のパーティクルエンジンを使用したものから、ポリゴンをインスタンス化した方式に変更しました。マシンへの負荷が軽減してマップの拡大・縮小・移動時にもスムーズに表示の更新ができるようになっています。

内部では別途 Mapbox レイヤープラグインとしてリリースした mapbox-gl-rain-layer を使用しています。

東京2020オリンピックプラグイン

Tokyo 2020 Olympics プラグインが追加され、Mini Tokyo 3D マップ上でオリンピック競技会場とスケジュールをチェックすることができます。プラグインを追加すると、オリンピックスタジアム（新国立競技場）の 3D モデルが表示されるようになります。ズームしても鑑賞に堪えるテクスチャ付き高精細モデルを利用しています。また、オリンピック開会式までのカウントダウンや開催日からの経過日数も表示。競技スケジュールの競技名の背景色は、東京2020大会のコアグラフィックス"かさねの色目"「紅」「藍」「藤」「松葉」に合わせています。

新しいユーザーガイド・開発者ガイド

Mini Tokyo 3D ユーザーガイド／開発者ガイドを、Web ページに移行しました。従来より読みやすくなり、内容も拡充しています。

MiniTokyo3D クラスではなく mt3d 名前空間をエクスポート（API 互換性に影響する変更）

開発者向け API を使う際は、従来の MiniTokyo3D クラスの代わりに、mt3d.Map クラスにコンストラクタオプションを渡して Mini Tokyo 3D マップのオブジェクトを作成します。mt3d 名前空間には Map クラスの他にも複数のクラスや Mapbox GL JS、three.js ライブラリ全体が含まれており、マップのカスタマイズに利用することができます。

const options = {
  container: 'mini-tokyo-3d',
  accessToken: '<Mapbox アクセストークン>'
};
const map = new mt3d.Map(options);

詳しくは、開発者ガイドをご覧ください。

プラグインフレームワークを再設計してすべてのプラグインを個別に提供（API 互換性に影響する変更）

旧バージョンでは、いくつかのプラグインは Mini Tokyo 3D ライブラリに含まれる形で提供されていましたが、バージョン 3.0 ではプラグインフレームワークの設計を一から見直すとともに、すべてのプラグインを別モジュールとして提供するようになりました。このため、プラグインを追加する際には Map クラスのコンストラクタオプションとして、明示的に PluginInterface を実装したオブジェクトのリストを指定する必要があります。

const options = {
  /* ... */
  plugins: [mt3dPrecipitation(), mt3dFireworks()]
};
const map = new mt3d.Map(options);

詳しくは、開発者ガイドをご覧ください。

コンストラクタオプション secrets.mapbox の代わりに accessToken を使用（API 互換性に影響する変更）

従来 MiniTokyo3D コンストラクタのオプション secrets.mapbox で指定していた Mapbox アクセストークンは、accessToken に指定して Map オブジェクトを作成します。

const options = {
  /* ... */
  accessToken: '<Mapbox アクセストークン>'
};
const map = new mt3d.Map(options);

詳しくは、開発者ガイドをご覧ください。

Map クラスのメソッドおよび公開クラス・インターフェースの追加

バージョン 3.0.0 では、Map（従来の MiniTokyo3D）クラスに次のメソッドが追加されました。

メソッド	説明
addLayer	レイヤーを追加
getMapboxMap	Mapbox の Map オブジェクトを取得
getModelPosition	緯度経度をWeb メルカトル座標に変換
getModelScale	メートル単位をWeb メルカトル座標に変換
hasDarkBackground	暗い背景色かどうかを判定
removeLayer	レイヤーを削除
setLayerVisibility	レイヤーの可視性を設定

また、次の公開クラスが追加されました。

クラス	説明
Marker	地図上に表示するマーカー
Panel	情報を表示するためのパネル
Popup	地図上に表示するポップアップ

さらに、カスタマイズに利用可能なインターフェースが追加されました。

インターフェース	説明
PluginInterface	プラグインを作成するためのインターフェース
ThreeLayerInterface	three.js シーンを構築するためのレイヤーインターフェース

詳細は API リファレンスをご覧ください。

Mini Tokyo 3D バージョン 2.8.0 リリース

Mini Tokyo 3D バージョン 2.8.0 がリリースされました (GitHub)。2.7.0 からの追加・修正機能を見ていきましょう。

地平線・空が見える傾きのサポート

Mini Tokyo 3D で使っているマップライブラリを Mapbox v2 にバージョンアップして、ピッチ（傾き）最大85°に対応しました。地平線から上の空が見えるようになり、現実の空の色と太陽の動きをリアルタイムで再現した様子を見ることができます。映像はちょうど日の出の朝焼けの中を御茶ノ水に向かう青梅特快。ぜひお試しください。

旅客機の追跡・表示の改善

旅客機の追跡を改善して、機体に対するズーム比率を維持したまま飛行高度に追従していくことが可能になりました。また、機体が必要以上に伸びて表示される場合がある不具合も修正しています。

動画は夕刻に成田空港A滑走路から離陸するシカゴ行き全日空12便です。徐々に高度を上げ利根川を超えていく様子をご覧ください。

エコモード追加

モバイル端末向けにエコモードを追加しました。画面右のバッテリーアイコンをクリック／タップしてエコモードをオンにすると、毎秒1フレームの描画レートになり、これによってバッテリーの消費と加熱を抑えます。

電池の減りを気にしてスマホでの利用を躊躇していた方も、安心してお使いいただけます。

初期ローディングの改善

エコモードの搭載と合わせて、アプリ起動時に描画レートを抑えることでデータのロードを優先させ、マップを早く表示する最適化も合わせて追加しました。

3/13ダイヤ改正対応

JR、東京メトロ、都営地下鉄、東武、西武、京王、小田急、東急、横浜高速鉄道、埼玉高速鉄道、東葉高速鉄道、東京モノレールの3/13ダイヤ改正に対応。このダイヤ改正は、終電繰り上げが主な変更点です。小田急ロマンスカーの相模大野での分割・併合がうまく表示されていなかった問題も合わせて修正しました。

列車種別ラベルの表示

列車にマウスを重ねたり、列車追跡時に表示される列車種別が、枠で囲まれたラベルの形式になり見やすくなりました。

国内線コードシェア便の重複の排除

東京公共交通オープンデータチャレンジの日本空港ビルディングが配信する羽田発着国内線のデータでは、コードシェア便だとしても別々のフライトとして存在するため、旅客機が重複して表示されていましたが、これを調整するコードを追加。150便ほど重複が排除されました。

エコモードの取得・設定 API およびモード変更イベントの追加

バージョン 2.8.0 で追加になったエコモードの取得・設定を行う次のメソッドが追加されました。

メソッド	説明
getEcoMode	現在のエコモードを取得
setEcoMode	エコモードを設定

また、各表示モードの変更時や、列車・航空機の選択・選択解除時に発生する次のイベントが追加されました。

イベント	説明
clockmode	クロックモードが変更
deselection	列車または航空機の追跡が解除
ecomode	エコモードが変更
selection	列車または航空機の追跡が開始
trackingmode	追跡モードが変更
viewmode	ビューモードが変更

詳細は Mini Tokyo 3D 開発者ガイドをご覧ください。

Mini Tokyo 3D バージョン 2.7.0 リリース

Mini Tokyo 3D バージョン 2.7.0 がリリースされました (GitHub)。2.6.0 からの追加・修正機能を見ていきましょう。

ライブカメラ映像の配信

Mini Tokyo 3D にライブカメラ映像の配信機能が登場しました。地図上のライブカメラボタンをクリックすると、カメラと同じ視点でリアルタイムに行き来する列車を眺めることができます。現時点で、赤羽、新宿、汐留、さいたま新都心など、東京近郊の16箇所に設置しています。

映像は YouTube で配信されているライブカメラ映像を埋め込んで使用しています。場所によっては不定期に YouTube の URL が変わるため、随時 URL をチェックした上でライブ配信中の場所のみを地図上に表示するようにしています。

ちなみにライブカメラの映像は大体20〜30秒くらい遅れるので、3Dマップ上の列車の方が早く現れがちになっています。

パネルアニメーションの追加

列車・旅客機・駅の詳細情報やライブカメラ映像、経路検索のパネル表示の際のアニメーションを追加しました。画面下部に表示されるパネルが滑らかに開閉します。

経路検索結果のスワイプジェスチャー対応

経路検索の結果として複数の経路が返ってきたときに、水平方向のスワイプジャスチャーで経路を切り替えられるようにしました。特にタッチスクリーンデバイスで直感的な操作が可能になっています。

経路検索時に列車・航空機・追加レイヤーを非表示に

経路検索を行う際に列車・航空機・追加レイヤーを表示しないように変更しました。これによって、地図上のクリックによる駅の選択がしやすくなるとともに、画面描画処理が軽くなって遷移アニメーションがスムーズになっています。

緊急事態宣言に伴う終電時刻繰り上げダイヤに対応

1/8に発令された新型コロナウイルス感染症緊急事態宣言に伴う、首都圏の各路線の終電時刻繰り上げダイヤに対応しました（JR 東日本各線、りんかい線を除く）。

また、東武鉄道は昨年6月のリバティりょうもう増発、11月のアーバンパークライナー増発が反映されていなかったので合わせて運行ダイヤを修正しました。

駅出口情報の拡充

横浜市営地下鉄の各駅、および東急東横線、みなとみらい線、JR 相鉄直通線、京急空港線、東京モノレールの地下駅の出口情報を追加しました。

東京都交通局の列車番号表示対応

都営地下鉄、日暮里・舎人ライナーの列車番号を、「ODPTxxxx」形式から本来の番号に変更しました。