見出し画像

REALITYの配信が再生されるまでの時間を短縮した話

概要

減量で苦しんでいる筋トレ好きUnityエンジニアのホンダです。

現在REALITY開発チームでは、アプリの品質の改善を行う取り組みが盛んに行われています。

今回の記事では、その取り組みの一つである配信が再生されるまでの時間を短縮するプロジェクトに関してまとめてみました。

そもそもどれくらい時間かかってたの?

手元の端末で計測した時間を目安に記載しておきます。
計測の条件は下記の通りです。

・配信一覧画面から配信を選択 → 配信が再生(※1)されるまで
・一番時間がかかるケース(※2)であるインストール後初回起動時

※1 再生とはアバター、音声、コメント、モーションが揃った状態を指しています
※2 インストール後初回起動時に初めて配信を開く場合は、アセットのダウンロードが入るため時間がかかります

スクリーンショット 2021-07-19 11.44.29

で、計測の結果はというと、、、

iOS: 11.5秒(iPhone 11 Pro)
Android: 33秒 (Huawei P30 lite  SoC:Kirin 710)

という感じで、特にAndroidは時間がかかっていますね。
これだけ時間がかかっていると、配信を開くことを諦めてTwitterの海にのまれて帰って来なくなるなんてことも起きてしまうのではないでしょうか(僕だけですかね)。

なぜAndroid側だけこんなに遅いのかという話になる訳ですが、以下の通り、Unityの初期化のタイミングがOSで違うことが大きな理由です。

・iOSはアプリ起動時に初期化(スプラッシュスクリーンのタイミング)
・Androidはアプリ起動後、初めてUnityのビューが表示されるタイミング

となっており、計測した時間の中に含まれてしまっています。

この辺りはうすぎぬさんが担当していた「アプリの起動高速化」の恩恵も受けているので、気になった方はこちらの記事もどうぞ。


いきなりですが成果発表

iOS: 5秒(iPhone 11 Pro)
Android: 19秒 (Huawei P30 lite  SoC:Kirin 710)

ということでiOS: 6.5秒   Android: 14秒の短縮に成功しました!!

スクリーンショット 2021-07-19 17.54.17

どうやって改善したの?

今回のプロジェクトでは大きく二つのアプローチで改善を進めました。

1. 再生されるまでの実時間の短縮

・ダウンロード画面の時点で配信情報を取得し、ポーリングを開始する
配信に入室した時には、以下のように画面が遷移します。

スクリーンショット 2021-07-19 15.47.10

改善前は、ダウンロード画面で、以下のことを順番に行っていました。

i) アセットのダウンロード
ii) 配信に必要な情報の取得(モーションサーバのエンドポイント情報など)
iii) 配信枠状態の取得ポーリングを開始
iv) 1つ目のポーリング結果を受けて、モーションサーバへのWebSocket接続を開始

改善後はこれを、i) を実施している最中に、ii), iii)を並列するように変更し、WebSocket接続のタイミングをiv) からii)に移行するなどの見直しを行いました。
これにより、以前はiii)から実際にモーションがサーバから受信しはじめられるまでアバターが棒立ちしていた時間が長かったのが、ほぼゼロにすることができています。

ポーリングとは、複数の機器やソフトウェアを円滑に連携させる制御方式の一つで、主となるシステムが他のシステムに対して一定間隔で順繰りに要求がないか尋ねる方式。


・すでにコラボ状態の配信を開いた場合はゲストの入室アニメーションをスキップする
これは書いてある通りですが、コラボ配信を視聴しに行った時に配信に入るたびに毎回ゲストアバターが上から降ってくるのですが、あのアニメーション5秒くらい尺があるんですよね。
となるとその間のゲストのモーションは無視されてしまうことになります。

5秒もあればじゃんけんの一つもできてしまうわけで、じゃんけんに参加できないのは悲しいことです()

ということで、入室時点でコラボ状態だった場合はアニメーションをスキップするように変更しました。

2. 視覚的な表現による体験の改善

こちらは実時間の短縮には大きな影響は与えていませんが、視覚的にアバターの構築の裏側が見えてしまっていたり、棒立ちのアバターが見えていたりと本来ユーザーに見せなくてもいい部分が見えてしまっていました。
UIなどの視覚的な部分を改善することで体験を改善することが目的となっています。

・ダウンロード画面の表示を背景のロード完了まで延長する
改善前は再生されるまでに途中経過が丸見えの状態でした。

スクリーンショット 2021-07-19 17.15.37

ホストのアバターが表示されるまでこれだけ画面が切り替わると流石にチラついて見えて体験がいいとは言えません。

改善後はダウンロード画面の表示を背景の構築が終わるまで延長し、画面の遷移数を減らすことで体験を改善しました。

スクリーンショット 2021-07-19 17.18.17


・アバターの構築中にロードエフェクトを表示する
今回の改善の中で視覚的なインパクトはこれが一番大きかったんじゃないでしょうか。
これは以前実装された、アバターの構築に必要なアセットが足りなかった場合に動的に必要なものだけダウンロードする対応にも関係しています。

動的にダウンロードが入るようになったことで、通信環境によってはアセットのダウンロードが終わるまでアバターが構築されず何も映っていない状態が発生します。何も映らずにただ待ち続けるというのはバグのようにも感じてしまうため避けたいところです。

今回の改善では、以下の情報を伝えることを目的としてエフェクトを表示するようにしました。

・アバターのロード状態
・アバターが表示される位置の提示

スクリーンショット 2021-07-19 17.32.39


まとめ

今回は配信が再生されるまでの時間を短縮するプロジェクトに関してのまとめ記事でした。

今回のプロジェクトで数値的にも改善は見られましたが、まだまだ改善の余地はあるので引き続きコツコツ進めていきたいと思います。

今後のREALITYにご期待ください!