WebのMMDビューアーでRay-MMD風の見栄えを簡単に表現できるようにする試み

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

で、そのモデルの表現方法を少しこだわってみよう、というのが今回の題材です。

モデルの表現ってどういうことか

このサイトは、MMDモデルを扱うのにThree.jsという技術を使っています。（今回は技術的な話はしません）

通常そのまま読み込むとアニメ調の見栄えになります。

これはこれで良いのですが、MMD界隈ではモデルの表現を拡張してくれるRay-MMDなるものがあると知りました。

概念についてはこちらの記事が詳しいです↓

Ray-MMDの使い方　基本編

通常、MMDソフトでRay-MMDの光源やマテリアルを適用して少しずつ調整していくのですが、選択肢がたくさんあるのでそれなりの知識と慣れが必要で、簡単にできる代物ではないと個人的に思いました。

そこで、今回の試みはボタンひとつでRay-MMDを適用したっぽい仕上がりにしようというものになります。

実験とその結果

1. 光沢感を出すマテリアルの作成

Ray-MMDはリアルな質感を出すことができる特徴を持ちます。

まずはマテリアルと光の当て方を工夫して、光沢感のあるフィギュアのような質感を表現できるようにしてみようと思いました。

その結果がこちらです↓（モデルは原神のジンを使用）

・デフォルト正面

・光沢マテリアル正面

・デフォルト横向き

・光沢マテリアル横向き

デフォルトは全体的に暗い印象でしたが、光を取り込み、光沢を出すようなマテリアルに調整した結果フィギュアのような印象に変わりました。

プラスで前後にライトを当てています。

ビューアーのオプションの中に「光沢感」という選択肢を用意したので試してみてください。

2. 自然な感じ（？）を出すマテリアルの作成

Ray-MMDを適用したモデルの動画を見ていると、すごい仕上がりのものが多々出てきますよね？（語彙力がない...）

モデルの周りがキラキラしていて、かといってモデル自体はテカリがあるわけではない、あの質感...

どうにか再現できないものかと試行錯誤を繰り返しています。

一旦現状の状態を載せておこうと思います↓（モデルは原神のジンを使用）

・自然マテリアル正面

・自然マテリアル横向き

・自然マテリアルアップ

ちょっとわかりにくいので、もうひとつ画像をあげておきます↓こっちはSour式リンです。

・デフォルトマテリアル

・自然マテリアル

光を取り込みつつ、テカリを抑えた仕上がりにしてみました。

前からのライトは廃止し、後ろから強い光を当てています。

ビューアーのオプションの中に「自然感」という選択肢を用意したので試してみてください。

とりあえず使ってみる

まだまだ試験的な段階で、今後も調整をかけてより良くして行くつもりです。

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