WebのMMDViewerで簡単にマテリアル質感調整をできるようにする試み

こんにちは、ssmzと申します。

MMDモデル（pmxファイル）を持っていれば、ブラウザ上でモデルを表示させて鑑賞することができるdoll roomというサイトを作っています。
紹介がてら書いたnoteがあるので興味がありましたら読んでみてください。

前回の記事でRay-MMD風の表現をボタンひとつで簡単に適用できるようにならないか、ということについて触れました。

あれから色々調整して行くうちに、「ユーザーが細かく調整できるようにすれば良くない？」と思うようになりました。

というのもモデルによって質感がまちまちで、設定を決め打ちにしてしまうと薄く見えてしまったり何かと問題がありました。

ユーザーが細かく調整できるように「高度なオプション」という項目を追加しました。

※doll roomではMMDや3Dの知識がなくても直感的にモデルを表示、操作できることを目的にしています。ので、この機能を使わなくても問題ないようにしています。

高度なオプションで出来ること

まず、サンプル動画を用意したのでご覧ください。

[MMD Viewer] doll room 簡単にマテリアル質感調整をできるように

動画の内容がほぼ全てですが、前後のサブライト、マテリアルの質感を調整するスライダーを操作することで、リアルタイムで状況を確認することができます。

モーション中にも調整することができるので、お好みの質感を見つけてください。

ちなみに、このサイトの3D表現にはthree.jsを採用しています。

高度なオプションの詳細について興味のある方は以下の公式ドキュメントをご覧ください。

three.js docs

とりあえず使ってみる

今後も面白そうな機能を思い付いたら実装して行く予定です。

気になる方はトップページからモデルをアップして使ってみてください。