A-Frameで街歩き #A-Frame

しばらくぶりの投稿です。
またまたA-Frameネタです。

今回は、PLATEAUのデータを活用して、A-Frameで街歩きを作って見たいと思います。
VR空間に、建物を表示して、移動できるようにする。

A-Frameについて
A-Frameは、ウェブ上でVR（仮想現実）およびAR（拡張現実）コンテンツを作成するためのウェブフレームワークです。
Three.jsベースではありますが、HTML+Javascriptの知識さえあれば作れて
なにより、１ソースでクロスプラットフォーム動作するところがお気に入りです。

主要なVRデバイス（HTC Vive、Oculus Rift、Windows Mixed Realityなど）
モバイルデバイス（スマートフォンやタブレット）でVRコンテンツを表示することができます。
もちろん、ジャイロセンサーや、VRデバイスのコントローラにも対応しています。
類似に、Babylon.jsがあります。

デモサイト
スマートフォン等でテストしやすい様に、glichというオンラインで、HTML書いて即プレビューできるサイトを使ってます。
https://glitch.com/edit/#!/a-frame-mierune-meetingroom?path=index.html%3A19%3A0

街の建物データ取得先としてPLATEAUを選択しました。
G空間情報センターにて
色々な形式のデータが配布されていますが
A-Frameで表示できる種類は、

obj(gltfを使うことを推奨している）
gltf(glb)
dae
fbx

今回は、fbxダウンロードして、Blenderでｇｌｔｆへ加工し、VR空間へ建物を表示したいと思います。

glbファイルの作成（FBX→glTFへ変換）

手順は

を参考にしています。

G空間情報センターから東京タワー付近(53393599)のFBXをダウンロード

https://www.notion.so/mierune/A-Frame-6af105272b384143852e7b0a23260330?pvs=4

Blenderで、FBXをインポートする際に、スケール、オフセット位置を調整します。

［前方］を［Yが前方］、［上］を［Zが上］、［スケール］を「100」に指定する。

読み込めましたが、実はこの建物群は原点から離れたところにプロットされています。
なぜなら

平面直角座標９系の原点が、このデータの原点になっているからです。
VRで使うには、この建物群を原点付近へ移動しなくてはいけません。

移動量を調べます。

平面直座標9系の原点から、指定メッシュ中心のズレを計算

このサイトで平面直角座標系原点からのオフセット量を調べられます。
（事前に、53393599メッシュの中心緯度経度も調べておきます。）
http://www.gis-tool.com/areamesh/meshcodetocoordinates_s.php?meshcode=53393599
で四隅の緯度経度から中心緯度経度が算出できます。

平面直角座標９系原点と、53393599メッシュ中心とのXY距離を求める。

X:37440.1670 ｍ
Y:8110.6289 ｍ
移動すべき量がわかりました。

BlenderでXYオフセット処理すると、原点付近に移動します

建物をドラッグしてすべて選択し［編集モード］にして［N］キーを押し
［アイテム］タブのトランスフォームで移動量を指定できます。

Z方向について、PLATEAUのデータをそのままBlenderへインポートしても、少し浮いてしまいます。

PLATEAUのデータは、実態に則した３Dモデルなので、標高地も含まれているからです。
Blenderの世界は、（現状）地面が平坦なので、建物を地面に付ける必要があります。

Blenderに「Drop_it」というアドオンをインストールして、

Drop_itで参考にさせてもらったサイト
https://www.tomog-storage.com/entry/Blender-Addon-IntroductionDropIt

仮の地面を作り（地面を作るのは、追加ーメッシュー平面）、

そこに建物を全てDrop_itさせて、着地後、仮地面を削除しました。

glbへエクスポートして,glbファイルを作成しました。

53393599メッシュのglbをA-Frameへ配置

地形だけでは味気ないので、

フリー素材のベンツをスタート地点に配置しています。（回転や位置を変えて、スケールは合っていないかもしれない。）

<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="./vr/images/icons/favicon.ico" />
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/three@0.131.3/examples/js/loaders/TDSLoader.js"></script>

  </head>
  <body>
    <a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
      <!-- Sky, Emvironment -->
      <a-sky color="#ECECEC"></a-sky>
      <a-entity environment="preset: default; dressingAmount: 0"></a-entity>

      <!-- Assets -->
      <a-assets timeout="30000">

        <a-asset-item
          id="benzgls_gltf"
          src="https://cdn.glitch.global/843975dd-520d-4cb9-bacb-e3ce2239c588/BenzGLS.glb?v=1686733547364"
        ></a-asset-item>
        <a-asset-item
          id="tokyo_gltf"
          src="https://cdn.glitch.global/843975dd-520d-4cb9-bacb-e3ce2239c588/53393599_dorpit.glb?v=1686733558171"
        ></a-asset-item>
      </a-assets>

      <!-- GLTF, Obj -->
      <a-gltf-model
        src="#benzgls_gltf"
        position="1.8 0 -10"
        rotation="0 180 0"
      ></a-gltf-model>
      <a-gltf-model
        src="#tokyo_gltf"
        position="0 0 0"
        rotation="0 0 0"
      ></a-gltf-model>
    </a-scene>
  </body>
</html>

この状態で、PCブラウザだとマウスドラックで視点移動、カーソルキーで自位置移動ができます。

このパフォーマンスメータは、A-Frameで予め用意されていたもの（stats）

Three.jsに負荷かけすぎているか

負荷がかかっている。Trianglesが赤状態。

PCでこの状態なので、スペックの劣るVRゴーグルではすぐ、
フレームレートが落ちてしまう＝VR酔いするだろう。（まだ実際に試しては居ない）

一応PCブラウザでは、普通に動いている・・・。

後日、会社の有識者に聞くと、Triangles（三角形）を間引いて軽量化して使うのが普通、だそうです。

まとめ

A-Frameで、PLATEAUの都市モデルを表示することはできたが、まだまだ課題はある。

今後の課題

Triangles（三角形）を間引いて軽量化
テクスチャの付いている建物データ
地面を実際の地図or衛星写真