A-FRAMEでMMDを動かす！！

12741 ワード
Web A-Frame A-MMD HTML5 VR HTML5 テキストリンク

A-FRAMEを使って容易にブラウザで動くVRコンテンツを作れることを知って、もっと（簡単に楽に）ちょっとリッチなものができないかなーと思ってたところでMMDモデルを導入できるJSライブラリを発見しました。

MMDっていうとあれですよ、ニコニコ動画でよく見るMMDですよ。
初音ミクさんとかを3Dモデルにして踊らせられるあのMMDですよ。
MMD杯とか大好きですよ。（特に毎回恒例の弱音ハクのハイキックシリーズとか）

というわけで以下の通り、ぽんこつAIユーチューバーの「キズナアイ」ちゃんをモデルに、ちょっと気軽にサクサク作ってみました。

レシピ

モデル

キズナアイ様 http://kizunaai.com/
キャラクターデザイン：森倉円様
モデリング制作監修：Tda様
モデラー：トミタケ様
(c)Kizuna AI

モーション

１．「八極拳 モーション詰め合わせ」より「八極小架」
作者：hiro様
紹介動画：http://www.nicovideo.jp/watch/sm11200930
配布先：https://bowlroll.net/file/7234

２．「ちょっとした格闘モーション配布１」
作者：Spinach様
紹介動画：http://www.nicovideo.jp/watch/sm26049583
配布先：https://bowlroll.net/file/68234

プログラム参考

A-FRAME(本家サイト)
https://aframe.io/

A-Frame MMD component
https://github.com/takahirox/a-mmd

ソース

テスト１

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aframe test with mmd model (kizuna-ai)-01</title>
    <meta name="description" content="A-Frame MMD pose">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/aframevr/aframe/v0.5.0/dist/aframe-master.min.js"></script>
    <script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.0/build/aframe-outline.min.js"></script>
    <script src="./build/a-mmd.min.js"></script>
  </head>
  <body>
    <!--<a-scene antialias="true">-->
    <a-scene antialias="true">
        <!-- カメラ位置指定 -->
        <a-camera position="0 8 24" fov="60">
            <a-cursor color="#AAA">
        </a-camera>
        <a-entity mmd=""><!-- 今回は音楽使用しないのでmmd属性の値はなし -->
            <!-- モデルとモーション指定、物理演算無し、まばたきアリ、Y軸で姿勢90度回転 -->
            <a-entity rotation="0 90 0" position="-10 0 0" scale="0.5 0.5 0.5"
                mmd-model="model:./model/kizunaai/kizunaai.pmx;vmd:./motion/hakkyokushouka.vmd; physics:false; blink:true;"></a-entity>
        </a-entity>
        <!-- 空は黒く -->
        <a-sky color="#040404" segments-width="16" segments-height="4"></a-sky>
        <!-- 証明は環境光＆点光源で -->
        <a-light type="ambient" color="#888"></a-light>
        <a-light type="point" distance="100" intensity="0.4" color="#DDD" position="0 0 0"></a-light>
    </a-scene>
  </body>
</html>

テスト２

index2.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aframe test with mmd model (kizuna-ai)-02</title>
    <meta name="description" content="A-Frame MMD pose">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/aframevr/aframe/v0.5.0/dist/aframe-master.min.js"></script>
    <script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
    <script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.0/build/aframe-outline.min.js"></script>
    <script src="./build/a-mmd.min.js"></script>
  </head>
  <body>
    <!--<a-scene antialias="true">-->
    <a-scene antialias="true">
        <!-- カメラ位置指定 -->
        <a-camera position="0 8 24" fov="60">
            <a-cursor color="#AAA">
        </a-camera>
        <a-entity mmd=""><!-- 今回は音楽使用しないのでmmd属性の値はなし -->
            <!-- モデルとモーション指定、物理演算無し、まばたきアリ、Y軸で姿勢90度回転 -->
            <a-entity rotation="0 90 0" position="-4 0 0" scale="0.5 0.5 0.5"
                mmd-model="model:./model/kizunaai/kizunaai.pmx;vmd:./motion/xs-samplefight8(east).vmd; physics:false; blink:true;"></a-entity>
            <a-entity rotation="0 90 0" position="4 0 0" scale="0.5 0.5 0.5"
                mmd-model="model:./model/kizunaai/kizunaai.pmx;vmd:./motion/xs-samplefight8(west).vmd; physics:false; blink:true;"></a-entity>
        </a-entity>
        <!-- 空は黒く -->
        <a-sky color="#040404" segments-width="16" segments-height="4"></a-sky>
        <!-- 証明は環境光＆点光源で -->
        <a-light type="ambient" color="#888"></a-light>
        <a-light type="point" distance="100" intensity="0.4" color="#DDD" position="0 0 0"></a-light>
    </a-scene>
  </body>
</html>

できあがり

Windows10、GoogleChrome、ローカルホストで動作検証しました。

index.html

index02.html

※WEB-VRの欠点として他のWEBアプリケーションと同じく、アップロードしたものは基本的に直接URLからアクセスできるという点がありまして。
それはMMDモデル・モーションも二次配布となってしまい作者様のご迷惑になってしまうため、今回はローカルホストでの実行で、そのとき撮影した動画だけの公開とさせていただきました。（できればスマホ＆ハコスコでできるようにしたかったんですけどこれは仕方ない）

所感

勝手な憶測ですが、ブラウザ上で動作して開発の敷居が低いVR空間にMMDモデルを組み込めるということは、誰もがVRを作って楽しめるという流れを作るものになるかもしれません。
ただしMMDモデル＆モーションをインターネット上に置かざるを得ず、二次配布になってしまうのはやはりいただけないですね。
今のところは各々の端末でローカルホスト上に構築してコソコソ楽しむくらいでしょうか。
いずれ解決策が見つかればいいなと思います。