マイリスト ブラウザ上でMMDを踊らせてみる (JavaScript & WebGL) http://www.nicozon.net/mylist/49125767 デモで使える＆アプリに同梱できる 「再配布可能」なモデル、mp3、モーション、カメラモーション募集中 Sun, 12 Apr 2015 02:19:18 +0900 Sun, 12 Apr 2015 02:19:18 +0900 ja MMD + ARをブラウザ上で http://www.nicozon.net/watch/sm31239935 http://www.nicozon.net/watch/sm31239935 Fri, 19 May 2017 12:15:09 +0900 MMD + ARをブラウザ上で

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

]]> ブラウザ上でMMDミクのライブをリアルタイム処理で http://www.nicozon.net/watch/sm30124044 http://www.nicozon.net/watch/sm30124044 Sun, 27 Nov 2016 16:34:02 +0900 ブラウザ上でMMDミクのライブをリアルタイム処理で

前: 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

]]> ブラウザ上でMMD編集とVRできるようにした (JavaScript&WebGL) http://www.nicozon.net/watch/sm30067053 http://www.nicozon.net/watch/sm30067053 Fri, 18 Nov 2016 16:48:50 +0900 ブラウザ上でMMD編集とVRできるようにした (JavaScript&WebGL)

前(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

]]> MMD x Webアプリ (JavaScript&WebGL) http://www.nicozon.net/watch/sm27956156 http://www.nicozon.net/watch/sm27956156 Thu, 07 Jan 2016 00:16:55 +0900 MMD x Webアプリ (JavaScript&WebGL)

前: 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を扱えるようにした (JavaScript & WebGL) http://www.nicozon.net/watch/sm27662763 http://www.nicozon.net/watch/sm27662763 Wed, 25 Nov 2015 02:39:34 +0900 ちゃんと動かないモデルとかもある状態なんで、 過度な期待はせず気長にお待ちください。

ブラウザ上でMMDを扱えるようにした (JavaScript & WebGL)

現状は「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

]]> そばかす式魔理沙にブラウザ上で踊ってもらった (JavaScript & WebGL) http://www.nicozon.net/watch/sm26268613 http://www.nicozon.net/watch/sm26268613 Sat, 16 May 2015 17:26:33 +0900 「和食」の文字を正しく表示させるためだけに、 左右反転していたのを直した。

そばかす式魔理沙にブラウザ上で踊ってもらった (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その10 (JavaScript & WebGL) http://www.nicozon.net/watch/sm26166836 http://www.nicozon.net/watch/sm26166836 Sun, 03 May 2015 11:39:32 +0900 複数モデル対応、影対応、ポストプロセス追加。 実装したい機能は大体追加したから、 次は性能改善とリファクタリング。 当初思っていたよりGPUの負荷がかなり高くなったから、 設計を見直さないと。 シャドウマッピングを実装してみたが、精度が悪くて改善案を検討中。 そろそろ応用も考えたいなーと思っていて、 とりあえずVRに手を出そうかと考えているところ。

ブラウザ上でMMDを踊らせてみる その10 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その9 (JavaScript & WebGL) http://www.nicozon.net/watch/sm26069436 http://www.nicozon.net/watch/sm26069436 Mon, 20 Apr 2015 08:18:05 +0900 もうあまり性能改善する気なくなってきた。 次は影の処理かなー。 あと、踊らせるだけじゃなくて、 何かに応用できないか考えているとこ。 3D CGプログラミングを始めて、 一ヵ月半でここまでできれば上出来じゃないでしょうか。 その半分くらい物理演算対応に費やしてるけど。

ブラウザ上でMMDを踊らせてみる その9 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その8 (JavaScript & WebGL) http://www.nicozon.net/watch/sm26008748 http://www.nicozon.net/watch/sm26008748 Sun, 12 Apr 2015 04:12:49 +0900 次第に重くなっていく…… 次こそ次こそ性能改善かな

ブラウザ上でMMDを踊らせてみる その8 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その7 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25974661 http://www.nicozon.net/watch/sm25974661 Tue, 07 Apr 2015 14:21:33 +0900 当初は音楽の対応はしないつもりだったけれど、 前回の動画作ってるときに気が変わった。 やっぱ音と踊りが合わさると、ぐっと印象が良くなるね。 物理演算が少しおかしいみたいだけれど、 どう対処したものか。 次こそ性能改善かな。

ブラウザ上でMMDを踊らせてみる その7 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その6 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25953917 http://www.nicozon.net/watch/sm25953917 Sat, 04 Apr 2015 22:47:25 +0900 モーションカメラ実装。 Whammy.jsによる動画ファイル生成機能搭載。 Whammy.jsの仕様か、WebGL Canvasの仕様か、 WebMの仕様かわからないが、2分を超えた動画が生成できない。 あと、滅茶苦茶重い。 いずれ自前のものに差し替えたい。 次は性能改善かな。

ブラウザ上でMMDを踊らせてみる その6 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その5 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25936936 http://www.nicozon.net/watch/sm25936936 Thu, 02 Apr 2015 20:55:40 +0900 モーフィング実装。 光源処理実装。 toon shader実装。 モーションスキップ実装。 VTFを用いたGPUスキニング実装。 性能を倍くらいに上げたいけれど、 JavaScriptやWebGLの制約が壁。

ブラウザ上でMMDを踊らせてみる その5 (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

]]> ブラウザ上でMMDを踊らせてみる その4 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25900381 http://www.nicozon.net/watch/sm25900381 Sun, 29 Mar 2015 11:50:34 +0900 物理演算に対応。 色々すごいはまったけれど、おかげで勉強になった。 物理演算が予想より重すぎて、 WebWorkersを用いて別スレッドにやらせても あまり性能が上がらなかった。 物理演算自体を複数スレッドで動かせれば かなりの性能改善ができそうだが…… 性能改善の変わりに フレームスキップのサポートや 物理演算の焼きこみでの対応も考えている。 そろそろ完成度を上げていくフェイズかな。 今はバグやごまかしが多すぎ。 まともに読み込めないモデルもかなり多い。

ブラウザ上でMMDを踊らせてみる その4 (JavaScript & WebGL)

前: 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

]]> ブラウザ上でMMDを踊らせてみる その3 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25738890 http://www.nicozon.net/watch/sm25738890 Sun, 08 Mar 2015 08:03:58 +0900 処理をGPU側に移したり、WebGLのAPI呼び出し方を見直すなど、 全体最適化を施し性能がそこそこ出るようになった。 WebWorkerによる複数スレッド化でCPU側の性能はまだ上げられると思う。 VTFを試し、巨大なテーブルに対するランダムアクセス処理を GPU側で行わせてみたが、やはり性能はあまり出なかった。 貫通とスカートの挙動はIK solverのバグ修正と、 物理演算サポートで改善されるのではと思っている。 次は物理演算サポートを考えているが、 情報があまりなくて困っている。

ブラウザ上でMMDを踊らせてみる その3 (JavaScript & WebGL)

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

4:26｜2015年03月08日 08：03：05 投稿

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

]]> ブラウザ上でMMDを踊らせてみる その2 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25726043 http://www.nicozon.net/watch/sm25726043 Fri, 06 Mar 2015 18:49:35 +0900 IK solverを実装(コピペ)。 たぶんバグが混入したため、時々へんな挙動をする。 CPU側の処理を多少最適化したため、少しは速くなったが、まだまだ。 追記： これ膝逆に曲がっとる

ブラウザ上でMMDを踊らせてみる その2 (JavaScript & WebGL)

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

3:00｜2015年03月06日 18：45：58 投稿

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

]]> ブラウザ上でMMDを踊らせてみる その1 (JavaScript & WebGL) http://www.nicozon.net/watch/sm25695992 http://www.nicozon.net/watch/sm25695992 Fri, 06 Mar 2015 18:48:51 +0900 3D CG プログラミングの練習がてら。 PMDを解析して表示するのはすぐ出来た。 モーション補間はとりあえず線形補間で誤魔化し中。 まだIK solverが未実装なので足が動かない。 処理のほとんどをCPU側で行っているので激重。

ブラウザ上でMMDを踊らせてみる その1 (JavaScript & WebGL)

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

3:06｜2015年03月02日 11：09：03 投稿

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

]]>