漫画で使えそうな背景画像（SVG）をPLATEAUの3Dモデルとblenderを使って作ってみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/c129e668-d26c-f1ca-f7c6-dea3e2627f54.png)
（※東京駅周辺）

みなさんこんにちは！
PLATEAUのデータ活用してますか！！！

[PLATEAU](https://www.mlit.go.jp/plateau/about/)とは国交省主催で、現在56都市分のビル群や地形などの3Dデータを整備し、街づくりや防災、デジタルシティやメタバースなどの分野で（それ以外にも）利活用を広げることを目的としたプロジェクトで、そのデータは誰でも自由に利用することが可能です。

また、今年もその他の都市を整備するみたいです！

![mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/0b69d728-70eb-ab4c-d8ec-3ee25e9ba373.gif)
（トップページかっこよすぎ）

そんなPLATEAUの3Dデータですが、ARやVRで仮想空間にリアルな3Dデータを配置したり、3Dプリンターを使って家を作ったりしているこの時代に、あえて2次元で平面の画像を作っていきましょう！！！！！

田舎まで含めて全国分整備されたら日本中どこでも、サクッと背景画像が作れちゃうからめちゃ便利な気がする！！！

## まずはデータのダウンロード

G空間情報センターというところでPLATEAUのデータをダウンロードすることができます。
いくつか形式が選択できるのですが、今回ばblenderで取り扱いやすい「OBJ」形式を選択しましょう！
以下のページからOBJを選択してダウンロードしてください。（2.2GBあるのでおきをつけて！）

[https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku](https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku)

`13100_tokyo23-ku_2020_obj_3_op.zip`というような名称のzipファイルがダウンロードできたかと思いますが、解凍して中身を見るとこんな感じになってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/cc40bd95-6475-4bad-732e-eb4f87cebc94.png)

この中の`bldg`を見てみましょう！（多分buildingの略です）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/7b43ea36-3220-c22e-8ed3-0d05af52f70f.png)

するといろんなフォルダが出てきますが、`lod2`を開きましょう。

LODについては[CityGML, LODとは？3D都市モデル【VR技術】](https://uxbear.me/citygml-lod%E3%81%A8%E3%81%AF%EF%BC%9F3d%E9%83%BD%E5%B8%82%E3%83%A2%E3%83%87%E3%83%AB%E3%80%90vr%E6%8A%80%E8%A1%93%E3%80%91/)などの記事が参考になると思いますが、要はデータの詳細度のことで、lod2だと建物の形状がよく分かるレベルのモデルです！

フォルダを開くとさらに`53394622_bldg_6677_obj`のようなフォルダがたくさん出てくるかと思いますが、この先頭8桁の数字は「標準地域メッシュ」と呼ばれるもので、日本全国全てこの番号で区分けされています。

OBJファイルは標準地域メッシュごとに分かれていることがわかったので、必要な地域のデータはどこにあるのか探してみましょう！

今回は以下のようなサイトを利用して地図上から番号を調べます！
東京駅周辺のデータを使いたいので調べてみると、`53394611`に存在していることがわかりました！
[標準地域メッシュ検索アプリ](https://www.arcgis.com/apps/instant/lookup/index.html?appid=efd6490a1f49440b90da67c8bc308b77&find=%25E6%259D%25B1%25E4%25BA%25AC%25E9%25A7%2585)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/0df1aace-61ee-12c4-9674-24706c66c877.png)

なので`53394611_bldg_6677.obj`を利用していきます！

## ブレンダーでインポート

ここからはblenderがインポートされていて、かつテンキーを利用している + ある程度操作に慣れていることを前提にします！

まずはファイル→インポートから…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/9c8042bd-3949-d8fe-56ce-8e02d9793d42.png)

objを選択して…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/c7db1b3e-81db-50bf-8253-2ab2ae408495.png)

レイヤーを選択して、テンキーの「.」でオブジェクトにフォーカスし、テンキーの7を押してZを前面に持っていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/96c1eaab-f163-3ce9-7f76-eee2ea755237.png)

右上の軸のzマークを押して-Z方向を手前に表示します。これで建物の上面が上に表示されましたね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/e9be4bbe-a38a-f7ef-6f24-0d844c6b007e.png)

ただし、モデルの広さの割にビューポートの表示範囲が狭いため、角度をちょっとでも変えるとモデルが見えなくなってしまうと思います。
そんな時はビューの焦点を1000000mくらいに設定して、遠くまで見えるようにしてあげましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/ed2b933d-5aa8-fc88-284f-ded73c6498e2.png)

この辺りで一度保存しておくことをお勧めします！こまめに保存しましょう！
その後、shift + Aでカメラを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/234ea424-2e5b-85e2-a41d-92eb6e1c6290.png)

カメラが作成されたら、現在の視点にカメラを合わせましょう。

- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/26f7ed76-48f2-0e16-c345-94003ad0c92e.png)

カメラをビューに固定すると、モデルを動かすとカメラもそれに追従して動いてくれるため、結果的に枠内に入っているものをそのままレンダリングすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/1157b7e5-9a53-5e01-0108-91747c2bc634.png)

が、今度はカメラの視認範囲が狭いため、このままだと何も見えないかもしれないですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/e75fdbdd-b113-42eb-520a-3ebc82f08caf.png)

ズームすると、見えるようになると思いますが、不便ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/95c8768a-63a2-e16a-3aea-e3e7f69f2f04.png)

そんな時はシーンコレクションからカメラを選択しつつ、カメラプロパティの終了距離を増やします！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/f60b17c4-9401-f524-1630-f9fa1f37ef1f.png)

するとめっちゃ遠くまで見えるようになりますね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/09dafd52-336b-1058-3856-a89b16c9cf39.png)

画角を自由に調整しましょう。
今回はこのくらいに調整しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/5e4a8a38-bdab-7f20-c736-556ce37d1ab8.png)

調整が終わったらshift + aでグリースペンシルを作成しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/07258b6b-dd2a-99a9-ebe3-e5fc06552b89.png)

するとカメラの範囲で作成してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/78fa7d5b-001d-7a92-9678-c2d360c63d80.png)

グリースペンシルのオブジェクト（Line Artを選択した状態で）グリースペンシルをSVGにエクスポートしてみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/c399d475-7c90-dae0-67ff-d09aff3fefc7.png)

吐き出されたSVGをクロームかなんかを使って見てみると…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/c129e668-d26c-f1ca-f7c6-dea3e2627f54.png)

めちゃいい感じで表示されましたね！
お疲れ様でした！！

## 終わりに

ということでPLATEAUのデータから漫画背景風の画像を作成してみました！
PLATEAUのデータはいろんな活用方法があってとても楽しいのでみなさん使ってみてくださいね！