shingoushori's dialy

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

VRM を読み込んで ~ ギターの画像入れてぐるぐるしよう

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターをぐるぐるします。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [ぐるぐる] のスライダーでぐるぐるできます。

直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。

Glitchは, むしろやりたかったこと。画像にglitchかけたかったのが本当のところ。

VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。

 

or Drop files here

                                   

 
 

チョップ

ぐるぐる
 
or Drop files here

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。MacChrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽくするのにすぐできなさそうだったので、とりあえずチョップです。
座標系や回転軸を見えるようにしないときついです。
ますます既存ツールで良いような。

ライブラリは『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

 

Three JS:Geometryでオリジナルの形状を作ってみる

立方体の各面にテクスチャを貼る - three.js アプリ

Three.jsを使って簡易な図形の描画

デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」

Three.js の球体のテクスチャに透過部分のある画像を使って表示

Three.js(Canvas) : 2平面(それぞれ裏表としてテクスチャ)、MeshBasicMaterial に overdraw: true をセットする意味と、Texture オブジェクトを onload で作成

three.jsで画像を表示する最小サンプル

Group - three.js docs

たのしいglitch

three.js examples - postprocessing / glitch

Three.jsでポストプロセスを試してみる

Three.jsのポストプロセスでフィルタをかける

Post Processing with three.js

 

Web Speech API の Speech synthesis を試してみた

試してみたの内容が消えてるので、試して見直し。

Web Speech API の Speech synthesis を試してみた - shingoushori's dialy

[proc]ボタンで音声合成ラジオボタンで言語の切替。

せっかくなので、繰り返し再生できるようにしてみました。
[loop]ボタンがonだとループ。
間隔は、スライダーの数値でbmp指定。
ただし、[loop]onの最中には変更が効かないです。

'ja-JP' 'en-US'
1
60
 
<参考文献>

Web Speech API

Speech Synthesis API

Webページでブラウザの音声合成機能を使おう - Web Speech API Speech Synthesis

Speech synthesis in chrome for android not loading voices

VRM を読み込んで ~ 🎃 がくるくるするようにサンプルコードを改造してみた

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた ... 
やつを改造して、🎃 がくるくるするように改造してみました。Happy Halloween 🎃

VRMを [Drop VRM files here] すると、真ん中に放り込めるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

Drop files here

 

  

 

                    

チョップ

改造するだけのはずが肝心のvrm読み込みでエラー。pixiv/three-vrmさんの更新で適合するthree.jsのバージョンが上がった事によるものでした。
危ない危ない。
three.jsを 0.106.2 -> 0.120.1 にあげただけで、たぶん問題なし。
他の記事のも更新しないといけない。この辺りのメンテナンス性は改善したいところ。

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。MacChrome でだけ。

ライブラリは『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に変換する

Exporting to image #989

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

 

VRM を読み込んで ~ Glitch してみた

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、Glitchしてみました。
といってもオリジナルでなく、3Dやる Three.js さんのサンプルにあったやつを載せただけですが。

直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。

VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。

 

or Drop files here

                   

 
 

チョップ

Three.js でも canvas に書き出しているので、canvasでglitchする楽しそうな記事を試そうとしました。
しかし、canvasの画素値が取得できず断念。
Three.js だからなような?できそうでできないのが悲しい。


[参考文献]

@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

たのしいglitch

three.js examples - postprocessing / glitch

Three.jsでポストプロセスを試してみる

Three.jsのポストプロセスでフィルタをかける

Post Processing with three.js

VRM を読み込んで ~ ギターの画像入れてチョップしよう

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターをチョップします。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [チョップ] のスライダーでチョップしましょう。

直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。

VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。

 

or Drop files here

                           

 
 

 
or Drop files here

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。MacChrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽくするのにすぐできなさそうだったので、とりあえずチョップです。
座標系や回転軸を見えるようにしないときついです。
ますます既存ツールで良いような。

ライブラリは『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

 

Three JS:Geometryでオリジナルの形状を作ってみる

立方体の各面にテクスチャを貼る - three.js アプリ

Three.jsを使って簡易な図形の描画

デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」

Three.js の球体のテクスチャに透過部分のある画像を使って表示

Three.js(Canvas) : 2平面(それぞれ裏表としてテクスチャ)、MeshBasicMaterial に overdraw: true をセットする意味と、Texture オブジェクトを onload で作成

three.jsで画像を表示する最小サンプル

Group - three.js docs

 

VRM を読み込んで ~ 腕あたりの関節の角度を数値指定してみる

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、腕あたりの関節の角度を数値指定してみます。

直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。

VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。

or Drop files here
 
 

RightShoulder
RightUpperArm
RightLowerArm
RightHand
LeftShoulder
LeftUpperArm
LeftLowerArm
LeftHand

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。MacChrome でだけ。
Shoulder と UpperArm の違いがわかりにくいような。
数値を知るにしても、数値での入力だけだとやりづらいですね。

ライブラリは『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 を読み込んで ~ 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編)