jsdog.dev

ブラウザ上でFACERIGのアバターと静止画を合成した画像を作るジェネレーター 「VIRTUAL SHOT」

こんにちは、せーぶるです

アバターとバナーを組み合わせた画像を作るのがちょっと手間だったので、 FaceRigのVirtual Cameraの映像と任意の画像を合成した画像を作れるジェネレーターを作りました

Virtual Shotの画面キャプチャ

画面キャプチャ

Virtual Shot ( https://sable-virt.github.io/virtual-shot/

使い方

FaceRigとFaceRig Virtual Camera(おそらく今はFaceRigを入れれば一緒に入る?)をあらかじめインストールしておきます

FaceRigを起動して、背景を緑に、ブロードキャストに切り替えをオンの状態にしておきます(下図)

背景を緑でブロードキャストオン

https://sable-virt.github.io/virtual-shot/ にアクセスします カメラの取得を求められるので必ず許可してください

ファイルを選択ボタンを押して背景にしたい画像を選択します。 画像が読み込まれたら、その横にあるセレクトボックスからFaceRig Virtual Cameraを選択し、カメラ取り込みをクリックします

少しするとアバターが表示されるので、ドラッグ&ドロップで位置を、四隅をドラッグして大きさを調整します

画面左下の一時停止をクリックするとFaceRigの映像が停止します。決めポーズをしたら一時停止し、確認した上で保存ボタンをクリックします

アバターと背景画像が合わさった1枚の画像がダウンロードされます!以上!(下図)

ジェネレーターから出力されたイメージの例

最終出力結果 ※ 画像がサーバーにアップロードされたり、映像が外部に送信されるようなことはありません

最終結果

今回はReactで簡易に組んでます。コードはgithubで確認できますので、実装が不安な方はご確認ください sable-virt/virtual-shot

なお雑に組んでいるところもあるのでコードの参考にはしないでね!

今後について

今のところバージョンアップの予定はありませんが、反響があれば少しずつ実装するかもしれません・・・

例 – グリーンバックの抜き具合の設定 – 複数映像の配置 – 見た目の調整 – 取り込む映像の解像度変更

利用についてはご自由にお使い頂けます。要望や不具合はIssueに記載してもらえると助かります! それでは良いバーチャルライフを!