Genshin MMD Viewerの徒然メモ

先ほど公開した「Genshin MMD Viewer」について

https://shinobu21.github.io/Genshin_MMD_Viewer/

 

前々の記事で絵描きさん向けに原神MMDモデルの衣装キャプチャをとっていました。

ディルック衣装資料 - shinobu_21’s blog

ガイア衣装資料 - shinobu_21’s blog

が、私自身が絵描きじゃないのでどういうキャプチャが必要とされているのかがわからなかったので、いっそブラウザでMMDを表示できないんだろうかと思ったことがきっかけで、このページを作ってます。使えればいいとおもったのでデザインは未着手です。

 
調べたらWebGLとかいう技術がでてきて「ほぇ~~~~」となり…最初は3DCGモデルをブラウザ上で表示できるThree.js(JSライブラリ)でなんとかやろうとおもってコード書いていたのですが…かなり時間がかかってしまいました。

(ちなみに方法としては、.pmxを.daeに変換→ColladaLoader.js(dae読み込みのJSライブラリ)で読み込み→Three.jsで描画みたいにしようと思っていたのですが…ColladaLoader.jsで起きる世界でただ一つの謎エラーに悩まされてました。参考にしたサイトはこちらです。https://ics.media/tutorial-three/model_basic/

 

そのうちにGitHubでこちらのソースコードを見つけまして…!そちらを改変させていただいてます。(ライセンスクリア済み)

github.com

ただ、大元のソースコードが10年前なので…(そもそもそんな前からWebGLがあったのもすごいですが)…モデルデータはpmdに変換して読み込んでいます。
pmxエディタでpmd変換するとテクスチャとかがおかしなことなったのでエクスポートしてから一つ一手直ししてます。

(手直し面倒だ!となったのでpmdエディタver0.1.0を導入するも、どうにもver0.1.1じゃないとpmxは読み込めないみたいみたいで…。pmdについてver0.1.1のリンク先が見つかりませんでしたので…結局手作業に回帰しました。pmxの時代にわざわざpmdエディタ使う必要ありませんので公開されてないのかもしれないですね…そもそもわざわざ下位互換する人などもいないでしょうからし…。)
時間があればpmxでも読み込めるようにこのソースコードを改修したいなと思ってはいます。(思っているだけ)

 

サーバーはローカルでApachを使ってテストして、公開にあたってはGitHubを使っています。
何故わざわざローカルかというと、どうにも拡張子「.pmd」のファイルがクロスドメインエラー(CORS)に引っかかったので、一旦デプロイしてます。調べてはいませんが、とりあえず解消されたのでそうしてます。わかる方いたらおしえてください。
(蛇足ですが、Githubの公開機能、addしてcommitしてpushしても404で???となってたのですが、公開までに時間がかかるのを最近知りました。モデルファイルが重いのかプロジェクトが重いのか…30分ほどかかりました…)

 

こういうのド素人+ブラッシュアップとか一切してなくて恥ずかしいのでソースコードとかは見ないでほしいです…。恥ずかしいので、見るなら上述リンクの大元のコードみていただけると助かります。

 

ここまでできたので、時間があればMMDを用いたブラウザゲームも作れそうな気もします。そこまでモデルを使っていいのかは謎ですが…。

それはともかくとして、スマホ版とかキャラクター追加とか…需要があれば順次やっていきたいですね…。何かあればこちらまでどうぞ→twitter:@shinobu_21。

 

(今更ですがGenshin MMD ViewerじゃなくてGenshin MMD Model Viewerのほうがよかったですね…)