解説！GMOバーチャルジムの映像システム設計について / 開発者向けブログ・イベント

こんにちは。気持ちはずっとソフトウェアのエンジニア、倉持です。

GMOバーチャルジムの映像まわりのシステムについて書いてみたいと思います。
こんなことをやっていた人もこの会社にはいるのだなと伝わればうれしいです。

全体構成

GMOバーチャルジム全体としてはこんな構成になっています。

こちらの記事は「B.前回の対象」の話でした。様々なプロトコルでつながるセンサーや空調、トレッドミル、低酸素装置等のコントロール含め、施設全体の管理を担っています。

今回は「A.今回の対象」について書いていきます。トレッドミルで走っているときに表示するマラソンや駅伝コースの映像を走行スピードに合わせて再生するのがメインの仕事になります。その他、各種センサーや走行情報も表示します。

モニター構成とPC

4K3台のテレビで構成しています。走行者の視界にはこの映像が広がります。

トレッドミルでの走行状態に合わせ、リアルタイムでスムーズな映像出力をできるシステムが必要になります。この要件などから、3モニター出力できるNVIDIAのGPUを搭載したWindows PCを採用しています。

ちなみにテレビそのものの電源や入力切り替え、このPCの電源も「B.前回の対象」で集中コントロールしています。

動画

コースの動画についても少しふれておきます。GMOバーチャルジム用のコース撮影時は360度カメラ(半球)を使っています。また、撮影時のGPS位置情報も取得しています。これらのデータをもとにコース動画を作成します。トレッドミルでの走行時(動画再生時)にはwebブラウザ上で球体に画像マッピングし、3画面の配置に合わせて表示調整しています。そのためthree.jsによる3D処理も利用しています。

初期構成

初期のシステムはこの構成に落ち着きました。

Go言語で実装した100行程度のコードとHTML、JS、動画、Chromeブラウザによる構成です。

http serverの主な仕事は

htmlや動画をChromeブラウザに提供
SSEによるリアルタイム情報更新

で、UDP serverは

トレッドミル情報を受信
その他リアルタイム性重視の情報受信

です。表示用ブラウザとしてChromeを使い、サーバーからブラウザへリアルタイムデータを届けるためにSSE(Server Sent Events)を使っています。3枚横並びのモニターをNVIDIA Surround機能を使って1枚のパノラマ表示モニターとして設定し、Chromeのkioskモードで起動した全画面表示で表示機能を構成しています。

サーバー機能はシンプルなGo実装のため、OSに縛られることなくバイナリを生成でき、デプロイも単体ファイルなため取り回しが良いです。この構成でパフォーマンス的にも要件を満たすものができました。

ただ、初期からもう一つ次に取り上げる現状構成も実装していました。

現状構成

こちらがもう一つの構成です。

初期構成との違いは

Goアプリなし
Chromeブラウザなし
Electronのみで構成

かなりシンプルな構成です。プログラム的にもJSで完結します。また、初期構成ではchromeブラウザを別途使っているためセキュリティアップデート等Goアプリとは別で管理する必要もありました。

このようにほぼメリットしかないので当初からこちらの構成を有力候補としていました。ところが肝心のトレッドミルの走行に合わせてリアルタイムに動画の再生を制御できるだけの十分なパフォーマンスが出ませんでした。当時問題となったのは

動画再生のおもさ
3Dレンダリングのおもさ

でした。この時点でチューニングしていく手もありましたが、おそらくElectronのバージョンアップで解消するであろうということから見送りました。そしてそれから時がたち最新のElectronを利用し改めて検証した結果、十分なパフォーマンスを出せるようになっていました。Electron構成に切り替えて今も稼働していますが、安定しています。