ThreeJS + Socket.IO + WebRTC を組み合わせたリアルタイムマルチプレイヤーワールド

皆さん、こんにちは！Vitalify AsiaでBPMとして働いているVy（ヴィー）です！雨季になってきまして、ホーチミン市にも雨が降り始めましたね。

この度、当社のエンジニアさんが「ThreeJS、Socket.IO、およびWebRTCを組み合わせたリアルタイムマルチプレイヤーワールド」というテーマで記事を書きましたので、日本語に翻訳して皆さんへ紹介したいと思います。

元記事（英語）

はじめに

ThreeJS を使用してウェブ上で3Dインタラクティブスペースを作成して実験した後、私たちのチームは、異なる地域にいる人々がこの仮想環境に参加し、交流する方法に興味を持ちました。

これを実現するためには、複数のユーザー間でデータをリアルタイムに送受信する方法が必要でした。そのため、私たちはリアルタイムでデータを共有するための Socket.IO とビデオストリーミングのための WebRTC について調査することにしました。また、これらの技術を ThreeJS ウェブフレームワークにシームレスに統合する方法も模索しました。

私たちは、私たちの実際の会社のワークスペースにインスパイアされた仮想オンラインオフィスを構築しました。
このワークスペース上では、ユーザーは他ユーザーと即座にチャットしたり、絵文字を共有したり、手を振ったり、さらにはビデオ通話をすることができます。これらのシンプルで強力な技術が、オンライン世界での私たちのつながりと共同作業のやり方を変えている様子をご紹介します。

デモの様子はこちらからご覧ください。

実際の様子

主な特長

このウェブページには、チームの円滑なコミュニケーションと協力を促進するほぼ必須の機能が含まれています。以下はいくつかの主な特長です。

家具配置

自分の好みに合わせて家具を配置して、仮想空間を自在にコントロールしましょう。オープンプランのレイアウトを好むか、より区分されたワークスペースを好むかにかかわらず、当社のプラットフォームでは、机や椅子、その他の要素を簡単に移動できます。この柔軟性により、仮想オフィスは、あなたの作業スタイルに最も適した組織とフローを反映します。

ビデオ会議

複数人がリアルタイムでウェブカメラを通じてお互いを見ることができ、声を聞くことができる、対面コミュニケーションの場です。

即時メッセージング

内蔵のチャットシステムで、素早いやり取りを促進します。

その他のインタラクション

実際のオフィスのように移動し、行動や感情を通じてチームと対話することができます。

使用した技術

ThreeJsとReact ThreeJs Fiber
以前の記事で、ThreeJsとReact-Three-Fiberを紹介しました。これらは、ウェブブラウザで3Dグラフィックを作成してレンダリングするためのライブラリです。詳細は、リンクを参照してください。

Socket.IO

リアルタイムインタラクションには、socket.ioを選択しました。これは、ウェブクライアントとサーバー間のシームレスで双方向の通信を可能にする、イベント駆動型のライブラリです。
これにより、複数の人がこのサイトにアクセスしたときにデータを同期させることができます。たとえば、プレーヤーの位置の変更はすぐに他のすべてのプレーヤーに反映され、リアルタイムで動きを同期して表示することができます。さらに、メッセージ、絵文字、アニメーションアクションの送信、さらには部屋の配置の同期にもこれを使用できます。
Socket.IOは、可能な場合にはユーザーのブラウザとサーバー間で双方向の対話型通信セッションを開くことができる WebSocket という先進技術を使用して、データを転送します。Socket.IOはWebSocketやその他の低レベルプロトコルの複雑さを隠し、データの送受信に対するよりシンプルなAPIを提供します。
Socket.IOは、ユーザーが参加して交流できる「ルーム」を作成することで、同じ仮想空間で複数のユーザーを管理しやすくします。

Socket.IOを使用して移動を同期する際のシンプルな流れ

WebRTC

私たちは単純なデータを送信するだけでなく、ビデオ通話もしたいと考えています。Socket.ioを使用してそのようなシステムをゼロから構築することは、非常に複雑です。したがって、ビデオストリーミングのために特別に構築された既存のライブラリを使用する方が良いアイデアです。わたしたちは、追加のプラグインなしでビデオチャットやファイル共有が可能なブラウザベースのリアルタイム通信技術であるWebRTCを使用することにしました。

WebRTCピア接続

WebRTCは、最小の遅延で高品質のビデオ通話を実現する、ピア間の安全で直接的な通信を可能にします。これは、仮想オフィスでの仮想会議が見栄えが良いだけでなく、リアルな交流をおこなっているかのように感じることも意味します。
ただし、WebRTCは2つのデバイス間でピア接続を使用するため、ソケットサーバーのように多くのユーザーが一緒に参加できるようなビデオチャットを行うには、2人しか接続できません。ですから、ここでの問題は、オフィスの多くのメンバー間で仮想会議をどのように作成するかということです。それが複数のピア接続です。会議のすべての参加者を接続するには、グループ内の各ペアに対してピア接続を作成します。以下の図がそれがどのように機能するかを示しています。

WebRTC　複数のピア接続

ぜひこの素晴らしい技術を体験するためにビデオ会議機能を試してみましょう。革新に焦点を当てることで、あなたの仮想ワークスペースが常に最新の技術に対応していることを保証します。よりつながりのある、協力的で生産的な未来に向けたこの旅にご参加ください。

まとめ

Socket.IO と WebRTC を Three.js 内で統合する探究は、ウェブアプリケーションにおけるリアルタイムの相互作用の広大な可能性を明らかにしました。ユーザー間のシームレスなコミュニケーションを目撃し、地理的な境界を超えて魅力的な体験を促進しました。
Socket.IO と WebRTC の利用により、仮想オフィスは単なる部屋の表示を超え、個々の人々が互いに接続して相互作用できる空間に進化しました。これにより、メタバースの開発から仮想オフィスやオンラインゲームまで、無限の可能なアイデアの扉が開かれました。

参考

https://threejs.org/
https://github.com/pmndrs/react-three-fiber
https://socket.io/
https://webrtc.org/

Vy（ヴィー）のコメント

ThreeJS、Socket.IO、WebRTC の組み合わせたリアルタイムマルチプレイヤーワールドは、エンドユーザーに柔軟で効率的、かつより魅力的なオンラインワークスペースを提供しますね。興味のある方はぜひデモをお試しください！ご相談お待ちしています！
https://www.vitalify.asia/contact