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] ボタンでご召喚できます。
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
そろそろポーズとかモーションをチョップだけから卒業したい ... !
モデル使用に関する免責事項のお手本は、 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に変換する
https://github.com/pixiv/three-vrm
JavaScriptでcanvasを録画して動画ファイルに保存する方法
x264 comitted, but supported? Typo in docs
Blob, ArrayBuffer, Uint8Array, DataURI の変換
安定しないフレームレートに効果的! WebGLのカクつき対策まとめ(Three.js編)
VRM を読み込んで ~ さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみました。
これまでは zangyou だけだった訳ですが、それは絵文字は愚かひらがなすら出せなかったんです、フォントの都合で。
どうせなら絵文字とか出したいですよね。で、すてきな紹介記事「HTML5 CanvasとWebGLでウェブフォントを扱う方法」に巡り会いましたので、VRM を放り込むだけでも楽しそうなのでやってみました。
VRMを [Drop VRM files here] すると、真ん中に放り込めるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
HTML5 CanvasとWebGLでウェブフォントを扱う方法
@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に変換する
https://github.com/pixiv/three-vrm
VRM を読み込んで ~ その後ろにどこぞのsiteを表示してみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、背景にどこぞのsiteを表示させてみました。
とりあえず、CC(クリエイティブ・コモンズ)らしいNASAの地球を持ってきてみました。Space Cats ならぬ Space zangyou です。
VRMを [Drop VRM files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
後ろのsiteを操作するのにVRMが邪魔な場合は、 [dispVRM] ボタンで表示/非表示を切り替えられるはずです。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
ポーズとかモーションだけじゃなく、いじりたいことがゴロゴロある...。
背景のURLも含めて画像ファイルに書き出せないかとやってみましたが、現行のWebブラウザたちではそういうAPIはないかも?スクショで頑張るしかなさそうです。
ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
VRM を読み込んで ~ 背景透過PNGで書き出してみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、背景透過PNGで書き出してみました。
ライブラリは『pixiv three-vrm』です。
pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいます。
なので [testModel] ボタンでご召喚できるようにしてみました。
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
そろそろポーズとかモーションをチョップだけから卒業したい ... !
モデル使用に関する免責事項のお手本は、 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に変換する
https://github.com/pixiv/three-vrm
canvas で画像の円形な一部分を回してみた
エフェクターの改造とかやってみています。
つまみグリグリしながらオリジナルと比較動画とかやりたいんですけど、
一枚撮った画像でグリグリ回せれば?と思ってしまったので作ってみました。
これ自体はソフトでやればってものですが、この先にもっとやりたいことがある!!
↓ Drop files here に画像ファイルを Drag and Drop してみてください ↓
↓ 画像の下にずれていった窓たちで操作できます 説明は下にて ↓
水平 垂直 (画像上でクリックすると値が入ります)
半径 (回す)角度 を入れて [処理] ボタン押すと回るはずです
複数回せるので、回すやつを選ぶのが "対象" です 回すやつは"clip"と呼びます
別の "対象" にかつて設定した値 = [現状] を [現状] ボタンで復帰できます
その回すやつ "clip" を [clip追加] で追加できます
そして [exportPNG] で PNG がダウンロードできるはずです
[参考文献]
JavaScriptでselect要素にoptionを追加する方法を現役エンジニアが解説【初心者向け】
VRM を読み込んで ~ zangyouをチョップさせてみた ~ Leap Motion ~ pixiv three-vrm で作り直し編
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、「VRM を読み込んで ~ zangyouをチョップさせてみた ~ Leap Motion編」を、『pixiv three-vrm』で作り直しましたです。VRMは、VRoid StudioやUnityのバージョンとかで、読めたり読めなかったりが結構激しい悪寒。
LeapMotion
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
『pixiv three-vrm』だと読めるモデルが多かったりするんでしょうか?多いといいなぁ...。
あ、こっちだと袖が揺れますね!素敵!
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
https://github.com/pixiv/three-vrm
[追記 2020/03/21]
pixivのGitHubにいらっしゃる three-vrm-girl.vrmっていうデモな3Dモデルさんを、 [testModel] ボタンでご召喚できるようにしました。
VRM を読み込んで ~ zangyouをチョップさせてみた ~ Leap Motion編
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は zangyou をチョップ の、Leap Motion 版です!
VTuber界隈ではLuppet さんで有名な、ハンドトラッキングできるデバイスです。
チョップの仕方です。
Leap Motion 正面からの距離でチョップです。私が今、Leap Motion 正面を上むきにしているからですね。
Leap Motion に近いほど、アバターさんの右手が下がります。
LeapMotion
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"はそれぞれ手探り。前回のままです。
相変わらず肘が痛そうな方向に曲がっていそうです。
zangyouをチョップすべく、腰 ("J_Bip_C_Spine") を軽く曲げさせています。
VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
モデル使用に関する免責事項のお手本は、https://facevtuber.com/ さん。
Leap Motion部分は、公式サンプルからほとんどそのまま持ってきただけです。
ジェスチャーとかやれるんで、使っていきたいです。
ちょっと気になるのが、ライブラリが公式からだと安定して取得できなかったこと。更新作業中だったりしたのでしょうか?
しょうがないので、別のところから取得しています。
[参考文献]
https://developer-archive.leapmotion.com/documentation/javascript/devguide/Sample_Tutorial.html
https://threejs.org/docs/#api/en/geometries/TextGeometry