REALITYのプロフィール画像のお話 REALITY Advent Calendar 2024　

2024年12月24日 20:00

はじめに

本エントリーはREALITY Advent Calendar 2024の4日目の記事です。
その他のエントリーについては、以下のページからご覧ください。

こんにちは、サーバエンジニアのゆーしです。
我が家では今年はパウ・パトロールのお菓子入りアドベントカレンダーを用意したので、パウ・パトロールが大好きな娘ちゃんは毎日クリスマスまでの日数を数えながら嬉しそうに中に入っているチョコレートを食べていたのですが、そのチョコレートがなくなるたびにこちらのアドベントカレンダーの締め切りが近づいているので、私自身は落ち着かない12月を過ごしていました。

さて、本日はREALITYのプロフィール画像の扱いと、最近の取り組みについて1つご紹介させていただこうと思います。

プロフィール画像の用途

プロフィール画像といえば、REALITYアバターと並んで、REALITYの中での自分を表現する顔の1つですね。
最近では、今まで1つしか保存できなかったプロフィール画像が最大5つまで保存できるようになって、お気に入りのショットを複数保存して使い分けられるようになり、より便利になったかと思います。
このプロフィール画像は、プロフィール画面を始めとして、チャット画面、配信コメント欄、はたまた配信中に送ったガチャチケットの中にもプリントされたりと各所で使われています。

配信サムネイルの仕組み

REALITYアプリを開くとまず目にすることとなる配信サムネイルですが、こちらも基本的にはプロフィール画像がそのまま利用されています。
配信フレームやバッジについてもREALITYアプリ上で別画像としてプロフィール画像の上に乗せているだけで、プロフィール画像自体はそのままです。

グローバルモデレータプログラム

REALITYでは主に海外のユーザの方を対象に、グローバルモデレータプログラムを実施しております。

この募集において、グローバルモデレータに就任されたユーザの方は、特別なフレームがプロフィールに設定されるのですが、先で述べたとおり、プロフィール画像は各所で利用されているため、配信サムネイルのようにアプリ上で都度重ね合わせるとなると、変更箇所が多く大変です。そのため、別のアプローチを考えることにしました。

画像の重ね合わせ

元々REALITYでは画像の合成や加工などをプログラムで行うための画像サーバが用意されています。

プロフィール画像は現在でも、サイズ変更などを画像サーバで行うことがあるため、実際の保存場所から画像サーバ、CDN (Content Delivery Network) と呼ばれるキャッシュサーバを経由してREALITYアプリに届けられます。
今回は、画像サーバで処理を追加し、元々のプロフィール画像に特別なフレームをあらかじめ重ね合わせた画像を新たに生成し、1枚のプロフィール画像とする方法でアプローチしました。

合成部分のプログラムについては以下の通り、プロフィール画像に合わせてサーバ上でフレーム画像をオーバーレイして再描画するだけです。
追加した画像合成処理自体はおおよそ300msec程度であったので、一度合成してCDN上においてしまえば、画像の取得にかかる時間はそれほど問題にならなそうでした。

	// ベースのプロフィール画像に合わせたcanvasの作成
	img := image.NewRGBA(baseImg.Bounds())

	// プロフィール画像を描画
	draw.Draw(img, baseImg.Bounds(), baseImg, image.Point{0, 0}, draw.Src)

	// プロフィール画像に合わせてresizeしながらoverlay画像を描画
	draw.CatmullRom.Scale(img, baseImg.Bounds(), overlayImg, overlayImg.Bounds(), draw.Over, nil)

結果として、クライアント側ではプロフィール画像を取得するだけで、自動的にフレーム画像付きのプロフィール画像を取得できるようになりました。

今後の課題

今回の仕組みは、グローバルモデレータプログラムに限ったものではないので、例えば配信フレームのように多種多様なプロフィールフレームを提供することも今後可能になるかもしれません。
ただ、現時点ではまだ課題が残っています。それは、配信サムネイルがプロフィール画像を利用しているため、プロフィールフレーム + 配信フレームの状態だと、なかなか騒がしいサムネイルが出来上がってしまいます。

グローバルモデレータプログラムではあらかじめそういったケースが発生することは承知した上だったのですが、今後いろいろな用途に使うためには、配信フレームやバッジ、プロフィールフレームのon/offを自由に設定できるようにしたり、過去にあったような配信サムネイルを自由に設定できるような機能も一緒に用意する必要がありそうですね。

最後に

REALITYではエンジニア職の採用を再び開始いたしました。
興味がある方は、こちらからよろしくお願いいたします！

ということで本日はクリスマスです！
皆様、良いクリスマスをお過ごしください。
メリークリスマス！