メタバース会議室を作った話（実装編）
（※過去のブログ記事をZennにアップしています。）
先日紹介したオンラインミーティングサービス「Virtual Meeting Room」で使用している技術を紹介したいと思います。
このサービスを実現するにあたり、様々な技術やフレームワーク、ライブラリを利用していますので、面白い技術や、キーになっている技術、をピックアップして紹介したいと思います。
3D表現
このミーティングルームの表現は、より臨場感を出すために3D表現を採用しています。
3D表現というとWebGLを使って実装するのが一般的ですが、今回はCSSのtransform: translate3dというプロパティを利用するSprite3Dというライブラリを使用しています。
以下はSprite3Dを使った、コードのサンプルです。
Sprite3Dについては、以下の記事で、より詳しくご確認いただけます。
CSSを使う事で、HTML要素の機能を利用する事ができ、Webサイトを作る感覚で、CSSアニメーションや入力フォームといった機能を実装する事が可能になります。
アニメーション
コミュニケーションの方法として、Goodや拍手などのポーズをとる事ができます。
このポーズは、CSSスプライトでアニメーションを実装しています。スプライトアニメーションと呼ばれ、コマアニメのようなもので、各フレーム毎の絵を1枚の画像にまとめて、画像をずらしながら順番に表示する方法となります。
このスプライトアニメーションを実装するために、まずAdobeAnimateを使用して、アニメーションを作成します。AdobeAnimateは、昔はAdobeFlashとして知られていたものになります。
AdobeAnimateを使って作ったアニメーションを、1フレーム毎に画像として書き出します。
書き出した画像を、Stitchesというサービスを使って、スプライト画像として1枚にまとめます。
こうして生成したスプライト画像を、JavaScriptを使って、1フレーム毎に画像を移動させてアニメーションを再現します。
スプライトアニメーションに関して、より詳しく知りたい方は、以下の記事などわかりやすいかもしれません。
チャット機能
リアルタイムチャットでコミュニケーションする事も可能です。
Socket.IOというライブラリを使って、WebSocket通信によるチャットを実現しています。WebSocketは、リアルタイムかつ双方向通信を実現するプロトコルです。チャットだけでなく、キャラクターの移動や、ポーズなどの状態管理にも利用しています。
Socket.IOについては、以下の記事でより詳しくご確認いただけます。
ビデオ会議と画面共有
メインの機能になりますが、ZoomやTeamsのように、Webカメラを使って、ビデオ会議をしたり、画面共有を行うこともができます。
PeerJSというライブラリを使って、WebRTCによるビデオ会議や画面共有を実現しています。
WebRTCは、ウェブブラウザでリアルタイム通信を実現する技術です。ウェブページ内で直接、P2P（ピア・ツー・ピア）通信を行うことによって、ウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有などを実装できるようになります。
WebRTCについては、以下の記事でより詳しくご確認いただけます。
ネットワークの全体図
PeerJSによるWebRTCは、P2P通信を簡単に実現する事ができますが、このサービスのように不特定多数との接続を実現することはできません。これを補うために、Socket.IOによるWebSocketを利用して、不特定多数のユーザーとの接続を管理しています。
ネットワークの全体的なイメージは以下のようになっています。
ちなみに、WebSocketで共有した、接続情報や、ユーザーポーズや、移動や、チャットメッセージなどの情報を、画面上に反映するのにVue.jsを利用しています。
まとめ
全部は紹介しきれませんが、面白いところ、重要なところに絞って、使用技術を紹介させていただきましたが、いかがでしたでしょうか？
いろんな技術の組み合わせで、こういったサービスを作る事が可能です。一つ一つ紐どけば、難しい技術はありません。
今後も、新しい技術を紹介しながら、面白いものを作っていければと思います。
Discussion