PLATEAUコンバーターで変換した3D建物を使って街歩き

# Plateauコンバーターで変換した3D建物を使って街歩き

以前こんな記事を書きました。
https://qiita.com/Takayuki_Kawajiri/items/bba54a64c20c4b1d53c2
この時は、PLATEAUの3D建物データをBlenderでobj形式にして
A-Frame上に表示してみました。
しかし、原点座標からの距離をオフセットしたり、変換処理が複雑でした。
もっと簡単にできる方法でやり直したいと思います。

## 材料
1. PLATEAUの3D建物データ
2. PLATEAU GIS Converter
3. A-Frame(HTMLファイル)

個別に説明していきます。
1. PLATEAUの3D建物データ
    G空間情報センターから、建物のデータをダウンロードしてきます。
    今回は札幌のデータを使用しました。

https://www.geospatial.jp/ckan/dataset/plateau-01100-sapporo-shi-2020

ダウンロードしたファイルを解凍し、
6441-42-78-4-4 > 01100_sapporo-shi_city_2020_citygml_6_op > ubx > bldg > 64414278_bldg_6697_op.gml

64414278のメッシュのメッシュを使って行きます。

2. PLATEAU GIS Converter

    PLATEAU GIS Converterは、日本の都市データ（PLATEAUプロジェクトで提供される3D都市モデルデータ）をGIS（地理情報システム）で利用可能な形式に変換するツールです。主にCityGML形式のデータを、GeoJSON、Shapefile、PostGISなどGISで扱いやすいフォーマットに変換できます。
    
https://project-plateau.github.io/PLATEAU-GIS-Converter/#top

https://project-plateau.github.io/PLATEAU-GIS-Converter/manual/install.html
インストール手順に従ってインストールしておきます。


こちらはGitHub
[https://github.com/Project-PLATEAU/PLATEAU-GIS-Converter](https://github.com/Project-PLATEAU/PLATEAU-GIS-Converter?tab=readme-ov-file)

3. A-Frame(HTMLファイル)

https://aframe.io/

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
出力は、お手元の環境に合わせて
変換処理を実行します

![スクリーンショット 2024-12-04 14.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/945a9408-4ba6-effe-73d7-f2f227cbb1ab.png)

bldg_Building.glb
が生成され、変換後のデータは36Mになりました。

## Webページ作成

A-Frameは単純なHTMLなのでGlitchで作業します。

https://glitch.com/edit/#!/plateaugltfsapporo?path=index.html%3A19%3A19

シーンに、空、地面、3D建物（glb）を配置した状態

予めGlitch上のAssetにgblファイルを配置して、アップロードし、絶対パスへ変換しています。

```jsx
<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](https://plateauglbsapporo.glitch.me/)

glbのダウンロード（36M）に時間掛かるかも・・・。
マウスのドラックで視線の移動
キーボードの十字キーで、カメラ位置の水平移動が出来ます。

![スクリーンショット 2024-12-08 14.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/6deb8dd6-7f05-775d-737a-1783cb8f1561.png)
大通公園1丁目から北を向いたイメージ
右手にさっぽろテレビ塔
左前方に札幌市役所
左方向（西方向）が大通公園です。

（VR空間上地面を平坦にしているので、実際の地形の傾斜に合っていないので、東の方行くと地面の高さが合っていません。）
PLATEAUのデータが地面の高さまで厳密に再現されている証拠です。

## まとめ

HTML 42行（コメント含む）で、簡単に街歩きをVRで再現することが出来ました。
Unity等ほど高精度では無いですが
A-Frameでも、VRコントローラ等にも対応しているので、簡単な街歩きゲームも作れると思います。
（詳しくは、A-Frameの公式ページを参照下さい）

データの変換もPLATEAU GIS Converterのおかげで、簡単に出来ます。

手軽にVRで街歩きを作りたい時は、A-Frame + PLATEAU GIS Converterを使って見てはいかがでしょうか？