マイリスト ブラウザ上でMMDを踊らせてみる (JavaScript & WebGL)

Three.js + jsartoolkit5 (動画中ではさらに + A-Frame)デモ: https://takahirox.github.io/mmd-ar/examples/barcode.html(PC推奨。Androidでも動く？)前: sm30124044 (ブラウザ上でMMDミクのライブをリアルタイム処理で)次:マイリスト: mylist/49125767東方風STGブラウザゲーム→mylist/38547755
1:31｜2017年05月19日 12：10：34 投稿

http://www.nicovideo.jp/watch/sm31239935

前: sm30067053 (ブラウザ上でMMD編集とVRできるようにした)次: sm31239935 (MMD + ARをブラウザ上で)マイリスト: mylist/49125767それなりに凝ったことができるようになってきました。オンラインデモ物理 http://takahirox.github.io/MMDLoader-app/index.html#app_physicsモザイク http://takahirox.github.io/MMDLoader-app/index.html#app_postprocessing_lowresolutionライブ http://takahirox.github.io/MMDLoader-app/index.html#app_music_live東方風STGブラウザゲーム→mylist/38547755
2:25｜2016年11月27日 16：32：08 投稿

http://www.nicovideo.jp/watch/sm30124044

前(MMDxWebアプリ): sm279561563次(ブラウザ上でMMDミクのライブをリアルタイム処理で) :sm30124044マイリスト: mylist/49125767やっぱりアニメーション編集もできたほうがいいですかね。オンラインデモEditor http://takahirox.github.io/three.js.mmdeditor/editor/index.htmlA-FramexMMD https://github.com/takahirox/a-mmdThree.js MMD example https://threejs.org/examples/#webgl_loader_mmd東方風STGブラウザゲーム→mylist/38547755
4:33｜2016年11月18日 16：47：11 投稿

http://www.nicovideo.jp/watch/sm30067053

前: sm27662763 次: sm30067053mylist/49125767デモ: http://takahirox.github.io/MMDLoader-app/index.htmlThree.js r74に入るTHREE.MMDLoaderを使って、サンプルアプリをいくつか作ってみました。こんな感じに、リアルタイムに色々処理が可能になります。エディタの方はまだまだまだ時間がかかりそうな感じ。動画撮った後に、デモにアンチエイリアス処理追加したけど重くなったかも。東方風STGブラウザゲーム→mylist/38547755
1:47｜2016年01月07日 00：05：09 投稿

http://www.nicovideo.jp/watch/sm27956156

ちゃんと動かないモデルとかもある状態なんで、
過度な期待はせず気長にお待ちください。

現状は「MMDデータを扱えるようにした」がより正確かも。前: sm26268613 次: sm27956156mylist/49125767デモ: http://threejs.org/examples/#webgl_loader_mmd_audioJavaScriptでMMDデータを扱えるMMDLoaderを作りました。Three.js r74に入りました。ブラウザ上でリアルタイムにMMDを踊らせたり、その他色々できます。後半はまだまだ開発途中のブラウザMMDエディタの紹介。Three.js EditorにMMDをサポートさせようとしているところ。エディタデモ: http://takahirox.github.io/three.js.mmdeditor/editor/Menu bar->Add->MikuブラウザMMDビューアアプリ作成で得たノウハウをもっと多くの人が活用できるようにThree.jsに取り込んでもらおうと思ったのが始まりです。東方風STGブラウザゲーム→mylist/38547755
5:27｜2015年11月25日 02：38：17 投稿

http://www.nicovideo.jp/watch/sm27662763

「和食」の文字を正しく表示させるためだけに、
左右反転していたのを直した。


前: sm26166836 次: sm27662763mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/特に更新はないけど、そばかす式魔理沙ver0.2が素晴らしかったのでつい。動画中で使用している素材は親作品を参照。Three.jsとかjThreeとかの3D CGライブラリは使ってません。0からガリガリ書いてます。デモサイトでは、その特性上再配布可能なデータしか置いていません。そばかす式モデルを動かしたい人はローカル環境で試してください。そばかす式モデルは「軽い」「表情豊か」「動かすと映える」と、リアルタイムで動かすにはとても優秀なんですよね。東方風STGブラウザゲーム→mylist/38547755追記：無料広告チケットで宣伝してみました。
3:46｜2015年05月16日 17：24：50 投稿

http://www.nicovideo.jp/watch/sm26268613

複数モデル対応、影対応、ポストプロセス追加。
実装したい機能は大体追加したから、
次は性能改善とリファクタリング。
当初思っていたよりGPUの負荷がかなり高くなったから、
設計を見直さないと。

シャドウマッピングを実装してみたが、精度が悪くて改善案を検討中。

そろそろ応用も考えたいなーと思っていて、
とりあえずVRに手を出そうかと考えているところ。

前: sm26069436 次: sm26268613mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/複数モデル対応。影対応。ポストエフェクト追加。複数モデルはさすがに重いので、動画中の物理演算が若干残念なことになってます。実装したい機能は大体入れた感じ。顔モザイクのアイデア元 https://twitter.com/i_saint/status/590815779802648577動画中で使用している素材は親作品を参照。Three.jsとかjThreeとかの3D CGライブラリは使ってません。0からガリガリ書いてます。東方風STGブラウザゲーム→mylist/38547755
6:28｜2015年05月03日 11：37：45 投稿

http://www.nicovideo.jp/watch/sm26166836

もうあまり性能改善する気なくなってきた。
次は影の処理かなー。
あと、踊らせるだけじゃなくて、
何かに応用できないか考えているとこ。

3D CGプログラミングを始めて、
一ヵ月半でここまでできれば上出来じゃないでしょうか。
その半分くらい物理演算対応に費やしてるけど。

前: sm26008748 次: sm26166836mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/ステージ対応。ポストエフェクト対応。物理演算調整。配布されているステージとポストエフェクトは思いの他重かったので、GLSLを駆使してとりあえずそれっぽいものをいくつかこしらえてみました。動画中で使用している素材は親作品を参照。Three.jsとかjThreeとかは使ってません。0からガリガリ書いてます。(物理演算と行列演算ライブラリは使っているけど)動画の最後に前回の撮り直しが入ってます。前回の物理演算は納得いってなかったんで。足のピクピクはIK solverのバグです。東方風STGブラウザゲーム→mylist/38547755
10:22｜2015年04月20日 08：16：38 投稿

http://www.nicovideo.jp/watch/sm26069436

次第に重くなっていく……

次こそ次こそ性能改善かな


前: sm25974661 次: sm26069436mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/エッジ対応。マウスによるカメラ制御対応。動画中で使用している素材は親作品を参照。使用ライブラリ (いずれ自前のものに差し替えたい)- glMatrix(行列演算)- Ammo.js(物理演算)- Whammy.js(動画生成)物理演算やIKのおかしさには目を瞑ってください。60fps出る環境なら物理演算はだいぶましに見えます。東方風STGブラウザゲーム→mylist/38547755
4:53｜2015年04月12日 07：00：00 投稿

http://www.nicovideo.jp/watch/sm26008748

当初は音楽の対応はしないつもりだったけれど、
前回の動画作ってるときに気が変わった。
やっぱ音と踊りが合わさると、ぐっと印象が良くなるね。

物理演算が少しおかしいみたいだけれど、
どう対処したものか。

次こそ性能改善かな。


前: sm25953917 次: sm26008748mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/音楽を鳴らして、音楽と同期を取れるようにした。動画中で使用している素材は親作品を参照。使用ライブラリ (いずれ自前のものに差し替えたい)- glMatrix(行列演算)- Ammo.js(物理演算)- Whammy.js(動画生成)物理演算の処理がまだおかしいらしく、そばかす魔理沙のスカートが暴れていますが気にしないでください。デモで使える素材を探すのが大変。東方風STGブラウザゲーム→mylist/38547755
6:19｜2015年04月07日 14：19：24 投稿

http://www.nicovideo.jp/watch/sm25974661

モーションカメラ実装。
Whammy.jsによる動画ファイル生成機能搭載。

Whammy.jsの仕様か、WebGL Canvasの仕様か、
WebMの仕様かわからないが、2分を超えた動画が生成できない。
あと、滅茶苦茶重い。
いずれ自前のものに差し替えたい。

次は性能改善かな。

前: sm25936936 次: sm25974661mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/Whammy.jsを使用し、直接動画ファイルを生成できるようにした。音声は動画編集中に後から足しています。動画中で使用している素材は親作品を参照。使用ライブラリ (いずれ自前のものに差し替えたい)- glMatrix(行列演算)- Ammo.js(物理演算)- Whammy.js(動画生成)もっと再配布可能な音声、モデル、モーション、カメラモーションが増えると、デモで使えて嬉しいんだけどな。東方風STGブラウザゲーム→mylist/38547755
8:51｜2015年04月04日 22：46：26 投稿

http://www.nicovideo.jp/watch/sm25953917

モーフィング実装。
光源処理実装。
toon shader実装。
モーションスキップ実装。
VTFを用いたGPUスキニング実装。

性能を倍くらいに上げたいけれど、
JavaScriptやWebGLの制約が壁。

前: sm25900381 次:sm25953917mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/使用ライブラリはglMatrix(行列演算)とAmmo.js(物理演算)のみ。ようやく形になってきた感じ。性能を今から倍くらいに上げたい。動画はミクで実時間基準動作(50fpsしか出ないので、間に合わないフレームをスキップ)、次にそばかす魔理沙で60fps動作、最後に30fpsしか出なかったアリスを2倍速で。7年前くらいに買ったノートPC上で動いています。もっと軽いモデルが増えてくれると色々遊べて嬉しいんだけどな。東方風STGブラウザゲーム→mylist/38547755
9:43｜2015年04月02日 20：54：27 投稿

http://www.nicovideo.jp/watch/sm25936936

物理演算に対応。
色々すごいはまったけれど、おかげで勉強になった。

物理演算が予想より重すぎて、
WebWorkersを用いて別スレッドにやらせても
あまり性能が上がらなかった。
物理演算自体を複数スレッドで動かせれば
かなりの性能改善ができそうだが……

性能改善の変わりに
フレームスキップのサポートや
物理演算の焼きこみでの対応も考えている。

そろそろ完成度を上げていくフェイズかな。
今はバグやごまかしが多すぎ。
まともに読み込めないモデルもかなり多い。

前: sm25738890 次:sm25936936mylist/49125767デモ: http://takahirox.github.io/mmd-viewer-js/使用ライブラリはglMatrix(行列演算)とAmmo.js(物理演算)のみ。Bullet(Ammo.js)を使って物理演算に対応。ここまでで実作業日数1ヶ月くらい。色々大はまり。まだまだまだまだ実装途中。物理演算が重すぎてWebWorkersであまり性能改善ができなかった。動画はローポリミクで60fps。その後に15fpsしか出なかった魔理沙を4倍速で少しだけ。7年前くらいに買ったノートPC上で動いています。ローポリ初音さん: http://www.geocities.jp/neko_terashima/MMD/index.html東方風STGブラウザゲーム→mylist/38547755
5:52｜2015年03月29日 11：49：33 投稿

http://www.nicovideo.jp/watch/sm25900381

処理をGPU側に移したり、WebGLのAPI呼び出し方を見直すなど、
全体最適化を施し性能がそこそこ出るようになった。
WebWorkerによる複数スレッド化でCPU側の性能はまだ上げられると思う。
VTFを試し、巨大なテーブルに対するランダムアクセス処理を
GPU側で行わせてみたが、やはり性能はあまり出なかった。

貫通とスカートの挙動はIK solverのバグ修正と、
物理演算サポートで改善されるのではと思っている。

次は物理演算サポートを考えているが、
情報があまりなくて困っている。


前: sm25726043 次:sm25900381mylist/49125767ブログ投稿用。使用しているライブラリは行列計算用のglMatrixのみ(自前のものに差し替え予定)。ここまでで実作業日数7日くらい。まだまだ実装途中。WebWorkersの導入でCPU側はまだ性能改善できるかも。東方風STGブラウザゲーム→mylist/38547755
4:26｜2015年03月08日 08：03：05 投稿

http://www.nicovideo.jp/watch/sm25738890

IK solverを実装(コピペ)。
たぶんバグが混入したため、時々へんな挙動をする。

CPU側の処理を多少最適化したため、少しは速くなったが、まだまだ。

追記：
これ膝逆に曲がっとる

前: sm25695992 次:sm25738890mylist/49125767ブログ投稿用。使用しているライブラリは行列計算用のglMatrixのみ(自前のものに差し替え予定)。ここまでで実作業日数5日くらい。まだまだ実装途中。東方風STGブラウザゲーム→mylist/38547755
3:00｜2015年03月06日 18：45：58 投稿

http://www.nicovideo.jp/watch/sm25726043

3D CG プログラミングの練習がてら。

PMDを解析して表示するのはすぐ出来た。
モーション補間はとりあえず線形補間で誤魔化し中。

まだIK solverが未実装なので足が動かない。
処理のほとんどをCPU側で行っているので激重。


次: sm25726043mylist/49125767ブログ投稿用。使用しているライブラリは行列計算用のglMatrixのみ。嫌なことがあったので、むしゃくしゃして3日くらいでここまで作った。インフルエンザで外出もできなかったし。まだまだ実装途中。性能改善はIK実装後予定。東方風STGブラウザゲーム→mylist/38547755
3:06｜2015年03月02日 11：09：03 投稿

http://www.nicovideo.jp/watch/sm25695992