【OSC何も分からん人向け】OSCでVRChatを操作してみよう！

# はじめに

こんにちは。
ジョジョ好きなXRクリエイターの [もふるね](https://twitter.com/mofurune_k) です。

VRChatでたまに耳にする「OSC」とは何なのか気になってきました。
こういう時は実際に触ってしまうのが理解が早いのです。
（思い立ったが元日、年明けてすぐに未知の領域を触り始める私）

OSCに関して全くの無知だった私が、OSCを触って理解できたことをここに書き連ねていきます。



## 結果

https://twitter.com/mofurune_k/status/1741804785979023595

<font color="Red">こいつ...動くぞ！</font>


## 参考資料

ラザノアさんのポスト
[VRChatでOSCを体験する手順](https://twitter.com/Lasagnoa/status/1494897451559690241)
Honda HiromichiさんのQiita記事
[OSCとは？OSC通信についてまとめてみた](https://qiita.com/generosity_honda/items/904aaeb382f6496ab920)
がちもとさんのQiita記事
[VRChatでOSCやーる（Python3.9、Windows10）](
https://qiita.com/SatoshiGachiFujimoto/items/7f43954c7cbbe8c25dbe)
おのさんのZenn記事
[VRChatがOSCに対応したので、まずはNode.jsでアバターをジャンプさせてみた](https://zenn.dev/tkyko13/articles/0c16ea15530e6e)

# OSCとは

Open Sound Controlの略であり、電子楽器の信号の送受信に使う目的で作られたものだけど、あまりにも汎用性が高すぎるので音楽以外の目的で使われることも多い。
そして最も大事なこと...OSCは **アプリ内外を繋ぐ信号の送受信ができる**！

これがどういうことかと言うと───
例えばVRChatの中でボタンを押すと、押したという情報をOSCを使ってVRChatの外に送信し、その情報を元に現実の自宅の照明を付けたり消したりできちゃうのだ！

他にもできる色んな面白い事をまとめた記事があるので見てみるといいよ。↓

https://qiita.com/SatoshiGachiFujimoto/items/7f43954c7cbbe8c25dbe

つまり、OSCは可能性の塊なのである！

# VRChatとOSC間の通信の仕組み

2024年1月現在、VRChatはOSCに対応しています。
実際にBoothで「OSC VRChat」と検索してみると多くのギミック・ツールが出てきます。

<img width="600" alt="oscvrc01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/3fea0faf-48d7-44b3-d977-2f3a408ad62e.jpeg">

「すっごーい！ なにこれ なにこれー！」と思ってるサーバルちゃん諸君、簡単にVRChatとOSC間の通信の仕組みをお教えしよう。

- 9000番ポートに情報を送ると、VRChatに情報を送ることができる。
- 9001番ポートではVRChatから情報を受け取ることができる。
- 情報はurlみたいな階層構造の文で通信する。例：``/test/hoge``

以上！　ね？かんたんでしょ！


# OSCをVRChatで体験しよう

言葉で理解するより、実際にやって理解する方がずっと分かり易いので、やってみましょう。
手法は[ラザノアさんのVRChatでOSCを体験する手順](https://twitter.com/Lasagnoa/status/1494897451559690241)に従っています。

まず、OSCを操作するアプリのTouchOSCを以下のurlからダウンロードします。
https://hexler.net/touchosc

<img width="500" alt="oscvrc02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/848cec12-42af-63ce-a0e7-17f9309d77d7.jpeg">

次に、コマンドプロンプトで``ipconfig``を打ち、自分のIPv4アドレスを調べます。

<img width="500" alt="oscvrc03.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/a17af02c-4cbe-dcca-6242-4823dd94a3f0.jpeg">

TouchOSCを起動し、Edit > Connectionsを開き、OSCタブをクリックし、Connection 1にチェックをつけます。
そして、以下のように設定します。
Connection 1：UDP
Host        ：自分のIPv4アドレス　（例:192.123.4.56）
Send Port   ：9000

<img width="500" alt="oscvrc04.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/65be1ad5-9265-b0f6-55ac-cfd889aeea49.jpeg">

キャンパス内で右クリックしてXYを選択します。
すると赤い四角い枠ができます。

<img width="300" alt="oscvrc05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/88cec289-4fc1-358f-b6f5-0da3d5d0efd8.jpeg">

右下にあるMessagesの＋を押して、OSCを選択することを２回します。
するとOSCのタブが２つできます。

<img width="300" alt="oscvrc06.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/36d024ea-5bf2-b145-7759-ab0f253db731.jpeg">

OSCタブを以下のように設定します。
１つ目のOSCタブ
Connections：1
Trigger：x
Address：/input/Horizontal
Arguments：x
　Scale：-1,1
　Conversion：FLOAT
２つ目のOSCタブ
Connections：1
Trigger：y
Address：/input/Vertical
Arguments：y
　Scale：-1,1
　Conversion：FLOAT

<img width="200" alt="oscvrc07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/e7632edd-6aa1-4549-aa05-dbed50a3d141.jpeg">

Valuesを以下のように設定します。
xとyのどちらも
Type：FLOAT
Default：0.5
Current：0.5
Default Pull：100

<img width="300" alt="oscvrc08.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/113663e1-32e7-579b-e801-c8e73c8f97f7.jpeg">

VRChatを起動し、ExplessionメニューからOptions > OSC > Enabledをオンにします。
これでVRChatはOSCを送受信できるようになります。
（３の画像のOSC Debugを押すと、VRChatに送られたOSC情報が見えるようになるので、確認に使うと良いですよ）

<img width="600" alt="oscvrc09.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/50c96ed7-3222-9f9e-2cb5-e20c847689dc.jpeg">

TouchOSCの再生ボタンを押して、赤い四角の枠を操作してみましょう。
それでVRChatのキャラが前後左右に動いたら成功です！

<img width="600" alt="oscvrc10.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/29b53fb9-b762-3d94-149e-44c77db97af6.jpeg">


# もっと色々したい人へ

VRChatで操作できるOSCのAddressまとめ

https://docs.vrchat.com/docs/osc-as-input-controller

Oscの信号を可視化するアプリ「Protokol」

https://hexler.net/protokol

OSCのポートが占領された時用の、別のポートからOSCRouterかませてルーティングさせるやつ

https://github.com/ETCLabs/OSCRouter/blob/master/README.md

OSCアプリを自作した記事1
[【知識０から】VRChatを別タブで操作できるアプリ自作してみた！【OSC / フォームアプリケーション】](https://qiita.com/mofurune/items/451c88c080692fec97c7)

OSCアプリを自作した記事2
[OSCでVRChatのキャラを回転操作するアプリを自作してみた！【OSC / フォームアプリケーション】](https://qiita.com/mofurune/items/f3879545d6972bd28f11)

OSCアプリを自作した記事3
[CPU使用率をOSC通信でVRChatに送って、アバターの色を変化させてみた](https://qiita.com/mofurune/items/a401f7f16454551c8591)

OSCアプリを自作した記事4
[GPU使用率の取得方法【C#】](https://qiita.com/mofurune/items/38daa7bb61babbe46740)