将棋VTuberの開発ステップ①

先日の記事で3Dの将棋盤と駒で棋譜並べができたと書きましたが、続いてVTuberを登場させてみます。

なお、VTuberや3Dモデリングの知識がないためところどころおかしかったり、稚拙な内容になるかもしれませんがご容赦下さい_:(´ཀ`」 ∠):

現状の成果物

ここ数日間ほどThree.jsやVTuberについて色々調べながら奮闘していましたが、ひとまず現段階の成果物を下記にアップしました。

vtuber.yasuda.cloud

動画だとこんな感じ

おじぎをして初手２６歩の一手を指すだけですが、ここまででも結構苦労したので一度まとめます。

VTuberについて知る

そもそもVTuberというものをよく知らなかったのですが、YouTubeで色々調べてみると意外なことに3Dより2Dの方が多いみたいです。歌を歌ったり、ゲーム実況したり、配信でお喋りする際にアバターに表情や身振りを加えているようですね。

2Dの方が低負荷で動きをつけやすいというのは利点ですが、今回は3Dにこだわって手探りで進めたいと思います。

アバターを作成

VRoid Studioという神ツールがあったのでこちらを使います。ガイドラインや利用規約を一読したところ個人用途なら今やりたいことが実現できそうです。デスクトップアプリをダウンロードし、VTuber入門者らしい地味な感じのアバターを作りました。

右上のエクスポートアイコンからVRMファイルをダウンロード。作ってから気づいたんですが、ハンターハンターのシズクに少し似てるような似てないような。

Three.jsでアバターや壁を表示

いよいよ実装。Vite、React、Three.jsやreact-threeなどを使ってvrmファイルをレンダリングしています。アバターの表示自体はさほど難しくなく、特筆する点がないので割愛。床もテクスチャをペタっと貼るだけです。

ただ、壁は少し厄介でした。壁はそもそも必要なのか？という疑問はありますが、将棋は屋内を舞台にすることが一般的なので先に壁だけ作っておくと後で同じサイズの画像を差し替えるだけで済む利点があると考えました。

しかし壁を四方に作るということは部屋の面積が決まるということであり、アバターや将棋盤もおおよそのサイズを決める必要が出てきます。ここにどんな問題があるかというと、下記の画像をご覧ください。

この部屋は将棋盤を中心としており、壁までの距離が現実世界で言うと3mちょっと？くらいかなと思います。家具や家電が何もないとは言えスペースがめちゃくちゃ余ってますね。

先ほどの動画にもあったように現状だとカメラは中心である将棋盤の周りをグルグル回っているので、中心にいない注目するアイテムや光景がある場合は配置する場所選びが難しくなります。

昔流行った脱出ゲームみたいに矢印ボタンを押してシーンが変わるような仕組みは良いかもしれません。suumoの部屋の内覧とかであるやつです。

他にはパノラマで360度映像にするという手法も考えられますが、パノラマ画像じゃないといけないという制約を増やしたくないので見送りました。パノラマの方が没入感あって面白そうなんですが、今のスキルでは作りきれない可能性が出てきます。

話を戻して、では部屋を狭くすれば良いのでは？と思ったかもしれません。先ほどの部屋の面積を単純に半分にするとこのようになります。

将棋盤とアバターを適切な画角で収めようとするとカメラが壁の後ろになってしまいました。実際にはカメラの設定でもうちょいマシに出来るのでちょっと極端な例ですが、この狭さだと前述のように他の物を設置する際の制約が増えてしまいます。今後実現したい内容を踏まえた上でちゃんとサイズを決めた方が良いということですね。

指し手の動き、アニメーションについて

当然ながらここが一番キツいです。

まず、ヒューマノイドのポーズやアニメーションは一から作るもんじゃないだろうというのが自然な考えですよね。世の中のVTuberが皆そんなことしてるわけなく、おそらく日常のよくある動きくらいは今時簡単にできるはずです。先ほどのVRoidStudioでもピースしたりストレッチしたり１クリックで出来ました。

問題は将棋を指す細かい所作がそういったツールで実現できるのか？という点です。特定の位置の駒を掴み、他の位置に駒を置く。時には駒を裏返したり、駒を駒台に置いてから別の駒を動かしたり。動かす駒の位置によっては腕の関節も調整しなければいけません。

見栄え的には身体を前屈みすることが絶対条件にしたいところですが、コードでアニメーションを書いていこうとすると相当キツくなります。何故かというと「まずは身体は後回しにしてまずは右手だけ動かそう」みたいな進め方が出来ないからです。ヒューマノイドの部位（ボーン）で言うところの胸（chest）を前屈みにすると右上腕（rightUpperArm）の角度も変わってしまうためです。元のポーズが変わるとそれ以降の所作（アニメーション）にも影響出るので、ウォーターウォール的な開発が要求されるわけです。

当初はあまり考えずに進んでいたため特定のポーズをコードで調整しながら画面を確認して・・というかなり非効率な方法を取っていました。そこで、他の3Dツールのように画面上に各ボーンの値を設定できるようにして、JSONで読み込み、保存、出力する方式にしました。

これで各ボーンのrotationをリアルタイムで確認でき、特定ポーズの状態をJSON出力することですぐに反映、そしてやり直したいときはJSONを読み込ませることで復元も容易になりました。欠点のない夢のような開発手法に思えますが、他にも考慮すべき点が多々ありました。

rotationだけでなくアニメーション毎のスピードを設定できないと動作に緩急がつかなかったり、同時に右腕と左腕を動かす際にそれぞれスピードが違ったりするケースに対応できていません。ブラウザJavaScriptとはいえ、もっとヌルヌル動かせるはずですが初代プレイステーション時代くらいカクついています。

なので、アニメーション周りの実装を効率化して指す時の所作をもっと精巧にするというのが現状の課題です。