ちょっと自己紹介
- とあるSIerのXRデザインチームに所属しています。プログラミングも嗜むため、作りながらぐいぐいプロジェクトを進めるのが得意です。いわゆる「デザインエンジニア」や「クリエイティブテクノロジスト」と呼ばれるタイプの人です。
- インタラクティブでクリエイティブなものを軸に、Web、モバイル、ゲーム、自販機、ロボット、VR、ARなど、さまざまなプロジェクトに関わってきました。
何についての記事？
この記事は、「VRMの表現力を広げたい(Web向けに)」 というテーマで、以下の内容を紹介します。
- Web上で動作するVRMの環境をReact Three Fiberで構築した話
- デザイナーがStorybookでパーティクル演出を制作できる環境を作った話
- VRMアニメーションと連動した演出を作る仕組みについて
- 最後にまとめと今後の展望
その前に、VRMとは？
VRMとは3Dアバターのデータ形式で、正式には「VRM（Virtual Reality Model）」と呼ばれるフォーマットです。準拠していれば、VRChatやClusterなど様々なプラットフォームやアプリケーションで動かすことができる標準フォーマットです。
R3Fとは？
R3F（React Three Fiber）は、Webで動作する3Dライブラリ「Three.js」をReact環境で扱うためのラッパーライブラリです。3DシーンをReactのコンポーネントとして直感的に記述できるのが特徴です。
R3Fで作れる3D表現のサンプル集はこちらです。ブラウザだけでここまでの表現ができるのを見るとテンション上がっちゃいます。
VRMをWebで動かす！React Three Fiberで作った動作環境
アバターの3Dモデルは、「髪」「顔」「上半身」「下半身」「靴」のパーツに分け、それぞれを自由に変更できる仕組みを要件として取り入れました。動作確認のため、以下の機能を備えた環境を構築しました。
- 各パーツの差し替え
- 服や肌、髪などのテクスチャ変更
- 表情の切り替え
- VRMアニメーションの設定
- ライティングのオンオフ切り替え
- マテリアルの確認
この環境は動作確認ツールとして活用するとともに、外部の制作パートナー向けにWeb上で公開し、テクスチャの作り込みを進めてもらいました。また、メッシュ数の上限値を見極める際にも役立ちました。
UI周りは shadcn/ui を使いました。シンプルかつ必要なUIはだいたい揃っているのと、TailwindCSSでの装飾が容易いのでとても便利。R3FはReactのラッパーなので当然といえば当然なのですが、これを作るまで three.js しか触ったことがなかったので、Reactで書かれたUI周りの処理とR3Fの馴染みがとても良く、気持ちよく制作できました。
Storybookで作るノーコードパーティクルシステム
アバターに関する機能のあれこれがだいたいできたタイミングで、演出を充実させたいという欲が出てきました。Unityに備わっているParticleSystemのようなものがあれば、表現の幅はぐっと広がりますが、Webは自前で用意しないといけないのが辛い楽しいところ。そこで、R3Fで動くParticleSystemを作ることにしました。パラメーターはUnityのParticleSystemを参考にしています。
演出の作り込みは主にデザイナーのタスクになるため、ノーコードで試行錯誤できる環境を整える必要がありました。そこで活用したのがStorybookです。
Storybookは、UIコンポーネントを個別に開発・テストできる環境を提供するライブラリです。ReactやVue、Angularなどのフレームワークと連携して使用されることが多く、今回はParticleSystemのUIとして利用しました。
StorybookのUIでは、各種パラメーターを調整できるため、デザイナーはコードに触ることなく、動作を確認しながら演出を作り込むことが可能です。また、完成した演出のパラメーターは出力してエンジニアに共有できるため、効率的なコラボレーションが実現します。便利～
Storybookでパラメーターを調整しながらパーティクルの動きをリアルタイムで確認できます。ぐりぐり動かすと楽しいです。
VRMアニメーションと連携するための仕組み
パーティクルを作ったら次に大事になるのは 「いつ」「どこで」 発動させるか、が大事になります。雨や雪といった大まかな場所で発動する演出ならいいのですが、VRMアニメーションのような発動タイミングと場所が演出の要になるようなものはどうやってそれを実現するか検討する必要があります。R3FではUnityのようにタイムライン機能が用意されていないので、自前で用意しなくてはなりません。
そこで自前でタイムライン機能を実装しました。3D空間上のパーティクルの発生位置はギズモで変更が可能です。ギズモはR3Fの便利ライブラリ群 drei の中に入っている TransformControls を使用しました。
Storybookで作成したパーティクルをタイムライン上に配置し、特定のフレームや位置で再生を制御できるように仕上げました。また、タイムラインデータはJSON形式で保存・読み込みが可能です。
XR Kaigi 2024で展示してきました
先日、東京ポートシティーで開催されたXR Kaigi 2024に出展してきました。ブースでは弊社がR3Fを用いて開発したプロジェクトを紹介し、私は本記事の内容でもあるVRMアニメーションに連動したパーティクル演出のデモを実施しました。
Storybookを活用し、デザイナーがノーコードで演出を調整できる仕組みを説明したところ、多くの関心を集めました。会場内でR3Fを推しているブースは弊社くらいだったため、注目を集めたと思います。
特に印象的だったのは、新規事業開発を担当されている方々が、Unityの代替手段としてWeb技術にどれくらいの可能性があるかに強い関心を持たれていたことです。ライセンスコストや開発効率の観点から、Web技術への関心が高まっていることを実感しました。
※手書きのポップが良い仕事をしていますね
今回の展示を通じて、R3FがXR系の新規事業開発において現実的な選択肢として注目されつつあることを実感しました。
まとめと今後の展望
UnityでもWebの開発はできるのですが、ビルドに時間がかかることや、新規事業でも会社自体の売上規模に応じて多額のライセンス費用がかかったりするので、Web向けのプロジェクトであればR3Fは有力な選択肢になると思います。特に、Reactのエンジニアがいる環境ではそのメリットが大きいでしょう。
開発したパーティクルシステムやタイムライン機能を、いずれ無料公開できればと考えています。ぜひ皆さんのプロジェクトでも活用してもらえると嬉しいです！