Zenn
🧭

Immersal VPSをWebARで使う

2022/07/14に公開
AR
WebAR
Immersal
tech

概要

  • VPS(Visual Positioning Service/System)として有名なImmersalがWebARのサンプルを公開していたのでその使い方を紹介します

  • まずはDeveloper Portal上で見る方法を紹介したのち、カスタマイズする方法まで紹介します

  • あまり大々的に告知されていませんが、Immersal Discordで発表が行われました

immersal-mikko — 2022/07/01
The WebAR mode has now been fixed on the Dev Portal. 
Works on Android Chrome, and you should have the
chrome://flags/#webxr-incubations 
set to 'enabled'. Sample code: view page source for view.html 🙂

https://discord.com/channels/524195464195735555/548498157735116810/992364986259230731

  • 2022年7月現在Android端末のChromeのみで動作します
  • 今回、Immersalへの開発者登録や点群の撮影については説明しないので、よくわからない方は下記の記事を参考にしてください
    サンプルからひも解くImmersal

Developer PorrtalでWebARを体験する

  • まずImmersalアプリを使って点群を撮影します
  • 次にAndroid端末のwebxr-incubationsを有効にします
    • まずChromeで chrome://flags/#webxr-incubationsを開きます
    • 開けたらWebXR IncubationsをEnabledに切り替えたのち、下部のRelaunchを押してブラウザを再起動します
  • ImmersalのDeveloper Portalを開き、先ほど撮影した点群のViewerを開きます
  • Viewerが開いて点群が表示されたらSTART ARボタンをタップします
  • パーミッションを求められるので許可します
  • しばらく待つとカメラ画像が表示されます
    • カメラ画像が表示されない場合、端末が対応していない・設定に失敗しているなどの可能性があります
  • ここで画面上をタップするとLocalizeが行われ、成功すると点群が正しい位置に表示されるようになります

Viewerをカスタマイズする

  • 上記の例ではDevelopper Portalから見ることはできるものの、ほかの人に見てもらうことができません
  • そこで、このViewerを外から使えるようにカスタマイズします

ソースコードの取得

  • ViewerのURLにview-source:を先頭につけてソースコードを表示させます
    • view-source:https://developers.immersal.com/view.html?0&999999&0のような形になります
  • これを view.htmlとして保存します
  • 次にSDK設定のJSを取得します
  • さらにjsフォルダ内にpngworker.jsというファイルを作成し下記コードをコピペします
pngworker.js
importScripts('https://developers.immersal.com/js/UPNG.js', 'https://developers.immersal.com/js/pako.min.js');

onmessage = function(msg) {
  const pixels = msg.data[0];
  const width = msg.data[1];
  const height = msg.data[2];
  const png = UPNG.encodeLL([pixels], width, height, 1, 0, 8, 0);

  postMessage(png);
}
  • ファイル構成は下記のようになります
├── view.html
└── js
    ├── sdkconfig.js
    └── pngworker.js

ソースコードの改造

  • このままでは使えないため、一部のコードを変更していきます
  • まずsdkconfig.jsのBASE_URLをhttps://developers.immersal.com/に書き換えます
- var BASE_URL = versionBaseUrls[SDK_VERSION];
+ var BASE_URL = "https://developers.immersal.com/";
  • view.html内で使っているcssやjsを読み込めるように修正します
view.html
<link type="text/css" rel="stylesheet" href="https://developers.immersal.com/css/main.css">
<script src="js/sdkconfig.js?v=1_16_1"></script>
<script src="https://developers.immersal.com/js/jquery-3.6.0.min.js"></script>
<script src="https://developers.immersal.com/js/js.cookie.min.js"></script>
  • ImmersalのAPIを叩くためにトークンを使用します
    • トークンはDeveloper PotalのPrivate developer tokenの部分に記載されています
    • 今回は簡単のためソースコード内にトークンを埋め込んでいます。公開環境では別の方法でトークンを渡し、トークン自体が漏れないようご注意ください
js
- if (privacy == privacyTypes.PRIVATE) {
-     token = Cookies.get('token');
- }
      
+ token = "developer-token";

  • これでソースコードの準備は完了です

    • ローカルサーバや外部サービスに一通りのファイルをデプロイします

  • まずはPCで開いてみて点群が表示されることを確認します

    • アドレス例：http://127.0.0.1:8887/view.html?0&99999&0
    • 各パラメータの意味は下記のとおりです
    • 1つ目：点群がprivateなら0、publicなら1
    • 2つ目：MapID
    • 3つ目：表示方法 0点群・1簡易モデル・2テクスチャ付きモデル

  • 次にモバイル端末で開いてみて、Localizeがうまくいけば成功です。これで自前のサイトでImmersal+WebARが使えるようになります

  • view.htmlのlocalize()関数内でLocalize処理が行われています。ここをカスタマイズすることでローカライズ後に任意のオブジェクトを出現させるなど様々なことが可能になります

  • このサンプルを利用してぜひ自分好みのコンテンツを作成してください

Discussion