Looking Glass Go での WebXR 開発の始め方
2023年12月に Kickstarter で Looking Glass Go の支援をしてやっと 2024年9月に手元に届きました。早速 Looking Glass Go を使って遊んでみたのですが WebXR での開発に少し詰まる部分があったので記事としてまとめます。
ざっくり手順としては以下です。
1️⃣ Looking Glass Bridge を用いて Looking Glass Go に接続する
2️⃣ WebXR を使ってコンテンツを表示する
1️⃣ Looking Glass Bridge を用いて Looking Glass Go に接続する
1. Looking Glass Bridge というアプリケーションをインストール
まずはお使いの PC にあわせて Looking Glass Bridge というアプリケーションをインストールする必要があります。以下のリンクからダウンロードしてインストールしましょう。インストールが完了したら Looking Glass Bridge を起動しておいてください。
2. PC と Looking Glass Go を接続
付属のUSB-Cケーブルで接続するだけです。かと思いきやここにいくつか罠があったので注意点を説明します。
⚠️ Mac の場合一度に画面接続できる台数が制限される
自分はいつも M1 MacBookPro をクラムシェルで4Kモニタに接続して使用しているのですが、M1 Mac は外部接続できるのは一台までという制限があり、そのため Looking Glass Go を接続しても表示されませんでした。
お使いの Mac 事に制限が違うようなのでもし表示されない場合は、一度 MacBook には Looking Glass Go のみにして試して見たうえで接続上限を確認してみましょう。以下のサイトがわかりやすかったです。
⚠️ Looking Glass Go をスタンバイ状態にする
Looking Glass を開封して同封の手順書に従ってすすめるとデフォルトで設定されている写真がスライドショー形式で表示されます。ただこの状態（プレビュー状態）だと PC と繋げても反応しません。
一度右側面の電源ボタンを長押しして電源オフにした後、もう一度電源ボタンを押すと青く点滅します。するとしばらく経つと接続されます。
ここまで完了したら以下のリンクのサンプルコードを実行してみて KitKat の表示が Looking Glass Go に表示されたら成功です。
2️⃣ WebXR を使ってコンテンツを表示する
ここまで来たらあとはコンテンツを表示するだけです。サンプルコードを以下のリポジトリに用意したのでクローンして試してみて頂いても構いません。今回は three.js を使った解説をします。
まずは three.js で表示できる適当なコンテンツを用意してください。そして今回 Looking Glass のために必要なパッケージをインストールします。
yarn install @lookingglass/webxrそして以下のコードを root となるコードに追記してください。
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "@lookingglass/webxr";
const config = LookingGlassConfig;
config.targetY = 0;
config.targetZ = 0;
config.targetDiam = 3;
config.fovy = (14 * Math.PI) / 180;
new LookingGlassWebXRPolyfill();あとはコードを実行するとブラウザに Looking Glass 用の別タブが作成されます。それを Looking Glass Go に移動させてください。
ここで大事なポイントとして、移動させたらそのウィンドウの中でダブルクリックをしてください。これをしないと全画面表示されずヘッダーが表示されたままになってしまいます。
ここまでで無事起動できるようになるかと思います。
「この解説の方法だとうまくいかなかった」や「もっと楽な方法ありますよ」などあれば是非おしえてください。
余談
現在の `@lookingglass/webxr` は普通に使おうとすると型定義ファイルが存在しないというエラーが出てしまい型エラーがおきます。
先ほど紹介したサンプルコードに `patch-package` を使った修正も入れてあるので是非参考にしてみてください。