こんにちは、XRエンジニアのイワケンです。
2022年の9月22日に8th Wall Blogにて、Introducing Lightship VPS for Webという記事が公開されました。ついに「Web」の「VPS」が民主化されるぞ！というところで個人的には非常にワクワクしたリリースでした。
AR体験として有用な、カメラ撮影から自分の場所や向きを推定するVPS (Visual Positioning System)という技術は近年
- Spatial Anchors
- Immersal
- Pretia
- GeoSpatial API
など、様々な開発SDKが登場していましたが、すべてネイティブのスマホアプリ (iOS,Android)への対応でした。
詳しくはこちらの記事をご覧ください。
ARアプリはWebARと比べて、リッチな表現ができる一方で、手軽さではWebに劣っていることが多いです。
特に、外出先でスマホを開くときに気軽に体験できるWebARでのVPSは非常に魅力的です。
というところで、WebARで有名な8thWall社を、ポケモンGOのNiantic社が買収したことで、WebARでのVPSが早速実現できたというストーリーなのです。
この記事では、公開されたブログやドキュメントをもとに、8thWallのLightship VPS for Web (以下Lightship VPS)で何ができるのか紹介しつつ、実際触ってみた手順についてご紹介します。開発合宿先の静岡で実践しました。日本最速かもしれません (一緒に旅行した中村君も同じ日に行いました)
注意
速度重視に記事を書いたので、荒削りだったり、あとで書く予定のところもあります。
すでにあるWayspotを活用する
WayspotsはNiantic社が定義した言葉です。
簡単に言うとVPSができるスポット (ポケスポット的な) です。ただ、GPSだけでなくカメラ映像から自分の位置を推定することができます。
私の旅行先の静岡県もいくつかWayspotsがあるようです。
この画面を開くためには、8thWallのCloud Editorから、左メニューのGeospatial Browserをクリックします。この単語もVPSの扱いでよく使うので覚えましょう。
Wayspotsの1つを選択すると、スキャンしたあとのようなMeshが現れます。すでに存在しているWayspotsはこのように表示されます。
実際にデモアプリを起動して、熱海駅のSLに行ってみるとSL広場がレコメンドされます。
使用したサンプルアプリはこちら
すでにあるWayspotsに反応するWebARアプリを作る
8thWallは公開されたプロジェクトをCloneして自分のプロジェクトにすることができます。
試しにvps-bespokeのプロジェクトをCloneしましょう。
ここからClone Projectです。
続いての手順はこちらです
- 追加したいWayspotsを選択
- 「Add to Project」
- 「Project Wayspots」リストに追加されたのを確認
追加したいWayspotsを選択
「Add to Project」
「Project Wayspots」リストに追加されたのを確認
ではソースコードをいじっていきます。
- glbデータのimport
- body.htmlの編集
glbデータのimport
先程にexportするアイコンがあるので押します。
glbデータをドラッグ&ドロップします。すると追加できるぞ！
body.htmlの編集
body.htmlを開き、vpsに関わる実装を真似しながら追加していきます。
aframe頑張っていきましょう。
<a-scene
landing-page
vps-coaching-overlay
background="color: #303030"
renderer="colorManagement: true"
gltf-model="dracoDecoderPath: https://cdn.8thwall.com/web/aframe/draco-decoder/"
xrextras-runtime-error
xrextras-loading
xrweb="enableVps: true">
<a-assets>
<a-asset-item id="vps-mesh" src="./assets/cal-park-wayspot.glb"></a-asset-item>
<!--追加-->
<a-asset-item id="vps-mesh2" src="./assets/sl_1.glb"></a-asset-item>
<!--追加-->
<a-asset-item id="squaloons-mesh" src="./assets/squaloons.glb"></a-asset-item>
</a-assets>
<a-camera
position="0 1.8 4"
raycaster="objects: .cantap"
cursor="fuse: false; rayOrigin: mouse;">
</a-camera>
<a-entity named-wayspot="name: california-p">
<a-entity
gltf-model="#vps-mesh"
xrextras-hider-material>
</a-entity>
<a-entity
gltf-model="#squaloons-mesh"
cubemap-realtime
animation-mixer="clip: *">
</a-entity>
</a-entity>
<!--追加-->
<a-entity named-wayspot="name: 熱海軽便鉄道のsl">
<a-entity
gltf-model="#vps-mesh2"
xrextras-hider-material>
</a-entity>
<a-entity
gltf-model="#squaloons-mesh"
cubemap-realtime
animation-mixer="clip: *">
</a-entity>
</a-entity>
<!--追加-->
<a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
<a-light type="ambient" intensity="1"></a-light>
</a-scene>
<a-entity named-wayspot="name: 熱海軽便鉄道のsl">のnameはGeoSpatial Browserのここを参考にしました。
これで実際にWayspotsに行ってみると...?
デモ動画ができ次第共有しますね。
Wayspotがなければ作る
Wayspotsがなければ作ればいいじゃないか！ということで「ユーザー」が作ることができるみたいです。GoogleさんのARCore Geospatial APIだと、Googleストリートビューの人に期待するしかないですよね。
この記事では、ドキュメントの説明をしつつ、途中までチャレンジしたことを共有します。
手順はこちら
- Geospatial Browserにて
- 新しいWayspotsを地図上で選択
- Wayspotsの情報を追加
- Niantic Wayfarer Appにて
- 対象スポットをスキャン
- 時間帯も10回以上スキャンデータを送る
- 対象スポットをスキャン
新しいWayspotsを地図上で選択
Create Wayspotをクリック
Wayspotsの情報を追加してください。名前などがもとめられます。
Niantic Wayfarer Appの準備
Niantic Wayfarer AppはVPSのための3DMapをスキャンするためのアプリです。これを使うためにはTest Flightアプリ (iPhone8以降、iOS12以降)をインストールする必要があります。
こちらのリンクから入りましょう。
対象スポットをスキャン
アプリを立ち上げるとスキャンを直感的にすることができます。
スキャンができたら、送信します。
時間帯も10回以上送らないと次のステータスに進めない
結論、時間帯変えつつ、10回以上スキャン&送信をしないとWayspotsとしてActivateされないみたいです。かつ精度もいい感じである必要があります。
今回、まだ1回しかスキャンをアップロードしていないため、ステータスが進んでいません。
今後
- 既存Wayspotsへの体験を実装できたか試す
- 新しいWayspotsを作るまでスキャンのアップロードを行う
Discussion