NrealLightのアプリ開発～MRで魔法を使ってみた～

こんにちは。冬が間近に迫っているのをひしひしと感じている今日この頃です。
NrealLightというMRグラスのアプリ開発を行う機会があったため、開発方法などをまとめておきたいと思います。

f:id:sweetgohan:20211117180749p:plain — サムネイル用です

NrealLightとは
開発方法
作ったもの
まとめ

NrealLightとは

まずNrealLightとは、nreal社が開発しているMRグラスのことです。MRグラスというとHoloLensなどを想像しますが、それよりもずっと普通のメガネに近く、視野角も広めという製品です。日本では、auショップもしくは公式サイトから購入することができます。
ちなみに、NrealLightにはNrealLight(単品)とNrealLight Developer Kitの2つがあります。それぞれの価格と特徴を簡単にまとめてみました。

NrealLight (単品)

価格: 約7万円 (ただしNreal Light対応のAndroidスマートフォンがないと動かないため、実質+10万円必要)
特徴: スマートフォンと接続していれば外(モバイル回線)でも使用可能。アプリストアから様々なアプリをインストールして使える。

NrealLight Developer Kit

価格: 約13万円
特徴: 開発用に特化しているため、デフォルトのサンプルアプリと自作アプリしか使えない(たぶん)が、Dev Kit単体で動作するためスマートフォンを購入する必要がない。

一長一短という感じですね。今回はNreaLight Developer Kitを使用して開発しました。
また、余談ですが今年の12月に別機種のNreal Airが発売される予定です。こちらは機能が減る代わりにより軽く、より安い値段で販売されるそうです。ディスプレイとしての機能に特化したバージョンという印象を受けました。新製品も楽しみです。

開発方法

サンプルを動かす

まずは公式で用意されているサンプルを動かしてみます。開発環境はUnity 2019.4系です(公式のおすすめ)。ちなみに、Unity 2020系を使うとハンドトラッキング機能が使用できなかったのでご注意ください。
さて、基本的にはこちらのQuickStartに従う形になりますが、一応日本語でもメモしておきます。
まずはこちらからNRSDKをダウンロードします。ダウンロードの前に会員登録とアンケート回答を求められるので、指示に従うとダウンロードできます。
また、簡単に実機にインストールするためにscrcpyというアプリをダウンロードしておきます。こちら↓の記事がとても分かりやすかったです。
note.com
ただ、ゴリゴリ開発する上では後述するワイヤレスデバッグを使う方が便利です。

さて、準備ができたら先程のNRSDKをUnityのプロジェクトにimportします。この時、何か警告がでたら全てfixを押します。そして、NRSDK>Demos にあるHelloMRというSceneを開きます。すると、空にヘビ(nrealのロゴ)が浮いているシーンになります。
あとはBuild SettingsでプラットフォームをAndroidに変更した上で、Buildを押すとapkファイルが出力されます。
最後に、Nreal Lightのコンピューティングユニット(四角いやつ)をPCに繋いだ状態でscrcpy.exeを起動し、apkファイルをドラッグ&ドロップするとアプリがインストールされます。インストールが完了したらコンピューティングユニットとNrealLightを繋いで装着するとアプリのアイコン(デフォルトはUnityのロゴ)が表示されるので、クリックするとヘビが回転している様子を見ることができます。
また、視界の中に小さな丸いボタンが浮いていると思います。これをクリックするとパネルとボタンが表示され、他のサンプルデモを体験することができます。(但し、ビルドする時に体験したいSceneをScenes in Buildに加えておく必要があります。)

サンプルの説明

先程のNRSDK>Demos フォルダには色々なサンプルがあり、NrealLightの機能が網羅されています。私が役に立つと感じたサンプルについて簡単にメモしておきます。
・ImageTracking: 用意されている画像(こちら)を元にAR体験ができます。自分で用意した画像を元に作ることもできるみたいです。
・RGBCamera-Record: NrealLightで見ている画面を録画する機能のデモシーンです。私は画面録画を行う時にこのシーンをコピペしていました。
・HandTracking: ハンドトラッキングのサンプルです。デフォルトでは、指の関節が表示されたり手の動きにあわせてCubeが回転したりします。また、浮いている直方体は"NR Grabbable Object"というスクリプトがアタッチされており、掴むことができます。

画面録画について

次は画面録画についてです。といっても、先程RGBCamera-Recordに録画のサンプルがあると書いたので、ここでは録画した映像の取得方法について説明します。
まず、RGBCamera-RecordなどのSceneを実行して録画します。録画する時は、Startボタンを押すと開始されます。
撮影できたらStopを押して録画を終了し、コンピューティングユニットをPCにUSBケーブルで繋ぎます。そしてコマンドプロンプトを立ち上げ、

adb shell

と打ってシェルを起動します。(adbをインストールされていない方はこちらの記事などを参考にインストールしてください。)
起動するとデフォルトとは違う文字(C:\Users\[username]> などではない文字)が出てきて、コンピューティングユニットの内部にアクセスできる状態になると思います。そこでlsと打つとフォルダ・ファイル一覧が表示されるので、動画ファイルを探します。階層の移動はcdコマンドでできます。
私の場合は
/sdcard/Android/data/com.DefaultCompany.[アプリ名]/files
に録画したファイルがありました。
ファイルの場所が分かったらパスをメモしてexitコマンドでシェルを終了します。
そして最後に以下のコマンドを使用すると、指定した場所に保存されます！

adb pull [先程のファイルのパス] [保存したい場所のパス]

ちなみに、この画面録画ですが一部写らないものもあるようです。私はパーティクルを使用したアプリを作ってみたのですが、なぜかパーティクルは録画に写りませんでした・・・。今後解決策を調べたいですね。

ハンドトラッキングについて

上でも少し説明しましたが、もう少し詳しい使い方について説明します。

ペン機能

初めは無効化されているので気づきにくいのですが、実はサンプルにペン機能(お絵かき機能)も用意されています。
ヒエラルキーのNRInput>Right>NRHand_R の下にLinePenCtrl_Rというオブジェクトがあります。これにチェックをいれてオンにしておくと、人差し指を立てて動かした時に線を描けるようになります。

ジェスチャーに反応する機能を実装する

せっかくのハンドトラッキングなので、特定のジェスチャーに反応する機能を実装したいですよね。
そこで調べたところ、こちら↓のハンズオン資料がとても分かりやすかったです。
Nreal Lightハンズオン

ただ、ジェスチャーをカスタマイズする方法が書かれていなかったので、それについて書きます。
NRSDKでは"HandState.cs"というスクリプトに"HandGesture" という列挙型が用意されています。それを使えばここに載っているようなジェスチャーを使うことができそうです。
例えば、

if(handState.currentGesture == HandGesture.OpenHand && magicCircle==null)
        {
            magicCircle = Instantiate(magicCirclePrefab);
        }

のように書くと、手がパーの形の時に魔法陣を生成することができます。

ワイヤレスデバッグについて

NrealLightでは他のAndroidデバイスと同じようにワイヤレスデバッグを行うことができます。有線ですとPCに接続した状態でデバッグできず、バグ探しなどが難しくなってしまうため、ワイヤレスデバッグがオススメです。
ワイヤレスで接続するためには、まずIPアドレスを調べる必要があります。コマンドプロンプトを開き、"adb shell"でシェルを起動します。そして次のコマンドを打ちます。

ip addr show wlan0

すると長いメッセージが表示されますが、inet の後の "192.xxx.x.xx/24"となっている太字の部分がIPアドレスです。
確認できたら、以下のコマンドでワイヤレス接続します。

adb tcpip [4桁のポート番号]
adb connect [確認したIPアドレス]:[開いたポート番号]

また、UnityのPackage ManagerからインストールできるAndroid Logcatを使用すると、ワイヤレスでもログなどをリアルタイムに確認することができます。

作ったもの

せっかくなので、魔法が使えるアプリのようなものを作ってみました。

pic.twitter.com/6vzmvwO2ZC
— すだち (@kabostrawberry) November 17, 2021

(お部屋の隅にダンボールが積んであるのはVIVEのベースステーションの置き場所が必要だからです・・・)

このような感じで、手をパーに開くと魔法陣が出現し、ピンチの形にするとビームが出るようになっています。
が、何故か残念ながらビームが録画に写りませんでした・・・。一応ピンチした時にnrealのロゴがピンクになっているのがわかると思います。
また、魔法陣といえばピンクという印象があったためピンク色にしています。マテリアルエラーではないです。
魔法陣の素材はこちらのサイトからお借りしました。またビームはこちらの記事を参考にして作りました。

まとめ

NrealLightを使うと未来的なアプリが作れそうで楽しいですね。このようなスマートグラスがもっと普及していってほしいと感じました。

すだちキャンパス

やってみたこと、学んだことなどのメモ。