👓
xR初級者がQuest3アプリの開発で知りたかったこと3選

2024/12/13に公開
xRギルド見習いメンバーの者です。
こちらはxRギルド Advent Calendar 2024 13日目の記事です。

テーマはズバリ「それ最初に知りたかったわ」。数ヶ月前の自分に届けたい思いで書きました。

 ①cubeを手で掴むためにはBuilding Blockだけじゃダメあやうく一番最初で詰みかけました｡

 Building Blocksとは？このSDKすごい！ドラッグ＆ドロップで色々属性を付与できる！
オブジェクト（例: Cube）にBuilding Blocksを付与して動き(ギミック？)を加えるわけですが､Building Blocksはこんな感じでたくさん種類があります。
Cubeを配置

Sceneビューで右クリックし、3Dオブジェクト > Cubeを選択。

ここにDistance Grabを追加する｡
※これだけではcubeを掴むことができず※
Rigidbodyを追加

Cubeを選択し、Inspectorの「Add Component」からRigidbodyを追加。

Is Kinematicのチェックを外すと、物理演算が有効になる。
※ここでやっとcubeを掴めるようになりました。※

 Hierarchyは結構適当でいい後で困るかも知れないけど、まず動かしてモチベ上げたいので適当でいいんです。

僕のUnity画面はぐっちゃぐちゃです。

また、Building Blocksを適用すると各Objectをいい感じにしてくれるわけですが、Objectの子階層にまで入り込んでいい感じにしてくれてしまうので、もうわけがわかりません。

いったん理解を諦めましたが動いたので､Hierarchy整理は上級者になってからでよかろう｡
解説はChatGPTくんに全てお任せ。ありがとう文明の利器。

 ②UI Kitは置くだけじゃ「触る」ことができないなんてググったら良いかもわからなくてしんどかった…

 公式UI Kitがあります2024年10月、Metaが公式UI Kitを提供開始しました。このUI Kitにはスライダーやボタンなどのコンポーネントが含まれていて、かっこいい感じのUIを置けます。

https://www.moguravr.com/horizon-os-ui-set-unity/
1. Unity Package Managerで「Meta Interaction SDK」をインポート。
2. サンプルシーンを開き、UI Kitの動作を確認。
3. 自分のプロジェクトに必要なUI要素をPrefab（プレハブ）として利用。
という感じでChatGPTくんは言ってくれるんですが 「置ける」だけでした。

動かないじゃんこれ。

 Pokeという概念を理解しようそこで以下のページを参考に、Pokeの概念を理解して、Building Blocksの中にある「Poke Interacion」を設定してなんとか動きました。

このサイトはPokeの概念を図解してくれていて本当にありがたかったです…

https://xrdnk.hateblo.jp/entry/interaction_sdk_poke
ちなみに上記のサイトは 「Quest3 Poke」みたいなキーワードで画像検索して たどり着きました｡図解を画像検索するのは結構やりがち｡
詳しいSDKの使い方は省略。

ChatGPTくんが日本語で教えてくれます。

 ③スライダーUIと各オブジェクトの変数を紐づけるにはC#が必要変数1つ動かすのにもスクリプトが必要だとは思っていなかった。

Unityなんもわからん。

 Cubeを配置してスライダーで位置を変更するスライダーの値を使い、Cubeの位置を変更する仕組みを作成します。
CubeをSceneに追加
UI KitのSliderを追加
スクリプトの実装

この手順が必要なのか…UnityのGUIをどんなに探しても紐づけが見つからないわけだ…(愕然)

実際に動いたコードがこちら。
using UnityEngine;

 public class SliderDemo : MonoBehaviour //Unity標準クラスを継承
 {
     //スライダーの値を「取得する」ためのパブリック変数を定義する関数
     //取得した値のCubeの回転への反映もここで行います。
     public void SliderDemo_CubeRot(float newValue)
     {
         Vector3 pos = this.transform.localPosition;

         // 縦軸のy成分を代入
         pos.y = newValue * 3;

         // 新しい数値をキューブの角度に代入
         this.transform.localPosition = pos;
     }

     // Start is called before the first frame update
     void Start()
     {
     }

     // Update is called once per frame
     void Update()
     {
     }
 }
変数の扱いは以下が詳しく教えてくれました。概念理解、超大事。

https://qiita.com/Ninagawa123/items/96f316d417d825cc1137

 VRMアバターとスライダーで髪色変更VRMアバターをインポート

Unity用VRMプラグインを使用してアバターをプロジェクトに追加。インポート方法は別途ググってください。

モデルは、無料でお借り出来る「RadDollV2」がオススメです！
Rendererのマテリアルを取得

アバターのRendererからマテリアルを取得し、スライダーの値で色を変更できます。

以下のようなスクリプトを作成・オブジェクトに設定していきます。完成形のキャプチャが以下。

targetRenderer.materials[4].colorがElement0～4で配列になっているという重要ポイントです。
 using UnityEngine;
 using UnityEngine.UI; // UIスライダーの操作に必要

 public class SliderHair : MonoBehaviour
 {
     public Renderer targetRenderer; // 色を変更するオブジェクトのRenderer
     public Slider colorSlider;      // スライダー

     // スライダーの値を受け取り、オブジェクトの色をHSVで変更
     public void UpdateColor(float sliderValue)
     {
         // HSVの色相をスライダー値に基づいて設定 (0.0f - 1.0f)
         Color newColor = Color.HSVToRGB(sliderValue, 0.5f, 0.5f); // 彩度1, 明度1
         targetRenderer.materials[4].color = newColor;             // マテリアルの色を変更
     }

     void Start()
     {
         // スライダーの初期設定とイベントリスナーの追加
         if (colorSlider != null)
         {
             colorSlider.onValueChanged.AddListener(UpdateColor);
         }
     }

     void OnDestroy()
     {
         // イベントリスナーを解除（メモリリークを防ぐ）
         if (colorSlider != null)
         {
             colorSlider.onValueChanged.RemoveListener(UpdateColor);
         }
     }
 }

この記事に載っているコードは参考文献のキメラです｡先人たちに感謝です｡

エンジニア職ではなくても気合と根性とChatGPTくんの助けで開発ができる！
前提となる概念(モノを掴む、触る、変数を扱うなど)はちゃんと理解しなきゃいけない。
概念がわかったら、具体的な操作は(一定の英語力が無い限り)解説をググるよりChatGPTに聞いたほうが早い。 ※たぶん初学者の入門に限る
という感じですね。
Quest3を7月に購入して早5ヶ月！引き続き遊んでいきます｡
①cubeを手で掴むためにはBuilding Blockだけじゃダメ

Building Blocksとは？

Hierarchyは結構適当でいい

②UI Kitは置くだけじゃ「触る」ことができない

公式UI Kitがあります

Pokeという概念を理解しよう

③スライダーUIと各オブジェクトの変数を紐づけるにはC#が必要

Cubeを配置してスライダーで位置を変更する

VRMアバターとスライダーで髪色変更

Discussion
