こんにちは、山手線3Dジオラマの開発者です。
今回は、ブラウザ上でリアルな鉄道模型シミュレーターを動かすために採用した技術スタックについて解説します。

1. なぜMapLibre GL JSなのか？

地図ライブラリにはLeafletやMapbox GL JSなど様々な選択肢がありますが、今回はオープンソースでWebGLのパフォーマンスを最大限に引き出せるMapLibre GL JSを採用しました。

特に、カスタムレイヤー機能を使ってThree.jsと連携できる点が決め手となりました。

Three.jsとの座標同期の課題

地図（メルカトル図法）の座標系と、3D空間（Three.js）の座標系を合わせるのには苦労しました。以下のコードで、MapLibreの行列をThree.jsのカメラに適用しています。

// MapLibreの行列をThree.jsに適用する処理
render: function (gl, matrix) {
    const m = new THREE.Matrix4().fromArray(matrix);
    const l = new THREE.Matrix4()
        .makeTranslation(modelOrigin.x, modelOrigin.y, 0)
        .scale(new THREE.Vector3(scale, -scale, scale));
        
    this.camera.projectionMatrix = m.multiply(l);
    this.renderer.render(this.scene, this.camera);
}

2. 電車の滑らかな動きの実現

ただ座標を移動させるだけでは、カクついたり、カーブで不自然な動きをしてしまいます。そこで、事前に計算した軌道データ（LUT: Look Up Table）を用意し、線形補間を行うことで滑らかなアニメーションを実現しました。

Turf.jsを使って線路データを1m単位で再計算

3. 今後の展望

現在は山手線のみですが、今後は京浜東北線や中央線など、並走する路線の実装も予定しています。複数路線のダイヤグラム同期など、さらなる技術的課題に挑戦していきます。