Railway Map #2

前回から路線を拡大して京都から神戸まで広がりました。阪急の主要路線である神戸線、宝塚線、千里線を追加。阪急の路線図みたいになってきましたね。

 

座標単位

train_20160117001434

駅をきちんとした基準で配置したかったので座標には緯度と経度を使うことにしました。中心座標を経度135.6°、緯度34.9°として相対的に駅の座標を計算しています。ちなみに駅の座標はWikipedia等に載っています。グリッド1マスの幅は0.1度としました。

 

地図情報

train_qgis_kyoto

緯度と軽度で正しい座標に駅を配置したので実際の地図を重ねてみたくなりました。国土地理院が地図のデータを公開しているので利用してみることにしました。データを利用するには名前と住所を登録する必要があります。基盤地図情報ビューワもダウンロードして開くことが出来るようになりますが、データも膨大な上、若干扱いにくいツールなので、オープンソースのGISソフトのQGISを使いました。基盤地図情報ビューワからデータをエクスポートしてQGISで読み込むという流れで背景の地図画像を作成しました。

 

train_20160103231155

基盤地図情報から取得したデータを重ねて、駅の位置が実際の地図と合っていることを確認して一安心。地図は縦横比が1:1になる正距円筒図法を使っています。日本は赤道より北に位置するので本当は横幅(経度)は縦幅(緯度)より若干短くなります。その辺は大目にみることにします。

 

インターフェイスデザイン

train_20160117004326

そろそろGUIに取り組んでいこうと思います。テキスト以外にもラインや矩形、アイコン等、UIに使われる要素を作っていきます。汎用性を考えてモデルではなくコードで頂点を生成してポリゴン描画する仕組みにしました。

 

icon_font

アイコンはフォントと同じ要領で画像をたくさん並べたテクスチャーシートを使っています。矩形のポリゴンを作って利用するアイコン画像のUV値を指定して表示させています。

 

train_20160117004340

ワイヤーフレームで表示するとこんな感じですね。これらのHUD要素のモデルは背景モデルを描画した後に別のカメラで上書きする形でレンダリングします。違う空間のものとして扱う感じですね。

 

train_20160117005214

背景と重ならないように、背景モデルを描画した後にガウスブラーをかけて、深度バッファーをクリアしてからHUD用モデルを描画します。

 

bokeh_hexa

最後に一工夫、メリハリをつけるためにレンズのボケ画像をポイントスプライトで描画してみました。

 

こちらは操作している様子を収めた動画です。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中