h_nari @ 熊本市のブログ。電子工作、プログラミング、ゲーム、TV、 政治、インターネットなどに日々の思い付きを、 うだうだ~と書いていきたい。
このブログにはコメント欄を設けておりません。 記事への御意見、ご質問はtwitter @h_nari宛に お願い致します。


アーカイブ

メタ情報
RSS
Login

Virtual 秋葉原建設

Chizucraftで私のワールドに作成した 秋葉原の地図を立体化させたい。 全部は無理だが、 中央通りの総武線高架とか 秋葉原の駅ビルとか ホームとか再現したい。

まず、総武線の高架を作った。 PlateauViewで高架横のビルの高さを取得。 ストリートビューの写真を参考に、隣接ビルの骨組みを作ると ともに高架の高さを決め作成した。 しかし、ついX軸に平行に作ったため、明らかに曲がってしまった。 マイクラ上で斜めの直線を引くのは難しい。

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

アトレ秋葉原建築

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

ツールの製作

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

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

アトレ秋葉原建築

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

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

最後に

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

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