8th wallでlightship vps(Visual Positioning System)を試す

# はじめに

WebARでLightShipVPSが使えるという話題があったので、試してみました。

https://www.globenewswire.com/news-release/2022/09/22/2521056/0/en/Niantic-launches-Lightship-VPS-for-Web-bringing-the-Real-World-Metaverse-to-the-browser.html

VPSなどの理論などについては、

https://ai.googleblog.com/2019/02/using-global-localization-to-improve.html

を読んでいただくとして、これまで、appleやgoogleなどからもAPIが登場していましたが、いずれもアプリへの組み込み型がメインで、WebARで扱えるものが見当たらず、NianticのLightShipにVPSが導入されたことで幅広く活用が広がりそうな気がします。
下記のような選択肢があるなかで今回は、NianticのLightship VPSを試してみます。

|名前  |企業  |範囲 | url|
|---|---|---|---|
|Geospatial API[ARCore]  | Google  |GoogleMapのストリートビューが表示できる場所ならどこでも  | --  |
|Location Anchors[ARKit]  | Apple  |アメリカ全土、ロンドン、シンガポール、日本(東京、大阪、福岡など)  | --  |
|Lightship VPS  | Niantic |サンフランシスコ、ロサンゼルス、シアトル、ニューヨーク、ロンドン、東京など  | --  |
|City (Custom) Landmarker Template  |Snap  |ロンドンなど  |　-- |


# 渋谷駅あたりのスキャンの様子をみてみる

まずは、VPSの情報を登録したりみたりするWayfarerというアプリが必要なので、インストールを行います。
https://testflight.apple.com/join/VXu1F2jf

実際に、みてみると、かなりいろいろな場所が登録されているようみえますが、実際には、アクティベートとなっているものが少なく、使えるスポットは実はけっこう少ない様子。
1回の撮影ではアクティベートできず、朝、昼、夜と何回かにわけて登録することが求められる(1回の撮影には5分程度かかる)ため、かなり新規スポット登録の難易度は高いといえます。

![IMG_3750.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/eb7444dd-902c-9ded-52eb-41861b9ce621.png)

# (事前準備)privateスポットをscanしてみる

Scanする情報はprivateとpublicの選択ができるため、まずはprivateで登録して使ってみる

## 1.scanボタンを押下

## 2.1分x5セットで5分間の録画を開始

## 3.アップロード

# (事前準備)3Dファイルの用意

## blenderでモデルを作成し、書き出し。
(書き出す時に、可視オブジェクトのみにチェックをいれておく）

![スクリーンショット 2022-12-20 9.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/d53c89bb-cd66-74cb-4480-4e9f3c334f71.png)

![スクリーンショット 2022-12-20 9.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/ce7283bf-73e2-386f-15be-d9012d67973f.png)

# サンプルプロジェクトの作成

## 1.プロジェクトをCloneする

![スクリーンショット 2022-12-20 15.30.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/43deed9a-982c-cd30-d2fc-37ea88c29f10.png)

![スクリーンショット 2022-12-20 15.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/986369d5-a2b0-e596-f212-83db3c8e8771.png)

https://www.8thwall.com/8thwall/vps-bespoke/code/README.md

## 2.作成したプロジェクトの一覧から呼び出す

https://www.8thwall.com/ユーザー名/workspace

## 3.登録したスポットを探して、プロジェクトにinportする

https://www.8thwall.com/ユーザー名/vpsdemo1/geospatial-browser/...

![スクリーンショット 2022-12-20 9.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/21038bec-632d-7327-ca59-51d61b408fee.png)

## 4.Assets/配下にglbファイルをインポートする

## 5.body.htmlを修正する

```javascript

<a-scene>
  <a-assets>
    <a-asset-item id="vps-mesh" src="./assets/3d.glb"></a-asset-item>
  </a-assets>
  <a-camera
    position="0 0 0"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>
  <a-entity named-wayspot="name: 64df929fce2c">
    <a-entity 
      gltf-model="#vps-mesh"
      cubemap-realtime
      play-vps-animation
      shadow="receive: false">
    </a-entity>
  </a-entity>
  <a-light type="ambient" intensity="0.5"></a-light>
</a-scene>

```

## 5. save+build -> Landで サーバーに反映させる


## 6. 確認

https://www.youtube.com/shorts/80kuPlAHBaA

# publicなスポットの登録を試してみる

privateなスポットは一度スキャンすることで

![スクリーンショット 2022-12-05 16.54.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/2736b48e-6107-2b48-ba9d-8af5e4fdc133.png)


# 参考

The Complete Guide on Visual Positioning System
https://www.techfunnel.com/information-technology/visual-positioning-system/

Niantic Launches City-scale Visual Positioning System for Location-based, Multi-user AR
https://www.roadtovr.com/niantic-launch-lightship-visual-positioning-system-vps-this-month/

「Lightship VPS for Web」が登場：リアルワールドメタバースをブラウザへ
https://nianticlabs.com/news/lightship-vps-web