clusterのアバターサムネイルを変えた話

こんにちは。
clngnです。

前回記事を書いてから、次の記事が翌年のAdvent Calendarになってしまいました。

この記事は cluster Advent Calendar 2020 11日目の記事です。

クラスター Advent Calendar 2020 - Qiita

昨日はfaidraさんの「開発環境で作ったワールドの話」でした。急遽錬成されたというには充実すぎる内容でしたね……。

さて今回は、今年の夏頃に行ったアバターアップロード時のサムネイル画像を変更したときの話をしようと思います。

以前のサムネイル

今となってはもう遠い過去のように感じられるのですが、以前のアバターアップロード時に生成されるサムネイルは以下のような画像でした。

無の空間にグリッド状の床が敷かれ、Tポーズのアバターが表示されています。3Dを触ってるぜ！という感じがして、テンションが上がるのでわたしは結構好きです。

しかしながら、ツール感をやや強く感じてしまう等の理由から、もっと馴染みやすいものにしたいという話が上がりました。そして、このサムネイルをいい感じにするというタスクを考えることとなりました。

検討したこと

検討段階では以下のようにポーズや背景を選べるようなプロトタイプも作成していました。

しかしどのようなアバターにも適用でき、かつ魅力的と感じられるポーズや表情を設定することが難しいという問題がありました。外見的な属性は元より、clusterでは人外アバターが多く使われている(※要出典)など、いくつかのプリセットで多様性を吸収しきるのはあまり現実的ではありませんでした。

そのため、極力シンプルかつ中庸的な表現となるよう方向性を決め、ブラッシュアップを行っていきました。

アップデート後のサムネイル

プロトタイプと調整を経て、以下のようなサムネイルが最終仕様となりました。いい感じになったのではないでしょうか。

背景は明るく、フラットな印象となるようなグレーを選び、ポーズは自然とそこに立っているような佇まいを感じられるよう、調整を加えました。

丸影のグラデーション変化が Linear ではなく Cubic Bézier curve になっているのがコダワリポイントなのですが、この影はシェーダーで描かれています。わたしはここで初めてシェーダーに触れたのですが、とても興味深く沼が少し見えました。

まとめ

アバターアップロード時のサムネイル画像変更について、開発の経緯をお話させていただきました。わたし自身、バーチャルにおけるアバター表現というジャンルがとても好きなので、clusterにおけるアバター表現ももっともっと広がっていくといいな、と思っています。

明日はSwanmanさんの記事になります。つよつよCSによるつよつよエピソードが公開されるとのことです。