3D地図上で電車を走らせる際、一番の課題だったのが「背景（建物）の表現」です。
国土交通省の「PLATEAU（プラトー）」データは非常に精巧ですが、そのままベクトルタイルとして表示すると、どうしても「のっぺりとした白い箱」に見えてしまいます。

このシミュレーターの目指す世界観は「リアルな都市」ではなく、あくまで「デスクの上で遊ぶ鉄道模型」です。そこで、あえて写実性を捨てて「模型っぽい質感」を出すために行った工夫を紹介します。

1. 画像を使わずコードで「汚れ」を作る

建物の壁面にテクスチャ（画像）を貼ればリアルにはなりますが、大量の画像データを読み込むと動作が重くなります。そこで、HTML5の Canvas API を使い、ブラウザ上で動的にテクスチャを生成する方法を採用しました。

具体的には、「コンクリートやプラスチックの成型色」のような、少しザラついたノイズ画像をJavaScriptで描いています。

// 256x256のキャンバスにノイズを描画
function createBuildingTexture() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // ベースは明るいグレー（模型のプラ色）
    ctx.fillStyle = '#d6d6d6';
    ctx.fillRect(0, 0, 256, 256);

    // ランダムな点を打ってザラつきを表現
    for (let i = 0; i < 60000; i++) {
        const x = Math.random() * 256;
        const y = Math.random() * 256;
        // 白と黒の点を混ぜることで立体感を出す
        ctx.fillStyle = Math.random() > 0.5 ? 
            'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.08)';
        ctx.fillRect(x, y, 1, 1);
    }
    // ...
}

この生成された画像を MapLibre の fill-extrusion-pattern に適用することで、単色塗りつぶし特有のCGっぽさを消し、Nゲージのストラクチャー（建物模型）のような質感を出すことができました。

2. 「模型用照明」としてのライティング

鉄道模型には「照明演出」が欠かせません。MapLibre GL JSのライト設定を調整し、時間帯によってドラマチックな影が落ちるようにしています。

特に「夕方モード（Dusk）」では、環境光（Ambient）を落としつつ、太陽光（Directional）の色温度をオレンジに振ることで、部屋の照明を落として模型を眺めているような雰囲気を再現しました。

// 夕方モードの設定例
map.setLight({ 
    color: '#ffaa00', // オレンジ色の強い光
    intensity: 0.6,
    position: [1.5, 90, 80] // 長い影が落ちる角度
});

3. 航空写真とのハイブリッド

「航空写真モード」では、地面はリアルな写真（衛星画像）ですが、その上に立つ建物は半透明の3Dモデルとして表示しています。

これにより、Google Earthのような「リアルな世界」と、鉄道シミュレーターとしての「記号的な世界」の中間のような、不思議な没入感が生まれます。建物の透過度を 0.7 程度に設定することで、背後の道路や線路が見え隠れし、位置関係が把握しやすくなるメリットもありました。

まとめ

3Dモデルをただ置くだけでなく、質感（テクスチャ）や光の当たり方（ライティング）を少し調整するだけで、画面から受ける印象はガラリと変わります。
「リアルすぎない、ちょうどいい模型感」を目指したチューニングは、技術的にもデザイン的にも面白い試行錯誤でした。