ブログ

You are currently viewing MMDが動いて踊るデスクトップを作ってみた[playcanvas]

MMDが動いて踊るデスクトップを作ってみた[playcanvas]

作った経緯

今回はSteamでWallpaper Engineというソフトを見ていていいなーと思ってこんな感じのソフトというかデスクトップを普通のものじゃないやつを作ってみたいなと思いました。その後、MMDが踊るデスクトップとか面白そう(パソコン起動してMMDのモデルがいたらうれしくないですか?)だということでいざ作ろうとしましたがWindowsのシステム側をいじってMMDをデスクトップ背景に…なんてこと自分にはそんな技術がないので何かほかの方法を取る必要がありました。

でもデスクトップというラインは崩したくなく、悩んだ挙句ブラウザをデスクトップとして扱えば行けるんじゃないかとなりました。
しかしながら自分はHTMLやjavascriptの経験がほとんどないのでなるべく楽して制作したいので様々な候補からplaycanvasというエンジンを選択しました。

ひとまずひと段落ついたので公開させていただこうかと思います。
まだご覧になってない方は以下のURLから見てみてください。
データのダウンロード容量がかなりの量ありますので注意してください。

https://yukineko-web.com/MMDdesktop/

playcanvasについて

playcanvasとは、デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

https://playcanvas.jp/

公式サイトはこちら：https://playcanvas.jp/

playcanvasの導入部分、使い方については今回は省かせていただきます。

サイトのスクリーンショット

MMDdesktopスクリーンショット1
MMDdesktopスクリーンショット2
MMDdesktopスクリーンショット3

webデザインが絶望的ですが素晴らしいイラストのおかげできれいに見れて(?)ます。

MMDモデルの使用

playcanvasエディタ

playcanvasエディタはこんな感じです。
全部紹介していると長くなってしまうのでかいつまんで紹介します。
外部ライブラリはVue.jsとtween.jsを使っています。

ステージ

こちらの記事の通りにMMD用モデルをFBXファイルに変換します

https://qiita.com/yukienko/items/4972912e8579db543700

FBXモデルに変換後、playcanvasにインポートでマテリアルが自動的に生成されるのでこれをサイトのように色を変化させるようにjavascriptでコードを書いていきます。

var StageColorManager = pc.createScript('stageColorManager');

StageColorManager.prototype.initialize = function() {
    let stageColorChangeTime = 15;
    
    this.material = this.entity.model.model.meshInstances[0];
    console.log(this.material.material.emissive);
    var stageColorChange = this.entity.tween(this.material.material.emissive).to({r:1, g:1, b:0},stageColorChangeTime,pc.Linear)
    .on("update",()=>{
        this.material.material.update();
    })
    .on("complete",()=>{
        this.entity.tween(this.material.material.emissive).to({r:0, g:1, b:0},stageColorChangeTime,pc.Linear).start()
        .on("update",()=>{
            this.material.material.update();
        })
        .on("complete",()=>{
            this.entity.tween(this.material.material.emissive).to({r:0, g:1, b:1},stageColorChangeTime,pc.Linear).start()
            .on("update",()=>{
                this.material.material.update();
            })
            .on("complete",()=>{
                this.entity.tween(this.material.material.emissive).to({r:0, g:0, b:1},stageColorChangeTime,pc.Linear).start()
                .on("update",()=>{
                    this.material.material.update();
                })
                .on("complete",()=>{
                    this.entity.tween(this.material.material.emissive).to({r:1, g:0, b:1},stageColorChangeTime,pc.Linear).start()
                    .on("update",()=>{
                        this.material.material.update();
                    })
                    .on("complete",()=>{
                        this.entity.tween(this.material.material.emissive).to({r:1, g:0, b:0},stageColorChangeTime,pc.Linear).start()
                        .on("update",()=>{
                            this.material.material.update();
                        })
                        .on("complete",()=>{
                            stageColorChange.start();
                        });
                    });
                });
            });
        });
    });
    stageColorChange.start();
};

tweenで色を一定の周期で遷移させています。
今書くなら色のデータを配列で設定するとか?だったり改善するところがたくさんありますね。すみません。（javascript初心者なので許して）

ステージentity設定

エディタ上では以上のようにスクリプトをステージにくっつけてやります。

MMDモデルとダンス

ステージと同じようにMMDモデルをモーション付きでFBXファイルに変換します。
playcanvasにインポートしました。

鏡音リンエディタ情報

モデルにアタッチされているdanceManager.jsでアニメーションを管理しています。

MMDdesktopダンスリスト

サイト右上にそのモデルが踊れる曲名があります。これをクリックでVue.jsの@clickでクリックアクションを受け取り、モデルにアタッチしているdanceManager.jsに選択したアニメーションを再生、同時に曲を再生する流れになっています。この辺りは公式のチュートリアルでも似たようなものをやっていたと思うので省略しておきます。
melancholicボタンをクリックでこんな感じで踊りだします。

モデルダンスアニメーション

モデルの切り替え

MMDdesktopスクリーンショット2

メニューウィンドウのモデル変更から以上の画面を開くことができます。
現在は3種類のモデルが選択できます。選択したモデルは次このサイトを開いたときも同じモデルがはじめに読み込まれます。
ここの仕組みはLocalStorageを使用しました。サイトを読み込む際、LocalStorageにあるモデル名を参照してそのモデルを読み込みます。モデルの切り替えの際はLocalStorageのモデル名を選択したモデル名に変更してリロードをかけるようにしました。

ブラウザからPC内のアプリを起動する

このサイトはあくまでデスクトップとして機能させるためにはこのサイトからアプリを起動する必要があります。
そこで今回はURLスキームを使用して無理矢理.exeなどを起動するという手段を取りました。
ブラウザでMMDを眺めるだけならなんら問題はないと思いますが、ここまでしようと思ったら自己責任でお願いします。

アプリを追加してみる

実際にやってみようと思います。

正直あまり褒められる方法ではないかと思います。ただ自分はこれしか思いつかなかったので見逃してください。

まず最初に登録したいアプリケーション、もしくは開きたいファイルを決めます。今回はこのMikuMikuDance.exeを追加してみようと思います。

MMDプロパティ

次にこのMikuMikuDance.exeをURLスキームとして登録します。windowsキー+Rから”regedit”でレジストリエディタを開きます。次に
コンピューター\HKEY_CLASSES_ROOT\に以下のようにキーを追加します。

レジストリエディタ画像1
レジストリエディタ画像2

MMDのキーは以上の画像のように、commandのキーでは名前は(規定)のまま、データの欄に上のMMDのプロパティのリンク先を張り付けます。

他の大事なとこ削除したらパソコン動かなくなったりなので、やり方わからないならやめた方が良いと思います。

とまあ、これで登録ができたはずです。
適当にブラウザを開いて”MMD:”とurl欄に入力してみます。

urlにMMD:と入力
MMD開きますか？
MMD

できました。これで無事ブラウザから指定したファイルを開くことができました。

では最後にこれをサイトの方に登録していきます。

https://yukineko-web.com/MMDdesktop/を開いてHOME->アプリ追加で以下の画面を表示させます。

MMDdesktopスクリーンショット3

ここのアプリの名前の欄にURLスキーム名を入力(今回なら”MMD”)し、指定したいアイコンの画像のURLを適当にインターネットの中から探してきます。

アプリ登録

こんな感じで追加したら下のボタンの追加を押してください。作りが甘いのでこれで追加は終わりません。最後にリロードをしてください。

アイコン追加

左下にこの僕のブログサイトのアイコン(アプリのアイコン画像URL)が表示されるようになりました！
これがボタンになっていて押すと以下のように新しいタブでurlを”MMD:”で開くような動作が行われ、ひらきますか？となります。

MMD開きますか？

ちなみにHOMEには名前付きで表示されます。

MMDdesktopHome

アプリ追加時の注意

先ほども記述しましたがアプリ追加はあくまで自己責任でお願いします。
万が一https://yukineko-web.com/MMDdesktop/によってデータの消失等があった際にも私は責任を負いかねます。

PC起動時にデスクトップとしてサイトを立ち上げる

デスクトップですからPCを起動させたら一番初めに最大化されて表示されてほしいものです。
自分はChromeしか使ってないのでChromeだけの説明になります。

ショートカット追加

https://yukineko-web.com/MMDdesktop/を開いたウィンドウの右上の3点リーダーみたいなやつをクリックでショートカットを作成を押します。
するとデスクトップにこんな感じでアイコンが追加されると思います。

アイコン

これがPC起動したときに最大化して起動するように、スタートアップに入れましょう。

スタートアップアプリ

追加したら次にこのショートカットを最大化しながら開くように、以下のようにプロパティのリンク先に”–start-fullscreen”と追加します。

MMDdesktopプロパティ

これでPCを起動したときに同時にサイトが表示されるようになったはずです。

最後に

今回のMMDが動くデスクトップplaycanvasというツールを使用しましたが、作り終えてから知ったのですが、three.jsでMMDが扱えるそうですね。
明らかそちらの方が拡張性だったりがあり、もっと調べておけばよかったと正直結構後悔してます。
なのでこれからは時間のある時にthree.jsを使用したMMDdesktopに改良していきたいと思います。

タグ: , , , ,

コメントを残す