Now in REALITY Tech #55 アバタースタンプの構造を解説

REALITYのUnityエンジニアのﾎﾝﾀﾞです。
今週の「Now in REALITY Tech」では、アバタースタンプの構造について解説していきます。

アバタースタンプってどんな機能？

そもそもアバタースタンプって何？という方のために簡単に説明します。
アバタースタンプは、REALITYアプリ内のチャット機能で使用することができる自分のアバターを使用したスタンプです。

アバタースタンプの仕組み

アバタースタンプは、アバターを描画しているRenderTextureを挟むような形で手前と後ろに画像を用意し、複数の画像の重ね合わせることで表現しています。

アバタースタンプの構造のイメージ

画像を書き出す機能を持つPrefabの構造

上記構造で表現するために下記パラメータを持つScriptableObjectを用意して、Unityで画像を書き出しています。

• 解像度

  • 画像を書き出す際の解像度

• フォーカス対象

  • カメラのフォーカスする対象を指定

    • Head: 頭を基準としてカメラ座標を計算する

    • Hips: Hipsを基準としてカメラ座標を計算する

    • None: 原点基準でカメラ座標を計算する

• カメラの情報

  • アバターをレンダリングするためのカメラの座標に関する情報

    • カメラの角度

    • フォーカス対象からの距離

• 後ろに表示される画像のリスト

• 手前に表示される画像のリスト

• マスク用画像

  • アバターを表示しているRawImageに対してマスクをかけるための画像を指定する

• アバターに適用するポーズデータ

パラメータのポイントとして、カメラがフォーカスする対象を指定できるようにしています。理由としては、REALITYのアバターは身長の変更に対応していて、原点基準で座標を計算していると身長差によって出力結果にばらつきが出てしまうので、HeadやHipsといったボーンの座標を対象とすることで身長差を考慮したスタンプの表現を可能にしています。

また、アバタースタンプは複数の言語にも対応しています。現状は日本語と英語のみですが、後ろと手前に表示される画像を_en、_jaといった接尾辞をつけて用意することで、使用している端末の言語設定に合わせて画像をロードして出し分けることで生成しています。

アバタースタンプにコラボスタンプが追加！

2022年10月19日にコラボスタンプが追加されました。
自分のアバターとチャットの送信相手のアバターがコラボしたスタンプを生成できるようになり、表現の幅が広がりました！

コラボスタンプはどうやって表現しているの？

コラボスタンプはアバタースタンプを同じ構造を持つレイヤーを４つのレイヤーに拡張して重ねています。

Unityで生成するのはアバターが表示されている「手前のアバターレイヤー」「後ろのアバターレイヤー」のみで、前景レイヤーと背景レイヤーはアバターによる影響を受けないことから更新する必要がないため、あらかじめ書き出しておいた画像をサーバーから返してもらうようにすることで生成時間の削減を狙っています。

アバターが表示されるレイヤーは自分がスタンプを送信する場合に使用されるレイヤー（Owner）と、相手が送信する場合に使われるレイヤー（Guest）をそれぞれ自分のアバターで生成してサーバーにアップロードしておきます。
iOS・Android側でスタンプ一覧や送信したコラボスタンプを表示するときにコラボスタンプを生成する相手のアバターの画像をサーバーから返してもらい重ね合わせて表示しています。このような仕組みにすることでコラボ相手が変わるたびに画像を生成し直すコストが発生しないように工夫しています。

まとめ

今回はアバタースタンプの構造について簡単に説明してみました！

アバタースタンプは自分のアバターを使うことで、自分らしいスタンプを送りあえることが魅力で、コラボスタンプが実装されることで表現の幅が広がりました。

ただ、グループチャットなどで相手のアバターが状況によって違う可能性がある場合に、いかに”最低限の画像の生成で済ませるか”という画像の生成コストとどう向き合うかをかなり意識した機能でした。

最後に、REALITYでは一緒に開発してくれるメンバーを募集しています。ご応募お待ちしております！

REALITY株式会社の会社情報 - Wantedly