【UnityRenderStreaming×ARFoundation】スマホ向けのビデオストリーミング & カメラ制御してみた

はじめに

こちらはIwaken Lab. 主催のXR好き開発合宿ブログリレーの14日目の記事になります。この記事では、開発合宿中に触っていた技術について書かせてもらいます。

また、XR好き開発合宿では、たくさんの方々から温かいお言葉や支援をしていただきました。この場をお借りして感謝申し上げます。本当にありがとうございました。

この記事の概要

UnityRenderStreamingの機能を使って、処理の重たい描写をグラボがついてるPCに任せて、その映像をスマホで見れるようにし、ARFoundationを利用することで、PC上で動作するカメラの位置情報と回転情報をスマホで制御できるようにしました。

スマホの傾きや位置がUnityのシーン内のカメラに連動しているため、動画のように、様々な角度や位置からUnityのシーン内を見ることができます。

この記事ではスマホのブラウザでビデオストリーミングするのではなく、スマホのネイティブアプリとしてビデオストリーミングを行なっており、また、ARFoundationの平面検知やフェイストラッキングの機能を使ってARをするわけではないと言うことにご留意ください。

動作環境

• UnityHub version 3.2.0¹
• Unity version 2020.3.8f1
• UnityRenderStreaming version 3.1.0-exp.3
• windows 11 pro / gigabyte x299 aorus gaming 7 pro(NVIDIA GeForce RTX 3070)
• Xperia 5 Ⅱ SOG02SLA

UnityRenderStreamingについて

UnityRenderStreamingとは、Unity上でレンダリングされた映像をブラウザやスマホで見れるようにしたり、ブラウザからの入力をUnityに反映させたりできる機能のことです。

この機能を用いることで高品質なグラフィックスを、レンダリングが苦手なデバイスでもみることができたり、Unityでの操作をブラウザでもできるようになります。
詳しくはこちらをご覧ください。

ARFoundationのサンプルのダウンロードとプロジェクトの開始

こちらのサイトからarfoundation-samples-4.1をZip形式でダウンロードして、展開した後、そのファイルをUnityのバージョンが2020.3以降のもので開きます。

UnityRenderStreamingとSamplesのインポート

公式サイトを参考にして行っていきます。

Unityのパッケージマネージャーを開いて、左上の+ボタンを押し、Add package from git URL...を選択します。そして、出てきたボックスにcom.unity.renderstreaming@3.1.0-exp.3と入力して、Addします。

UnityRenderStreamingがインポートできたら、UnityRenderStreamingのパッケージに含まれているSamplesもインポートしておきます。

ユニティちゃんのダウンロードとインポート

こちらのサイトからユニティちゃんライブステージ！ -Candy Rock Star-をダウンロードして、展開したファイルをUnityのAssetsにドラッグ＆ドロップします。

Unityにunitychan-crs-masterがインポート出来たら、コンソールを確認します。もし、コンソールにこのようなエラーがでたら、該当箇所をコメントアウトします。

Camera-DepthTexture

v2f vert( appdata_full v ) {
    v2f o;
    // TreeVertBark(v); ここをコメントアウト
	
	o.pos = UnityObjectToClipPos( v.vertex );
    UNITY_TRANSFER_DEPTH(o.depth);
    return o;
}
.
.
.
v2f vert( appdata_full v ) {
    v2f o;
    // TreeVertLeaf(v); ここをコメントアウト
	
	o.pos = UnityObjectToClipPos( v.vertex );
	o.uv = v.texcoord.xy;
    UNITY_TRANSFER_DEPTH(o.depth);
    return o;
}

Broadcastシーンの編集

Assets/Samples/Unity Render Streaming/3.1.0-exp.3/Exampleの中にある、Broadcastシーンを開き、PlaneとSphereを削除します。削除した後、Assets/unitychan-crs-master/unitychan-crs-master/Assets/Scenesの中にあるMainを選択して、右クリックでOpen Scene Additiveします。

シーンを追加したら、Stage DirectorとApp Configを複製して、Broadcastシーンに追加します。

それが終わったら、Mainの横にある三点リーダーを選択して、Remove Sceneをします。

Buildの設定からBuildまで

スイッチプラットフォームでAndroidを選択して、Assets/Samples/Unity Render Streaming/3.1.0-exp.3/Exampleの中にあるシーンをScenes In Buildに追加します。この際、Menuシーンを一番上にする必要があります。

次はBuild設定をします。Project SettingsのPlayerの中にあるOther Settingsで次のように設定を変えます。

そして、XR Plug-in Managementの中にあるAndroidタブでARCoreにチェックをいれます。

これらすべてが終わったら、Buildをします。

ウェブアプリケーションのダウンロードと起動

UnityのメニューでEditを選択し、その中にあるRender StreamingのDownload web appを選択します。すると、アプリケーションの保存先を聞かれるので、適当な場所を指定します。
今回はServerというフォルダをつくり、そのなかにアプリケーションを保存しました。

次に、保存したディレクトリに移動して、.\webserver.exe -wを実行します。

なお、Macの場合は、chmod a+x ./webserver_macでパーミッションを変えてから./webserver_mac -wを実行する必要があります。

アプリとUnityでの操作

BuildしたアプリをAndroidにインストールして、アプリを起動します。アプリを起動すると、次のようになっているので、Addressのlocalhostを選択して、上の画像の、黄色い線で示したアドレスを入力します。今回の場合は192.168.10.8です。

次に、UnityでBroadcastシーンを開き、シーンをPlayします。

そして最後に、アプリでARを選択し、次のような画像の状態で、Startを押すと、Broadcastシーンのカメラの映像がスマホに表示されます。

スマホを傾けると、Unity内のカメラも傾いているのが分かります。

まとめ

今回はUnityRenderStreamingとARFoundationの機能を使って、スマホでビデオストリーミングとカメラ制御をする方法を紹介させてもらいました。ほかにもUnityRenderStreamingを使うと、ブラウザとUnity上でマルチプレイをすることができたり、Zoomのような双方向通信を行うこともできます。
詳しく知りたい方はこちらのサンプルが参考になると思います。

また、今回は紹介できませんでしたが、ARFoundationの平面検知などの機能もUnityRenderStreamingと併用して使うこともできるので更なるアレンジをすることもできます。

皆さんも是非、UnityRenderStreamingを試してみて下さい！

最後まで閲覧していただきありがとうございました。

1. 自分の環境では、UnityHub version 3.2.0の時は、ちゃんとPCとスマホの通信ができていたが、version 3.3.0にしてからうまくいかなくなったので、念の為、記述しました。 ↩