ブラウザ上で3Dキャラクターと会話できる「ChatVRM」がオープンソースで公開

pixivでフロントエンドエンジニアとして、3Dキャラクター投稿・共有プラットフォームであるVRoid Hub向けの3Dキャラクターを表示するためのビューワー開発に携わっているという@keshigomuさんが、ブラウザ上で3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。

ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
https://inside.pixiv.blog/2023/04/28/160000

「ChatVRM」はテキストもしくは口頭で話しかけた言葉に、キャラクターがフルボイスで回答してくれるという技術デモ。ウェブブラウザ上で動作可能で3Dキャラクターのデータをインポートしたり、キャラクターに併せて声を調整したりすることも可能です。

ChatVRMのデモは以下のページから実行できます。ただし、OpenAIのAPIキーを独自に取得する必要があるので注意が必要です。

Application error: a client-side exception has occurred
https://pixiv.github.io/ChatVRM/

ページにアクセスすると以下の画面が表示されるので「OpenAIのサイト」をクリック。

するとOpenAIのAPI発行ページにつながるので「＋Create new secret key」をクリック。

任意の名前をつけて「Create secret key」をクリック。

するとAPIキーが発行されるのでこれをコピー。

ChatVRMのデモページに戻り、「OpenAI APIキー」と書かれたテキストボックスにコピーしたAPIキーをペーストして、「APIキーを入力してはじめる」をクリック。

するとこんな感じで3Dキャラクターが表示されます。

画面下部にあるマイクボタンを押すか、テキストボックスをクリックしてテキストを入力することで3Dキャラクターとのおしゃべりが可能。

実際にChatVRMで3Dキャラクターと会話するとどんな風になるのかは、以下の動画を見れば一発でわかります。

ブラウザ上で3Dキャラクターと会話できる「ChatVRM」 - YouTube


画面左上にある「設定」から、3DキャラクターをVRM形式でインポートしたり、3Dキャラクターの声として使用されているKoeiro APIを調整したり、キャラクター設定を指定したりすることが可能です。

VRoid Hub上で「モデル登録者以外の利用」がOKになっているモデルを探せば、VRM形式の3Dキャラクターデータをダウンロードできます。

なお、ChatVRMはGitHub上でオープンソースでコードを公開しています。

GitHub - pixiv/ChatVRM
https://github.com/pixiv/ChatVRM

ChatVRMの技術的な詳細は以下のページにまとめられており、3Dキャラクターの表示には「@pixiv/three-vrm」、ユーザー音声の認識には「Web Speech API」、返答文の生成には「ChatGPT」、読み上げ音声の生成には「Koeiro API」を利用していることなどが解説されています。

ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
https://inside.pixiv.blog/2023/04/28/160000