VRM を読み込んで ~ zangyouをチョップさせてみた
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は zangyou をチョップです。
フォントは helvetiker 。Helvetica じゃないの?と思いつつ、threejs搭載のTextGeometryを使ってみました。
音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 ~ 4 kHz に反応です。反応するのはFile0の方だけ。File1は伴奏用ということで。しかし、今回については反応するFile0の方にドラムを入れたほうが楽しそう。
File0
File1
mixing source0 :
mixing source1 :
Analyser
SmoothingTimeConstant : | |
MinDecibels : | |
MaxDecibels : |
mixed | ||
audio0 | ||
audio1 |
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"はそれぞれ手探り。
相変わらず肘が痛そうな方向に曲がっていそうです。
今回は、zangyouをチョップすべく、腰 ("J_Bip_C_Spine") を軽く曲げさせています。
漢字とか変形とかやってみたい。やれるのかな?
VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
モデル使用に関する免責事項のお手本は、https://facevtuber.com/ さん。
[参考文献]
https://threejs.org/docs/#api/en/geometries/TextGeometry
pixiv three-vrm のサンプルをコピペしてみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
VRMのページ : https://vrm.dev/
今回は『pixiv three-vrm』です。blendshapesのサンプルをコピペしてみました。
Webアプリケーションで3Dアバターモデルを簡単に扱える『pixiv three-vrm』をOSSとして公開しました!3Dモデルの専門知識がない開発者の方でも「VRM」ファイルをより簡単に扱うことができます! #VRoid
— VRoid公式 (@vroid_pixiv) September 12, 2019
詳細: https://t.co/psBwTYe3cy
GitHubリポジトリ: https://t.co/j9IU2h2Zax pic.twitter.com/Fsp2VLbpkW
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
表情が変わって、スカートが揺れてます。簡単!
これまでやってきたVRMはthree.js自体に組み込まれているらしいものでした。参考のしてきたのはkiruroboさん のサンプル。
blendshapesをいじるのに挑戦していましたが、全然動かせられていませんでした。
pixiv three-vrmはその辺りが揃っていた、サンプルも色々あって、実にありがたいです。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
https://github.com/pixiv/three-vrm
VRM を読み込んで ~ 音量に合わせてチョップさせてみた
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は 音量に合わせてチョップです。
音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 kHz に反応です。もっとミニマムなサンプルも用意すべきでした、とても無駄に大きい。反応するのはFile0の方だけ。File1は伴奏用ということで。
File0
File1
mixing source0 :
mixing source1 :
Analyser
SmoothingTimeConstant : | |
MinDecibels : | |
MaxDecibels : |
mixed | ||
audio0 | ||
audio1 |
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"がそれぞれ手探り。
肘が痛そうな方向に曲がっていそうです。その辺のコツを早く掴みたいなぁ...。
動きにアサインする音量に関しても、周波数帯の絞り方、レンジとか、やはり深掘りするべきだなと。音量じゃなくアタック検出にするべきとか、いろいろ。
VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
モデル使用に関する免責事項のお手本は、
https://facevtuber.com/ さん。
[参考文献]
VRM を読み込んでみた ~ Three.js で表示
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は Three.js で表示するところまで。
https://vroid.com/ (Mac版) 0.7.2 で自作したモデルでは読めました。
この次は表情...。VRoidでいろいろ表情を作れるのがなかなか楽しいです。
果たして、簡単に自前で動かせるものなのでしょうか、不安です。
VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
canvas上でのマウス操作の回転は、だいぶ自分で書きました。
3Dの回転のUIは、どうも決定打に欠ける感じがします。
2Dのマウスだけでやるのは、そもそも足りなくて当たり前かもしれませんが。
モデル使用に関する免責事項のお手本は、
https://facevtuber.com/ さん。偉大なる先人、先人は偉大。
( YouTube に動画をあげるときにお世話になっています。ありがたい!)
[参考文献]
VRM を読み込んでみた ~ meta 情報の取得
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
ざっくり、glTF2.0ベースで人体モデル + ライセンスデータ (meta情報?) らしい。
とりあえず。
今回は meta 情報が取得できました。Three.js で表示するところまでいけてません。
Three.js には既に VRMLoader が入っているみたいで、ありがたい。
kiruroboさん のサンプルを参考にしています。
Drug & Drop でモデルの読み込みができるので、自モデルで試しやすくてありがたい。
https://vroid.com/ (Mac版) 0.7.2 で自作したモデルでは読めました。
VRoid、VRoid単体でもなかなか楽しいです。
VRM で何かできるものを公開する上では、
ライセンスデータをユーザに提示するのは大事そうだなと思っています。
https://facevtuber.com/ さんをお手本にするつもり。
( YouTube に動画をあげるときにお世話になっています。ありがたい!)
[参考文献]
Simutransのセーブデータ (非圧縮xml のみ) を読み込み->書き出し ~ 線路 ⇄ 道路
[趣旨]
Simutransのセーブデータ弄り 〜 をします。
Simutransのセーブデータ (非圧縮xml のみ) をパースしてエディットして、また書き出しです。
今回は、線路と道路を置き換えてみます。
頑張って作った高架の線路網が、細かすぎてバスにしたくなってしまったのです。
これ、現実でもありがちなことなので、本体改造でツール化したいところです。
↓ Simutransのセーブデータ (非圧縮xml のみ) をドラッグアンドドロップすると、「ダウンロード」と書かれたリンクが追加されます。"output.sve"としてダウンロードできるはず。開発環境は、macのchrome。
type | addon | |
original | ||
alternative |
originalのaddon欄が空白だと全部が置き換え対象。alternativeのaddon欄が空白だと、読み込み時に適当に置き換えられます。
こんな感じで、碁盤病が捗ります。
セーブデータいじり実験 線路⇄道路置き換え + ミス #Simutrans pic.twitter.com/sRuXUEEUFK
— shingoushori (@shingoushori) July 27, 2019
画像で出ている通り、線路/道路上に残る施設がマズイところ。
そして、セーブデータ上でのアドオンの名前を探すのが大変。
この辺りは今後のいじりどころ。
[参考文献]
クライアントサイドJavaScriptでXML文書のDOMをパースする
HTML非表示・使用不可メモ(Hishidama's disabled/visibility/display Memo)