Plateauコンバーターで変換した3D建物を使って街歩き
以前こんな記事を書きました。
https://qiita.com/Takayuki_Kawajiri/items/bba54a64c20c4b1d53c2
この時は、PLATEAUの3D建物データをBlenderでobj形式にして
A-Frame上に表示してみました。
しかし、原点座標からの距離をオフセットしたり、変換処理が複雑でした。
もっと簡単にできる方法でやり直したいと思います。
材料
- PLATEAUの3D建物データ
- PLATEAU GIS Converter
- A-Frame(HTMLファイル)
個別に説明していきます。
- PLATEAUの3D建物データ
G空間情報センターから、建物のデータをダウンロードしてきます。
今回は札幌のデータを使用しました。
ダウンロードしたファイルを解凍し、
6441-42-78-4-4 > 01100_sapporo-shi_city_2020_citygml_6_op > ubx > bldg > 64414278_bldg_6697_op.gml
64414278のメッシュのメッシュを使って行きます。
-
PLATEAU GIS Converter
PLATEAU GIS Converterは、日本の都市データ（PLATEAUプロジェクトで提供される3D都市モデルデータ）をGIS（地理情報システム）で利用可能な形式に変換するツールです。主にCityGML形式のデータを、GeoJSON、Shapefile、PostGISなどGISで扱いやすいフォーマットに変換できます。
https://project-plateau.github.io/PLATEAU-GIS-Converter/manual/install.html
インストール手順に従ってインストールしておきます。
こちらはGitHub
https://github.com/Project-PLATEAU/PLATEAU-GIS-Converter
- A-Frame(HTMLファイル)
A-Frameは、Webブラウザ上でVR（仮想現実）や3D体験を簡単に構築できるオープンソースのWebフレームワークです。HTMLベースの記述を採用しており、Web開発初心者でも直感的に3DシーンやVRコンテンツを作成できます。
VRが簡単に始められて、クロスプラットフォーム対応というところがお気に入りです。
Getting Startedを参考に、HTMLファイルを一つ用意してきます。
単純なHTMLなら、glitchというサービスを使うと、簡単にプレビュー配信ができて、A-Frameを試すのにオススメです。
https://glitch.com/
データ変換
PLATEAU GIS Converter（GUI）を使っていきます。
用意したCityGMLを入力に選択し
ファイル形式をglTF
出力は、お手元の環境に合わせて
変換処理を実行します
bldg_Building.glb
が生成され、変換後のデータは36Mになりました。
Webページ作成
A-Frameは単純なHTMLなのでGlitchで作業します。
シーンに、空、地面、3D建物（glb）を配置した状態
予めGlitch上のAssetにgblファイルを配置して、アップロードし、絶対パスへ変換しています。
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A-Frame GLB Model Example</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Asset管理 -->
<a-assets>
<!-- GLBモデルのロード -->
<a-asset-item id="buildingModel" src="https://cdn.glitch.me/f2a394c1-b487-497f-a931-eff4e524aa75/bldg_Building.glb?v=1733631987696">
</a-asset-item>
</a-assets>
<!-- シーンに建物モデルを配置
高さは暫定値（本当は20.8ぐらいのはず）
スケールもサイズダウン
-->
<a-entity
gltf-model="#buildingModel"
position="0 -26 0"
rotation="0 0 0"
scale="0.5 0.5 0.5">
</a-entity>
<!-- 地面 -->
<a-plane
position="0 0 0"
rotation="-90 0 0"
width="1000"
height="1000"
color="#7BC8A4"
></a-plane>
<!-- 空 -->
<a-sky color="#f0f8ff"></a-sky>
</a-scene>
</body>
</html>
建物をスケールダウンした関係で
高さも合わず、手動調整しました。
ご自分で選択されたメッシュを表示する場合は、最初は地面と空が無い状況で、3D建物のスケール、高さを調整するほうが良いと思います。
プレビュー
https://plateauglbsapporo.glitch.me
glbのダウンロード（36M）に時間掛かるかも・・・。
マウスのドラックで視線の移動
キーボードの十字キーで、カメラ位置の水平移動が出来ます。
大通公園1丁目から北を向いたイメージ
右手にさっぽろテレビ塔
左前方に札幌市役所
左方向（西方向）が大通公園です。
（VR空間上地面を平坦にしているので、実際の地形の傾斜に合っていないので、東の方行くと地面の高さが合っていません。）
PLATEAUのデータが地面の高さまで厳密に再現されている証拠です。
まとめ
HTML 42行（コメント含む）で、簡単に街歩きをVRで再現することが出来ました。
Unity等ほど高精度では無いですが
A-Frameでも、VRコントローラ等にも対応しているので、簡単な街歩きゲームも作れると思います。
（詳しくは、A-Frameの公式ページを参照下さい）
データの変換もPLATEAU GIS Converterのおかげで、簡単に出来ます。
手軽にVRで街歩きを作りたい時は、A-Frame + PLATEAU GIS Converterを使って見てはいかがでしょうか？