【MMD on WebGL】HTML5でMMDを動かす

HTML5(WebGL)+Javascript(MMD on WebGL)を用いてMMDモデルを動かして表示する方法を紹介します。

MMD on WebGL

HTML5(WebGL)を用いてWebブラウザ上で「MMDモデル」を動かせる「MMD on WebGL」というライブラリがあります。
オープンソースで開発されており、WebGLに対応したWebブラウザ(ChromeやfireFox等)でMMDを実行できます。

MMD on WebGLのダウンロード

① 下記リンク先(GitHub)で公開されています。
https://github.com/edvakf/MMD.js
② 画面左にある「Clone or download」→「Download ZIP」を選択し本体を丸ごとダウンロードします。
③ ダウンロードが完了したら、ZIPファイルを解凍して中身のindex.htmlをブラウザに読み込ませると動作して初音ミクが踊りだします。

モデルの変更

① 新しく使いたいMMDモデルのファイル一式(pmdファイル等)をmodelフォルダに入れます。
② main.jsの16行目にある「Miku_Hatsune_Ver2.pmd」の部分を編集します。(ロードしたいMMDモデルのファイル名に変更)

var miku = new MMD.Model(‘model’, ‘Miku_Hatsune_Ver2.pmd’);

モーションの変更

① 新しく使いたいMMDモーションのファイル一式(pmdファイル等)をmodelフォルダに入れます。
② main.jsの26行目にある「kishimen.vmd」の部分を編集します。(使いたいモーションのファイル名に変更)

var dance = new MMD.Motion(‘motion/kishimen.vmd’);

サンプルプログラム

今回は、下記リンク先より「ガンダムMK-Ⅱ」のMMDファイルをお借りしてMMD on WebGLで動かしてみました。

http://seiga.nicovideo.jp/seiga/im1832393
① ダウンロードして解凍したファイル一式をMMD on WebGLのmodelフォルダに突っ込みます。

ソースコード

ガンダムMK-Ⅱを躍らせるサンプルプログラムのソースコードは下記の通りです。

【main.js】

【index.html】

実行結果

Webブラウザ上でガンダムMk2(ティターンズ仕様)を表示してきしめんを躍らせることができました。

シェア&フォローお願いします!