はじめに
こんにちは、インターンシップ生の木戸です。普段大学院では、ヒトの認知科学に関する研究をしています。
8/26-9/6までの2週間、『超低遅延ライブ配信技術を活用した、新規ライブ配信サービスを実現する技術の開発』というテーマの下、NTTコミュニケーションズの現場受け入れ型インターンシップに参加しました。
この記事では、私がお世話になったプロジェクト／インターンシップで取り組んだ業務体験内容について紹介していきます。
なお開発に利用したアバターはIZUMO.comさんのAilisを利用しております。
Fan creation of Ailis by IZUMO.com
目次
参加のきっかけ
私がインターンシップに参加した一番のきっかけとしては、自身が動画編集を日常的に行っているという背景から、ライブ配信技術に興味があったからです。
- HPや説明会だけでは絶対に得られないような開発プロセスを体験
- ライブ配信技術という技術の斬新さに触れる
- 新規価値を創出することの面白さを体感
したいと思い、インターンシップに応募しました。
配属されたプロジェクトチームについて
私が今回お世話になったチームでは、WebRTC技術を活用した超低遅延ライブ配信サービス（Smart vLive）を用いて、「超低遅延を活用してどのようなライブ配信が可能か？」について諸技術の開発に取り組んでいます。
Smart vLiveとは、1秒未満の低遅延で映像配信が可能なライブ配信プラットフォームで、リアルタイムなコミュニケーションを含むイベント配信を可能にするサービスです。
インターンシップのスケジュールについて
日程としては、冒頭でも述べたように8/26-9/6の10日間（土日除く）でした。具体的には次の通りです。
- 8/26 午前：全体でのオリエンテーション、午後：業務体験内容の概要説明、夜：懇親会
- 8/27 午前：具体的な業務内容の説明を受ける、午後：開発を開始（9/6 午前まで継続）
- 9/6 午後：業務体験報告と最終オリエンテーション
また、開発業務の他には配属チームが開催している以下のイベントにも参加させていただきました。
- 8/28 Media over QUIC（MoQ）に関する勉強会
- 8/29 Smart vLiveを用いたインタラクションライブ
普段の研究室での活動だけでは、絶対に出会えないような方々とコミュニケーションをとる機会を頂き、貴重な経験を得ることができました！
インターンシップでの業務体験内容
インターンシップでは、VTuberライブにおいて、リアルタイムで双方向的なライブを実現するためのクライアントレンダリング型デモのフロントエンド部分を実装しました。
現在のVTuberライブ配信は、送信側でアバターのモーションデータを映像に変換したものを配信しています。しかしながら、この場合、受信側の環境／操作に応じてアバターのアングルを変えるなどのメタバース（XR）への適用が難しいという課題があります。以上の背景から、『MoQという新しいメディア転送プロトコルをVTuberライブに適用することで、双方向的なライブを実現しよう！』というのが大きな目的です。
デモの大まかなイメージとしては次の図になります。
送信側は以下のデータを取得し、MoQTを用いて送ります。
- 映像データ：PCに接続されたWebカメラから取得
- 音声データ：PCに接続されたマイクから取得
- モーションデータ：Google社のMediaPipeを用いて顔のランドマーク、姿勢のランドマークを取得（取得イメージ：図中の①）
受信側では、送信側から受け取った上記3種類のデータを基にアバターを再構成します（再構成イメージ：図中②）。
次に実際に取り組んだ内容を大きく3つに分けて説明していきます。
1. モーションデータの取得
まず、送信側で顔のモーションデータを取得します。
インターンシップでの業務体験内容で述べている通り、モーションデータの取得にはGoogle社のMediaPipeという機械学習ライブラリを使用しました。Webカメラのみで、フレーム内の顔と顔の特徴を検出可能で、検出した顔の特徴点はX軸、Y軸、Z軸での値を持つ3次元空間上の値として渡されます。
以上のように取得したモーションデータを用いて、アバターの顔・腕の動きを実装していきます。
2. アバターの顔の動きの実装
次に、アバターの顔の動きの実装です。
瞬きや口の動きなどの実装には、ピクシブ社が提供している@pixiv/three-vrmを使用しました。@pixiv/three-vrmはthree.jsを使ってブラウザ上でVRM（ドワンゴ社が提供するオープンソースの人型3Dモデル用ファイルフォーマット）を読み込んで表示するためのライブラリで、ピクシブ社がオープンソースで提供しています。
アバターの顔の動きを表現するために利用するモーションデータはWebカメラから取得した顔の映像の各ランドマーク（物体を表現する為に定めた特徴点）に対して3次元空間座標の配列として提供されるので、アバターの顔のランドマークとの対応を把握することが不可欠です（例えば、瞬きの実装ならば目に関するランドマークの対応を把握するなど）。また顔のモーションデータはランドマーク毎にインデックス番号が付与されていることから、顔のモーションデータのランドマークのインデックス番号をWebカメラから取得した顔の映像に重ねて表示して、対応するアバターのランドマークを特定していきました。表示させた状態のスクリーンショットを撮影していなかったので、代わりにGoogle社から公式に公開されているインデックス番号の位置を示すガイド画像で示すと、（数字が小さすぎて見え辛いですが）以下の画像のようにインデックス番号が割り当てられていることが分かりました。
(Google社 MediaPipeの顔のランドマーク検出ガイドより)
次にインデックス番号を用いて取得した顔の座標データをもとに以下の値を算出し、それらをアバターの動きに適用しました。
- 目の開き幅
- 口の開き幅
- 首の傾き（X方向、Y方向、Z方向）
その結果が下の動画です。
しかしながら、見ていただけると分かるように、このままだと首だけが異様にグルグル回る不自然な動きになってしまっています。
そこで、胴・脊髄の動きを首の動きに対応させることで、より人間らしい動きに近づけられました。
3. 姿勢推定を用いた腕の動きの実装
最後に、アバターちゃんで手を振りたい！ということで姿勢推定を用いた腕の動きの実装に移りました。2. アバターの顔の動きの実装で使用した顔のランドマーク同様、まずは姿勢のランドマークのインデックス番号をWebカメラから取得した映像に重ねて表示をし特定していきました。こちらも、表示させた状態のスクリーンショットを撮影していなかったので、公式が出しているガイドを下に示します。
すると、上記のように割り当てられていることが分かったので、インデックス番号を用いて腕に関する座標データ（今回は時間の関係で左腕のみの実装なので[11][13]）を取得し、腕の傾きを算出しました。
そして、その値を上腕の動きに適用し、最終的には下のアバターのような動きを実装しました。
実際に姿勢を推定したところ、値のブレが少し大きかったため、アバターの腕の動きが小刻みに震えてしまっています。そこで、何秒間かの値の平均値をとることにより、滑らかな動きを実現できるのではないかと考えています。（上長に伺ったところ、ロボット制御の要領で対応可能だというアドバイスを頂きました）
おわりに
今回のインターンシップにおいて、最初はネットワークの基本的な知識しか身についておらずWebRTC／MoQに初めて触れる状態からのスタートだったのですが、上長の小松さん・トレーナーの河合さんに説明していただき、また質問があるときには丁寧に対応していただいたことでMoQや実装に関して理解を深められました。最終的にはアバターに自然な顔の動きの実装、時間の切れで途中までになってしまいましたが姿勢データを使った動きの実装ができ、満足のいくデモに仕上げられました。しかし、正直なところアバターで手を振りたかったので、その実装までいけなかったのが少し悔やまれます。私自身のプロトコルや実装に関する知識がもう少しあれば、手を振る実装まで効率的に進められたかもしれないので、今回の経験を胸に今後も精進していきたいです。
インターンシップではさまざまなイベントを通して多様なバックボーンを持つ方々にお話を伺えて、自分が実際に働いている明確なイメージを持つことができました。また、多くの出会いとその方たちとのお話を通じて、自分の長所や短所を再確認できました。この経験を今後の学校生活／研究活動／就職活動に活かしていきたいです。
今回お世話になりました、小松さん、河合さん、本当にありがとうございました！
