shingoushori's dialy

音信号処理を専ら研究していた元博士後期課程の学生によるメモ

VRM を読み込んで ~ zangyouをチョップさせる動画を書き出してみた

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、動画で書き出してみました。
Googleさんが流行らそうとしているらしいWebMへは簡単に出せました。
しかし、WebMは不便です。YouTubeには上げられてもTwitterには上げられず、QuickTimeだと再生/編集できなさそう。
ということで、WebMからMP4への変換もやってみています。
videoconverter.jsっていう、FFmpegっていう定番ツールのJavaScript移植っぽいやつでやってみています。
が、なんか画像が壊れる、時間がかかるくせに。微妙です!!

VRMのライブラリは『pixiv three-vrm』です。
pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいます。
なので [testModel] ボタンでご召喚できます。

 
Drop files here

                                           

チョップ

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。MacChrome でだけ。
そろそろポーズとかモーションをチョップだけから卒業したい ... !

モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。

 

[参考文献]

@pixiv/three-vrm three-vrm-girl.vrm

examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes

【Nuxt.js】canvasを画像化する際にバックグランドカラーが表示されない【Javascript】

Canvas.toDataURL() - キャンパスをデータURIに変換する

Exporting to image #989

https://github.com/pixiv/three-vrm

 

JavaScriptでcanvasを録画して動画ファイルに保存する方法

MediaRecorder()

videoconverter.js

CDN for ffmpeg.js

x264 comitted, but supported? Typo in docs

Blob, ArrayBuffer, Uint8Array, DataURI の変換

Ffmpeg.js/webm-to-mp4.html

安定しないフレームレートに効果的! WebGLのカクつき対策まとめ(Three.js編)