皆さん、こんにちは！ ITエンジニア科の小原です。
今回は、卒研などでAI（機械学習）が必要になったり、オープンキャンパスでVtuber体験の助手をしたりしたので、Vtuberで使われている技術をHTMLやJavaScriptなどで再現してみました。（クオリティは置いといて）
Vtuber用のアプリ例（お手本）
Webカメラで顔認識して３Dキャラが動きます。リップシンク（口パク）や首振り動作にも対応しています。さすがにVtuber御用達だけあってクオリティが高いですね。
技術要素の再現１（音声入力）
まだ大声を出すのは怖い 恥ずかしい ので青空文庫の朗読を入力して波形出力させてみました。こちらの実装は、イコライザーなどを研究しているサイトが参考になりました。
技術要素の再現２（キー入力：矢印キー）
「自作キャラの感情（笑う、怒る、泣く）などをキー1つで変えられるようにしたいな」と考えて実装してみました。まず、キーボード用に矢印キーで上下左右を取得できるようにして、続いてスマホ用にスワイプ動作で上下左右を判別できるようにしてみました。こちらの処理の実装には、２Dゲームのサイトが役に立ちました。
アプリのプロトタイプ作成（組み合わせてみた）
技術要素を組み合わせて、音量に応じて口パクができるところまで作ってみました。本校のキャラクタ「うさ田」を校舎の写真に合成しています。これだけでも、オーディオAPI（波形抽出）、画像合成、アニメーションなどの技術を使って、結構おなか一杯になりました。
（絵心が全くないので、画像は過去のブログから パクリ 流用です。絵心がある方がうらやましい・・・)
今回は顔認識APIや３Dキャラクタ(VRoid)まで手が回りませんでしたが、頑張れば顔認証で人に応じたキャラクタを表示したり、複数のキャラクターを同時に動かしたり、持ち物の色に応じて、虹や流れ星などが出るようなARっぽいアプリも作れそうです。
皆さんも、世の中のアプリで気になるものがあったら「自分が作るとしたら、どうやったら作れるだろう」と、あれこれ考えてみましょう
