技術ブログ
ブラウザで動く3D鉄道模型シミュレーター「山手線 3Dジオラマ」の開発で得た技術的な知見やノウハウを公開しています。
-
2026.01.17PLATEAUが重すぎて落ちた話 ― LOD2モデルとの格闘記録国土交通省のPLATEAU LOD2モデルをブラウザに表示しようとしてクラッシュした失敗談。テクスチャ地獄、GPUメモリ枯渇、そしてリアルを捨てる決断に至るまでの経緯を振り返ります。
-
2026.01.16S3+CloudFrontで静的サイトを爆速配信する構成ガイド3Dモデルや大量のアセットを含む静的サイトを、AWS S3とCloudFrontで高速かつ低コストに配信する方法。HTTPS化、キャッシュ戦略、CORS対応などの実装ポイントも解説。
-
2026.01.15操作用UIのこだわりと実装 ― CSSだけで描くマスコン画像を使わずCSSのみで鉄道のマスコン（マスターコントローラー）を再現。ノッチ感の演出、レスポンシブ対応、スマホ専用コントローラーの設計思想を紹介。
-
2026.01.14MapLibreでのカメラ追従実装 ― 滑らかな「おいかけ」モード地図上を走る電車をカメラが自動追尾する「おいかけモード」の実装方法。easeToによる滑らかな追従と、マルチアングル切り替えの計算ロジックを解説。
-
2026.01.13PLATEAUの3D都市モデルで「鉄道模型ジオラマ」の質感を出す工夫国土交通省PLATEAUデータをそのまま使うと「白い箱」になる問題を、プロシージャルテクスチャ生成とライティング調整で解決。模型っぽい質感を出すテクニック。
-
2026.01.12音声実装と車両のState管理によるリアリティの追求車両の状態（加速・減速・停車）をステートマシンで管理し、走行音を滑らかにクロスフェードさせる手法を解説。速度に応じた再生位置の動的決定など。
-
2026.01.11MapLibre上に3Dモデルを配置・制御する実装の裏側MapLibreの地図上にThree.jsの電車を走らせるための座標変換と、ボギー台車を考慮したリアルな向き計算ロジックの実装詳細。
-
2026.01.10MapLibre GL JSとThree.jsで山手線を走らせる技術ブラウザ上でリアルな鉄道模型シミュレーターを動かすための技術スタック選定と、MapLibre + Three.jsの座標同期、滑らかなアニメーション実現の裏側。