VRM を読み込んでみた ~ meta 情報の取得
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
ざっくり、glTF2.0ベースで人体モデル + ライセンスデータ (meta情報?) らしい。
とりあえず。
今回は meta 情報が取得できました。Three.js で表示するところまでいけてません。
Three.js には既に VRMLoader が入っているみたいで、ありがたい。
kiruroboさん のサンプルを参考にしています。
Drug & Drop でモデルの読み込みができるので、自モデルで試しやすくてありがたい。
Drop files here
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 |
Drop files here
originalのaddon欄が空白だと全部が置き換え対象。alternativeのaddon欄が空白だと、読み込み時に適当に置き換えられます。
こんな感じで、碁盤病が捗ります。
セーブデータいじり実験 線路⇄道路置き換え + ミス #Simutrans pic.twitter.com/sRuXUEEUFK
— shingoushori (@shingoushori) July 27, 2019
画像で出ている通り、線路/道路上に残る施設がマズイところ。
そして、セーブデータ上でのアドオンの名前を探すのが大変。
この辺りは今後のいじりどころ。
[参考文献]
クライアントサイドJavaScriptでXML文書のDOMをパースする
HTML非表示・使用不可メモ(Hishidama's disabled/visibility/display Memo)
Simutransのセーブデータ (非圧縮xml のみ) を読み込み->書き出し ~ 特定領域のレベル下げ
[趣旨]
Simutransのセーブデータ弄り 〜 をします。
Simutransのセーブデータ (非圧縮xml のみ) をパースしてエディットして、また書き出しです。
今回は、特定領域のレベルを特定レベルまで下げます。
ついでに、平坦化しちゃいます。
シンプルに地平だけを下げます。橋や道路などの分断をケアすべきですが、今回は何もやれてません。
↓ Simutransのセーブデータ (非圧縮xml のみ) をドラッグアンドドロップすると、「ダウンロード」と書かれたリンクが追加されます。"output.sve"としてダウンロードできるはず。開発環境は、macのchrome。
| topleft : | x | y |
| bottomright : | x | y |
| target : | z |
Drop files here
こんな感じで、碁盤病が捗ります。
#simutrans セーブデータいじり 碁盤で組むには邪魔な街を、丸々レベル下げ pic.twitter.com/xhKpBKDwpy
— shingoushori (@shingoushori) July 21, 2019
碁盤病のために全てを失った街 #simutrans pic.twitter.com/EYtF8DO6ae
— shingoushori (@shingoushori) July 17, 2019
どうにも処理が重いのが難点です...。
[参考文献]
クライアントサイドJavaScriptでXML文書のDOMをパースする
HTML非表示・使用不可メモ(Hishidama's disabled/visibility/display Memo)
A-Frame + Web Audio API で ランダムに箱がでるプレイヤー/ミキサーのテスト
xRしたい！ VTuberしたい！ ということで、A-Frame。
VTuberするのにアバターの必要性を感じなくなってきたので、A-Frame であれこれやってみています。
今回はとりあえず Web_Audio_API と繋いでみました。
File0とFile1に音楽データがセットできて、両方にセットすればミキサー。(以前に作ったものをコピペ)。片方にセットすれば...プレイヤー。
ランダムに箱が出たり回転したりするのは、File0のみ。なんとなく。
スペクトログラムに引いた線があることから、その線のところ (1 kHz と 4 kHzあたり) の音量が、スペクトログラムの真ん中より上になるような値であれば、3Dがぐるぐる。
[proc] ボタンで手動でも発火させられます。
なんとも無意味ですが、動けばとりあえず楽しい。
div a-frame
File0
File1
mixing source0 :
mixing source1 :
Analyser
| SmoothingTimeConstant : | |
| MinDecibels : | |
| MaxDecibels : |
| mixed | ||
| audio0 | ||
| audio1 |
この記事に際して、新たに行き着いた Web Audio API に関する記事２つ。
Audioを停止（終了）させるには pause() → currentTime = 0;
「MediaDevices.getUserMedia() 」について;
やはり WebAPI だけあって、メンテしたほうがよさそう。
過去の記事に遡って修正するとか、一つずつの記事に全部書かずにモジュール化を模索するとか、やるべきことがたくさん。
とりあえず、(以前に作ったものをコピペ)から、今回の記事で気づいて直したのが２点。
・Macのchromeで navigator.getUserMedia() が消えてエラーが出てて動かなかったのを応急手当て。 ・[stop]を押しても音楽データの再生自体は止まっていなかったのを修正。
コピペ元の記事からこの記事までの間の記事も更新しておく ... 。うーむ。
JZZ.js で 特定 ch を削除
MIDIファイルをいじるWebコンテンツ on はてなブログ 〜 の検討
今回は、jazz-softさん作の、 JZZ.jsで特定チャンネルの情報を削除してみました.
チェックボックスを off にした ch の情報を削除して出力します。
Drop files here
JZZ.js さんは Helpers としてノートonとかチャンネルとかを解釈する関数があるらしい。
しかし今回はMIDIメッセージ1つ分のオブジェクト JZZ.MIDI の数字から自前で解釈。
いや、getChannel() 関数を使った方がいい気がする。
地味に削除するチャンネルを指定するチェックボックスの方が面倒だった気がする。
デフォルトをonにするためにsetAttribute("checked", "checked")するとか、地味にトリッキー。
<参考文献>
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/checkbox
【HTML】出来るだけ押しやすいチェックボックスを作る｜リスティング広告の運用代行ならカルテットコミュニケーションズ
A-Frame でランダムに箱を配置してみるテスト
xRしたい！ VTuberしたい！ ということで、A-Frame。
VTuberするのにアバターの必要性を感じなくなってきたので、A-Frame での基本形状の追加/削除をやってみました。
div a-frame
camera の向いている方向に box を置きます。同じ方向を向いたままで連打すると、壁ができていきます。
camera の向いている方向の取得で今回やっている方法が腑に落ちない。
camera の要素でなく、camera.parent から取得しています。
さらに、取得した回転行列(rotationオブジェクト)を box の回転行列に適用するにあたって radian から degree に変換しています 。
なんだそれ。
腑に落ちないながらも、単に箱や球を配置することはとりあえず簡単。
