【UnityとXREAL編】MayaでCGを作成し、UnityでXREAL One ProにAR表示する

目次

• 概要
• 開発環境
• Unityを使ってXREAL One ProでARを表示する
  • インポートするもの
  • サンプルシーンを開く
  • cgアニメーションの設定

• Mayaで編み物のCGを作成(前回)

概要

　AR編み物学習アプリを企画しました。
ARグラスと音声入力により、手を編み物から離さないで使えます。
以下のように3Dモデルの針と糸の動きを自由な角度から見ることで、構造が理解しやすく、動きを真似して学ぶことができます。
　これにより、編み物を独学で始めたとき、本や動画ではいまいち分かりづらいという課題を解決できると考えました。

今回は、Unityで、前回作成したCGがXREAL One ProでARとして見られるアプリを作成します。音声入力機能は実装出来ていません。
xreal初心者の書いた記事です。

前回はこちら

開発環境

• Windows 11
• Unity 2022.3.62f3
• Visual Studio 2022
• XREAL Beam Pro
• XREAL One Pro
• XREAL SDK for Unity 3.1.0
• XR Interaction Toolkit 2.6.5
• Maya 2026

UnityでARアプリを作る

XREAL One ProでARを表示する

今回はサンプルシーンを使用して、One ProにCGモデルの表示をします。

まずUnityのプロジェクトを作成します。
バージョンは2022.3.62f3、テンプレートは3D(Built-In Render Pipeline)で作成します。

インポートするもの

Beam Proはandroidバージョン14でGoogle Playの全アプリが対応と聞いていましたが、android開発者サービス(ar)に対応しておらず、XREAL SDK無しでARFoundation, ARCoreを使ったアプリは上手く機能しませんでした

XREAL公式の手順を参考にしています。

初めにXREAL SDKダウンロードページから、XREAL SDK for Unity 3.1.0をダウンロードします。

Window → Package Manager → ＋アイコン → Add package from tarball...を選び、

先ほどダウンロードしたxreal sdkを開くと、インポートされます。

今回使用するシーンが含まれているサンプルをインポートします。

現在XREAL XR PluginのDescriptionが開かれていますが、Samplesに変更し、Interaction BasicsをImportします。

次にXR Intaraction Toolkitをインポートします
PackageManagerウィンドウの左上にあるPackagesをUnity Registryに変更し、右上の検索欄にxr intraction toolkitと入力するとパッケージが表示されるので、Installを押します。

新しい入力システムについての警告が出たら、Yesを選び再起動します。

先ほどと同じようにSamplesを選び、Starter AssetsをImportします。

MayaからのFBXをインポート

まずProjectタブ → Assetsの中にPrefabsの名前でフォルダを作成します。
PCのエクスプローラーから直接Prefabsフォルダ内へFBXファイルをドラッグ＆ドロップするだけでインポート完了です

サンプルシーンを開く

使用するシーンを開きます。
　赤い印で説明、
Projectタブでhelloと検索して表示される、HelloMRという名前のシーンをダブルクリックで開きます。

シーンを開くと、TMP Importerが開くので、インポートします。

　緑の印で説明、
XR Origin(XR Rig)が上手く読み込まれず、GameビューにNo cameras renderingと表示され、カメラが存在していない場合があります。

この場合は一度XR Origin(XR Rig)(Missing Prefab~)を消して、xr interaction toolkitのstarter assetで追加された、XR Origin (XR Rig)(Prefab Asset)を使用します。

Projectでxr originと検索し、XR Origin (XR Rig)(Prefab Asset)が出てきたら、HierarchyのXR Interaction Hands Setupにドラッグ＆ドロップで元の代わりとして置きます。

追記
XREAL公式の手順によると、XR interaction ToolkitのSamplesの中の、Hands Interaction Demoをインポートすることで解決するらしい

編み物CGの配置

PrefabsからHierarchyへドラッグ&ドロップでシーンに配置されます

配置直後の画面↓

この時Gameビューを見ると、編み物CGは映っておらず、サンプルの画面そのままなので、変更していきます。
　手前の白のオブジェクトはグラスでは表示されないのでそのままにします。

　まずHierarchyからCanvasとXREALLogoを削除します。
　次にXR Origin → Camera Offset → Main Cameraを選択すると、カメラの視界の範囲が、白い線で囲まれているのが確認できるので、カメラに映る位置まで編み物CGを移動します。

カメラ背景色の設定

ARグラスで見た時に、CGモデルだけが表示され、Unityの背景は表示されないようにするための設定です。これをした上でグラスの明るさを調整すると、モデルのみ表示され実際の手元が背景として見えるようになります。

Clear Flag → Solid Color にし、Backgroundを黒にします。

CGアニメーションの設定

アニメーションをループ再生する設定
インポートしたCGの右側にある、白丸に黒三角のアイコンを押して中身を展開、Take 001(初期状態の名前)を選択、InspectorからEditを押します

Inspector に Import Settings が開くので、Loop Time にチェックを入れます

Loop Timeの設定をした後他のウィンドウを押したタイミングで、変更を保存するか聞かれたら、Saveを選びます

オブジェクトにアニメーションを適用する

アニメーションのデータを持つ Animation clip を Animator Controller に登録し、そのControllerを設定したAnimatorコンポーネント をオブジェクトに追加します

controllerの作成
Prefabsフォルダで右クリックし、Create → Animator Controllerを選択

clipをcontrollerに登録
animator controllerを作成したら、ダブルクリックし、Animatorウィンドウを開きます。
Take 001をウィンドウ内へドラッグ＆ドロップすれば、controllerにアニメーションが登録されます

編み物モデルにcontrollerを追加
Hierarchyにあるモデルを選択し、InspectorのTransformの下のスペースにAnimator Controllerをドラッグ＆ドロップします
自動でControllerが設定されたAnimatorコンポーネントが追加されます

UnityのPlayボタンで再生するとアニメーションしています。

ビルド

XREAL Beam Proにビルドします。

ビルドのための設定

参考にしたXREAL公式の手順
　赤色で説明
File → Build Settings でビルド設定を開きます。
Androidを選び、Switch Platformを押して切り替えます

　水色の説明
現在のシーンがScenes In Buildになければ、Add Open Scenesで追加します。　

　黄色の説明
まず左下のPlayer Settingsを押すと、Project SettingsのPlayerの項目が開きます。

設定step1
緑の印の箇所を押しAndroidに変更

Player → Resolution and Presentation → Orientation → Default Orientation → Portrateに設定

設定step2
Player → Other Settings → AutoGraphicsのチェックを外す
Graphics APIs を OpenGLES3 のみにする

設定step3
Other Settings → Identification → Minimum API Level をAndroid 10.0(API level 29)以上に設定
Target API Level を Automatic (highest installed)に変更
その下のScripting BackendをIL2CPPに変更

設定step4
Player から Quality に変更し、VSync CountをDon't Syncに設定

以上で設定が完了です

Beam Pro へビルド

Beam Proの　開発者向けオプションからUSBデバッグを有効にし、デフォルトのUSB設定からファイル転送を選んでおきます

Beam Pro の USB-C ポートの右側(グラスアイコン)を使い、PCとUSB接続します

シーンが選択されていることを確認したら、
Build Settingsの右下、Build And Runを押します。

ConsoleウィンドウにSucceededと表示されたら、成功です

One Pro で表示

Beam Proの右側のポートからPCと繋がるUSBを外し、One Proと接続したUSBに繋ぎ変えます。
少しの間グラスと接続中の表示が消えるまで待ちます。

アップデートをしていないとグラスが使用できないので、
XREALアプリ(マイグラス)が最新のバージョン(今回はV1.11.0)になっていることを確認します。

アプリ一覧からUnityアイコンとUnityプロジェクト名のアプリを探し、開きます。
他のアプリの上に重ねて表示するかを確認されたら、重ねられるようにします。

グラスを着用し、アプリが起動すると、
以下のように映りました。アニメーションもしています

ただ映像が２つ横に並んで見えているので修正します。
XREAL One Pro の赤いボタンを２回押すと設定が表示されるので、
以下の画像のように、左上のアイコン → 3D Mode → Full SBSまたはHalf SBSに設定してください。

設定すると一度アプリが終了しますが、再びアプリを起動すると、
一つに見えるようになっています。

もし、以下のように背景が真っ黒の場合は、One Pro にある黒の長いボタンを押すと、明るさなどの設定が開くので、その中の真ん中にあるグラスアイコンを選択し、ゲージを調整することで、現実の背景が見えるようになると思います。

ゲージがフル ↓

ゲージ1/3 ↓

最終的にOne Proの右側のグラスをBeamProのカメラで撮影した映像がこちらです↓

Unity で XREAL Beam ProとOne Proを使ったARアプリ化が完了しました。

まとめ

以上が、私が今回の一か月のインターンで企画、制作した内容です。

AR開発は初めてだったため、予想外の部分で苦労することが多くありました。最初はBeam ProにARCoreを使ってAndroid用アプリを作ろうとしましたが、うまく動作せず、一度Google Pixel 9 ProでARCoreを使って制作を進め、Androidアプリが機能することを確認したりしました。

また、XREAL One Proを初めて扱う中で、アプリ背景を黒から透過に変更できず、Unity側の設定に問題があるのか、それともグラス本体の設定なのか分からずにかなり悩みました。結果としてはグラスの設定を１つ変更するだけで解決し、解決策は案外シンプルなこともあるという学びを得ました。

最終的に制作したものについては、２段目以降の糸のCGが作成できなかったことや、実物との見比べやすさのための明るさの調整、操作機能など未完成な部分がありますが、全体として企画の主要な部分は形にできたと感じています。

前回はこちら