QGISで作った地図を簡単にAR化して楽しめるらしいので試してみた

# 概要
QGISで作った地図を簡単に現地でAR上で楽しむ手段を紹介しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/dbe80cb4-c674-3031-ffe6-3df200c04205.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/22ba36dc-0026-82f5-acc6-cb0c32df5a73.png)


# 必要なもの
- QGIS（バージョンは以下のQGIS2threejsプラグインが使えるんなら大丈夫なんちゃう？知らんけど）
- QGIS2threejsプラグイン
- 3Dモデルを配置するポイントデータ
- ARで見たい3Dモデルデータ
- ARを閲覧するhtmlファイル一式をアップするサーバー（Githubでも可）
- webARに対応したスマホやタブレット（なんかよくわからんけど、[この辺](https://ar-marketing.jp/ar-devices/)参考にしたらええんちゃう？）



# 作り方
1. QGISで3Dオブジェクトを配置するポイントデータを描画します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/6f32163c-fb40-6b54-760a-64013cd0737c.png)



2. Qgis2threejsプラグインからQgis2threejs Exporterを起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/c2523a2d-2b4c-22da-9b01-2316d8573813.png)


3. Qgis2threejsの画面でDEMのレイヤとポイントのレイヤを表示する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/41ec1c3c-45cf-8c55-3d21-3cc32c7fad23.png)


4. ポイントレイヤのプロパティを開いて以下設定する。
    ①Typeを3D Modelにする
    ②Z coordinateのMode：DEMデータを選択する。
    ③File PathのModel file：ポイントの位置に表示させる3Dmodelを選択する
    ④Geometry：必要に応じて3Dモデルのサイズや回転を設定する
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/b547e303-3fe5-8368-e4d9-f43a44b048b2.png)


5. 画面上に3Dモデルが表示されることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/e746c5a5-3115-3ea2-b6df-a373a2fb5bf6.png)


6.  Qgis2threejsのメニューからExport to Webを選択し、以下設定する。

    ①Output Direction：ファイルの保存先を指定します。
    ②TemplateをMobileにします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/35a147e4-f931-62b8-d4c6-06b619af942b.png)


7. Export ボタンをクリックすると指定したフォルダに色々ファイルが書き出されます。
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/de3df8ac-41b2-f5e2-b90b-dabf6f6a1f68.png)


8. 書き出されたファイル一式をサーバーにアップします。
(画像ではGithubにアップしています)
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/ac7a9441-d330-cd3d-c97b-e17a871b3f52.png)


9. webARに対応したスマホでアップしたファイルのindex.htmlにアクセスすると、ブラウザ上で地図が再現されます。

    ![Screenshot_20230604-035239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/89ba29a1-8f78-f427-4866-c8f06532737e.png)


10. 右上に「AR」のトグルを押すとARが起動され、デバイスのカメラ越しに3Dの地図が表示されます。
    ![Screenshot_20230604-035436.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/9db2db8f-db61-5d5e-16b9-5e2109993c1c.png)




11. ベースマップも表示されているので3Dモデルのみ表示したい場合は、レイヤ一覧から地表面のレイヤを非表示にします。
①画面下の[・・・]アイコンをタップ
②一番左のアイコンをタップ
③地表面を描画しているレイヤのチェックを外す
![Screenshot_20230604-035500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/aaaa1f6c-5701-85f5-d905-0bfe610e1bf9.png)


11. 現地でARを起動してみる

![Screenshot_20230604-110254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/a73bf588-815d-d602-eb6a-70593c700a48.png)


うまくできている・・・・と思いきや。

![スクリーンショット 2023-06-04 12.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/22105386-00a6-baac-4d42-40927bda3d07.png)

せっかくなんでモデルの近くまで近づいてみようと思い、上図の星の位置まで現地で移動した時のAR画面がこちら

![Screenshot_20230604-113142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/0aa62b9b-6008-90f3-9188-e5b5c77d1259.png)

全然目の前にモデルがいない。
マップ上には確かに3Dモデルの近くにいるのに、3Dモデルが近く出てこない。



# あれ、こんな時は
どうやらデバイスのGPS精度の低さが原因（？）で、実際の位置とは離れた位置にいることになっているようでした。

![スクリーンショット 2023-06-04 12.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/0c2dea53-3c7c-4810-991e-4116f1238b09.png)

このように、実際の位置とGPSの位置がずれているときは、自分の位置を直接指定することもできます。

①ARをオフにする
②レイヤー一覧を表示する
③背景地図を表示する
④地図上の任意の地点をタップする（黄色い点が描画されます））
⑤Start AR mode hereをタップする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/150ed29f-ea22-408a-30c4-03da7a052592.png)

こうすると、指定した地点でのAR視点を実行できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/6d06d88e-35c8-b760-ac47-77cf3c461c72.png)

無事3Dモデルを間近に拝めることができました。




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/aec83591-21e1-11f3-53ad-fb1c619205d7.png)


![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61492/cf2c5fd8-7143-62f2-de96-757fed7ca15d.gif)