そこでChizucraftに線路のデータも描画できる機能を追加した。 地理院のベクトルタイルには線路のデータが 含まれているのだが、 そのまま表示すると 秋葉原の場合、銀座線等の地下鉄の線路も描かれてしまい、 邪魔なので表示していなかった。 今回、道路、建物、川、線路のそれぞれの 描画、色を選択できる機能を追加した。 総武線と山手線、京浜東北線の高さを適当に決め、 chizucraftのデータで作成。 総武線の線路を基準に、高架を作成したところ それっぽく作成できた。

総武線、山手線、京浜東北線作成	地図、総武線、山手線、京浜東北線が見える	中央通り、総武線高架

アトレ秋葉原建築

次は秋葉原駅の外観ということで 電気街南口のアトレ秋葉原の壁面を 作ろうと GoogleMap 3Dの画像や ストリート・ビュー を参考に作業を進めるが上手く行かない。 作ってみるが、プロポーションが変で手戻りが多い。 これは一旦、全体をデザインし ブロックの配置を事前に決める必要があると考え、 使えそうなツールを探すがみつからない。 画像を下絵として配置できて、ブロック単位で編集できるような ソフトが欲しい。仕方がないので作ることにした。

ツールの製作

まずは、Google Map 3Dの斜めからみたビル側面の画像を 正面から見た画像に変換する機能が欲しい。 その機能を既存の画像ライブラリに無いか探すが見つからない。 openCV.jsにありそうな気がするが 調べる前に Photoshopの遠近法ワープで出来たので、 これで進めることにする。 ツールはchizucraftと同様に typescriptで開発、ブラウザで動作する。 データはブラウザのlocalStrageに保存するが、 ファイルへのsave,loadも可能。 画像データもlocalStrageに保存するので 大きな画像が使用できない可能性がある。 chromeだと5Mbyte程度まで保存できる。 ツールの主な機能を書く。

• Photoshopで処理したビル正面の画像を読み込み、表示
• 画像に長方形の領域を設定し、ブロック単位の幅と高さをしていすることで画像とブロックを対応付けを設定
• ブロックをピクセル単位、長方形の領域でペイント。 ブロックは画像の上に描画
• 画像、ブロックそれぞれ表示・非表示設定可能。ブロックの透過表示も可能
• マインクラフト上での座標と方向を設定、ブロックをクリック時に座標を表示
• 使用しているブロックの種類ごとの総数を集計、表示

画像読込	ブロック描画	ブロック集計

アトレ秋葉原建築

ツールでGoogle Map 3Dの画像を見ながら アトレ秋葉原のデザインを作成中、 画像の不自然な点に気がつく。 おなじ画像を繰り返しているようなパタンがある。 現実の画像とは思えない。 ストリートビューの写真と比較すると 明らかに違っている。 ３Dマップのビル側面画像は、ストリート・ビューだか 航空写真だかの画像をプログラムで処理して 貼り付けているので、細かく見るとおかしいところも 多々ある、ということだろう。 全体のイメージとしては間違っていないので、 3Dの画像で一旦デザインし、ストリートビューの写真で 修正するという方法で対応できた。

ブロックのリストで材料を揃え、 建築を開始すると、 今度は、あっという間に完成させることができた。

Google Map 3Dの画像	ストリート・ビューの写真	完成したアトレ秋葉原 南面

最後に

できたツールは大変便利なので これを使って Virtual 秋葉原の建設を進めて行きたい。 ツールは近日中に公開予定。 openCV.jsも調べたい。 必要な機能も追加して行きたい。

結局、自分で使うツールを作るのが一番楽しい？