【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(ティターンズ仕様)を表示してきしめんを躍らせることができました。

関連記事